HaniBlindBox/.kiro/specs/order-management-frontend/tasks.md

# Implementation Plan: 订单管理模块前端迁移

## Overview

本实现计划将订单管理模块从老项目（PHP ThinkPHP + Layui）迁移到新项目（ASP.NET Core + Vue 3 + Element Plus）。实现分为后端API补充和前端页面开发两个主要部分。

## 任务概览

| 阶段 | 任务数 | 预计工时 |
|------|--------|----------|
| 1. 后端API补充 | 4 | 2h |
| 2. Checkpoint - 后端API验证 | 1 | 0.5h |
| 3. 前端API层开发 | 2 | 2h |
| 4. 前端购买订单页面 | 4 | 4h |
| 5. 前端发货订单页面 | 5 | 6h |
| 6. 前端回收订单页面 | 3 | 3h |
| 7. 前端卡单订单页面 | 2 | 2h |
| 8. Checkpoint - 订单页面验证 | 1 | 0.5h |
| 9. 前端综合订单页面 | 3 | 3h |
| 10. 路由和权限配置 | 1 | 1h |
| 11. Checkpoint - 完整功能验证 | 1 | 0.5h |
| 12. 属性测试 | 5 | 2h |
| 13. Final Checkpoint | 1 | 0.5h |
| **总计** | **33** | **27h** |

---

## Tasks

- [ ] 1. 后端API补充
  - [ ] 1.1 添加发货订单导出API
    - 在 `OrderController.cs` 添加 `GET /shipping/export` 导出发货订单
    - 在 `IOrderService.cs` 添加 `ExportShippingOrdersAsync` 方法
    - 在 `OrderService.cs` 实现导出逻辑
    - _Requirements: 10.3_

  - [ ] 1.2 添加回收订单导出API
    - 在 `OrderController.cs` 添加 `GET /recovery/export` 导出回收订单
    - 在 `IOrderService.cs` 添加 `ExportRecoveryOrdersAsync` 方法
    - 在 `OrderService.cs` 实现导出逻辑
    - _Requirements: 10.4_

  - [ ] 1.3 添加发货订单统计API
    - 在 `ShippingOrderResponse` 添加统计字段或创建新的统计响应类
    - 在 `OrderController.cs` 添加 `GET /shipping/stats` 获取统计信息
    - 在 `OrderService.cs` 实现统计逻辑（总条数、总价值）
    - _Requirements: 10.2_

  - [ ] 1.4 扩展订单列表请求支持手机号搜索
    - 在 `OrderService.cs` 的 `ApplyOrderFilters` 方法中添加手机号过滤逻辑
    - 在 `ApplyShippingFilters` 方法中添加手机号过滤逻辑
    - _Requirements: 10.1_

- [ ] 2. Checkpoint - 后端API验证
  - 确保所有新增API编译通过
  - 使用Swagger测试API基本功能
  - 确保权限验证正常工作

- [ ] 3. 前端API层开发
  - [ ] 3.1 创建订单管理API模块
    - 创建 `src/api/business/order.ts`
    - 定义所有TypeScript接口（OrderListRequest, OrderListResponse, ShippingOrderResponse等）
    - 实现购买订单列表查询API调用 `getOrderList`
    - 实现订单详情查询API调用 `getOrderDetail`
    - 实现订单导出API调用 `exportOrders`
    - _Requirements: 8.1, 8.2_

  - [ ] 3.2 实现发货和回收订单API调用
    - 实现发货订单列表查询API调用 `getShippingOrders`
    - 实现发货订单详情查询API调用 `getShippingOrderDetail`
    - 实现发货操作API调用 `shipOrder`
    - 实现取消发货API调用 `cancelShippingOrder`
    - 实现发货订单导出API调用 `exportShippingOrders`
    - 实现发货订单统计API调用 `getShippingStats`
    - 实现回收订单列表查询API调用 `getRecoveryOrders`
    - 实现回收订单导出API调用 `exportRecoveryOrders`
    - 实现卡单订单列表查询API调用 `getStuckOrders`
    - _Requirements: 8.3, 8.4, 8.5_

- [ ] 4. 前端购买订单页面开发
  - [ ] 4.1 创建购买订单列表主页面
    - 创建 `src/views/business/order/buy.vue`
    - 实现页面布局（搜索区 + 表格区）
    - 集成搜索表单和表格组件
    - 实现分页逻辑
    - _Requirements: 1.1, 1.3_

  - [ ] 4.2 创建订单搜索表单组件
    - 创建 `src/views/business/order/components/OrderSearchForm.vue`
    - 实现用户ID/UID输入框
    - 实现手机号输入框
    - 实现订单号输入框
    - 实现时间范围选择器
    - 实现搜索和重置按钮
    - _Requirements: 1.2_

  - [ ] 4.3 创建订单表格组件
    - 创建 `src/views/business/order/components/BuyOrderTable.vue`
    - 实现表格列配置（用户信息、订单号、盒子信息、金额详情、时间）
    - 实现图片预览功能
    - 实现操作按钮（查看详情、导出）
    - _Requirements: 1.1, 1.4, 1.5_

  - [ ] 4.4 创建订单详情弹窗
    - 创建 `src/views/business/order/components/OrderDetailDialog.vue`
    - 实现订单基本信息展示
    - 实现奖品列表展示（按类型分组）
    - 实现奖品状态颜色区分
    - _Requirements: 2.1, 2.2, 2.3_

- [ ] 5. 前端发货订单页面开发
  - [ ] 5.1 创建发货订单列表主页面
    - 创建 `src/views/business/order/shipping.vue`
    - 实现页面布局（搜索区 + 统计区 + 表格区）
    - 集成搜索表单和表格组件
    - 实现统计信息展示（总条数、总价值）
    - 实现分页逻辑
    - _Requirements: 4.1, 4.3_

  - [ ] 5.2 创建发货订单搜索表单组件
    - 创建 `src/views/business/order/components/ShippingSearchForm.vue`
    - 实现用户ID/UID输入框
    - 实现手机号输入框
    - 实现发货单号输入框
    - 实现状态下拉选择（待发货/已发货/已签收/已取消）
    - 实现时间范围选择器
    - 实现搜索和重置按钮
    - _Requirements: 4.2_

  - [ ] 5.3 创建发货订单表格组件
    - 创建 `src/views/business/order/components/ShippingOrderTable.vue`
    - 实现表格列配置（用户信息、订单号、发货数量、总价格、运费、收货信息、状态、时间、备注）
    - 实现状态标签颜色区分
    - 实现操作按钮（查看详情、取消发货、导出）
    - _Requirements: 4.1, 4.4, 4.5, 4.6_

  - [ ] 5.4 创建发货订单详情弹窗
    - 创建 `src/views/business/order/components/ShippingDetailDialog.vue`
    - 实现订单信息展示（订单号、收件人、地址、状态、时间）
    - 实现奖品列表展示
    - 实现物流信息展示（已发货时显示）
    - 实现发货按钮（待发货状态显示）
    - _Requirements: 5.1, 5.2, 5.5_

  - [ ] 5.5 创建发货操作弹窗
    - 创建 `src/views/business/order/components/ShipDialog.vue`
    - 实现物流公司下拉选择
    - 实现快递单号输入框
    - 实现表单验证（物流公司和快递单号必填）
    - 实现提交逻辑
    - _Requirements: 5.3, 5.4, 5.6_

- [ ] 6. 前端回收订单页面开发
  - [ ] 6.1 创建回收订单列表主页面
    - 创建 `src/views/business/order/recovery.vue`
    - 实现页面布局（搜索区 + 表格区）
    - 集成搜索表单和表格组件
    - 实现分页逻辑
    - _Requirements: 6.1_

  - [ ] 6.2 创建回收订单表格组件
    - 创建 `src/views/business/order/components/RecoveryOrderTable.vue`
    - 实现表格列配置（用户信息、兑换金额、兑换数量、兑换时间）
    - 实现操作按钮（查看详情、导出）
    - _Requirements: 6.1, 6.2, 6.4_

  - [ ] 6.3 创建回收订单详情弹窗
    - 创建 `src/views/business/order/components/RecoveryDetailDialog.vue`
    - 实现回收订单基本信息展示
    - 实现回收奖品列表展示
    - _Requirements: 6.3_

- [ ] 7. 前端卡单订单页面开发
  - [ ] 7.1 创建卡单订单列表主页面
    - 创建 `src/views/business/order/stuck.vue`
    - 实现页面布局（搜索区 + 表格区）
    - 集成搜索表单和表格组件
    - 实现分页逻辑
    - 实现空状态提示
    - _Requirements: 3.1, 3.3_

  - [ ] 7.2 创建卡单订单表格组件
    - 创建 `src/views/business/order/components/StuckOrderTable.vue`
    - 复用购买订单表格结构
    - 实现操作按钮（查看详情）
    - _Requirements: 3.1, 3.2_

- [ ] 8. Checkpoint - 订单页面验证
  - 确保购买订单页面正常显示
  - 确保发货订单页面正常显示
  - 确保回收订单页面正常显示
  - 确保卡单订单页面正常显示
  - 测试搜索和分页功能
  - 测试各个弹窗的打开和关闭
  - 测试发货操作功能

- [ ] 9. 前端综合订单页面开发
  - [ ] 9.1 创建综合订单列表主页面
    - 创建 `src/views/business/order/list.vue`
    - 实现页面布局（搜索区 + 表格区）
    - 集成搜索表单和表格组件
    - 实现分页逻辑
    - _Requirements: 7.1_

  - [ ] 9.2 创建综合订单搜索表单组件
    - 创建 `src/views/business/order/components/OrderListSearchForm.vue`
    - 实现用户ID输入框
    - 实现手机号输入框
    - 实现订单号输入框
    - 实现支付状态下拉选择
    - 实现账号类型下拉选择（正常/推广/测试）
    - 实现账号状态下拉选择（正常/封号）
    - 实现时间范围选择器
    - 实现搜索和重置按钮
    - _Requirements: 7.2_

  - [ ] 9.3 创建综合订单表格组件
    - 创建 `src/views/business/order/components/OrderListTable.vue`
    - 实现表格列配置（订单号、用户信息、盒子详情、金额详情、抽奖情况、支付信息）
    - 实现操作按钮（查看详情、导出）
    - _Requirements: 7.1, 7.3, 7.4_

- [ ] 10. 路由和权限配置
  - [ ] 10.1 配置路由和权限
    - 在 `src/router/modules/business.ts` 添加订单管理路由配置
    - 配置购买订单路由 `/business/order/buy`
    - 配置发货订单路由 `/business/order/shipping`
    - 配置回收订单路由 `/business/order/recovery`
    - 配置卡单订单路由 `/business/order/stuck`
    - 配置综合订单路由 `/business/order/list`
    - 配置权限标识 `order:list`, `order:ship`, `order:export`
    - _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6_

- [ ] 11. Checkpoint - 完整功能验证
  - 确保所有页面正常访问
  - 测试完整的订单管理流程
  - 验证权限控制正常工作

- [ ] 12. 属性测试
  - [ ] 12.1 编写搜索参数传递属性测试
    - **Property 1: 搜索参数正确传递**
    - **Validates: Requirements 1.2, 3.2, 4.2, 6.2, 7.2**

  - [ ] 12.2 编写分页参数传递属性测试
    - **Property 2: 分页参数正确传递**
    - **Validates: Requirements 1.3**

  - [ ] 12.3 编写发货信息验证属性测试
    - **Property 3: 发货信息验证**
    - **Validates: Requirements 5.4**

  - [ ] 12.4 编写API响应格式一致性属性测试
    - **Property 4: API响应格式一致性**
    - **Validates: Requirements 8.2, 8.3, 8.4, 8.5, 8.6**

  - [ ] 12.5 编写错误响应格式一致性属性测试
    - **Property 5: 错误响应格式一致性**
    - **Validates: Requirements 8.7**

- [ ] 13. Final Checkpoint - 最终验证
  - 确保所有测试通过
  - 确保所有功能正常工作
  - 如有问题，询问用户

---

## 验收检查清单

### 功能验收
- [ ] 购买订单列表正常显示，支持搜索、分页
- [ ] 购买订单详情弹窗正常显示奖品明细
- [ ] 发货订单列表正常显示，支持搜索、分页
- [ ] 发货订单详情弹窗正常显示，支持发货操作
- [ ] 发货操作弹窗表单验证正常
- [ ] 取消发货功能正常（有二次确认）
- [ ] 回收订单列表正常显示，支持搜索、分页
- [ ] 回收订单详情弹窗正常显示
- [ ] 卡单订单列表正常显示，支持搜索、分页
- [ ] 综合订单列表正常显示，支持多条件搜索
- [ ] 订单导出功能正常
- [ ] 发货订单导出功能正常
- [ ] 回收订单导出功能正常

### 非功能验收
- [ ] 分页加载性能正常
- [ ] 图片懒加载生效
- [ ] 表单验证实时反馈
- [ ] 操作提示正确显示
- [ ] 危险操作有二次确认
- [ ] 属性测试全部通过

## Notes

- 每个Checkpoint确保增量验证
- 后端API需要先完成才能进行前端开发
- 属性测试验证通用正确性属性
- 发货操作是核心功能，需要仔细测试
- 所有任务均为必需任务，确保全面测试覆盖