nsgk_mobile/src/views/yinnong/password.vue

<template>
<div>
  <van-nav-bar
    title="密码修改"
    left-arrow
    @click-left="$router.back(-1)"
  />
  <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
    <van-field type="password" v-model="user.oldPassword" placeholder="" @input="clearError" >
      <template #left-icon>
        <van-image
          height="20"
          width="16"
          src="../../../static/images/onlineHome/lock.png"></van-image>
      </template>
      <template #label>
        <H4 style="margin-left: 5px">原密码</H4>
      </template>
    </van-field>
    <van-field type="password" :error-message="validate.newPassword" v-model="user.newPassword"  placeholder="" @input="clearError" @blur="validate_newPassword">
      <template #left-icon>
        <van-image
          height="20"
          width="16"
          src="../../../static/images/onlineHome/lock.png"></van-image>
      </template>
      <template #label>
        <H4 style="margin-left: 5px">新密码</H4>
      </template>
    </van-field>
    <van-field type="password" v-model="user.confirmPassword"  placeholder="" @input="clearError">
      <template #left-icon>
        <van-image
          height="20"
          width="16"
          src="../../../static/images/onlineHome/lock.png"></van-image>
      </template>
      <template #label>
        <H4 style="margin-left: 5px">确认密码</H4>
      </template>
    </van-field>
  </van-cell-group>
  <van-row style="text-align: center;margin-top: 40px">
    <van-button color="#1D6FE9" style="border-radius: 6px;width: 90%;margin: 0 auto" @click="submit">完成</van-button>
  </van-row>
</div>
</template>

<script>
    import onlineHomeIndex from "../onlineHomeIndex";
    import {updateUserPwd} from "../../api/onlineHome/my";
    import {REGEXP} from "@/utils/global";
    import {Notify} from "vant";

    export default {
      components: {
        onlineHomeIndex
      },
        name: "password",
      data() {
        return {
          user: {
            oldPassword: undefined,
            newPassword: undefined,
            confirmPassword: undefined
          },
          validate: {
            newPassword: '',
          },
        };
      },
      methods: {
        submit() {
          if(!this.validate_newPassword())
            return;
          console.log(this.user)
          if(this.user.confirmPassword
            !=this.user.newPassword){
            this.$toast({
              icon: 'error', // 找到自己需要的图标
              message: '两次密码不同，请重新输入',
              duration:"1000",
              onClose:() => {
                if(0)
                {
                  this.user.oldPassword=""
                  this.user.newPassword=""
                  this.user.confirmPassword=""
                }
                return false;
              }
            })
          }else{
            if(!this.validatePassword(this.user.newPassword))
              return;
            updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '修改成功',
                  duration:"1000",
                  onClose:function(){
                    _this.$router.back(-1);
                  }
                })
              }
            );
          }
        },
        validatePassword(what) {
          if(!(REGEXP.PASSWORD.test(what)))
          {
            Notify.clear();
            Notify({ type: 'danger', message: '密码至少8个字符，必须包括字母、数字、特殊符号!' });
            return false;
          }
          return true;
        },
        validate_newPassword() {
          let password = this.user.newPassword;
          if(!password)
          {
            this.validate.newPassword = '';
            return false;
          }
          if(password.length < 8)
          {
            this.validate.newPassword = '密码长度至少8位';
            return false;
          }
          if(password.length > 20)
          {
            this.validate.newPassword = '密码长度不能超过20位';
            return false;
          }
          if(!(REGEXP.PASSWORD.test(password)))
          {
            this.validate.newPassword = '密码必须包括字母、数字、特殊符号!';
            return false;
          }
          this.validate.newPassword = '';
          return true;
        },
        clearError() {
          this.validate.newPassword = '';
        },
      }
    }
</script>

<style scoped>

</style>