template-10550/docs/order-status-fix-summary.md

订单状态修复总结

问题分析

1. 数据类型不一致

• 问题: payStatus 字段在模型中定义为 boolean 类型，但代码中按数字处理
• 影响: 导致支付状态判断错误，"待付款"状态显示不正确

2. 状态判断逻辑错误

• 问题: 状态判断优先级不正确，没有按照业务逻辑顺序检查
• 影响: 订单状态显示混乱，用户看到错误的订单状态

3. 操作按钮显示错误

• 问题: 按钮显示条件与实际订单状态不匹配
• 影响: 用户在错误的状态下看到不应该出现的操作按钮

4. Tab筛选逻辑不完整

• 问题: 缺少"待收货"状态的筛选，状态分类不够细致
• 影响: 用户无法准确筛选不同状态的订单

修复内容

1. 订单状态判断逻辑优化 ✅

文件: src/pages/order/components/OrderList.tsx

修复前:

const getOrderStatusText = (order: ShopOrder) => {
  if (!order.payStatus) return '待付款';
  if (order.payStatus && order.deliveryStatus === 10) return '待发货';
  // ... 其他逻辑
};

修复后:

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筛选功能完善 ✅

新增"待收货"状态:

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. 操作按钮逻辑修复 ✅

修复前:

{item.payStatus && (
  <Space>
    <Button onClick={() => cancelOrder(item)}>取消订单</Button>
    <Button type="primary">立即支付</Button>
  </Space>
)}

修复后:

{/* 待付款状态：显示取消订单和立即支付 */}
{(!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. 实时更新: 考虑实现订单状态的实时推送更新