登录 手机验证码校验

src/api/user.js

@@ -43,3 +43,21 @@ export function getRoule() {
     // params: { token }
   })
 }
+//获取验证码
+export function getVerifyCode(data) {
+  return request({
+    url: '/commonUser/sendVerifyCode',
+    method: 'get',
+    params: data,
+  })
+}
+//校验验证码
+export function getCheckInfo(data) {
+  return request({
+    url: '/commonUser/checkVerifyCode',
+    method: 'get',
+    params: data,
+  })
+}
+
+

src/store/modules/user.js

@@ -122,7 +122,6 @@ const actions = {
     vesselBankFlag = 'B',
     compName = ''
   }) {
-    debugger
     const response = await getInfo()
     const {
       staffName,

src/views/login/index.vue

@@ -25,12 +25,12 @@
         </span>
       </el-form-item>
       <el-form-item prop="code">
-        <el-row :span="24" style="display: flex;align-items: center;">
+        <el-row :span="24" style="display: flex; align-items: center">
           <el-col :span="12">
             <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" size=""
               @keyup.enter.native="submitForm('loginForm')"></el-input>
           </el-col>
-          <el-col :span="12" style="display: flex;justify-content: flex-end;">
+          <el-col :span="12" style="display: flex; justify-content: flex-end">
             <div class="login-code" @click="refreshCode">
               <!--验证码组件-->
               <s-identify :identifyCode="identifyCode"></s-identify>
@@ -38,8 +38,24 @@
           </el-col>
         </el-row>
       </el-form-item>
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
-        @click.native.prevent="handleLogin">进入</el-button>
+      <el-form-item prop="checkCode">
+        <el-row :span="24" style="display: flex; align-items: center">
+          <el-col :span="12">
+            <el-input v-model="loginForm.checkCode" auto-complete="off" placeholder="请输入手机验证码"></el-input>
+          </el-col>
+          <el-col :span="12" style="display: flex; justify-content: flex-end">
+            <div class="login-code" @click="checkClick">
+              <el-button type="primary" style="width: 112px">{{
+                codeText
+              }}</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <div class="tips">手机验证码五分钟内有效</div>
+      <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px"
+        @click.native.prevent="nextLogin">进入</el-button>
+      <!-- handleLogin -->
 
       <!-- <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
@@ -50,178 +66,243 @@
 </template>
 
 <script>
-  import Cookies from 'js-cookie'
+  import Cookies from "js-cookie";
   import {
     mapActions
-  } from 'vuex'
+  } from "vuex";
   import {
     validUsername,
     isLoginName
-  } from '@/utils/validate'
-  import SIdentify from './sidentify'
+  } from "@/utils/validate";
+  import {
+    getVerifyCode,
+    getCheckInfo
+  } from '@/api/user'
+  import SIdentify from "./sidentify";
   export default {
-    name: 'Login',
+    name: "Login",
     components: {
-      SIdentify
+      SIdentify,
     },
     data() {
       const validateUsername = (rule, value, callback) => {
         if (!validUsername(value)) {
-          callback(new Error('请输入正确的账号'))
+          callback(new Error("请输入正确的账号"));
         } else {
-          callback()
+          callback();
         }
-      }
+      };
       const validatePassword = (rule, value, callback) => {
         if (value.length < 6) {
-          callback(new Error('请输入正确的密码'))
+          callback(new Error("请输入正确的密码"));
         } else {
-          callback()
+          callback();
         }
-      }
+      };
       const validateCode = (rule, value, callback) => {
         if (this.identifyCode !== value) {
-          this.loginForm.code = ''
-          this.refreshCode()
-          callback(new Error('请输入正确的验证码'))
+          this.loginForm.code = "";
+          this.refreshCode();
+          callback(new Error("请输入正确的验证码"));
         } else {
-          callback()
+          callback();
         }
-      }
+      };
+      const checkCode = (rule, value, callback) => {
+        if (this.identifyCode !== value || value.length != 6) {
+          this.loginForm.checkCode = "";
+          this.refreshCode();
+          callback(new Error("请输入正确的手机验证码"));
+        } else {
+          callback();
+        }
+      };
       return {
         isDebugLogin: false,
         loginForm: {
-          username: '',
-          password: '',
-          code: ''
+          username: "",
+          password: "",
+          code: "",
         },
-        identifyCodes: '1234567890',
-        identifyCode: '',
+        identifyCodes: "1234567890",
+        identifyCode: "",
         loginRules: {
           username: [{
               required: true,
-              trigger: 'blur',
-              message: '请输入用户名'
+              trigger: "blur",
+              message: "请输入用户名",
             },
             {
               min: 1,
               max: 200,
-              message: '长度在1-200字符之间',
-              trigger: 'blur'
+              message: "长度在1-200字符之间",
+              trigger: "blur",
             },
             {
               validator: isLoginName,
-              trigger: 'blur'
-            }
+              trigger: "blur",
+            },
           ],
           password: [{
               required: true,
-              message: '请输入密码',
-              trigger: 'blur'
+              message: "请输入密码",
+              trigger: "blur",
             },
             {
               min: 1,
               max: 100,
-              message: '长度在1-100字符之间',
-              trigger: 'blur'
-            }
+              message: "长度在1-100字符之间",
+              trigger: "blur",
+            },
           ],
           code: [{
               required: true,
-              message: '请输入验证码',
-              trigger: 'blur'
+              message: "请输入验证码",
+              trigger: "blur",
             },
             {
               validator: validateCode,
-              trigger: 'blur'
-            }
-          ]
+              trigger: "blur",
+            },
+          ],
+          checkCode: [{
+              required: true,
+              message: "请输入手机验证码",
+              trigger: "blur",
+            },
+            {
+              min: 6,
+              max: 6,
+              message: "请输入6位手机验证码",
+              trigger: "blur",
+            },
+          ],
         },
         loading: false,
         rememberMe: true,
-        passwordType: 'password',
-        redirect: undefined
-      }
+        passwordType: "password",
+        redirect: undefined,
+        codeText: "获取验证码",
+      };
     },
     watch: {
       $route: {
         handler: function(route) {
-          this.redirect = route.query && route.query.redirect
+          this.redirect = route.query && route.query.redirect;
         },
-        immediate: true
+        immediate: true,
       },
       isDebugLogin(v) {
         if (v) {
-          this.loginForm.password = '123'
-          this.refreshCode()
+          this.loginForm.password = "123";
+          this.refreshCode();
         }
       },
       identifyCode(v) {
-        this.isDebugLogin && (this.loginForm.code = v)
-      }
+        this.isDebugLogin && (this.loginForm.code = v);
+      },
     },
     methods: {
-      ...mapActions('user', ['login']),
+      nextLogin() { //校验验证码
+        getCheckInfo({
+          phone: this.loginForm.username,
+          verifyCode: this.loginForm.checkCode
+        }).then(response => {
+          if (response.code == 200) { //验证码校验成功   登录
+            this.handleLogin()
+          }
+        })
+      },
+      checkClick() { //获取验证码
+        let that = this;
+        if (that.identifyCode !== that.loginForm.code) {
+          this.loginForm.code = "";
+          that.$message.error("请输入正确的图片验证码")
+          return
+        }
+        if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(that.loginForm.username)) {
+          if (that.codeText == "获取验证码" || that.codeText == "重新发送") {
+            getVerifyCode({
+              phone: that.loginForm.username,
+              identification: 3
+            }).then(response => {
+              if (response.code == 200) {
+                that.codeText = 60;
+                setInterval(() => {
+                  if (that.codeText > 0) {
+                    that.codeText -= 1;
+                  } else {
+                    that.codeText = "重新发送";
+                  }
+                }, 1000);
+              } else {
+                that.$message.error(response.message)
+              }
+            })
+          }
+        } else {
+          that.$message.error("请输入正确的手机")
+        }
+      },
+      ...mapActions("user", ["login"]),
       randomNum(min, max) {
-        return Math.floor(Math.random() * (max - min) + min)
+        return Math.floor(Math.random() * (max - min) + min);
       },
       refreshCode() {
-        this.identifyCode = ''
-        this.makeCode(this.identifyCodes, 4)
+        this.identifyCode = "";
+        this.makeCode(this.identifyCodes, 4);
       },
       makeCode(o, l) {
         for (let i = 0; i < l; i++) {
-          this.identifyCode += this.identifyCodes[
-            this.randomNum(0, this.identifyCodes.length)
-          ]
+          this.identifyCode +=
+            this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
         }
       },
       showPwd() {
-        if (this.passwordType === 'password') {
-          this.passwordType = ''
+        if (this.passwordType === "password") {
+          this.passwordType = "";
         } else {
-          this.passwordType = 'password'
+          this.passwordType = "password";
         }
         this.$nextTick(() => {
-          this.$refs.password.focus()
-        })
+          this.$refs.password.focus();
+        });
       },
       handleLogin() {
         this.$refs.loginForm.validate(async (valid) => {
           if (valid) {
-            this.loginForm.companyName = '黑龙江中天昊元贸易有限公司'
-            this.loading = true
+            this.loginForm.companyName = "黑龙江中天昊元贸易有限公司";
+            this.loading = true;
             // this.$store.dispatch('user/login', this.loginForm)
             // const res = await this.$store.dispatch('user/login', this.loginForm)
-            const res = await this.login(this.loginForm)
-            debugger
-            localStorage.setItem('ws_login_type', 2)
-            Cookies.set('ws_login_companyShortName', this.loginForm.companyName, {
+            const res = await this.login(this.loginForm);
+            localStorage.setItem("ws_login_type", 2);
+            Cookies.set("ws_login_companyShortName", this.loginForm.companyName, {
               expires: 365,
-            })
-            Cookies.set('ws_login_account', this.loginForm.username, {
+            });
+            Cookies.set("ws_login_account", this.loginForm.username, {
               expires: 365,
-            })
+            });
             if (this.rememberMe) {
-              Cookies.set('ws_login_pwd', this.loginForm.password, {
+              Cookies.set("ws_login_pwd", this.loginForm.password, {
+                expires: 365,
+              });
+              Cookies.set("ws_login_rememberMe", 1, {
                 expires: 365,
-              })
-              Cookies.set('ws_login_rememberMe', 1, {
-                expires: 365
-              })
+              });
             } else {
-              Cookies.remove('ws_login_companyShortName')
-              Cookies.remove('ws_login_account')
-              Cookies.remove('ws_login_pwd')
-              Cookies.set('ws_login_rememberMe', 0, {
-                expires: 365
-              })
+              Cookies.remove("ws_login_companyShortName");
+              Cookies.remove("ws_login_account");
+              Cookies.remove("ws_login_pwd");
+              Cookies.set("ws_login_rememberMe", 0, {
+                expires: 365,
+              });
             }
-            const redirect = this.$route.query.redirect
+            const redirect = this.$route.query.redirect;
             if (redirect) {
-              this.$router.push(redirect)
+              this.$router.push(redirect);
             } else {
-              this.$router.push('/')
+              this.$router.push("/");
             }
             // .then(response => {
             //   localStorage.setItem('UserInfo', JSON.stringify(response.data))
@@ -234,16 +315,16 @@
             //   this.loading = false
             // })
           } else {
-            console.log('error submit!!')
-            return false
+            console.log("error submit!!");
+            return false;
           }
-        })
-      }
+        });
+      },
     },
     created() {
-      this.refreshCode()
-    }
-  }
+      this.refreshCode();
+    },
+  };
 </script>
 
 <style lang="scss">
@@ -372,4 +453,10 @@
       text-align: center;
     }
   }
+
+  .tips {
+    width: 100%;
+    text-align: right;
+    color: #a1a3a6 !important;
+  }
 </style>