developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

修复：订单状态的筛选

Browse Source
This commit is contained in:
赵忠林
2025-08-11 00:39:33 +08:00
parent afe54770a8
commit a2d763dd42
4 changed files with 71 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/env.ts
View File

@@ -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',
},

15
src/api/shop/shopMerchant/model/index.ts
View File

@@ -30,9 +30,9 @@ export interface ShopMerchant {
merchantCategoryTitle?: string;
// 经纬度
lngAndLat?: string;
//
//
lng?: string;
//
//
lat?: string;
// 所在省份
province?: string;
@@ -56,8 +56,16 @@ export interface ShopMerchant {
price?: string;
// 是否自营
ownStore?: number;
// 是否可以快递
canExpress?: string;
// 是否推荐
recommend?: number;
// 是否营业
isOn?: number;
//
startTime?: string;
//
endTime?: string;
// 是否需要审核
goodsReview?: number;
// 管理入口
@@ -83,8 +91,5 @@ export interface ShopMerchant {
*/
export interface ShopMerchantParam extends PageParam {
merchantId?: number;
phone?: string;
userId?: number;
shopType?: string;
keywords?: string;
}

1
src/api/shop/shopOrder/model/index.ts
View File

@@ -222,4 +222,5 @@ export interface ShopOrderParam extends PageParam {
userId?: number;
keywords?: string;
deliveryStatus?: number;
statusFilter?: number;
}

158
src/pages/order/components/OrderList.tsx
View File

@@ -19,42 +19,50 @@ const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({
overflowX: 'hidden',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
})
// 统一的订单状态标签配置，与后端 statusFilter 保持一致
const tabs = [
{
index: 0,
key: '全部',
title: '全部',
description: '所有订单'
description: '所有订单',
statusFilter: undefined // 不传statusFilter，显示所有订单
},
{
index: 1,
key: '待付款',
title: '待付款',
description: '等待付款的订单'
description: '等待付款的订单',
statusFilter: 0 // 对应后端：pay_status = false
},
{
index: 2,
key: '待发货',
title: '待发货',
description: '已付款待发货的订单'
description: '已付款待发货的订单',
statusFilter: 1 // 对应后端：pay_status = true AND delivery_status = 10
},
{
index: 3,
key: '待收货',
title: '待收货',
description: '已发货待收货的订单'
description: '已发货待收货的订单',
statusFilter: 3 // 对应后端：pay_status = true AND delivery_status = 20
},
{
index: 4,
key: '已完成',
title: '已完成',
description: '已完成的订单'
description: '已完成的订单',
statusFilter: 5 // 对应后端：order_status = 1
},
{
index: 5,
key: '已取消',
title: '已取消',
description: '已取消/退款的订单'
description: '已取消/退款的订单',
statusFilter: 6 // 对应后端：order_status = 6 (已退款)
}
]
@@ -76,7 +84,6 @@ function OrderList(props: OrderListProps) {
const [hasMore, setHasMore] = useState(true)
const [tapIndex, setTapIndex] = useState<string | number>(0)
const [loading, setLoading] = useState(false)
const [totalCount, setTotalCount] = useState(0)
// 获取订单状态文本
const getOrderStatusText = (order: ShopOrder) => {
@@ -90,7 +97,7 @@ function OrderList(props: OrderListProps) {
if (order.orderStatus === 7) return '客户端申请退款';
// 检查支付状态 (payStatus为boolean类型，false/0表示未付款，true/1表示已付款)
if (!order.payStatus) return '待付款';
if (!order.payStatus) return '等待买家付款';
// 已付款后检查发货状态
if (order.deliveryStatus === 10) return '待发货';
@@ -104,74 +111,43 @@ function OrderList(props: OrderListProps) {
return '未知状态';
};
// 检查订单是否为已取消状态
const isCancelledOrder = (order: ShopOrder) => {
// 已取消的订单状态：2已取消，3取消中，4退款申请中，6退款成功，7客户端申请退款
const cancelledStatuses = [2, 3, 4, 6, 7];
return cancelledStatuses.includes(order.orderStatus || 0);
};
// 根据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; // 显示所有订单，包括已取消的
}
});
// 获取订单状态颜色
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'; // 客户端申请退款
// 检查支付状态
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) => {
let params: ShopOrderParam = {};
// 添加用户ID过滤
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;
};
@@ -189,8 +165,11 @@ function OrderList(props: OrderListProps) {
statusParams,
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) {
// 为每个订单获取商品信息
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);
} else {
newList = [];
setHasMore(false);
}
setList(newList || []);
setPage(currentPage);
setTotalCount(res?.count || 0);
setLoading(false);
}).catch(error => {
} catch (error) {
console.error('加载订单失败:', error);
setLoading(false);
});
}
};
const reloadMore = async () => {
@@ -263,7 +239,7 @@ function OrderList(props: OrderListProps) {
Taro.showToast({
title: '订单已删除',
});
reload(true).then(); // 重新加载列表
reload(true); // 重新加载列表
props.onReload?.(); // 通知父组件刷新
} catch (error) {
console.error('取消订单失败:', error);
@@ -313,22 +289,6 @@ function OrderList(props: OrderListProps) {
}
</Tabs>
<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
target="scroll"
hasMore={hasMore}
@@ -354,11 +314,11 @@ function OrderList(props: OrderListProps) {
return (
<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'}>
<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
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 && (
<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>
</Space>
)}