邮箱验证码 超时

src/App.vue

@@ -10,15 +10,35 @@
 </template>
 
 <script>
+import { removeSession } from "@/utils/role";
+import { removeToken } from "@/utils/auth";
+import Cookies from "js-cookie";
+import { getConfig } from "@/utils/auth";
 export default {
   name: "App",
   data() {
     return {
       userAgentTipShow: false,
+      timeOut: null
     };
   },
   created() {
     this.handleUserAgentRoot()
+    window.addEventListener(
+        'click',()=>{
+            sessionStorage.setItem('lastClickTime',new Date().getTime())
+        }
+    )
+    window.addEventListener(
+        'mousewheel',()=>{
+            sessionStorage.setItem('lastClickTime',new Date().getTime())
+        }
+    )
+    window.addEventListener(
+        'mousemove',()=>{
+            sessionStorage.setItem('lastClickTime',new Date().getTime())
+        }
+    )
   },
   methods:{
       // 判断是否为chrome浏览器 
@@ -31,7 +51,30 @@ export default {
           sessionStorage.setItem("useragent_root_close", true);
           this.userAgentTipShow = false
       },
-  }
+      // 是否超时
+      isTimeOut(){
+        clearInterval(this.timeOut)
+        this.timeOut = setInterval(()=>{
+            let lastClickTime = sessionStorage.getItem('lastClickTime')*1
+            let nowTime = new Date().getTime()
+            let dataConfig = JSON.parse(getConfig());
+            if(nowTime - lastClickTime > 1000 * dataConfig.user_connection_timeout_duration){
+                clearInterval(this.timeOut)
+                removeSession("SysList");
+                removeToken();
+                Cookies.remove("JSESSIONID");
+                this.userShow = false;
+                this.userMessage = null;
+                sessionStorage.removeItem("useragent_root_close");
+                window.location.href = dataConfig.sys_home_url
+            }
+        })
+      }
+  },
+  mounted(){
+    sessionStorage.setItem('lastClickTime',new Date().getTime())
+    this.isTimeOut()
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/login.vue

@@ -67,6 +67,23 @@
                 <img v-if="verificationCodeimg&&verificationCodeLoading" :src="verificationCodeimg" alt="图形验证码" @click="getVerificationCodeimg"/>
             </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>
@@ -139,7 +156,8 @@ export default {
         username: getObjArr("userName") || "",
         password: "",
         type: "TEACHER",
-        verificationCode:''
+        verificationCode:'',
+        emailCode: ""
       },
       //input 规则
       loginRules: {
@@ -161,6 +179,8 @@ export default {
       verificationCodeimg: '', // 图形验证码
       verificationCodeimgID: '', // 图形验证码ID
       verificationCodeLoading: true, // 图形验证码的flag
+      time: 60, //获取验证码的时间
+      VerificationCodeShow: false, //是否已经获取了验证码
     };
   },
   watch: {
@@ -195,7 +215,10 @@ export default {
             is_password_md5: "true",
             password: md5(this.loginForm.password).toUpperCase(),
             verification_code_image_text: this.loginForm.verificationCode,
-            verification_code_image_id: this.verificationCodeimgID
+            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) => {
@@ -233,6 +256,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");
@@ -506,6 +563,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>