refactor(order): 优化订单列表倒计时展示逻辑

- 更新 API 基础 URL 以适应开发环境
- 调整倒计时组件样式，移除冗余样式
- 优化订单列表中倒计时的显示逻辑
- 统一处理订单状态文本和颜色

config/env.ts

@@ -2,7 +2,7 @@
 export const ENV_CONFIG = {
   // 开发环境
   development: {
-    API_BASE_URL: 'https://cms-api.websoft.top/api',
+    API_BASE_URL: 'http://127.0.0.1:9200/api',
     APP_NAME: '开发环境',
     DEBUG: 'true',
   },

src/components/PaymentCountdown.scss

@@ -7,32 +7,30 @@
   color: white;
   padding: 4px 8px;
   border-radius: 12px;
-  font-size: 12px;
   font-weight: 500;
   box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
   margin-left: 8px;
 
   .countdown-text {
     color: white;
-    font-size: 12px;
     font-weight: 500;
   }
 
   /* 紧急状态（少于1小时） */
   &.urgent {
-    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+    color: #ff6b6b;
     animation: pulse 2s infinite;
   }
 
   /* 非常紧急状态（少于10分钟） */
   &.critical {
-    background: linear-gradient(135deg, #ff4757, #c44569);
+    color: #c44569;
     animation: flash 1s infinite;
   }
 
   /* 过期状态 */
   &.expired {
-    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+    color: #95a5a6;
     animation: none;
   }
 }
@@ -40,7 +38,6 @@
 /* 纯文本模式样式 */
 .payment-countdown-text {
   color: #ff4757;
-  font-size: 12px;
   font-weight: 500;
 
   /* 紧急状态 */
@@ -118,23 +115,19 @@
 /* 响应式调整 */
 @media (max-width: 375px) {
   .payment-countdown-badge {
-    font-size: 11px;
     padding: 3px 6px;
 
     .countdown-text {
-      font-size: 11px;
     }
   }
 
   .payment-countdown-text {
-    font-size: 11px;
   }
 }
 
 /* 详情页专用样式 */
 .order-detail-countdown {
   .payment-countdown-badge {
-    font-size: 14px;
     padding: 6px 12px;
     border-radius: 16px;
     margin: 8px 0;
@@ -146,7 +139,6 @@
   }
 
   .payment-countdown-text {
-    font-size: 14px;
     font-weight: 600;
   }
 }
@@ -154,17 +146,16 @@
 /* 列表页专用样式 */
 .order-list-countdown {
   .payment-countdown-badge {
-    font-size: 11px;
     padding: 2px 6px;
     border-radius: 10px;
     margin-left: 6px;
 
     .countdown-text {
-      font-size: 11px;
+
     }
   }
 
   .payment-countdown-text {
-    font-size: 11px;
+
   }
 }

src/user/order/components/OrderList.tsx

@@ -1,6 +1,6 @@
 import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image} from '@nutui/nutui-react-taro'
 import {useEffect, useState, CSSProperties} from "react";
-import {View} from '@tarojs/components'
+import {View, Text} from '@tarojs/components'
 import Taro from '@tarojs/taro';
 import {InfiniteLoading} from '@nutui/nutui-react-taro'
 import dayjs from "dayjs";
@@ -334,7 +334,6 @@ function OrderList(props: OrderListProps) {
   }, [props.searchParams?.statusFilter]); // 监听statusFilter变化
 
 
-
   return (
     <>
       <Tabs
@@ -416,19 +415,20 @@ function OrderList(props: OrderListProps) {
                                 e.stopPropagation();
                                 copyText(`${item.orderNo}`)
                               }}>{item.orderNo}</View>
-                        {/* 添加倒计时显示 - 列表页不实时更新 */}
-                        <View className="order-list-countdown">
+                      </View>
+                      <View className={`${getOrderStatusColor(item)} font-medium`}>
+                        {item.orderStatus === 0 && (
                           <PaymentCountdown
                             createTime={item.createTime}
                             payStatus={item.payStatus}
                             realTime={false}
                             showSeconds={false}
-                            mode="badge"
+                            mode="text"
                           />
+                        )}
+                        <Text>{getOrderStatusText(item)}</Text>
                       </View>
                     </View>
-                      <View className={`${getOrderStatusColor(item)} font-medium`}>{getOrderStatusText(item)}</View>
-                    </View>
                     <div
                       className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</div>