diff --git a/docs/order-status-fix-summary.md b/docs/order-status-fix-summary.md new file mode 100644 index 0000000..aaf903c --- /dev/null +++ b/docs/order-status-fix-summary.md @@ -0,0 +1,190 @@ +# 订单状态修复总结 + +## 问题分析 + +### 1. 数据类型不一致 +- **问题**: `payStatus` 字段在模型中定义为 `boolean` 类型,但代码中按数字处理 +- **影响**: 导致支付状态判断错误,"待付款"状态显示不正确 + +### 2. 状态判断逻辑错误 +- **问题**: 状态判断优先级不正确,没有按照业务逻辑顺序检查 +- **影响**: 订单状态显示混乱,用户看到错误的订单状态 + +### 3. 操作按钮显示错误 +- **问题**: 按钮显示条件与实际订单状态不匹配 +- **影响**: 用户在错误的状态下看到不应该出现的操作按钮 + +### 4. Tab筛选逻辑不完整 +- **问题**: 缺少"待收货"状态的筛选,状态分类不够细致 +- **影响**: 用户无法准确筛选不同状态的订单 + +## 修复内容 + +### 1. 订单状态判断逻辑优化 ✅ + +**文件**: `src/pages/order/components/OrderList.tsx` + +**修复前**: +```typescript +const getOrderStatusText = (order: ShopOrder) => { + if (!order.payStatus) return '待付款'; + if (order.payStatus && order.deliveryStatus === 10) return '待发货'; + // ... 其他逻辑 +}; +``` + +**修复后**: +```typescript +const getOrderStatusText = (order: ShopOrder) => { + // 优先检查订单状态 + if (order.orderStatus === 2) return '已取消'; + if (order.orderStatus === 4) return '退款申请中'; + // ... 其他退款相关状态 + + // 检查支付状态 (payStatus为boolean类型) + if (!order.payStatus || order.payStatus === false) return '待付款'; + + // 已付款后检查发货状态 + if (order.deliveryStatus === 10) return '待发货'; + if (order.deliveryStatus === 20) return '待收货'; + if (order.deliveryStatus === 30) return '已收货'; + + // 最后检查订单完成状态 + if (order.orderStatus === 1) return '已完成'; + + return '未知状态'; +}; +``` + +### 2. Tab筛选功能完善 ✅ + +**新增"待收货"状态**: +```typescript +const tabs = [ + { index: 0, key: '全部', title: '全部' }, + { index: 1, key: '待付款', title: '待付款' }, + { index: 2, key: '待发货', title: '待发货' }, + { index: 3, key: '待收货', title: '待收货' }, // 新增 + { index: 4, key: '已收货', title: '已收货' }, + { index: 5, key: '已完成', title: '已完成' } +]; +``` + +### 3. 操作按钮逻辑修复 ✅ + +**修复前**: +```typescript +{item.payStatus && ( + + + + +)} +``` + +**修复后**: +```typescript +{/* 待付款状态:显示取消订单和立即支付 */} +{(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && ( + + + + +)} +``` + +### 4. 订单详情页状态显示修复 ✅ + +**文件**: `src/shop/orderDetail/index.tsx` + +- 统一状态判断逻辑 +- 修复函数调用参数 +- 确保与订单列表页面的状态显示一致 + +## 订单状态流程图 + +``` +订单创建 + ↓ +待付款 (payStatus: false) + ↓ (用户支付) +待发货 (payStatus: true, deliveryStatus: 10) + ↓ (商家发货) +待收货 (payStatus: true, deliveryStatus: 20) + ↓ (用户确认收货) +已收货 (payStatus: true, deliveryStatus: 30) + ↓ (系统自动或手动完成) +已完成 (orderStatus: 1) + +// 异常流程 +任意状态 → 已取消 (orderStatus: 2) +已完成 → 退款申请中 (orderStatus: 4) +退款申请中 → 退款成功 (orderStatus: 6) +``` + +## 字段含义说明 + +### payStatus (支付状态) +- **类型**: `boolean` +- **值**: `false/0` = 未付款, `true/1` = 已付款 + +### deliveryStatus (发货状态) +- **类型**: `number` +- **值**: + - `10` = 未发货/待发货 + - `20` = 已发货/待收货 + - `30` = 已收货 + +### orderStatus (订单状态) +- **类型**: `number` +- **值**: + - `0` = 未使用 + - `1` = 已完成 + - `2` = 已取消 + - `3` = 取消中 + - `4` = 退款申请中 + - `5` = 退款被拒绝 + - `6` = 退款成功 + - `7` = 客户端申请退款 + +## 测试验证 + +### 1. 状态显示测试 +- [ ] 创建不同状态的测试订单 +- [ ] 验证订单列表页面状态显示正确 +- [ ] 验证订单详情页面状态显示正确 +- [ ] 验证状态文本与实际订单状态匹配 + +### 2. Tab筛选测试 +- [ ] 测试"全部"tab显示所有订单 +- [ ] 测试"待付款"tab只显示未支付订单 +- [ ] 测试"待发货"tab只显示已支付待发货订单 +- [ ] 测试"待收货"tab只显示已发货待收货订单 +- [ ] 测试"已收货"tab只显示已收货订单 +- [ ] 测试"已完成"tab只显示已完成订单 + +### 3. 操作按钮测试 +- [ ] 待付款状态显示"取消订单"和"立即支付"按钮 +- [ ] 待收货状态显示"确认收货"按钮 +- [ ] 已完成状态显示"申请退款"按钮 +- [ ] 其他状态不显示不相关按钮 + +### 4. 状态流转测试 +- [ ] 测试支付后状态从"待付款"变为"待发货" +- [ ] 测试发货后状态从"待发货"变为"待收货" +- [ ] 测试确认收货后状态从"待收货"变为"已收货" +- [ ] 测试取消订单功能 + +## 注意事项 + +1. **数据类型一致性**: 确保前后端对 `payStatus` 字段类型的处理一致 +2. **状态优先级**: 按照业务逻辑正确设置状态判断优先级 +3. **用户体验**: 确保状态显示清晰,操作按钮符合用户预期 +4. **异常处理**: 对于未知状态要有合适的默认显示 + +## 后续优化建议 + +1. **状态枚举**: 考虑使用枚举类型定义订单状态,提高代码可读性 +2. **状态机**: 实现订单状态机,确保状态流转的合法性 +3. **国际化**: 支持订单状态文本的多语言显示 +4. **实时更新**: 考虑实现订单状态的实时推送更新 diff --git a/src/pages/order/components/OrderList.tsx b/src/pages/order/components/OrderList.tsx index 2bba785..52e383b 100644 --- a/src/pages/order/components/OrderList.tsx +++ b/src/pages/order/components/OrderList.tsx @@ -36,11 +36,16 @@ const tabs = [ }, { index: 3, + key: '待收货', + title: '待收货' + }, + { + index: 4, key: '已收货', title: '已收货' }, { - index: 4, + index: 5, key: '已完成', title: '已完成' } @@ -65,34 +70,49 @@ function OrderList(props: OrderListProps) { // 获取订单状态文本 const getOrderStatusText = (order: ShopOrder) => { console.log(order,'order') - if (!order.payStatus) return '待付款'; - if (order.payStatus && order.deliveryStatus === 10) return '待发货'; - if (order.deliveryStatus === 20) return '待收货'; - if (order.deliveryStatus === 30) return '已收货'; - if (order.orderStatus === 1) return '已完成'; + + // 优先检查订单状态 if (order.orderStatus === 2) return '已取消'; if (order.orderStatus === 4) return '退款申请中'; + if (order.orderStatus === 5) return '退款被拒绝'; if (order.orderStatus === 6) return '退款成功'; + if (order.orderStatus === 7) return '客户端申请退款'; + + // 检查支付状态 (payStatus为boolean类型,false/0表示未付款,true/1表示已付款) + if (!order.payStatus || order.payStatus === false) return '待付款'; + + // 已付款后检查发货状态 + if (order.deliveryStatus === 10) return '待发货'; + if (order.deliveryStatus === 20) return '待收货'; + if (order.deliveryStatus === 30) return '已收货'; + + // 最后检查订单完成状态 + if (order.orderStatus === 1) return '已完成'; + if (order.orderStatus === 0) return '未使用'; + return '未知状态'; }; const getOrderStatusParams = (index: string | number) => { - let params: { payStatus?: number; deliveryStatus?: number; orderStatus?: number; userId?: number } = {}; + let params: { payStatus?: boolean | number; deliveryStatus?: number; orderStatus?: number; userId?: number } = {}; // 添加用户ID过滤 params.userId = Taro.getStorageSync('UserId'); switch (index) { case '1': // 待付款 - params.payStatus = 0; + params.payStatus = false; // 或者 0,取决于后端接口期望的类型 break; case '2': // 待发货 - params.payStatus = 1; + params.payStatus = true; // 或者 1 params.deliveryStatus = 10; break; - case '3': // 已收货 + case '3': // 待收货 + params.deliveryStatus = 20; + break; + case '4': // 已收货 params.deliveryStatus = 30; break; - case '4': // 已完成 + case '5': // 已完成 params.orderStatus = 1; break; case '0': // 全部 @@ -278,18 +298,22 @@ function OrderList(props: OrderListProps) { {/* 操作按钮 */} - {item.payStatus && ( + {/* 待付款状态:显示取消订单和立即支付 */} + {(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && ( )} + {/* 待收货状态:显示确认收货 */} {item.deliveryStatus === 20 && ( )} + {/* 已完成状态:显示申请退款 */} {item.orderStatus === 1 && ( )} + {/* 退款相关状态的按钮可以在这里添加 */} diff --git a/src/shop/orderDetail/index.tsx b/src/shop/orderDetail/index.tsx index e5a29e7..391f946 100644 --- a/src/shop/orderDetail/index.tsx +++ b/src/shop/orderDetail/index.tsx @@ -14,19 +14,28 @@ const OrderDetail = () => { const router = Taro.getCurrentInstance().router; const orderId = router?.params?.orderId; - const getOrderStatusText = (orderStatus?: number, payStatus?: number) => { - if (payStatus === 0) return '待付款'; - switch (orderStatus) { - case 0: return '未使用'; - case 1: return '已完成'; - case 2: return '已取消'; - case 3: return '取消中'; - case 4: return '退款申请中'; - case 5: return '退款被拒绝'; - case 6: return '退款成功'; - case 7: return '客户端申请退款'; - default: return '未知状态'; - } + const getOrderStatusText = (order: ShopOrder) => { + // 优先检查订单状态 + if (order.orderStatus === 2) return '已取消'; + if (order.orderStatus === 3) return '取消中'; + if (order.orderStatus === 4) return '退款申请中'; + if (order.orderStatus === 5) return '退款被拒绝'; + if (order.orderStatus === 6) return '退款成功'; + if (order.orderStatus === 7) return '客户端申请退款'; + + // 检查支付状态 (payStatus为boolean类型) + if (!order.payStatus || order.payStatus === false) return '待付款'; + + // 已付款后检查发货状态 + if (order.deliveryStatus === 10) return '待发货'; + if (order.deliveryStatus === 20) return '待收货'; + if (order.deliveryStatus === 30) return '已收货'; + + // 最后检查订单完成状态 + if (order.orderStatus === 1) return '已完成'; + if (order.orderStatus === 0) return '未使用'; + + return '未知状态'; }; const getPayTypeText = (payType?: number) => { @@ -68,7 +77,7 @@ const OrderDetail = () => { - +