fix: 弹窗添加倒计时

pages/index/cleanPlan.vue

@@ -134,6 +134,27 @@
         </view>
       </view>
     </u-popup>
+
+    <!-- 添加 u-popup 组件 -->
+    <u-popup
+      v-model="taskPopup"
+      mode="center"
+      :customStyle="{ marginTop: '400rpx' }"
+      @change="popupChange"
+    >
+      <view class="custom-popup">
+        <view class="popup-title">{{ popupTitle }}</view>
+        <view class="popup-content">{{ popupContent }}</view>
+        <view class="popup-buttons">
+          <view class="popup-button cancel-button" @click="handleCancel">{{
+            cancelText
+          }}</view>
+          <view class="popup-button confirm-button" @click="handleConfirm">{{
+            confirmText
+          }}</view>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -192,6 +213,16 @@ export default {
         areas: [],
       },
       areaRes: {},
+
+      taskPopup: false,
+      popupTitle: "",
+      popupContent: "",
+      cancelText: "异常上报",
+      confirmText: "确定",
+      countdownTimer: null,
+      currentSeconds: 5,
+      currentItem: null,
+      currentParams: null,
     };
   },
 
@@ -321,34 +352,7 @@ export default {
         });
         return;
       } else {
-        uni.showModal({
-          title: item.aeraNmae,
-          content: "任务完成后请关闭弹窗并刷卡，如卡片异常请进行上报",
-          confirmText: "确定",
-          cancelText: "异常上报",
-          confirmColor: "#333333",
-          cancelColor: "#007aff",
-          showCancel: true,
-          success: function (res) {
-            if (res.confirm) {
-              // 点击确定
-              // console.log("点击确定");
-
-              return;
-            } else {
-              // 点击异常上报
-              // console.log("params", params);
-              uni.navigateTo({
-                url: "/pages/index/list?params=" + params,
-              });
-            }
-          },
-        });
-
-        // 未保洁
-        // uni.navigateTo({
-        //   url: "/pages/index/list?params=" + params,
-        // });
+        this.showTaskPopup(item, params);
       }
     },
 
@@ -393,6 +397,67 @@ export default {
         }
       }
     },
+
+    popupChange(e) {
+      if (!e.show && this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+        this.countdownTimer = null;
+      }
+    },
+
+    handleCancel() {
+      // 销毁定时器
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+        this.countdownTimer = null;
+      }
+      
+      this.taskPopup = false;
+      uni.navigateTo({
+        url: "/pages/index/list?params=" + this.currentParams,
+      });
+    },
+
+    handleConfirm() {
+      // 销毁定时器
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+        this.countdownTimer = null;
+      }
+      
+      this.taskPopup = false;
+      // 在这里添加确认后的业务逻辑
+    },
+
+    showTaskPopup(item, params) {
+      this.popupTitle = item.aeraNmae;
+      this.popupContent = "任务完成后请关闭弹窗并刷卡，如卡片异常请进行上报";
+      this.currentItem = item;
+      this.currentParams = params;
+      this.currentSeconds = 5;
+      this.confirmText = `确定(${this.currentSeconds}s)`;
+
+      this.taskPopup = true;
+
+      this.startCountdown();
+    },
+
+    startCountdown() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+
+      this.countdownTimer = setInterval(() => {
+        this.currentSeconds--;
+        this.confirmText = `确定(${this.currentSeconds}s)`;
+
+        if (this.currentSeconds <= 0) {
+          clearInterval(this.countdownTimer);
+          this.countdownTimer = null;
+          this.taskPopup = false;
+        }
+      }, 1000);
+    },
   },
 };
 </script>
@@ -668,4 +733,47 @@ page {
   margin-top: -500rpx !important;
   background-color: transparent !important;
 }
+
+.custom-popup {
+  width: 580rpx;
+  background-color: #fff;
+  border-radius: 8rpx;
+  overflow: hidden;
+
+  .popup-title {
+    font-size: 36rpx;
+    font-weight: 500;
+    text-align: center;
+    padding: 30rpx 0 40rpx;
+  }
+
+  .popup-content {
+    font-size: 30rpx;
+    color: #999;
+    padding: 0 40rpx 40rpx;
+    text-align: center;
+  }
+
+  .popup-buttons {
+    display: flex;
+    border-top: 1rpx solid #e5e5e5;
+
+    .popup-button {
+      flex: 1;
+      height: 90rpx;
+      line-height: 90rpx;
+      text-align: center;
+      font-size: 36rpx;
+    }
+
+    .cancel-button {
+      color: #007aff;
+      border-right: 1rpx solid #f0efef;
+    }
+
+    .confirm-button {
+      color: #333333;
+    }
+  }
+}
 </style>