Просмотр исходного кода

feat: NC-45: 结算后台登陆增加邮箱验证码.

zhangl 1 год назад
Родитель
Сommit
3616249554
1 измененных файлов с 21 добавлено и 4 удалено
  1. 21 4
      backendEle/src/views/login/index.vue

+ 21 - 4
backendEle/src/views/login/index.vue

@@ -21,7 +21,7 @@
             <el-input v-model="loginForm.code">
               <template slot="prepend" ><i class="el-icon-chat-dot-round"></i></template>
               <template slot="append">
-                <el-button @click="sendCode">发送验证码</el-button>
+                <el-button @click="sendCode" :disabled="countdown > 0">发送验证码<span v-if="countdown > 0">({{ countdown }})</span></el-button>
               </template>
             </el-input>
           </el-form-item>
@@ -69,6 +69,8 @@ export default {
       submitButtonStat: false,
       pageId:'',
       captchaUrl: '',
+      countdown: 0,
+      timer: null,
     }
   },
   beforeCreate () {
@@ -124,13 +126,15 @@ export default {
       this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random();
     },
     sendCode() {
-      if (this.loginForm.adminName.length > 2) {
+      if (this.loginForm.adminName.length >= 5) {
         // const result = network.sendEmailCode(this.loginForm.adminName)
         network.sendEmailCode(this.loginForm.adminName).then(response => {
           this.$message({
             message: response,
-            type: 'warning'
+            type: 'success'
           });
+          // 设置定时器
+          this.startCountdown()
         }).catch(error => {
           this.$message({
             message: error,
@@ -140,7 +144,20 @@ export default {
 
       }
     },
-  }
+    startCountdown() {
+      if (this.countdown > 0) {
+        return; // 如果倒计时未结束,则不执行
+      }
+      this.countdown = 10; // 设置倒计时秒数
+      this.timer = setInterval(() => {
+        if (this.countdown > 0) {
+          this.countdown -= 1;
+        } else {
+          clearInterval(this.timer); // 倒计时结束,清除计时器
+        }
+      }, 1000);
+    },
+  },
 }
 </script>