3 changed files with 249 additions and 26 deletions
@ -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 && ( |
|||
<Space> |
|||
<Button onClick={() => cancelOrder(item)}>取消订单</Button> |
|||
<Button type="primary">立即支付</Button> |
|||
</Space> |
|||
)} |
|||
``` |
|||
|
|||
**修复后**: |
|||
```typescript |
|||
{/* 待付款状态：显示取消订单和立即支付 */} |
|||
{(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && ( |
|||
<Space> |
|||
<Button onClick={() => cancelOrder(item)}>取消订单</Button> |
|||
<Button type="primary">立即支付</Button> |
|||
</Space> |
|||
)} |
|||
``` |
|||
|
|||
### 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. **实时更新**: 考虑实现订单状态的实时推送更新 |
|||
Loading…
Reference in new issue