登录邮箱验证码

src/App.vue

@@ -21,7 +21,6 @@
 import { removeSession } from "@/utils/role";
 import { removeToken } from "@/utils/auth";
 import Cookies from "js-cookie";
-import data from './common/data';
 import { getConfig } from "@/utils/auth";
 export default {
   name: "App",

src/views/login.vue

@@ -72,6 +72,23 @@
               />
             </div>
           </div>
+          <p class="input-title">邮箱验证码</p>
+          <div class="verificationCode-box">
+            <el-form-item prop="emailCode">
+              <el-input
+                autocomplete="off"
+                name="emailCode"
+                ref="emailCode"
+                tabindex="3"
+                type="text"
+                v-model="loginForm.emailCode"
+              />
+            </el-form-item>
+            <div class="verificationCode-btn" @click="getVerificationCode"
+                :class="VerificationCodeShow ? 'waitTime' : 'getVerification'">
+                {{ VerificationCodeShow ? time+'s' : '获取' }}
+            </div>
+          </div>
           <p class="input-title">用户类型</p>
           <el-form-item class="el-form-item-type" prop="type">
             <el-radio label="TEACHER" v-model="loginForm.type">教师</el-radio>
@@ -147,6 +164,7 @@ export default {
         password: "",
         type: "TEACHER",
         verificationCode: "",
+        emailCode: ""
       },
       //input 规则
       loginRules: {
@@ -172,6 +190,8 @@ export default {
       verificationCodeimg: "", // 图形验证码
       verificationCodeimgID: "", // 图形验证码ID
       verificationCodeLoading: true, // 图形验证码的flag
+      time: 60, //获取验证码的时间
+      VerificationCodeShow: false, //是否已经获取了验证码
     };
   },
   watch: {
@@ -207,6 +227,9 @@ export default {
             password: md5(this.loginForm.password).toUpperCase(),
             verification_code_image_text: this.loginForm.verificationCode,
             verification_code_image_id: this.verificationCodeimgID,
+            dynamic_verification_type:'EMAIL',
+            phone_or_email: this.loginForm.username,
+            dynamic_verification_code: this.loginForm.emailCode
           };
           getLogin(MethodName, data)
             .then((res) => {
@@ -260,6 +283,40 @@ export default {
           this.verificationCodeLoading = true;
         });
     },
+    // 获取验证码
+    getVerificationCode() {
+      let this_ = this;
+      if(this_.time != 60){
+        return
+      }
+      let timer;
+      if (this_.loginForm.username) {
+        this_.VerificationCodeShow = true;
+        timer = setInterval(() => {
+          this_.time--;
+          if (this_.time == 0) {
+            this_.VerificationCodeShow = false;
+            clearInterval(timer);
+            timer = null;
+            this_.time = 60;
+          }
+        }, 1000);
+        let MethodName = "user_manager-SendVerificationCode";
+        let data = {
+          verification_type: 'EMAIL',
+          phone_or_email: this_.loginForm.username,
+        };
+        getLogin(MethodName, data).then((res) => {
+        }).catch(()=>{
+            this_.VerificationCodeShow = false;
+            clearInterval(timer);
+            timer = null;
+            this_.time = 60;
+        });
+      } else {
+        this_.$message.warning('请先输入邮箱或手机号码');
+      }
+    },
   },
   mounted() {
     removeSession("SysList");
@@ -529,6 +586,24 @@ $fc: rgb(24, 144, 255);
         cursor: pointer;
       }
     }
+    &.verificationCode-btn{
+        max-width: 90px;
+        height: 34px;
+        margin-left: 5px;
+        background: #FF9900;
+        border-radius: 4px;
+        color: #fff;
+        font-weight: 700;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        &.waitTime{
+            background: #F0F0F0;
+            color: #6C6C6C;
+        }
+    }
   }
 }
 </style>