qa-regulatory-gwj-app/pages/mine/change-password/change-password.vue

124 lines
3.3 KiB
Vue
Raw Normal View History

2023-11-07 10:08:37 +08:00
<template>
<view class="content1">
<view class="change-password">
<u--form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="100%"
:labelStyle="{color:'#333', fontSize:'34upx', fontWeight:'bold'}">
<u-form-item label="原密码" prop="oldPwd" borderBottom>
<u--input v-model="form.oldPwd" type="password" border="none"></u--input>
</u-form-item>
<u-form-item label="新密码" prop="nowPwd" borderBottom>
<u--input v-model="form.nowPwd" type="password" border="none"></u--input>
</u-form-item>
<u-form-item label="确认新密码" prop="confirmPwd" borderBottom>
<u--input v-model="form.confirmPwd" type="password" border="none"></u--input>
</u-form-item>
<u--text type="error" text="*密码规则密码长度为8-16位必须由大写字母小写字母数字特殊符号(!#@*&.)组成"></u--text>
<u-form-item>
<u-button type="primary" shape="circle" text="确定" @click="$u.debounce(submitPassword, 1000, true)">
</u-button>
</u-form-item>
</u--form>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import {setUpdatePassword} from "../../../api";
export default {
data() {
return {
form: {
oldPwd: '',
nowPwd: '',
confirmPwd: '',
},
testPassword: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*.{8,16}$/,
rules: {
oldPwd: [{
required: true,
message: '请输入旧密码',
trigger: 'blur'
},
{
min: 8,
message: '长度最少8个字符',
trigger: 'blur'
},
],
nowPwd: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
},
{
min: 8,
max: 16,
message: '长度最少8个字符最多16个字符',
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
return this.testPassword.test(value)
},
message: '新密码格式不对,请重新输入',
trigger: 'blur',
}
],
confirmPwd: [{
required: true,
message: '请再次输入新密码',
trigger: 'blur'
},
{
min: 8,
max: 16,
message: '长度最少8个字符最多16个字符',
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
return value === this.form.nowPwd
},
message: '两次输入密码不一致',
trigger: 'blur',
}
],
},
}
},
methods: {
submitPassword() {
this.$refs.form.validate().then(async () => {
await setUpdatePassword({
PASSWORD: this.form.oldPwd,
NOWPASSWORD: this.form.nowPwd,
USER_ID: this.$store.getters.getUserInfo.USER_ID,
USERNAME: this.$store.getters.getUserInfo.USERNAME
})
this.$refs.uToast.show({
message: '修改成功',
type: 'success',
complete: () => {
uni.reLaunch({
url: '/pages/login/login'
})
}
})
}).catch(() => {
this.$refs.uToast.error('请填写完整')
})
}
}
}
</script>
<style lang="scss" scoped>
.change-password {
background-color: #fff;
border-radius: 20upx;
padding: 40upx;
}
</style>