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

<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>