qa-prevention-xgf-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~32位，须包含数字、字母、符号至少2种或以上元素"></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: '',
      },
      rules: {
        oldPwd: [{
          required: true,
          message: '请输入旧密码',
          trigger: 'blur'
        },
          {
            min: 8,
            message: '长度最少8个字符',
            trigger: 'blur'
          },
        ],
        nowPwd: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        },
          {
            pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,32}$/,
            message: '密码格式不正确',
            trigger: ['blur']
          },
        ],
        confirmPwd: [{
          required: true,
          message: '请再次输入新密码',
          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,
          NEWPASSWORD: 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((error) => {
        this.$refs.uToast.error('请填写完整')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.change-password {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}
</style>