优化下单流程

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 && (
+  <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. **实时更新**: 考虑实现订单状态的实时推送更新

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) {
 
                   {/* 操作按钮 */}
                   <Space className={'btn flex justify-end'}>
-                    {item.payStatus && (
+                    {/* 待付款状态：显示取消订单和立即支付 */}
+                    {(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && (
                       <Space>
                         <Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>取消订单</Button>
                         <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button>
                       </Space>
                     )}
+                    {/* 待收货状态：显示确认收货 */}
                     {item.deliveryStatus === 20 && (
                       <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); confirmReceive(item)}}>确认收货</Button>
                     )}
+                    {/* 已完成状态：显示申请退款 */}
                     {item.orderStatus === 1 && (
                       <Button size={'small'} onClick={(e) => {e.stopPropagation(); console.log('申请退款')}}>申请退款</Button>
                     )}
+                    {/* 退款相关状态的按钮可以在这里添加 */}
                   </Space>
                 </Space>
               </Cell>

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) => {
+  const getOrderStatusText = (order: ShopOrder) => {
-    if (payStatus === 0) return '待付款';
+    // 优先检查订单状态
-    switch (orderStatus) {
+    if (order.orderStatus === 2) return '已取消';
-      case 0: return '未使用';
+    if (order.orderStatus === 3) return '取消中';
-      case 1: return '已完成';
+    if (order.orderStatus === 4) return '退款申请中';
-      case 2: return '已取消';
+    if (order.orderStatus === 5) return '退款被拒绝';
-      case 3: return '取消中';
+    if (order.orderStatus === 6) return '退款成功';
-      case 4: return '退款申请中';
+    if (order.orderStatus === 7) return '客户端申请退款';
-      case 5: return '退款被拒绝';
+
-      case 6: return '退款成功';
+    // 检查支付状态 (payStatus为boolean类型)
-      case 7: return '客户端申请退款';
+    if (!order.payStatus || order.payStatus === false) return '待付款';
-      default: 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 = () => {
       <CellGroup title="订单信息">
         <Cell title="订单编号" description={order.orderNo} />
         <Cell title="下单时间" description={dayjs(order.createTime).format('YYYY-MM-DD HH:mm:ss')} />
-        <Cell title="订单状态" description={getOrderStatusText(order.orderStatus, order.payStatus)} />
+        <Cell title="订单状态" description={getOrderStatusText(order)} />
       </CellGroup>
 
       <CellGroup title="商品信息">