解决短信问题

src/views/userCenter/PersonVerify.vue

@@ -50,11 +50,15 @@
             placeholder="请输入您的银行卡预留手机号"
             clearable
           ></el-input>
-          <code-btn
-            @sendCode="sendCode"
-            :ifNeedAuth="false"
-            ref="child"
-          ></code-btn>
+          <div class="code-btn">
+            <el-button
+              type="primary"
+              @click="getCode()"
+              class="send-btn"
+              :disabled="!show"
+              >{{ show ? "获取验证码" : "重新发送" + count2 }}</el-button
+            >
+          </div>
         </el-form-item>
         <el-form-item label="验证码" class="form-item" prop="code">
           <el-input
@@ -118,8 +122,11 @@ export default {
       },
       verstatus: false,
       timer: 0,
+      timer2: 0,
       count: 0,
+      count2: 0,
       time: 20,
+      show: true,
       rules: {
         name: [
           { required: true, message: "真实姓名不能为空", trigger: "blur" },
@@ -139,6 +146,22 @@ export default {
   },
   created() {},
   methods: {
+    countDowns2() {
+      const TIME_COUNT = 60;
+      if (!this.timer2) {
+        this.count2 = TIME_COUNT;
+        this.show = false;
+        this.timer2 = setInterval(() => {
+          if (this.count2 > 0 && this.count2 <= TIME_COUNT) {
+            this.count2--;
+          } else {
+            this.show = true;
+            clearInterval(this.timer2);
+            this.timer2 = 0;
+          }
+        }, 1000);
+      }
+    },
     // 确认提交
     confirm(verForm) {
       this.$refs[verForm].validate(async (valid) => {
@@ -178,7 +201,6 @@ export default {
             }
           }
         } else {
-          // this.$notify.warning("认证信息存在错误，请确认！");
           this.$message("认证信息存在错误，请确认！");
           return false;
         }
@@ -227,21 +249,18 @@ export default {
       }
     },
     // 发送验证码
-    async sendCode(ticket, randstr) {
-      var that = this.$refs.child;
+    async getCode(ticket, randstr) {
       const checkReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
       if (checkReg.test(this.verForm.bank_phone)) {
         const res = await smsPerson(this.verForm.bank_phone);
         if (res && res.code === 200) {
-          // this.$notify.success("验证码发送成功！");
           this.$message({
             message: "验证码发送成功！",
             type: "success",
           });
-          that.CountDowns();
+          this.countDowns2();
         }
       } else this.$message("手机号格式不正确！");
-      // this.$notify.warning("手机号格式不正确！");
     },
   },
 };
@@ -275,6 +294,13 @@ export default {
 .form {
   width: 900px;
 }
+.code-btn {
+  display: inline-block;
+  margin-left: 15px;
+}
+.send-btn {
+  width: 112px;
+}
 .form .el-input {
   width: 610px;
 }