outsource/HaniBlindBox
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
71cd3b514b
HaniBlindBox/.kiro/specs/order-management-frontend/tasks.md
gpu 2462924061 333
2026-01-17 22:28:51 +08:00

12 KiB
Raw Blame History

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需要先完成才能进行前端开发
  • 属性测试验证通用正确性属性
  • 发货操作是核心功能，需要仔细测试
  • 所有任务均为必需任务，确保全面测试覆盖