<template class="cont">
|
<view class="pwd-retrieve-container">
|
<image class="bg-image" src="/static/images/tabbar/loginbg.png" mode="scaleToFill"></image>
|
<view class="top">
|
<view class="top_all">
|
修改密码
|
</view>
|
<view class="top_bottom">
|
密码仅可由数字、英文字母或英文符号组成，长度不少
|
于6个字符。
|
</view>
|
</view>
|
<view class="bot">
|
<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment" label-width="200px">
|
<uni-forms-item label="请输入密码" required >
|
<uni-easyinput v-model="user.oldPassword" placeholder="请输入密码" :type="showPassword ? 'text' : 'password'"/>
|
</uni-forms-item>
|
<uni-forms-item label="请再次输入密码" required>
|
<uni-easyinput v-model="user.newPassword" placeholder="请再次输入密码" :type="showPassword ? 'text' : 'password'"/>
|
</uni-forms-item>
|
<button class="primary" @click="submit">确定</button>
|
</uni-forms>
|
</view>
|
|
<!-- <uni-forms ref="form" :value="user" labelWidth="80px" :rules="rules">
|
<uni-forms-item name="oldPassword" label="请输入密码">
|
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
|
</uni-forms-item>
|
<uni-forms-item name="newPassword" label="请再次输入密码">
|
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
|
</uni-forms-item>
|
<uni-forms-item name="confirmPassword" label="确认密码">
|
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
|
</uni-forms-item>
|
<button class="primary" @click="submit">确定</button>
|
</uni-forms> -->
|
</view>
|
</template>
|
|
<script>
|
import { updateUserPwd } from "@/api/system/user"
|
|
export default {
|
data() {
|
return {
|
user: {
|
oldPassword: undefined,
|
newPassword: undefined,
|
confirmPassword: undefined
|
},
|
current:1,
|
rules: {
|
oldPassword: {
|
rules: [{
|
required: true,
|
errorMessage: '旧密码不能为空'
|
}]
|
},
|
newPassword: {
|
rules: [{
|
required: true,
|
errorMessage: '新密码不能为空',
|
},
|
{
|
minLength: 6,
|
maxLength: 20,
|
errorMessage: '长度在 6 到 20 个字符'
|
}
|
]
|
},
|
confirmPassword: {
|
rules: [{
|
required: true,
|
errorMessage: '确认密码不能为空'
|
}, {
|
validateFunction: (rule, value, data) => data.newPassword === value,
|
errorMessage: '两次输入的密码不一致'
|
}
|
]
|
}
|
}
|
}
|
},
|
computed: {
|
// 处理表单排列切换
|
alignment() {
|
if (this.current === 0) return 'left'
|
if (this.current === 1) return 'top'
|
return 'left'
|
}
|
},
|
onReady() {
|
// this.$refs.form.setRules(this.rules)
|
},
|
methods: {
|
submit() {
|
this.$refs.form.validate().then(res => {
|
console.log(res);
|
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
|
this.$modal.msgSuccess("修改成功")
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.bg-image {
|
position: absolute;
|
top: 0px;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
z-index: -1;
|
left: 50%;
|
transform: translateX(-50%);
|
object-fit: cover;
|
}
|
.bot{
|
margin-top: 60px;
|
}
|
.primary{
|
margin-top: 350rpx;
|
background-color: #419FFD;
|
color: #ffffff;
|
}
|
.pwd-retrieve-container{
|
padding:0 40px;
|
|
// background-image: url("/static/images/tabbar/bgone.png");
|
}
|
|
.top_all{
|
width: 144rpx;
|
height: 36rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 36rpx;
|
color: #333333;
|
line-height: 50rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin-top:30rpx;
|
}
|
.top_bottom{
|
width: 629rpx;
|
height: 74rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #373E58;
|
line-height: 48rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin-top:30rpx;
|
}
|
</style>
|
