登录多次后需要输入验证码功能

src/api/auth/LoginService.js

@@ -20,4 +20,11 @@ export default class LoginService {
       method: 'get'
     })
   }
+  getLoginCodeNumber (userName) {
+    return request({
+      url: '/sys/getLoginCodeNumber',
+      method: 'get',
+      params: {userName: userName}
+    })
+  }
 }

src/assets/scss/login.scss

@@ -43,8 +43,8 @@ html, body{
   margin: 0 auto;
   float: left;
   width: 66%;
-  -webkit-box-shadow: 4px 5px 20px rgba(0, 0, 0, 0.4);
-  box-shadow: 4px 5px 20px rgba(0, 0, 0, 0.4);
+  /*-webkit-box-shadow: 4px 5px 20px rgba(0, 0, 0, 0.4);
+  box-shadow: 4px 5px 20px rgba(0, 0, 0, 0.4);*/
   // box-shadow:25px 25px 5px #888 ;
   position: relative;
 }
@@ -59,19 +59,19 @@ html, body{
 }
 .login-border .right img {
   border-radius:20px;
-  width: auto;  
-  height: auto;  
-  max-width: 100%;  
-  max-height: 100%; 
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
   min-height: 342px;
 }
 .login-left img {
   border-radius:20px;
 
-  width: auto;  
-  height: auto;  
-  max-width: 100%;  
-  max-height: 100%; 
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
   min-height: 342px;
 }
 .login-time {
@@ -189,7 +189,7 @@ top:10%
     height: 20%;
     width: 20%;
   }
-  
+
   .login-form{
     margin-top:0
   }
@@ -202,7 +202,7 @@ top:10%
   .login-title {
     text-align: center;
   }
-  
+
   .login-sub-title {
     display:none;
   }
@@ -230,7 +230,7 @@ top:10%
     margin-top:0
   }
   }
-  
+
   @media (min-width: 992px) {
     .login-form .block{
       display: none !important;
@@ -238,7 +238,7 @@ top:10%
     .login-form{
       margin-top:10
     }
-  } 
+  }
   @media (min-width: 1200px) {
     .login-form .block{
       display: inline-block !important;
@@ -247,28 +247,28 @@ top:10%
       height: 60px;
       width: 60px;
     }
-    
+
     .login-form{
       margin-top:20px;
     }
-  } 
+  }
   @media (min-width: 1350px) {
     .mobile img{
       height: 80px;
       width: 80px;
     }
-    
+
     .login-form{
       margin-top:30px;
     }
-  } 
+  }
   @media (min-width: 1600px) {
     .mobile img{
       height: 100px;
       width: 100px;
     }
-    
+
     .login-form{
       margin-top:60px;
     }
-  } 
+  }

src/views/modules/sys/login/login.vue

@@ -3,7 +3,7 @@
   <div class="login-container">
 
 
-    <div class="login-weaper animated bounceInDown" style="z-index:100">
+    <div class="login-weaper animated bounceInDown" >
       <div class="login-left">
                 <div class="login-time">
           {{time}}
@@ -37,7 +37,7 @@
                    <i slot="prefix" class="el-input__icon el-icon-female"></i>
                 </el-input>
               </el-form-item>
-              <el-form-item>
+              <el-form-item v-if="this.isShow">
                  <el-row :gutter="10">
                    <el-col :span="8"><el-image @click="getCaptcha" :src="captchaImg" style="height:34px"></el-image></el-col>
                    <el-col :span="16">
@@ -88,6 +88,7 @@
         productName: '',
         loading: false,
         captchaImg: '',
+        isShow: false,
         inputForm: {
           username: 'admin',
           password: 'admin',
@@ -122,7 +123,10 @@
       this.configService.getConfig().then(({data}) => {
         this.productName = data.productName
       })
-      this.getCaptcha()
+      // this.getCaptcha()
+      if (this.inputForm.username) {
+        this.getLoginCodeNumber(this.inputForm.username)
+      }
     },
     methods: {
       // 提交表单
@@ -142,7 +146,8 @@
               })
             }).catch(e => {
               this.loading = false
-              this.getCaptcha()
+              console.log(e)
+              this.getLoginCodeNumber(this.inputForm.username)
             })
           }
         })
@@ -156,6 +161,15 @@
           this.captchaImg = 'data:image/gif;base64,' + data.codeImg
           this.inputForm.uuid = data.uuid
         })
+      },
+      // 获取验证码
+      getLoginCodeNumber (username) {
+        this.loginService.getLoginCodeNumber(username).then(({data}) => {
+          if (data.redisLoginNumber >= data.loginNumber) {
+            this.getCaptcha()
+            this.isShow = true
+          }
+        })
       }
     }
   }