study_sm/src/containers/reset/reset.vue

<style lang="less">
@import "./reset.less";
</style>

<template>
  <div class="main">
    <navbar :user="user"></navbar>
    <div style="margin: 50px auto;">
      <el-form :model="regForm" status-icon :rules="rules" label-width="80px" ref="regForm" class="reset">
        <el-form-item label="手机号" prop="phone" class="pr">
          <div class="reset-phone">
            <el-input prop="phone" type="text" v-model="regForm.phone" placeholder="输入手机号码"></el-input>
          </div>

          <div class="reset-code">
            <el-button @click="getCode(regForm)" class="code-btn ml10" type="primary" v-if="show">发送</el-button>
            <el-button class="code-btn" type="primary" disabled v-else>{{count}} s</el-button>
          </div>
        </el-form-item>

        <el-form-item label="验证码" prop="code" class="pr">
          <el-input prop="code" v-model="regForm.code" placeholder="验证码" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="pass" class="pr">
          <el-input prop="pass" type="password" v-model="regForm.pass" placeholder="登入密码" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="rePass" class="pr">
          <el-input prop="rePass" type="password" v-model="regForm.rePass" placeholder="确认密码" auto-complete="off"></el-input>
        </el-form-item>


        <div class="submit">
          <el-button type="primary" class="submit-btn" @click="submitForm('regForm')">重置密码</el-button>
          <el-button type="primary" class="submit-btn" @click="goLogin">回到登入</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {httpServer} from "@/components/httpServer/httpServer.js";
import navbar from "@/components/nav/navbar.vue";
import data from "@/components/data/data.js";

export default {
  data() {
    return {
      show: true,
      count: 0,
      regForm: {
        phone: "",
        code: "",
        pass: "",
        rePass: ""
      },
      user:{},
      rules: data.rulesData( this.validatePass )
    };
  },
  components:{navbar},
  methods: {
    validatePass(rule, value, callback) {
      if (value == this.regForm.pass) {
        callback();
      } else {
        callback(new Error("两次密码不服"));
      }
    },
    goLogin(){
      this.$router.push('/');
    },
    getCode() {
      if (this.checkPhone() == false) {
        return false;
      } else {
        let {phone} = this.regForm;
        httpServer("Auth.getCode", {phone}).then(res => {
          if( res.code == 200){
            this.$message.successMsg("发送成功", 2);
            this.show = false
            const TIME_COUNT = 60; //更改倒计时时间
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer); // 清除定时器
                  this.timer = null;
                }
              }, 1000)
            }

          }
        })
      }
    },
    checkPhone() {
      let phone = this.regForm.phone;
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        this.$message.error("请填写正确的手机号");
        return false;
      }
      return true
    },
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (!valid) {
            return false;
        }
        let {phone,code,pass} = this.regForm;
        let param = {phone,code, pass: this.$md5(pass)};
        httpServer("Auth.resetPass", param).then(res => {
          if( res.code == 200){
            this.$msgbox({
                title: "重置密码",
                message: "密码重置成功",
                showCancelButton: false,
                confirmButtonText: "回到登入页面",
                beforeClose: (action, instance, done) => {
                  that.$router.push('/');
                  done();
                }
              })

          }
        });
      })
    }
  }
};
</script>