# 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 - [x] 1. 后端API补充 - [x] 1.1 添加发货订单导出API - 在 `OrderController.cs` 添加 `GET /shipping/export` 导出发货订单 - 在 `IOrderService.cs` 添加 `ExportShippingOrdersAsync` 方法 - 在 `OrderService.cs` 实现导出逻辑 - _Requirements: 10.3_ - [x] 1.2 添加回收订单导出API - 在 `OrderController.cs` 添加 `GET /recovery/export` 导出回收订单 - 在 `IOrderService.cs` 添加 `ExportRecoveryOrdersAsync` 方法 - 在 `OrderService.cs` 实现导出逻辑 - _Requirements: 10.4_ - [x] 1.3 添加发货订单统计API - 在 `ShippingOrderResponse` 添加统计字段或创建新的统计响应类 - 在 `OrderController.cs` 添加 `GET /shipping/stats` 获取统计信息 - 在 `OrderService.cs` 实现统计逻辑（总条数、总价值） - _Requirements: 10.2_ - [x] 1.4 扩展订单列表请求支持手机号搜索 - 在 `OrderService.cs` 的 `ApplyOrderFilters` 方法中添加手机号过滤逻辑 - 在 `ApplyShippingFilters` 方法中添加手机号过滤逻辑 - _Requirements: 10.1_ - [x] 2. Checkpoint - 后端API验证 - 确保所有新增API编译通过 - 使用Swagger测试API基本功能 - 确保权限验证正常工作 - [x] 3. 前端API层开发 - [x] 3.1 创建订单管理API模块 - 创建 `src/api/business/order.ts` - 定义所有TypeScript接口（OrderListRequest, OrderListResponse, ShippingOrderResponse等） - 实现购买订单列表查询API调用 `getOrderList` - 实现订单详情查询API调用 `getOrderDetail` - 实现订单导出API调用 `exportOrders` - _Requirements: 8.1, 8.2_ - [x] 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_ - [x] 4. 前端购买订单页面开发 - [x] 4.1 创建购买订单列表主页面 - 创建 `src/views/business/order/buy.vue` - 实现页面布局（搜索区 + 表格区） - 集成搜索表单和表格组件 - 实现分页逻辑 - _Requirements: 1.1, 1.3_ - [x] 4.2 创建订单搜索表单组件 - 创建 `src/views/business/order/components/OrderSearchForm.vue` - 实现用户ID/UID输入框 - 实现手机号输入框 - 实现订单号输入框 - 实现时间范围选择器 - 实现搜索和重置按钮 - _Requirements: 1.2_ - [x] 4.3 创建订单表格组件 - 创建 `src/views/business/order/components/BuyOrderTable.vue` - 实现表格列配置（用户信息、订单号、盒子信息、金额详情、时间） - 实现图片预览功能 - 实现操作按钮（查看详情、导出） - _Requirements: 1.1, 1.4, 1.5_ - [x] 4.4 创建订单详情弹窗 - 创建 `src/views/business/order/components/OrderDetailDialog.vue` - 实现订单基本信息展示 - 实现奖品列表展示（按类型分组） - 实现奖品状态颜色区分 - _Requirements: 2.1, 2.2, 2.3_ - [x] 5. 前端发货订单页面开发 - [x] 5.1 创建发货订单列表主页面 - 创建 `src/views/business/order/shipping.vue` - 实现页面布局（搜索区 + 统计区 + 表格区） - 集成搜索表单和表格组件 - 实现统计信息展示（总条数、总价值） - 实现分页逻辑 - _Requirements: 4.1, 4.3_ - [x] 5.2 创建发货订单搜索表单组件 - 创建 `src/views/business/order/components/ShippingSearchForm.vue` - 实现用户ID/UID输入框 - 实现手机号输入框 - 实现发货单号输入框 - 实现状态下拉选择（待发货/已发货/已签收/已取消） - 实现时间范围选择器 - 实现搜索和重置按钮 - _Requirements: 4.2_ - [x] 5.3 创建发货订单表格组件 - 创建 `src/views/business/order/components/ShippingOrderTable.vue` - 实现表格列配置（用户信息、订单号、发货数量、总价格、运费、收货信息、状态、时间、备注） - 实现状态标签颜色区分 - 实现操作按钮（查看详情、取消发货、导出） - _Requirements: 4.1, 4.4, 4.5, 4.6_ - [x] 5.4 创建发货订单详情弹窗 - 创建 `src/views/business/order/components/ShippingDetailDialog.vue` - 实现订单信息展示（订单号、收件人、地址、状态、时间） - 实现奖品列表展示 - 实现物流信息展示（已发货时显示） - 实现发货按钮（待发货状态显示） - _Requirements: 5.1, 5.2, 5.5_ - [x] 5.5 创建发货操作弹窗 - 创建 `src/views/business/order/components/ShipDialog.vue` - 实现物流公司下拉选择 - 实现快递单号输入框 - 实现表单验证（物流公司和快递单号必填） - 实现提交逻辑 - _Requirements: 5.3, 5.4, 5.6_ - [x] 6. 前端回收订单页面开发 - [x] 6.1 创建回收订单列表主页面 - 创建 `src/views/business/order/recovery.vue` - 实现页面布局（搜索区 + 表格区） - 集成搜索表单和表格组件 - 实现分页逻辑 - _Requirements: 6.1_ - [x] 6.2 创建回收订单表格组件 - 创建 `src/views/business/order/components/RecoveryOrderTable.vue` - 实现表格列配置（用户信息、兑换金额、兑换数量、兑换时间） - 实现操作按钮（查看详情、导出） - _Requirements: 6.1, 6.2, 6.4_ - [x] 6.3 创建回收订单详情弹窗 - 创建 `src/views/business/order/components/RecoveryDetailDialog.vue` - 实现回收订单基本信息展示 - 实现回收奖品列表展示 - _Requirements: 6.3_ - [x] 7. 前端卡单订单页面开发 - [x] 7.1 创建卡单订单列表主页面 - 创建 `src/views/business/order/stuck.vue` - 实现页面布局（搜索区 + 表格区） - 集成搜索表单和表格组件 - 实现分页逻辑 - 实现空状态提示 - _Requirements: 3.1, 3.3_ - [x] 7.2 创建卡单订单表格组件 - 创建 `src/views/business/order/components/StuckOrderTable.vue` - 复用购买订单表格结构 - 实现操作按钮（查看详情） - _Requirements: 3.1, 3.2_ - [x] 8. Checkpoint - 订单页面验证 - 确保购买订单页面正常显示 - 确保发货订单页面正常显示 - 确保回收订单页面正常显示 - 确保卡单订单页面正常显示 - 测试搜索和分页功能 - 测试各个弹窗的打开和关闭 - 测试发货操作功能 - [x] 9. 前端综合订单页面开发 - [x] 9.1 创建综合订单列表主页面 - 创建 `src/views/business/order/list.vue` - 实现页面布局（搜索区 + 表格区） - 集成搜索表单和表格组件 - 实现分页逻辑 - _Requirements: 7.1_ - [x] 9.2 创建综合订单搜索表单组件 - 创建 `src/views/business/order/components/OrderListSearchForm.vue` - 实现用户ID输入框 - 实现手机号输入框 - 实现订单号输入框 - 实现支付状态下拉选择 - 实现账号类型下拉选择（正常/推广/测试） - 实现账号状态下拉选择（正常/封号） - 实现时间范围选择器 - 实现搜索和重置按钮 - _Requirements: 7.2_ - [x] 9.3 创建综合订单表格组件 - 创建 `src/views/business/order/components/OrderListTable.vue` - 实现表格列配置（订单号、用户信息、盒子详情、金额详情、抽奖情况、支付信息） - 实现操作按钮（查看详情、导出） - _Requirements: 7.1, 7.3, 7.4_ - [x] 10. 路由和权限配置 - [x] 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_ - [x] 11. Checkpoint - 完整功能验证 - 确保所有页面正常访问 - 测试完整的订单管理流程 - 验证权限控制正常工作 - [x] 12. 属性测试 - [x] 12.1 编写搜索参数传递属性测试 - **Property 1: 搜索参数正确传递** - **Validates: Requirements 1.2, 3.2, 4.2, 6.2, 7.2** - [x] 12.2 编写分页参数传递属性测试 - **Property 2: 分页参数正确传递** - **Validates: Requirements 1.3** - [x] 12.3 编写发货信息验证属性测试 - **Property 3: 发货信息验证** - **Validates: Requirements 5.4** - [x] 12.4 编写API响应格式一致性属性测试 - **Property 4: API响应格式一致性** - **Validates: Requirements 8.2, 8.3, 8.4, 8.5, 8.6** - [x] 12.5 编写错误响应格式一致性属性测试 - **Property 5: 错误响应格式一致性** - **Validates: Requirements 8.7** - [x] 13. Final Checkpoint - 最终验证 - 确保所有测试通过 - 确保所有功能正常工作 - 如有问题，询问用户 --- ## 验收检查清单 ### 功能验收 - [x] 购买订单列表正常显示，支持搜索、分页 - [x] 购买订单详情弹窗正常显示奖品明细 - [x] 发货订单列表正常显示，支持搜索、分页 - [x] 发货订单详情弹窗正常显示，支持发货操作 - [x] 发货操作弹窗表单验证正常 - [x] 取消发货功能正常（有二次确认） - [x] 回收订单列表正常显示，支持搜索、分页 - [ ] 回收订单详情弹窗正常显示 - [ ] 卡单订单列表正常显示，支持搜索、分页 - [ ] 综合订单列表正常显示，支持多条件搜索 - [ ] 订单导出功能正常 - [ ] 发货订单导出功能正常 - [ ] 回收订单导出功能正常 ### 非功能验收 - [ ] 分页加载性能正常 - [ ] 图片懒加载生效 - [ ] 表单验证实时反馈 - [ ] 操作提示正确显示 - [ ] 危险操作有二次确认 - [ ] 属性测试全部通过 ## Notes - 每个Checkpoint确保增量验证 - 后端API需要先完成才能进行前端开发 - 属性测试验证通用正确性属性 - 发货操作是核心功能，需要仔细测试 - 所有任务均为必需任务，确保全面测试覆盖