修改验证码登录

src/views/index/login/Login.vue

@@ -3,7 +3,9 @@
     <div class="title_Login">
       <div v-if="changeLogin == 1">
         <div @click="toCodeLogin" class="title title_top">
-          <div :class="changeLogin == 2 ? 'change_login normal' : 'normal'">验证码登录</div>
+          <div :class="changeLogin == 2 ? 'change_login normal' : 'normal'">
+            验证码登录
+          </div>
         </div>
         <div @click="toLogin" class="title">
           <div :class="changeLogin == 1 ? 'change_login' : ''">
@@ -79,7 +81,7 @@
           ref="code"
           v-else-if="changeLogin == 2"
         >
-          <img alt="" class="img_l" src="@/assets/img/reset/code.png"/>
+          <img alt="" class="img_l" src="@/assets/img/reset/code.png" />
           <el-input
             maxlength="20"
             placeholder="请输入短信验证码"
@@ -110,12 +112,12 @@
 </template>
 
 <script>
-  /* eslint-disable */
-  import {login, loginCode} from "r/index/login";
-  import {mobileCheck} from "@/common/utils.js";
-  import {intervalTime} from "store/time";
+/* eslint-disable */
+import { login, loginCode } from "r/index/login";
+import { mobileCheck } from "@/common/utils.js";
+import { intervalTime } from "store/time";
 
-  export default {
+export default {
   name: "index-login",
   data() {
     return {
@@ -134,7 +136,7 @@
       loginFormRules: {
         // 对手机号进行校验
         phone: [
-            {required: true, message: "请输入手机号", trigger: "blur"},
+          { required: true, message: "请输入手机号", trigger: "blur" },
           {
             validator: function (rule, value, callback) {
               if (mobileCheck(value) === false) {
@@ -181,8 +183,8 @@
         ],
         // 对验证码进行校验
         code: [
-            {required: true, message: "请输入验证码", trigger: "blur"},
-            {min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur"},
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
         ],
       },
       changeLogin: 1,
@@ -196,7 +198,7 @@
       this.loginForm.phone = phone;
       this.intervalHandleNew(endTime);
     }
-      this.commonApi(31)
+    this.commonApi(31);
   },
   methods: {
     // 定时器倒计时
@@ -240,6 +242,10 @@
       if (!this.loginForm.phone) {
         return this.$message.error("请输入手机号");
       }
+
+      this.$alert("若未及时收到验证码，可用手机号后六位当做验证码登录", "", {
+        confirmButtonText: "确定",
+        callback: (action) => {
           // 接口获得验证码
           loginCode({
             phone: this.loginForm.phone,
@@ -250,11 +256,19 @@
             }
             this.$message.success(res.data.msg);
             this.codeTime = res.data.expire_time;
-          window.localStorage.setItem("login_code_time", res.data.expire_time);
-          window.localStorage.setItem("login_code_phone", this.loginForm.phone);
+            window.localStorage.setItem(
+              "login_code_time",
+              res.data.expire_time
+            );
+            window.localStorage.setItem(
+              "login_code_phone",
+              this.loginForm.phone
+            );
             this.intervalHandleNew(res.data.expire_time);
           });
         },
+      });
+    },
     // 忘记账号/密码
     forgetPwd() {
       let code = this.$store.state.indexIdentity;
@@ -262,8 +276,8 @@
         path: "/reset",
         query: {
           ...this.$store.state.query,
-            code: code
-          }
+          code: code,
+        },
       });
     },
 
@@ -274,8 +288,8 @@
         path: "/register",
         query: {
           ...this.$store.state.query,
-            code: code
-          }
+          code: code,
+        },
       });
     },
     // 改变密码显示状态
@@ -318,20 +332,23 @@
           // 跳转到报名
           const code = this.$store.state.indexIdentity;
           // token存储
-            this.$store.commit('login', res.data.token);
+          this.$store.commit("login", res.data.token);
           window.localStorage.setItem("index-phone-all", this.loginForm.phone);
           window.localStorage.setItem("index-email-all", res.data.email);
           // 报名信息
           window.localStorage.setItem("camp_name" + code, res.data.cam.name);
           //获取主题色
-            window.localStorage.setItem("system_color" + code, res.data.cam.system_color);
+          window.localStorage.setItem(
+            "system_color" + code,
+            res.data.cam.system_color
+          );
           // 跳转到报名
           this.$router.replace({
             path: "/signUp/undefined",
             query: {
               ...this.$store.state.query,
-                code: code
-              }
+              code: code,
+            },
           });
         });
       });
@@ -339,18 +356,18 @@
   },
   destroyed() {
     this.timer && clearInterval(this.timer);
-      localStorage.removeItem('login_code_time');
-      localStorage.removeItem('login_code_phone');
-    }
-  };
+    localStorage.removeItem("login_code_time");
+    localStorage.removeItem("login_code_phone");
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .flex {
+.flex {
   display: flex;
-  }
+}
 
-  .container {
+.container {
   height: 440px;
   background: #ffffff;
   box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
@@ -377,7 +394,7 @@
         justify-content: flex-end;
 
         .normal {
-            cursor: pointer
+          cursor: pointer;
         }
       }
     }
@@ -516,5 +533,5 @@
       }
     }
   }
-  }
+}
 </style>