Ver código fonte

增加倒计时功能

xiaohaizhao 2 meses atrás
pai
commit
3d3c811337
1 arquivos alterados com 38 adições e 11 exclusões
  1. 38 11
      pages/workOrder/modules/vCode.vue

+ 38 - 11
pages/workOrder/modules/vCode.vue

@@ -4,6 +4,10 @@
         <view class="slot-content">
             <view style="padding: 20rpx 0 20rpx 0;">
                 <up-code-input v-model="code" :maxlength="6" />
+                <view style="padding-top: 40rpx;">
+                    <up-button type="primary" :text="countdownTime == 60 ? '发送完工验证码' : countdownTime + 'S后可重新发送'"
+                        @click="handle" />
+                </view>
             </view>
         </view>
     </up-modal>
@@ -80,9 +84,27 @@ function completion(e) {
 }
 
 function openModal() {
-    getCode()
     showModal.value = true;
 }
+// 增加倒计时
+let countdown = null,
+    countdownTime = ref(60);
+
+function handle() {
+    if (countdownTime.value < 60) return;
+    countdownTime.value--;
+    getCode().then(() => {
+        countdown = setInterval(() => {
+            if (countdownTime.value > 0) {
+                countdownTime.value--;
+            } else {
+                clearInterval(countdown);
+                countdownTime.value = 60;
+            }
+        }, 1000);
+    });
+}
+
 
 // 获取客户确认码
 function getCode() {
@@ -94,17 +116,22 @@ function getCode() {
             }
         }).then(res => {
             console.log("获取验证码结果", res)
-            if(res.code != 1) return uni.showToast({
-                    title: res.msg,
-                    icon: 'none'
-                });
+            uni.showToast({
+                title: res.code == 1 ? '已发送到现场联系人' : res.msg,
+                icon: 'none'
+            });
+            if (res.code != 1) countdownTime.value = 60;
             resolve(res.code == 1);
-            if (res.code == 1 && res.data.msg.includes("手机验证码为")) {
-                uni.showToast({
-                    title: '客户确认码已发送至客户手机',
-                    icon: 'none'
-                });
-                code.value = res.data.msg.split(":")[1].trim();
+            try {
+                if (res.code == 1 && res.data.msg.includes("手机验证码为")) {
+                    uni.showToast({
+                        title: '客户确认码已发送至客户手机',
+                        icon: 'none'
+                    });
+                    code.value = res.data.msg.split(":")[1].trim();
+                }
+            } catch (error) {
+
             }
         })
     })