yudao-ui-saas/src/views/password/forget.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 ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
              <el-form-item prop="mobile">
                 <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
                 </el-input>
               </el-form-item>
               <el-form-item prop="mobileCode">
                 <el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码"
                           class="sms-login-mobile-code-prefix"
                           @keyup.enter.native="handleLogin">
                   <template>
                   </template>
                   <template slot="append">
                     <span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode" style="cursor: pointer;">获取验证码</span>
                     <span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span>
                   </template>
                 </el-input>
               </el-form-item>
               <el-form-item>
                 <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                  @click.native.prevent="submitForm('loginForm')">
                  <span v-if="!loading">重置密码</span>
                  <span v-else>操 作 中...</span>
                </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>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSmsCode } from "@/api/login";
export default {
  data() {
    return {
      mobileCodeTimer: 0,
      loginForm: {
        mobile: "",
        mobileCode: "",
      },
      LoginRules: {
        mobile: [
          {required: true, trigger: "blur", message: "手机号不能为空"},
          {
            validator: function (rule, value, callback) {
              if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            }, trigger: "blur"
          }
        ]
      },
      scene: 4,
      loading: false,
    };
  },
  methods: {
    backLogin(){
      this.$router.push({path: '/login'})
    },
    /** ========== 以下为升级短信登录 ========== */
    getSmsCode() {
      if (this.mobileCodeTimer > 0) return;
      this.$refs.loginForm.validate(valid => {
        if (!valid) return;
        sendSmsCode(this.loginForm.mobile, this.scene ).then(res => {
          this.$modal.msgSuccess("获取验证码成功")
          this.mobileCodeTimer = 60;
          let msgTimer = setInterval(() => {
            this.mobileCodeTimer = this.mobileCodeTimer - 1;
            if (this.mobileCodeTimer <= 0) {
              clearInterval(msgTimer);
            }
          }, 1000);
        });
      });
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          this.loading = true;
          // 发起登陆
          // console.log("发起登录", this.loginForm);
          this.$store.dispatch("SmsResetPassword", this.loginForm).then(() => {
            this.$router.push({ path: "/password/reset" }).catch(() => {
            });
          }).catch(() => {
            this.loading = false;
          });
        }
        });
      },
  }
};
</script>

<style lang="scss" scoped>
.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>