dvcp_v2_webapp/ui/packages/common/AiSign/changePwd.vue

<template>
  <el-form class="changePwd" ref="form" :model="signUpForm" :rules="rules">
    <div class="backLogin" type="text" @click="$emit('toLogin')"><i class="el-icon-caret-left"/> 重置密码</div>
    <el-form-item prop="account" style="white-space: nowrap">
      <el-input placeholder="请输入您的手机号" v-model="signUpForm.account" clearable>
        <i slot="prefix" class="iconfont iconPhone"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="verifictCode">
      <el-input class="code" placeholder="请输入短信验证码" maxlength="6" v-model="signUpForm.verifictCode" clearable>
        <el-button slot="suffix" style="padding-right: 14px" type="text" @click="getVerifictCode"
                   :disabled="verify.disable">{{ verify.btnLabel }}
        </el-button>
        <i slot="prefix" class="iconfont iconMessage"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input class="form-item-width" type="password" show-password placeholder="密码（8-16个字符，区分大小写）"
                v-model="signUpForm.password" clearable>
        <i slot="prefix" class="iconfont iconPassword"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input class="form-item-width" type="password" show-password placeholder="再次输入密码"
                v-model="signUpForm.confirmPassword" clearable>
        <i slot="prefix" class="iconfont iconPassword"></i>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="form-item-width" type="primary" @click.native="submitChangePwd">重置密码</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "changePwd",
  inject: ["actions"],
  props: {
    instance: Function
  },
  computed: {
    rules() {
      const _ = this
      return {
        account: [
          {required: true, message: "请输入您的手机号", trigger: 'blur'},
          {pattern: /^1[345789]\d{9}$/, message: "手机号格式有误", trigger: 'blur'},
        ],
        verifictCode: [{
          trigger: 'blur', validator(r, v, cb) {
            if (/^\d{6}$/.test(v)) {
              cb()
            } else {
              cb(new Error("请输入6位验证码"))
            }
          }
        }],
        password: [
          {required: true, message: "请输入新密码", trigger: 'blur'},
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*,.?_-])[\da-zA-Z~!@#$%^&*,.?_-]{8,16}$/,
            message: "数字和字母及特殊字符(~!@#$%^&*,.?_-)组合,长度8到16位"
          }
        ],
        confirmPassword: [
          {required: true, message: "请再次输入新密码", trigger: 'blur'},
          {
            trigger: 'blur', validator(r, v, cb) {
              if (v == _.signUpForm.password) {
                cb()
              } else {
                cb(new Error("两次填写的密码不一致"))
              }
            }
          }
        ],
      }
    }
  },
  data() {
    return {
      signUpForm: {
        account: "",
        password: "",
        confirmPassword: "",
        verifictCode: "",
      },
      verify: {
        disable: false,
        timer: 0,
        btnLabel: "获取验证码",
      },
    }
  },
  methods: {
    getVerifictCode() {
      this.$refs.form.validateField("account", v => {
        if (!v) {
          this.verify.disable = true
          this.verify.timer = 60
          this.verify.btnLabel = this.verify.timer + "秒"
          const timer = setInterval(() => {
            if (this.verify.timer === 0) {
              this.verify.btnLabel = "获取验证码"
              this.verify.disable = false
              clearInterval(timer)
            } else {
              this.verify.timer--
              this.verify.btnLabel = this.verify.timer + "秒"
            }
          }, 1000)
          this.instance.post(this.actions.verification, null, {
            auth: {},
            params: {
              phone: this.signUpForm.account
            }
          }).then(() => this.$message.success("短信发送成功!"))
        }
      })

    },
    submitChangePwd() {
      this.$refs.form.validate(v => {
        if (v) {
          this.$emit("signUp", this.signUpForm)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.changePwd {
  // margin: 0 20px;

  :deep( .code ){
    .el-button {
      width: auto !important;
    }
  }

  :deep(.backLogin ){
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    height: 40px;
    color: $primaryColor;
    cursor: pointer;
    width: 100px;
    margin-bottom: 46px;

    &:hover {
      opacity: 0.8;
    }

    .el-icon-caret-left {
      padding: 0;
      font-size: 22px;
    }
  }

  .el-button {
    width: 100%;
  }

  :deep(.el-form-item ){
    margin-bottom: 24px;

    i {
      padding-left: 7px;
      padding-right: 7px;
    }
  }

  .form-item-width {
    font-size: 16px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0;
  }
}
</style>