添加倒计时

src/components/verify-message.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="verify-message">
     <el-button type="success" style="width: 86px;height: 33px;padding: 0;margin: 0 0 0 5px;" @click="send">
-      <el-link target="_blank" :underline="false" style="color:#fff;">获取验证码</el-link>
+      <el-link :underline="false" v-show="show" style="color:#fff;">获取验证码</el-link>
+      <el-link :underline="false" v-show="!show" style="color:#fff;">{{ count }}s后重新发送验证码</el-link>
     </el-button>
   </div>
 </template>
@@ -14,7 +15,11 @@ export default {
     mobile: { type: String },
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    count: 0,
+    show: true,
+    timer: null,
+  }),
   created() {},
   computed: {},
   methods: {
@@ -24,11 +29,28 @@ export default {
         this.$message.error('请输入手机号码');
         return;
       }
+      this.setTime();
       let result = await this.verifyOperation({ type: 'message', data: { mobile: this.mobile } });
       if (`${result.errcode}` === '0') {
         this.$message.success('短信正在发送中,请耐心等待');
       }
     },
+    setTime() {
+      const TIME_COUNT = 60;
+      if (!this.timer) {
+        this.count = TIME_COUNT;
+        this.show = false;
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.count--;
+          } else {
+            this.show = true;
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        }, 1000);
+      }
+    },
   },
 };
 </script>