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

- 更新 API 基础 URL 以适应开发环境
- 调整倒计时组件样式,移除冗余样式
- 优化订单列表中倒计时的显示逻辑
- 统一处理订单状态文本和颜色
This commit is contained in:
2025-08-19 13:49:00 +08:00
parent 6db0b5e03f
commit 2ddf0e9605
4 changed files with 49 additions and 58 deletions

View File

@@ -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 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"
/>
</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>