feat(order): 添加支付倒计时组件并优化订单相关功能

- 新增 PaymentCountdown 组件用于显示支付倒计时
- 实现 usePaymentCountdown Hook 以支持倒计时逻辑
- 添加 useOrderStats Hook 用于获取订单统计信息
- 在订单列表和详情页面集成支付倒计时功能
- 优化订单状态显示和相关操作逻辑

src/shop/orderDetail/index.tsx

@@ -2,10 +2,11 @@ import {useEffect, useState} from "react";
 import {Cell, CellGroup, Image, Space, Button} from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import {ShopOrder} from "@/api/shop/shopOrder/model";
-import {getShopOrder} from "@/api/shop/shopOrder";
+import {getShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
 import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
 import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
 import dayjs from "dayjs";
+import PaymentCountdown from "@/components/PaymentCountdown";
 import './index.scss'
 
 const OrderDetail = () => {
@@ -14,6 +15,30 @@ const OrderDetail = () => {
   const router = Taro.getCurrentInstance().router;
   const orderId = router?.params?.orderId;
 
+  // 处理支付超时
+  const handlePaymentExpired = async () => {
+    if (!order) return;
+
+    try {
+      // 自动取消过期订单
+      await updateShopOrder({
+        ...order,
+        orderStatus: 2 // 已取消
+      });
+
+      // 更新本地状态
+      setOrder(prev => prev ? { ...prev, orderStatus: 2 } : null);
+
+      Taro.showToast({
+        title: '订单已自动取消',
+        icon: 'none',
+        duration: 2000
+      });
+    } catch (error) {
+      console.error('自动取消订单失败:', error);
+    }
+  };
+
   const getOrderStatusText = (order: ShopOrder) => {
     // 优先检查订单状态
     if (order.orderStatus === 2) return '已取消';
@@ -74,6 +99,20 @@ const OrderDetail = () => {
 
   return (
     <div className={'order-detail-page'}>
+      {/* 支付倒计时显示 - 详情页实时更新 */}
+      {!order.payStatus && order.orderStatus !== 2 && (
+        <div className="order-detail-countdown p-4 bg-red-50 border-b border-red-100">
+          <PaymentCountdown
+            createTime={order.createTime}
+            payStatus={order.payStatus}
+            realTime={true}
+            showSeconds={true}
+            mode="badge"
+            onExpired={handlePaymentExpired}
+          />
+        </div>
+      )}
+
       <CellGroup title="订单信息">
         <Cell title="订单编号" description={order.orderNo} />
         <Cell title="下单时间" description={dayjs(order.createTime).format('YYYY-MM-DD HH:mm:ss')} />