短信验证码优化

src/views/login.vue

@@ -24,16 +24,16 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <div style="color: red; font-size: 12px">获取短信验证码必须同时填写账号、密码、数字验证码</div>
-      <el-form-item prop="smsCode" v-if="captchaEnabled">
-        <el-input v-model="loginForm.smsCode" auto-complete="off" placeholder="短信验证码" style="width: 63%;"
-                  @keyup.enter.native="handleLogin">
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+      <el-form-item prop="smsCode" v-if="captchaEnabled" class="textMessage">
+        <el-input style="width: 63%;" v-model="loginForm.smsCode" placeholder="短信验证码">
+          <i slot="prefix" @keyup.enter.native="handleLogin" style="margin-left: 2px;margin-top:12px"
+            class="el-icon-mobile-phone" />
         </el-input>
-        <div class="login-code">
-          <el-button size="small" @click="getSmsCode">发送短信验证码</el-button>
-        </div>
+        <el-button :disabled="VerificationCodeTime > 0 || VerificationCodeShow" @click="getSmsCode"
+          style="width:33%;margin-left:4%;font-size:11px;" type="success">{{
+            VerificationCodeTitle }}</el-button>
       </el-form-item>
+      <div style="color: red; font-size: 12px;margin-top:-10px;">获取短信验证码前必须同时填写账号、密码、数字验证码</div>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:12px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@@ -48,7 +48,8 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <a class="text-color" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> <span style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
+      <a class="text-color" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> <span
+          style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
     </div>
   </div>
 </template>
@@ -68,7 +69,7 @@ export default {
         password: "",
         rememberMe: false,
         code: "",
-        smsCode:"",
+        smsCode: "",
         uuid: ""
       },
       loginRules: {
@@ -86,7 +87,11 @@ export default {
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      // 短信验证码部分参数
+      VerificationCodeTitle: '发送验证码',
+      VerificationCodeTime: 0,
+      VerificationCodeShow: true
     };
   },
   watch: {
@@ -95,6 +100,18 @@ export default {
         this.redirect = route.query && route.query.redirect;
       },
       immediate: true
+    },
+    loginForm: {
+      handler(newValue, oldValue) {
+        console.log('变化后的数组', newValue);
+        if (newValue.username && newValue.password && newValue.code) {
+          this.VerificationCodeShow = false
+        } else {
+          this.VerificationCodeShow = true
+        }
+      },
+      deep: true,
+      immediate: false,
     }
   },
   created() {
@@ -150,9 +167,19 @@ export default {
       delete this.loginRules.smsCode
       this.$refs.loginForm.validate(valid => {
         if (valid) {
-          getLoginSmsCode(this.loginForm).then(resp =>　{
+          getLoginSmsCode(this.loginForm).then(resp => {
             if (200 === resp.code) {
-
+              this.VerificationCodeTime = 60
+              const timer = setInterval(() => {
+                this.VerificationCodeTime--;
+                if (this.VerificationCodeTime > 0) {
+                  this.VerificationCodeTitle = `${this.VerificationCodeTime}秒后重新发送`;
+                } else {
+                  clearInterval(timer);
+                  this.VerificationCodeTitle = '发送验证码';
+                  this.VerificationCodeTime = 60;
+                }
+              }, 1000);
             }
           })
         }
@@ -160,6 +187,7 @@ export default {
     }
   }
 };
+
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -196,6 +224,9 @@ export default {
   width: 400px;
   padding: 35px 45px 25px 35px;
 
+
+
+
   .el-input {
     height: 38px;