Browse Source

修复:订单状态的筛选

master
科技小王子 2 weeks ago
parent
commit
a2d763dd42
  1. 2
      config/env.ts
  2. 15
      src/api/shop/shopMerchant/model/index.ts
  3. 1
      src/api/shop/shopOrder/model/index.ts
  4. 156
      src/pages/order/components/OrderList.tsx

2
config/env.ts

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

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

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

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

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

156
src/pages/order/components/OrderList.tsx

@ -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>
)} )}

Loading…
Cancel
Save