feat(订单页面): 添加待支付订单的倒计时功能

实现待支付订单的支付倒计时显示，超时自动取消订单

@@ -88,6 +88,9 @@
               </button>
               </button>
             </div>
             </div>
           </div>
           </div>
+          <div v-if="order.status === 'NOT_PAY' && order.countdown" class="text-right mt-4">
+            <span class="text-red-500 text-sm font-medium">支付倒计时：{{ order.countdown }}</span>
+          </div>
         </FrostedGlass>
         </FrostedGlass>
       </van-list>
       </van-list>
 
 
@@ -187,7 +190,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router';
 import { useRoute, useRouter } from 'vue-router';
 import AppLayout from '@/components/layout/AppLayout.vue'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
@@ -292,6 +295,12 @@ const onLoad = async () => {
     status: selectedStatus.value
     status: selectedStatus.value
   });
   });
   if (res.code) {
   if (res.code) {
+    // 待支付订单倒计时
+    res.data.forEach(order => {
+      if (order.status === 'NOT_PAY') {
+        startCountdown(order);
+      }
+    })
     orders.value = [...orders.value, ...res.data];
     orders.value = [...orders.value, ...res.data];
     finished.value = res.data.length < limit.value;
     finished.value = res.data.length < limit.value;
     page.value = nextPage + 1;
     page.value = nextPage + 1;
@@ -372,4 +381,78 @@ const handleCancel = async (order) => {
         // on cancel
         // on cancel
       });
       });
 };
 };
+
+/**
+ * 待支付订单的支付倒计时功能
+ * @param {Object} order - 订单对象
+ */
+const startCountdown = (order) => {
+  // 清除可能存在的旧定时器
+  if (order._countdownTimer) {
+    clearInterval(order._countdownTimer);
+    order._countdownTimer = null;
+  }
+
+  // 计算剩余时间（毫秒）
+  const current_date = new Date(order.server_time);
+  const end_date = new Date(order.pay_deadline_time);
+  let time_left = end_date - current_date;
+
+  // 检查是否已过期
+  if (time_left <= 0) {
+    // 使用Vue的响应式API更新对象属性
+    order.status = 'CANCEL';
+    order.statusText = '已取消';
+    order.statusColor = 'text-gray-500';
+    order.countdown = '';
+    // 强制触发视图更新
+    orders.value = [...orders.value];
+    return;
+  }
+
+  // 更新倒计时显示
+  const updateCountdown = () => {
+    // 计算时、分、秒
+    const hours = Math.floor(time_left / 3600000);
+    const minutes = Math.floor((time_left % 3600000) / 60000);
+    const seconds = Math.floor((time_left % 60000) / 1000);
+
+    // 格式化显示
+    order.countdown = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+    // 强制触发视图更新
+    orders.value = [...orders.value];
+
+    // 减少剩余时间
+    time_left -= 1000;
+
+    // 检查是否已到期
+    if (time_left < 0) {
+      clearInterval(order._countdownTimer);
+      order._countdownTimer = null;
+
+      order.status = 'CANCEL';
+      order.statusText = '已取消';
+      order.statusColor = 'text-gray-500';
+      order.countdown = '';
+
+      // 强制触发视图更新
+      orders.value = [...orders.value];
+    }
+  };
+
+  // 立即执行一次更新
+  updateCountdown();
+
+  // 设置定时器，每秒更新一次
+  order._countdownTimer = setInterval(updateCountdown, 1000);
+
+  // 组件卸载时清除定时器
+  onUnmounted(() => {
+    if (order._countdownTimer) {
+      clearInterval(order._countdownTimer);
+      order._countdownTimer = null;
+    }
+  });
+};
 </script>
 </script>