forget.vue

<template>
  <div class="forget">
    <h2 class="title">商保管理系统</h2>
    <div class="content">
      <p class="module-title">
        <router-link to="/login" replace>密码登录</router-link>
        <span class="_forget">忘记密码</span>
      </p>
      <div class="steps">
        <div :class="{ 'step-item': true, 'step-active': activeStep === '1' }">
          <div class="_flex">
            <p class="circle">1</p>
            <p class="line"></p>
          </div>
          <p>验证邮箱</p>
        </div>
        <div :class="{ 'step-item': true, 'step-active': activeStep === '2' }">
          <div class="_flex">
            <p class="line"></p>
            <p class="circle">2</p>
          </div>
          <p>填写新密码</p>
        </div>
      </div>
      <a-form-model ref="form" :model="form" :rules="formRules">
        <div v-if="activeStep === '1'">
          <a-form-model-item prop="userName">
            <a-input
              v-model="form.userName"
              placeholder="请输入用户名"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item prop="verificationCode">
            <a-input v-model="form.verificationCode" placeholder="请输入验证码">
              <a-button type="primary" slot="addonAfter" size="small" @click="getVerifyCode"
                >发送验证码至邮箱</a-button
              >
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" block @click="handlerNext"
              >下一步</a-button
            >
          </a-form-model-item>
        </div>
        <div v-if="activeStep === '2'">
          <a-form-model-item prop="passWord">
            <a-input
              type="password"
              v-model="form.passWord"
              placeholder="请输入新密码"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item prop="newPwd">
            <a-input
              type="password"
              v-model="form.newPwd"
              placeholder="再次输入新密码"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" block @click="handlerReset"
              >确定重置密码</a-button
            >
          </a-form-model-item>
        </div>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import encrypt from '@/utils/crypt'
export default {
  data() {
    return {
      activeStep: "1",
      form: {},
      formRules: {
        userName: [{ required: true, message: "请输入用户名" }],
        passWord: [{ required: true, message: "请输入密码" }],
        newPwd: [
          { required: true, message: "请再次输入新密码" },
          { validator: this.isSamePwd },
        ],
        verificationCode: [{ required: true, message: "请输入验证码" }],
      },
      verifyImg: "",
    };
  },
  mounted() {
    // this._getVerifyImg();
  },
  methods: {
    isSamePwd(rule, value, callback) {
      if (value && this.form.passWord) {
        if (value !== this.form.passWord) {
          return callback(new Error("两次密码输入不一致"));
        }
      }
      callback();
    },
    getVerifyCode() {
      this.$refs.form.validateField(["userName"], (valid) => {
        if (valid) {
          return false;
        }
        const data = {
          userName: this.form.userName,
        };
        this._getVerifyEmail(data);
      });
    },
    handlerNext() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.activeStep = "2";
        }
      });
    },
    handlerReset() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        const { userName, verificationCode, newPwd } = this.form;
        this._reset({ userName, verificationCode, newPwd:encrypt(newPwd) });
      });
    },
    //校验用户邮箱
    checkUserEmail(data){
      return new Promise((resolve,reject)=>{
        this.$apis.checkUserEmail({
          userName: data.userName
        })
        .then((res)=>{
          if (res.returnCode === "0000") {
            resolve(res.content);
          }else{
            this.$message.error(res.returnMsg);
            reject();
          }
        })
      });
    },
    async _getVerifyEmail(data) {
      let email = await this.checkUserEmail(data);
      if(email){
        this.$modal.confirm({
          title: "发送到邮箱",
          content: `确认发送至邮箱${email}？`,
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            this.$apis.getVerifyEmail(data).then((res) => {
              if (res.returnCode === "0000") {
                this.$message.success(res.returnMsg || "发送成功");
              } else {
                this.$message.error(res.returnMsg || "发送失败");
              }
            });
          },
          onCancel: () => {},
        });
      } 
    },
    _reset(data) {
      this.$apis.resetPassword(data).then((res) => {
        if (res.returnCode === "0000") {
          this.$message.success(res.returnMsg || "修改成功");
          this.$router.replace("/login");
        } else {
          this.$message.error(res.returnMsg || "修改失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.forget {
  .title {
    position: absolute;
    top: 0;
    left: 50%;
    .fs(16);
    .lh(22);
    color: #fff;
    .pa(20, 17, 20, 17);
    transform: translate(-50%, -50%);
    background-color: #2b63ff;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      .h(62);
      .bd-t(solid, 31, transparent);
      .bd-b(solid, 31, transparent);
    }
    &::before {
      .l(-18.8);
      .bd-r(solid, 20, #2b63ff);
    }
    &::after {
      .r(-18.8);
      .bd-l(solid, 20, #2b63ff);
    }
  }
  .steps {
    .pa(0, 32, 32, 32);
    display: flex;
    .step-item {
      .fs(12);
      width: 50%;
      opacity: 0.4;
      &:first-child {
        ._flex {
          .mg-l(20);
        }
      }
      &:last-child {
        text-align: right;
        ._flex {
          .mg-r(20);
        }
      }
    }
    ._flex {
      display: flex;
      align-items: center;
      .circle {
        .w(27);
        .h(27);
        .fs(12);
        .lh(27);
        .mg-b(4);
        text-align: center;
        color: #fff;
        background-color: #373842;
        border-radius: 50%;
      }
      .line {
        flex: 1;
        .h(3);
        background-color: #373842;
      }
    }
    .step-active {
      opacity: 1;
    }
  }
  .module-title {
    .fs(14);
    .lh(20);
    .mg-b(30);
    a {
      color: #373842;
      opacity: 0.4;
    }
    ._forget {
      float: right;
      font-weight: bold;
      .fs(16);
      .lh(22);
      color: #373842;
    }
  }
  .ant-button {
    .mg-t(13);
  }
}
</style>