|
@ -19,42 +19,50 @@ const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({ |
|
|
overflowX: 'hidden', |
|
|
overflowX: 'hidden', |
|
|
boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', |
|
|
boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 统一的订单状态标签配置,与后端 statusFilter 保持一致
|
|
|
const tabs = [ |
|
|
const tabs = [ |
|
|
{ |
|
|
{ |
|
|
index: 0, |
|
|
index: 0, |
|
|
key: '全部', |
|
|
key: '全部', |
|
|
title: '全部', |
|
|
title: '全部', |
|
|
description: '所有订单' |
|
|
|
|
|
|
|
|
description: '所有订单', |
|
|
|
|
|
statusFilter: undefined // 不传statusFilter,显示所有订单
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
index: 1, |
|
|
index: 1, |
|
|
key: '待付款', |
|
|
key: '待付款', |
|
|
title: '待付款', |
|
|
title: '待付款', |
|
|
description: '等待付款的订单' |
|
|
|
|
|
|
|
|
description: '等待付款的订单', |
|
|
|
|
|
statusFilter: 0 // 对应后端:pay_status = false
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
index: 2, |
|
|
index: 2, |
|
|
key: '待发货', |
|
|
key: '待发货', |
|
|
title: '待发货', |
|
|
title: '待发货', |
|
|
description: '已付款待发货的订单' |
|
|
|
|
|
|
|
|
description: '已付款待发货的订单', |
|
|
|
|
|
statusFilter: 1 // 对应后端:pay_status = true AND delivery_status = 10
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
index: 3, |
|
|
index: 3, |
|
|
key: '待收货', |
|
|
key: '待收货', |
|
|
title: '待收货', |
|
|
title: '待收货', |
|
|
description: '已发货待收货的订单' |
|
|
|
|
|
|
|
|
description: '已发货待收货的订单', |
|
|
|
|
|
statusFilter: 3 // 对应后端:pay_status = true AND delivery_status = 20
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
index: 4, |
|
|
index: 4, |
|
|
key: '已完成', |
|
|
key: '已完成', |
|
|
title: '已完成', |
|
|
title: '已完成', |
|
|
description: '已完成的订单' |
|
|
|
|
|
|
|
|
description: '已完成的订单', |
|
|
|
|
|
statusFilter: 5 // 对应后端:order_status = 1
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
index: 5, |
|
|
index: 5, |
|
|
key: '已取消', |
|
|
key: '已取消', |
|
|
title: '已取消', |
|
|
title: '已取消', |
|
|
description: '已取消/退款的订单' |
|
|
|
|
|
|
|
|
description: '已取消/退款的订单', |
|
|
|
|
|
statusFilter: 6 // 对应后端:order_status = 6 (已退款)
|
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
|
|
|
|
|
@ -76,7 +84,6 @@ function OrderList(props: OrderListProps) { |
|
|
const [hasMore, setHasMore] = useState(true) |
|
|
const [hasMore, setHasMore] = useState(true) |
|
|
const [tapIndex, setTapIndex] = useState<string | number>(0) |
|
|
const [tapIndex, setTapIndex] = useState<string | number>(0) |
|
|
const [loading, setLoading] = useState(false) |
|
|
const [loading, setLoading] = useState(false) |
|
|
const [totalCount, setTotalCount] = useState(0) |
|
|
|
|
|
|
|
|
|
|
|
// 获取订单状态文本
|
|
|
// 获取订单状态文本
|
|
|
const getOrderStatusText = (order: ShopOrder) => { |
|
|
const getOrderStatusText = (order: ShopOrder) => { |
|
@ -90,7 +97,7 @@ function OrderList(props: OrderListProps) { |
|
|
if (order.orderStatus === 7) return '客户端申请退款'; |
|
|
if (order.orderStatus === 7) return '客户端申请退款'; |
|
|
|
|
|
|
|
|
// 检查支付状态 (payStatus为boolean类型,false/0表示未付款,true/1表示已付款)
|
|
|
// 检查支付状态 (payStatus为boolean类型,false/0表示未付款,true/1表示已付款)
|
|
|
if (!order.payStatus) return '待付款'; |
|
|
|
|
|
|
|
|
if (!order.payStatus) return '等待买家付款'; |
|
|
|
|
|
|
|
|
// 已付款后检查发货状态
|
|
|
// 已付款后检查发货状态
|
|
|
if (order.deliveryStatus === 10) return '待发货'; |
|
|
if (order.deliveryStatus === 10) return '待发货'; |
|
@ -104,74 +111,43 @@ function OrderList(props: OrderListProps) { |
|
|
return '未知状态'; |
|
|
return '未知状态'; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 检查订单是否为已取消状态
|
|
|
|
|
|
const isCancelledOrder = (order: ShopOrder) => { |
|
|
|
|
|
// 已取消的订单状态:2已取消,3取消中,4退款申请中,6退款成功,7客户端申请退款
|
|
|
|
|
|
const cancelledStatuses = [2, 3, 4, 6, 7]; |
|
|
|
|
|
return cancelledStatuses.includes(order.orderStatus || 0); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// 获取订单状态颜色
|
|
|
|
|
|
const getOrderStatusColor = (order: ShopOrder) => { |
|
|
|
|
|
// 优先检查订单状态
|
|
|
|
|
|
if (order.orderStatus === 2) return 'text-gray-500'; // 已取消
|
|
|
|
|
|
if (order.orderStatus === 4) return 'text-orange-500'; // 退款申请中
|
|
|
|
|
|
if (order.orderStatus === 5) return 'text-red-500'; // 退款被拒绝
|
|
|
|
|
|
if (order.orderStatus === 6) return 'text-green-500'; // 退款成功
|
|
|
|
|
|
if (order.orderStatus === 7) return 'text-orange-500'; // 客户端申请退款
|
|
|
|
|
|
|
|
|
// 根据tab筛选订单,排除已取消的订单
|
|
|
|
|
|
const filterOrdersByTab = (orders: OrderWithGoods[], tabIndex: number) => { |
|
|
|
|
|
const indexStr = String(tabIndex); |
|
|
|
|
|
|
|
|
|
|
|
return orders.filter(order => { |
|
|
|
|
|
switch (indexStr) { |
|
|
|
|
|
case '1': // 待付款
|
|
|
|
|
|
// 未付款且未取消的订单
|
|
|
|
|
|
return !order.payStatus && !isCancelledOrder(order); |
|
|
|
|
|
case '2': // 待发货
|
|
|
|
|
|
// 已付款但未发货且未取消的订单
|
|
|
|
|
|
return order.payStatus && order.deliveryStatus === 10 && !isCancelledOrder(order); |
|
|
|
|
|
case '3': // 待收货
|
|
|
|
|
|
// 已发货且未取消的订单
|
|
|
|
|
|
return order.deliveryStatus === 20 && !isCancelledOrder(order); |
|
|
|
|
|
case '4': // 已完成
|
|
|
|
|
|
// 已完成的订单
|
|
|
|
|
|
return order.orderStatus === 1; |
|
|
|
|
|
case '5': // 已取消
|
|
|
|
|
|
// 只显示已取消的订单
|
|
|
|
|
|
return isCancelledOrder(order); |
|
|
|
|
|
case '0': // 全部
|
|
|
|
|
|
default: |
|
|
|
|
|
return true; // 显示所有订单,包括已取消的
|
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
// 检查支付状态
|
|
|
|
|
|
if (!order.payStatus) return 'text-orange-500'; // 等待买家付款
|
|
|
|
|
|
|
|
|
|
|
|
// 已付款后检查发货状态
|
|
|
|
|
|
if (order.deliveryStatus === 10) return 'text-blue-500'; // 待发货
|
|
|
|
|
|
if (order.deliveryStatus === 20) return 'text-purple-500'; // 待收货
|
|
|
|
|
|
if (order.deliveryStatus === 30) return 'text-green-500'; // 已收货
|
|
|
|
|
|
|
|
|
|
|
|
// 最后检查订单完成状态
|
|
|
|
|
|
if (order.orderStatus === 1) return 'text-green-600'; // 已完成
|
|
|
|
|
|
if (order.orderStatus === 0) return 'text-gray-500'; // 未使用
|
|
|
|
|
|
|
|
|
|
|
|
return 'text-gray-600'; // 默认颜色
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 使用后端统一的 statusFilter 进行筛选
|
|
|
const getOrderStatusParams = (index: string | number) => { |
|
|
const getOrderStatusParams = (index: string | number) => { |
|
|
let params: ShopOrderParam = {}; |
|
|
let params: ShopOrderParam = {}; |
|
|
// 添加用户ID过滤
|
|
|
// 添加用户ID过滤
|
|
|
params.userId = Taro.getStorageSync('UserId'); |
|
|
params.userId = Taro.getStorageSync('UserId'); |
|
|
|
|
|
|
|
|
// 将数字索引转换为字符串进行匹配
|
|
|
|
|
|
const indexStr = String(index); |
|
|
|
|
|
|
|
|
|
|
|
switch (indexStr) { |
|
|
|
|
|
case '1': // 待付款
|
|
|
|
|
|
params.payStatus = 0; // 0表示未付款
|
|
|
|
|
|
break; |
|
|
|
|
|
case '2': // 待发货
|
|
|
|
|
|
params.payStatus = 1; // 1表示已付款
|
|
|
|
|
|
params.deliveryStatus = 10; // 10表示未发货
|
|
|
|
|
|
break; |
|
|
|
|
|
case '3': // 待收货
|
|
|
|
|
|
params.deliveryStatus = 20; // 20表示已发货
|
|
|
|
|
|
break; |
|
|
|
|
|
case '4': // 已完成
|
|
|
|
|
|
params.orderStatus = 1; // 1表示已完成
|
|
|
|
|
|
break; |
|
|
|
|
|
case '5': // 已取消
|
|
|
|
|
|
// 对于已取消的订单,我们获取所有数据然后在前端筛选
|
|
|
|
|
|
// 因为取消状态有多种:2已取消,3取消中,4退款申请中,6退款成功,7客户端申请退款
|
|
|
|
|
|
break; |
|
|
|
|
|
case '0': // 全部
|
|
|
|
|
|
default: |
|
|
|
|
|
// 全部订单,不添加额外的筛选条件
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
|
// 获取当前tab的statusFilter配置
|
|
|
|
|
|
const currentTab = tabs.find(tab => tab.index === Number(index)); |
|
|
|
|
|
if (currentTab && currentTab.statusFilter !== undefined) { |
|
|
|
|
|
params.statusFilter = currentTab.statusFilter; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
console.log(`Tab ${indexStr} (${tabs[Number(index)]?.title}) 筛选参数:`, params); |
|
|
|
|
|
|
|
|
console.log(`Tab ${index} (${currentTab?.title}) 筛选参数:`, params); |
|
|
return params; |
|
|
return params; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -189,8 +165,11 @@ function OrderList(props: OrderListProps) { |
|
|
statusParams, |
|
|
statusParams, |
|
|
searchConditions |
|
|
searchConditions |
|
|
}); |
|
|
}); |
|
|
pageShopOrder(searchConditions).then(async res => { |
|
|
|
|
|
let newList: OrderWithGoods[] | undefined = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
const res = await pageShopOrder(searchConditions); |
|
|
|
|
|
let newList: OrderWithGoods[] = []; |
|
|
|
|
|
|
|
|
if (res?.list && res?.list.length > 0) { |
|
|
if (res?.list && res?.list.length > 0) { |
|
|
// 为每个订单获取商品信息
|
|
|
// 为每个订单获取商品信息
|
|
|
const ordersWithGoods = await Promise.all( |
|
|
const ordersWithGoods = await Promise.all( |
|
@ -212,23 +191,20 @@ function OrderList(props: OrderListProps) { |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
// 合并数据
|
|
|
// 合并数据
|
|
|
const combinedList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods); |
|
|
|
|
|
|
|
|
|
|
|
// 根据当前tab筛选订单,排除已取消的订单
|
|
|
|
|
|
newList = filterOrdersByTab(combinedList, Number(tapIndex)); |
|
|
|
|
|
|
|
|
newList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods); |
|
|
setHasMore(true); |
|
|
setHasMore(true); |
|
|
} else { |
|
|
} else { |
|
|
newList = []; |
|
|
newList = []; |
|
|
setHasMore(false); |
|
|
setHasMore(false); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setList(newList || []); |
|
|
setList(newList || []); |
|
|
setPage(currentPage); |
|
|
setPage(currentPage); |
|
|
setTotalCount(res?.count || 0); |
|
|
|
|
|
setLoading(false); |
|
|
setLoading(false); |
|
|
}).catch(error => { |
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
console.error('加载订单失败:', error); |
|
|
console.error('加载订单失败:', error); |
|
|
setLoading(false); |
|
|
setLoading(false); |
|
|
}); |
|
|
|
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const reloadMore = async () => { |
|
|
const reloadMore = async () => { |
|
@ -263,7 +239,7 @@ function OrderList(props: OrderListProps) { |
|
|
Taro.showToast({ |
|
|
Taro.showToast({ |
|
|
title: '订单已删除', |
|
|
title: '订单已删除', |
|
|
}); |
|
|
}); |
|
|
reload(true).then(); // 重新加载列表
|
|
|
|
|
|
|
|
|
reload(true); // 重新加载列表
|
|
|
props.onReload?.(); // 通知父组件刷新
|
|
|
props.onReload?.(); // 通知父组件刷新
|
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.error('取消订单失败:', error); |
|
|
console.error('取消订单失败:', error); |
|
@ -313,22 +289,6 @@ function OrderList(props: OrderListProps) { |
|
|
} |
|
|
} |
|
|
</Tabs> |
|
|
</Tabs> |
|
|
<div style={getInfiniteUlStyle(props.showSearch)} id="scroll"> |
|
|
<div style={getInfiniteUlStyle(props.showSearch)} id="scroll"> |
|
|
{/* 筛选状态提示 */} |
|
|
|
|
|
{tapIndex !== 0 && ( |
|
|
|
|
|
<View className="filter-tip" style={{ |
|
|
|
|
|
padding: '8px 16px', |
|
|
|
|
|
backgroundColor: '#f0f8ff', |
|
|
|
|
|
borderLeft: '3px solid #007bff', |
|
|
|
|
|
margin: '8px 16px', |
|
|
|
|
|
borderRadius: '4px', |
|
|
|
|
|
fontSize: '12px', |
|
|
|
|
|
color: '#666' |
|
|
|
|
|
}}> |
|
|
|
|
|
当前筛选: {tabs[Number(tapIndex)]?.title} |
|
|
|
|
|
{totalCount >= 0 && ` (${totalCount}条)`} |
|
|
|
|
|
</View> |
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
<InfiniteLoading |
|
|
<InfiniteLoading |
|
|
target="scroll" |
|
|
target="scroll" |
|
|
hasMore={hasMore} |
|
|
hasMore={hasMore} |
|
@ -354,11 +314,11 @@ function OrderList(props: OrderListProps) { |
|
|
return ( |
|
|
return ( |
|
|
<Cell key={index} style={{padding: '16px'}} onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}> |
|
|
<Cell key={index} style={{padding: '16px'}} onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}> |
|
|
<Space direction={'vertical'} className={'w-full flex flex-col'}> |
|
|
<Space direction={'vertical'} className={'w-full flex flex-col'}> |
|
|
<div className={'order-no flex justify-between'}> |
|
|
|
|
|
<span className={'text-gray-600 font-bold text-sm'} |
|
|
|
|
|
onClick={(e) => {e.stopPropagation(); copyText(`${item.orderNo}`)}}>{item.orderNo}</span> |
|
|
|
|
|
<span className={'text-gray-600 font-medium'}>{getOrderStatusText(item)}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<View className={'order-no flex justify-between'}> |
|
|
|
|
|
<View className={'text-gray-600 font-bold text-sm'} |
|
|
|
|
|
onClick={(e) => {e.stopPropagation(); copyText(`${item.orderNo}`)}}>{item.orderNo}</View> |
|
|
|
|
|
<View className={`${getOrderStatusColor(item)} font-medium`}>{getOrderStatusText(item)}</View> |
|
|
|
|
|
</View> |
|
|
<div |
|
|
<div |
|
|
className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</div> |
|
|
className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</div> |
|
|
|
|
|
|
|
@ -404,7 +364,7 @@ function OrderList(props: OrderListProps) { |
|
|
{/* 待付款状态:显示取消订单和立即支付 */} |
|
|
{/* 待付款状态:显示取消订单和立即支付 */} |
|
|
{(!item.payStatus) && item.orderStatus !== 2 && ( |
|
|
{(!item.payStatus) && item.orderStatus !== 2 && ( |
|
|
<Space> |
|
|
<Space> |
|
|
<Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>删除订单</Button> |
|
|
|
|
|
|
|
|
<Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>取消订单</Button> |
|
|
<Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button> |
|
|
<Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button> |
|
|
</Space> |
|
|
</Space> |
|
|
)} |
|
|
)} |
|
|