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,21 +38,20 @@
 /* 纯文本模式样式 */
 .payment-countdown-text {
   color: #ff4757;
-  font-size: 12px;
   font-weight: 500;
-  
+
   /* 紧急状态 */
   &.urgent {
     color: #ff6b6b;
     animation: textPulse 2s infinite;
   }
-  
+
   /* 非常紧急状态 */
   &.critical {
     color: #ff4757;
     animation: textFlash 1s infinite;
   }
-  
+
   /* 过期状态 */
   &.expired {
     color: #95a5a6;
@@ -64,39 +61,39 @@
 
 /* 动画效果 */
 @keyframes pulse {
-  0% { 
+  0% {
-    opacity: 1; 
+    opacity: 1;
     transform: scale(1);
   }
-  50% { 
+  50% {
-    opacity: 0.8; 
+    opacity: 0.8;
     transform: scale(1.02);
   }
-  100% { 
+  100% {
-    opacity: 1; 
+    opacity: 1;
     transform: scale(1);
   }
 }
 
 @keyframes flash {
-  0% { 
+  0% {
-    opacity: 1; 
+    opacity: 1;
     transform: scale(1);
   }
-  25% { 
+  25% {
-    opacity: 0.7; 
+    opacity: 0.7;
     transform: scale(1.05);
   }
-  50% { 
+  50% {
-    opacity: 1; 
+    opacity: 1;
     transform: scale(1);
   }
-  75% { 
+  75% {
-    opacity: 0.7; 
+    opacity: 0.7;
     transform: scale(1.05);
   }
-  100% { 
+  100% {
-    opacity: 1; 
+    opacity: 1;
     transform: scale(1);
   }
 }
@@ -118,35 +115,30 @@
 /* 响应式调整 */
 @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;
-    
+
     .countdown-text {
       font-size: 14px;
       font-weight: 600;
     }
   }
-  
+
   .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/components/PaymentCountdown.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, Text } from '@tarojs/components';
-import { 
+import {
-  usePaymentCountdown, 
+  usePaymentCountdown,
-  formatCountdownText, 
+  formatCountdownText,
-  isUrgentCountdown, 
+  isUrgentCountdown,
-  isCriticalCountdown 
+  isCriticalCountdown
 } from '@/hooks/usePaymentCountdown';
 import './PaymentCountdown.scss';
 
@@ -64,7 +64,7 @@ const PaymentCountdown: React.FC<PaymentCountdownProps> = ({
   // 判断紧急程度
   const isUrgent = isUrgentCountdown(timeLeft);
   const isCritical = isCriticalCountdown(timeLeft);
-  
+
   // 格式化倒计时文本
   const countdownText = formatCountdownText(timeLeft, showSeconds);
   const fullText = `等待付款 ${countdownText}`;

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
@@ -394,7 +393,7 @@ function OrderList(props: OrderListProps) {
             }
             loadMoreText={
               list.length === 0 ? (
-                <Empty style={{ backgroundColor: 'transparent' }} description="您还没有订单哦"/>
+                <Empty style={{backgroundColor: 'transparent'}} description="您还没有订单哦"/>
               ) : (
                 <View className={'h-24'}>
                   没有更多了
@@ -416,18 +415,19 @@ function OrderList(props: OrderListProps) {
                                 e.stopPropagation();
                                 copyText(`${item.orderNo}`)
                               }}>{item.orderNo}</View>
-                        {/* 添加倒计时显示 - 列表页不实时更新 */}
+                      </View>
-                        <View className="order-list-countdown">
+                      <View className={`${getOrderStatusColor(item)} font-medium`}>
+                        {item.orderStatus === 0 && (
                           <PaymentCountdown
                             createTime={item.createTime}
                             payStatus={item.payStatus}
                             realTime={false}
                             showSeconds={false}
-                            mode="badge"
+                            mode="text"
                           />
-                        </View>
+                        )}
+                        <Text>{getOrderStatusText(item)}</Text>
                       </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>