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

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

src/pages/user/components/UserOrder.tsx

@@ -1,19 +1,17 @@
-import {useEffect} from "react";
 import navTo from "@/utils/common";
 import {View, Text} from '@tarojs/components';
 import {Badge} from '@nutui/nutui-react-taro';
 import {ArrowRight, Wallet, Comment, Transit, Refund, Package} from '@nutui/icons-react-taro';
+import {useOrderStats} from "@/hooks/useOrderStats";
 
 function UserOrder() {
+  const { orderStats, refreshOrderStats } = useOrderStats();
 
-  const reload = () => {
-
+  // 处理长按刷新
+  const handleLongPress = () => {
+    refreshOrderStats();
   };
 
-  useEffect(() => {
-    reload()
-  }, []);
-
   return (
     <>
       <View className={'px-4 pb-2'}>
@@ -29,45 +27,90 @@ function UserOrder() {
         >
           <View className={'title-bar flex justify-between pt-2'}>
             <Text className={'title font-medium px-4'}>我的订单</Text>
-            <View className={'more flex items-center px-2'} onClick={() => navTo('/user/order/order', true)}>
+            <View
+              className={'more flex items-center px-2'}
+              onClick={() => navTo('/user/order/order', true)}
+              onLongPress={handleLongPress}
+            >
               <Text className={'text-xs text-gray-500'}>全部订单</Text>
               <ArrowRight color="#cccccc" size={12}/>
             </View>
           </View>
           <View className={'flex justify-around pb-1 mt-4'}>
-            <Badge value={8}>
-              <View className={'item flex justify-center flex-col items-center'}>
-                <Wallet size={26} className={'font-normal text-gray-500'}
-                        onClick={() => navTo('/user/order/order?statusFilter=0', true)}/>
+            {/* 待付款 */}
+            {orderStats.pending > 0 ? (
+              <Badge value={orderStats.pending} max={99}>
+                <View className={'item flex justify-center flex-col items-center'}>
+                  <Wallet size={26} className={'font-normal text-gray-500'}
+                          onClick={() => navTo('/user/order/order?statusFilter=0', true)}/>
+                  <Text className={'text-sm text-gray-600 py-1'}>待付款</Text>
+                </View>
+              </Badge>
+            ) : (
+              <View className={'item flex justify-center flex-col items-center'}
+                    onClick={() => navTo('/user/order/order?statusFilter=0', true)}>
+                <Wallet size={26} className={'font-normal text-gray-500'}/>
                 <Text className={'text-sm text-gray-600 py-1'}>待付款</Text>
               </View>
-            </Badge>
-            <Badge value={8}>
+            )}
+
+            {/* 待发货 */}
+            {orderStats.paid > 0 ? (
+              <Badge value={orderStats.paid} max={99}>
+                <View className={'item flex justify-center flex-col items-center'}
+                      onClick={() => navTo('/user/order/order?statusFilter=1', true)}>
+                  <Package size={26} className={'text-gray-500 font-normal'}/>
+                  <Text className={'text-sm text-gray-600 py-1'}>待发货</Text>
+                </View>
+              </Badge>
+            ) : (
               <View className={'item flex justify-center flex-col items-center'}
                     onClick={() => navTo('/user/order/order?statusFilter=1', true)}>
                 <Package size={26} className={'text-gray-500 font-normal'}/>
                 <Text className={'text-sm text-gray-600 py-1'}>待发货</Text>
               </View>
-            </Badge>
-            <Badge value={8}>
+            )}
+
+            {/* 待收货 */}
+            {orderStats.shipped > 0 ? (
+              <Badge value={orderStats.shipped} max={99}>
+                <View className={'item flex justify-center flex-col items-center'}
+                      onClick={() => navTo('/user/order/order?statusFilter=3', true)}>
+                  <Transit size={24} className={'text-gray-500 font-normal'}/>
+                  <Text className={'text-sm text-gray-600 py-1'}>待收货</Text>
+                </View>
+              </Badge>
+            ) : (
               <View className={'item flex justify-center flex-col items-center'}
                     onClick={() => navTo('/user/order/order?statusFilter=3', true)}>
                 <Transit size={24} className={'text-gray-500 font-normal'}/>
                 <Text className={'text-sm text-gray-600 py-1'}>待收货</Text>
               </View>
-            </Badge>
+            )}
+
+            {/* 已完成 - 不显示badge */}
             <View className={'item flex justify-center flex-col items-center'}
                   onClick={() => navTo('/user/order/order?statusFilter=5', true)}>
               <Comment size={24} className={'text-gray-500 font-normal'}/>
               <Text className={'text-sm text-gray-600 py-1'}>已完成</Text>
             </View>
-            <Badge value={8}>
+
+            {/* 退货/售后 */}
+            {orderStats.refund > 0 ? (
+              <Badge value={orderStats.refund} max={99}>
+                <View className={'item flex justify-center flex-col items-center'}
+                      onClick={() => navTo('/user/order/order?statusFilter=6', true)}>
+                  <Refund size={26} className={'font-normal text-gray-500'}/>
+                  <Text className={'text-sm text-gray-600 py-1'}>退货/售后</Text>
+                </View>
+              </Badge>
+            ) : (
               <View className={'item flex justify-center flex-col items-center'}
                     onClick={() => navTo('/user/order/order?statusFilter=6', true)}>
                 <Refund size={26} className={'font-normal text-gray-500'}/>
                 <Text className={'text-sm text-gray-600 py-1'}>退货/售后</Text>
               </View>
-            </Badge>
+            )}
           </View>
         </View>
       </View>