bigDataStudent/src/views/login/components/ForgetPassWord.vue

<template>
  <div>
    <!-- <GoBack>忘记密码</GoBack> -->
    <div class="forget_password_page">
      <!-- <div class="step_box">
        <div v-for="step in steps" :key="step.number" class="step_item"
          :class="{ 'process': step.number == currentStep, 'finish': step.number < currentStep }"
        >
          <div class="step_header">
            <div class="step_number">
              <i class="iconfont icon_xiala" v-if="step.number < currentStep" />
              <span v-else>{{ step.number }}</span>
            </div>
            <div class="step_line"></div>
          </div>
          <div class="step_label">{{ step.label }}</div>
        </div>
      </div> -->
      <div v-show="currentStep == 1" class="login_info_input">
        <el-form :model="validForm" :rules="validFormrules" ref="validFormRef">
          <el-form-item prop="cellPhoneNumber">
            <el-input v-model="validForm.cellPhoneNumber" placeholder="请输入手机号码" clearable prefix-icon="iconfont icon_shoujihao" />
          </el-form-item>
          <el-form-item prop="validateCode">
            <el-input v-model="validForm.validateCode" placeholder="请输入验证码" prefix-icon="iconfont icon_yanzhengma">
              <template slot="suffix">
                <span class="get_code" @click="GetCode">{{ codeText }}</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="currentStep == 2" class="login_info_input">
        <el-form :model="setPassWordForm" :rules="setPassWordFormrules" ref="setPassWordFormRef">
          <el-form-item prop="newPassWord">
            <el-input v-model="setPassWordForm.newPassWord" type="password" placeholder="请输入新密码" clearable show-password prefix-icon="iconfont icon_mima" />
          </el-form-item>
          <el-form-item prop="validateNewPassWord">
            <el-input v-model="setPassWordForm.validateNewPassWord" type="password" placeholder="再次输入新密码" show-password clearable prefix-icon="iconfont icon_mima" />
          </el-form-item>
        </el-form>
      </div>
      <div class="login_info_button">
        <el-button :loading="loading" @click="NextStep()">{{currentStep == 2 ? '确认' : '下一步'}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import GoBack from "./GoBack";
export default {
  // components: { GoBack },
  data() {
    return {
      steps: [
        { number: 1, label: '验证信息' },
        { number: 2, label: '设置密码' },
        { number: 3, label: '修改完成' }
      ],
      currentStep: 1, // 1-验证短信， 2-重置密码
      validForm: {
        cellPhoneNumber: '',
        validateCode: ''
      },
      validFormrules: {
        cellPhoneNumber: [
          {required: true, message: '请输入手机号码', trigger: ['blur', 'change']}
        ],
        validateCode: [
          {required: true, message: '请输入验证码', trigger: ['blur', 'change']}
        ]
      },
      codeText: '获取验证码',
      count: 60, // 倒数秒数
      isCount: false, // 是否倒计时
      loading: false,
      setPassWordForm: {
        newPassWord: '',
        validateNewPassWord: '',
      },
      setPassWordFormrules: {
        newPassWord: [
          {required: true, message: '请输入密码', trigger: ['blur', 'change']},
          {min: 6, message: '长度最少为6位', trigger: 'blur'}
        ],
        validateNewPassWord: [
          {required: true, message: '请输入确认密码', trigger: ['blur', 'change']},
          {
            validator: (rule, value, callback) => {
              if (this.setPassWordForm.newPassWord && value !== this.setPassWordForm.newPassWord) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 获取验证码
    GetCode() {
      if(!this.validForm.cellPhoneNumber) {
        this.$refs.validFormRef.validateField('cellPhoneNumber')
        return
      }
      if(this.isCount) return
      this.$api.user.getPhoneValidCode({
        phoneNumber: this.validForm.cellPhoneNumber
      }).then(res => {
        if(res.code == 200) {
          this.isCount = true
          this.codeText = `${this.count} 秒`
          const timer = setInterval(() => {
            this.count--;
            this.codeText = `${this.count} 秒`;
            if (this.count <= 0) {
              clearInterval(timer);
              this.isCount = false;
              this.count = 60;
              this.codeText = '重新获取'
            }
          }, 1000);
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    NextStep() {
      if(this.currentStep == 1) {
        this.$refs.validFormRef.validate((valid) => {
          if (valid) {
            try {
              this.loading = true
              this.$api.user.validCode({
                phone: this.validForm.cellPhoneNumber,
                verificationCode: this.validForm.validateCode,
              }).then(res => {
                if(res.code === 200) {
                  this.currentStep = 2;
                } else {
                  this.$message.error(res.msg)
                }
              })
              this.loading = false
            } catch {
              this.loading = false
            }
          } else {
            return false;
          }
        });
      } else if(this.currentStep == 2) {
        this.$refs.setPassWordFormRef.validate(valid => {
          if(valid) {
            try {
              this.loading = true
              this.$api.user.setPassWord({
                phone: this.validForm.cellPhoneNumber,
                password: this.setPassWordForm.newPassWord
              }).then(res => {
                if(res.code == 200) {
                  this.$message.success(res.msg)
                  this.$emit('GoLogin')
                } else {
                  this.$message.error(res.msg)
                }
              })
              this.loading = false
            } catch {
              this.loading = false
            }
          } else {
            return false;
          }
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.forget_password_page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .step_box {
    display: flex; 
    width: 90%;
    margin: 0 auto;
    .step_item {
      &:not(:last-child) {
        flex: 1;
      }
      min-width: 0;
      .step_header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .step_number {
          width: 24px;
          height: 24px;
          line-height: 24px;
          margin: 0 10px;
          border: 2px solid #909399;
          text-align: center;
          border-radius: 50%;
          font-weight: 500;
          color: #909399;
        }
        .step_line {
          flex: 1;
          height: 2px;
          background: #DCDFE6;
        }
      }
      .step_label {
        color: #909399;
        font-weight: 500;
      }
      &.process {
        .step_header .step_number {
          background: #2E64FA;
          border-color: #2E64FA;
          color: #fff;
        }
        .step_line {
          background: #2E64FA;
        }
        .step_label {
          color: #2E64FA;
        }
      }
      &.finish {
        .step_header .step_number {
          background: #15BC83;
          border-color: #15BC83;
          color: #fff;
        }
        .step_line {
          background: #15BC83;
        }
        .step_label {
          color: #15BC83;
        }
        
      }
    }
    .step_item:last-of-type {
      .step_header .step_line {
        display: none;
      }
    }
  }
  .get_code {
    color: #2E64FA;
    cursor: pointer;
  }
  .login_info_button {
    margin-top: 19px;
    .el-button {
      width: 100%;
    }
  }
}

</style>