<template> <view class="content1"> <view class="change-password"> <u--form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="100%" :labelStyle="{color:'#333', fontSize:'34rpx', 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: 20rpx; padding: 40rpx; } </style>