yudao-ui-saas/src/views/password/reset.vue

<template>
  <div class="fx-account-layout jdy-page-password-forget">
    <!-- <a class="account-logo" href="/">
      <img class="official-logo" src="https://g.jdycdn.com/shared/images/logo/logo_text.png" alt="">
    </a> -->
    <div class="account-pane-container hide-banner">
      <div class="account-pane">
        <div class="account-container password-forget-container">
          <div class="account-header">重置密码</div>
          <div class="account-content">
            <el-form v-if="!resetStatus" ref="ruleForm" :model="ruleForm" :rules="rules" class="login-form">
              <el-form-item prop="pass">
                 <el-input type="password" show-password v-model="ruleForm.pass" placeholder="密码">
                 </el-input>
               </el-form-item>
               <el-form-item prop="checkPass" style="margin-top: 35px;">
                <el-input type="password" show-password v-model="ruleForm.checkPass" placeholder="确认密码">
                </el-input>
               </el-form-item>
               <el-form-item>
                 <el-button size="medium" type="primary" style="width:100%;"
                 @click="submitForm('ruleForm')">
                  确定
                 </el-button>
                 <!-- <el-button style="margin-left: 0;margin-top: 10px;width: 100%;" type="text" @click="backLogin()">返回登录</el-button> -->
               </el-form-item>
            </el-form>
            <div class="success-box" v-else>
              <div class="success-box-content">
                <svg-icon class="success-icon" icon-class="success" />
                <div class="success-box-content-text">
                  <span class="success-text">密码重置成功</span>
                  <el-button class="success-btn" type="text" @click="backLogin()">立即登录</el-button>
                </div>
              </div>
              <div class="success-box-footer">
                {{ numberTimer }}秒后自动跳转登录页
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updatePassword } from "@/api/login";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      //必须包含大小写字母、数字、特殊字符长度再9-16位之间
      var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,30}");
      if (value === "") {
          callback(new Error("请输入密码"));
      } else if (value.length < 9 || value.length > 30) {
        callback(new Error("请输入9~30位密码"));
      } else if (!regex.test(value)) {
        callback(new Error("密码必须同时包含字母、数字和特殊字符其中三项且至少9位"));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      resetStatus: false,
      numberTimer: 3,
      countdown: 3,
      ruleForm: {
        pass: '',
        checkPass: '',
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    myTimer() {
      let msgTimer = setInterval(() => {
        this.numberTimer = this.numberTimer - 1;
        if (this.numberTimer <= 0) {
          clearInterval(msgTimer);
          this.$router.push({ path: '/login' })
        }
      }, 1000);
    },
    backLogin() {
      this.$router.push({ path: '/login' })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updatePassword(this.ruleForm.pass, this.ruleForm.checkPass ).then(res => {
            this.resetStatus = true;
            this.myTimer();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.success-box {
  .success-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .success-icon {
      font-size: 80px;
      color: #67C23A;
    }

    .success-box-content-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .success-text {
        font-size: 24px;
        color: #303133;
        margin: 20px 0;
      }

      .success-btn {
        font-size: 16px;
        color: #409EFF
      }
    }
  }

  .success-box-footer {
    text-align: center;
    font-size: 16px;
    color: gray;
  }
}

.fx-account-layout {
  background: #f5f6f8;
  bottom: 0;
  left: 0;
  min-height: 500px;
  position: absolute;
  right: 0;
  top: 0;
}

.fx-account-layout .account-logo {
  left: 60px;
  position: absolute;
  top: 40px;
}

a {
  outline: none;
  text-decoration: none;
}

.fx-account-layout .account-logo>img.official-logo {
  height: 24px;
}

.fx-account-layout .account-logo>img {
  display: block;
  max-height: 200px;
  max-width: 200px;
}

img {
  border: 0;
  outline: none;
}

.fx-account-layout .account-pane-container {
  height: 100%;
  width: 100%;
}

.fx-account-layout .account-pane,
.fx-account-layout .signin-container-banner {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.fx-account-layout .account-pane {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  width: 100%;
}

.fx-account-layout .account-pane-container.hide-banner .account-container {
  -webkit-box-flex: 0;
  display: block;
  -ms-flex: none;
  flex: none;
}

.jdy-page-password-forget .password-forget-container {
  padding: 0;
  width: 320px;
}

.fx-account-layout .account-container {

  align-items: center;
  background: #fff;
  display: flex;
  -ms-flex: 0.42;
  flex: 0.42;
  justify-content: center;
  position: relative;
}

.jdy-page-password-forget .password-forget-container .account-header {
  border-bottom: 1px solid #ebecee;
  color: #141e31;
  font-size: 16px;
  font-weight: 500;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.jdy-page-password-forget .password-forget-container .account-content {
  padding: 15px 40px 20px;
}
</style>