Story 003.002: 修复订单列表和详情页商品显示问题

Status

Completed

Story

As a 小程序用户， I want 在订单列表页和详情页正确显示商品信息， so that 能够清楚了解订单中的商品详情

Acceptance Criteria

在OrderCard组件中修复parseGoodsDetail函数，确保能正确解析JSON格式的商品详情 (mini/src/components/order/OrderCard/index.tsx:18-24)
在OrderDetailPage中修复parseGoodsDetail函数，确保能正确解析JSON格式的商品详情 (mini/src/pages/order-detail/index.tsx:134-140)
验证订单创建时goodsDetail字段是否正确保存商品信息（包括商品图片、名称、价格、规格等）
确保订单列表页和详情页中商品图片、名称、规格、价格等信息的完整显示 (mini/src/pages/order-list/index.tsx, mini/src/pages/order-detail/index.tsx:242-263)
增强JSON解析的错误处理，当解析失败时显示默认商品信息

Tasks / Subtasks

[x] 修复订单实体关联关系 (AC: 3)
- 在订单实体中添加与订单商品的一对多关联关系 packages/orders-module-mt/src/entities/order.mt.entity.ts
- 更新订单路由配置，包含订单商品关联查询 packages/orders-module-mt/src/routes/user/orders.mt.ts
- 更新订单Schema，添加订单商品关联信息 packages/orders-module-mt/src/schemas/order.mt.schema.ts
- 验证关联查询正确返回订单商品信息
- 修复测试工厂中订单商品创建方法，确保提供有效的goods_id字段
- 添加订单商品关联验证测试 packages/orders-module-mt/tests/integration/user-orders-routes.integration.test.ts
[x] 修复OrderCard组件中的商品详情解析 (AC: 1, 5)
- 更新组件使用新的orderGoods关联而不是解析goodsDetail字段 mini/src/components/order/OrderCard/index.tsx:18-24
- 增强错误处理，当关联数据为空时显示默认商品信息 mini/src/components/order/OrderCard/index.tsx:18-24
- 验证商品图片、名称、规格、价格等信息的正确显示 mini/src/components/order/OrderCard/index.tsx
- 验证组件测试通过
[x] 修复OrderDetailPage组件中的商品详情解析 (AC: 2, 5)
- 更新组件使用新的orderGoods关联而不是解析goodsDetail字段 mini/src/pages/order-detail/index.tsx:134-140
- 增强错误处理，当关联数据为空时显示默认商品信息 mini/src/pages/order-detail/index.tsx:134-140
- 验证商品图片、名称、规格、价格等信息的正确显示 mini/src/pages/order-detail/index.tsx:242-263
- 更新测试数据，确保测试通过
[x] 验证商品详情数据完整性 (AC: 3)
- 验证订单创建时订单商品关联关系是否正确建立 packages/orders-module-mt/src/services/order.mt.service.ts
- 检查商品图片、名称、价格、规格等字段的完整性 packages/orders-module-mt/src/entities/order.mt.entity.ts
- 添加数据验证测试 packages/orders-module-mt/tests/integration/user-orders-routes.integration.test.ts
[x] 优化订单列表页商品显示 (AC: 4)
- 确保订单列表页中商品图片、名称、规格、价格等信息的完整显示 mini/src/pages/order-list/index.tsx
- 验证商品信息布局和样式正确 mini/src/pages/order-list/index.tsx
- 验证页面集成功能正常工作
[x] 优化订单详情页商品显示 (AC: 4)
- 确保订单详情页中商品图片、名称、规格、价格等信息的完整显示 mini/src/pages/order-detail/index.tsx:242-263
- 验证商品信息布局和样式正确 mini/src/pages/order-detail/index.tsx:242-263
- 验证页面集成功能正常工作

Dev Notes

技术栈信息 [Source: architecture/tech-stack.md#现有技术栈维护]

前端框架: React 19.1.0 + TypeScript
小程序框架: Taro
状态管理: @tanstack/react-query (服务端状态管理)
HTTP客户端: 基于Hono Client的封装
API调用: RPC类型安全

项目结构信息 [Source: architecture/source-tree.md#实际项目结构]

小程序项目: mini/src/
订单组件: mini/src/components/order/
- OrderCard/index.tsx - 订单卡片组件
- OrderButtonBar/index.tsx - 订单操作按钮栏
订单页面:
- mini/src/pages/order-list/index.tsx - 订单列表页
- mini/src/pages/order-detail/index.tsx - 订单详情页
API客户端: mini/src/api.ts - RPC客户端配置

多租户订单模块信息 [Source: packages/orders-module-mt/src/entities/order.mt.entity.ts]

订单实体字段:
- goodsDetail: string - JSON格式存储的商品详情信息
- state: number - 订单状态
- payState: number - 支付状态

商品详情JSON结构:

{
goodsId: number,      // 商品ID
goodsName: string,    // 商品名称
goodsImg: string,     // 商品图片
price: number,        // 商品价格
num: number,          // 商品数量
spec: string          // 商品规格
}

订单状态定义 [Source: packages/orders-module-mt/src/entities/order.mt.entity.ts]

支付状态 (payState):
- 0: 未支付
- 2: 支付成功
- 5: 订单关闭
订单状态 (state):
- 0: 未发货
- 1: 已发货
- 2: 收货成功
- 3: 已退货

编码标准 [Source: architecture/coding-standards.md#关键集成规则]

RPC客户端架构: 直接使用导出的客户端实例
类型安全: 使用Hono的InferRequestType和InferResponseType
组件调用规范: 直接调用 api.$method 方法
错误处理: 完善的错误处理和用户反馈机制

测试要求 [Source: docs/architecture/testing-strategy.md#测试金字塔策略]

单元测试: 验证组件逻辑和函数功能
集成测试: 验证页面组件集成
测试框架: Jest (小程序) + Testing Library
测试位置: mini/tests/unit/ 目录
覆盖率要求: 核心业务逻辑 > 80%

Testing

小程序前端测试

测试标准 [Source: docs/architecture/testing-strategy.md#测试金字塔策略]

测试框架: Jest + Testing Library
测试类型: 组件单元测试 + 集成测试
测试位置: mini/tests/unit/ 目录
覆盖率要求: 核心业务逻辑 > 80%

具体测试要求

OrderCard组件测试 mini/tests/unit/components/order/OrderCard.test.tsx
- 验证parseGoodsDetail函数正确解析JSON格式商品详情
- 验证JSON解析失败时的错误处理
- 验证商品图片、名称、规格、价格等信息的正确显示
- 验证商品数量计算逻辑
OrderDetailPage组件测试 mini/tests/unit/pages/order-detail/order-detail.test.tsx
- 验证parseGoodsDetail函数正确解析JSON格式商品详情
- 验证JSON解析失败时的错误处理
- 验证商品图片、名称、规格、价格等信息的正确显示
- 验证页面状态正确更新
OrderListPage组件测试 mini/tests/unit/pages/order-list/order-list.test.tsx
- 验证订单列表页中商品信息的完整显示
- 验证商品信息布局和样式正确
- 验证页面集成功能

后端模块测试

测试标准 [Source: packages/orders-module-mt/package.json#测试配置]

测试框架: Vitest
测试类型: 单元测试 + 集成测试
测试位置: packages/orders-module-mt/tests/unit/ 目录
覆盖率要求: 核心业务逻辑 > 80%

具体测试要求

订单服务测试 packages/orders-module-mt/tests/unit/services/order.mt.service.test.ts
- 验证订单创建时goodsDetail字段正确保存商品信息
- 验证商品图片、名称、价格、规格等字段的完整性
- 验证数据验证逻辑

Change Log

Date	Version	Description	Author
2025-11-23	1.0	初始故事创建	Bob

Dev Agent Record

Agent Model Used

Claude Code (d8d-model)

Debug Log References

修复测试工厂中订单商品创建方法，确保提供有效的goods_id字段
修复价格类型不匹配问题（期望字符串"100.00"但实际返回数字100）
验证订单商品关联关系在订单查询中正常工作

Completion Notes List

✅ 后端架构重构完成：从goodsDetail字段解析改为使用一对多关联关系
✅ 订单实体更新：在OrderMt实体中添加了与OrderGoodsMt的一对多关联关系
✅ 路由配置更新：用户订单路由现在包含orderGoods关联查询
✅ Schema更新：OrderSchema中添加了完整的订单商品信息结构
✅ 测试验证：添加了订单商品关联验证测试，确保订单详情和列表查询包含订单商品信息
✅ 测试修复：修复了测试工厂中订单商品创建方法，确保提供有效的goods_id字段
✅ 完整测试通过：所有订单模块测试（14个测试）全部通过
✅ 图片URL Schema修复：统一订单商品图片URL字段为fullUrl，使用z.url()验证器，与文件模块保持一致
✅ 前端组件更新：更新OrderCard和OrderDetailPage组件使用新的orderGoods关联关系
✅ 前端测试修复：更新测试数据，确保前端测试通过
✅ 商品显示验证：验证订单列表页和详情页商品信息完整显示

File List

packages/orders-module-mt/src/entities/order.mt.entity.ts - 添加订单商品一对多关联关系
packages/orders-module-mt/src/routes/user/orders.mt.ts - 更新relations配置包含orderGoods关联
packages/orders-module-mt/src/schemas/order.mt.schema.ts - 添加订单商品关联Schema定义，修复图片URL字段
packages/orders-module-mt/src/schemas/order-goods.schema.ts - 统一图片URL字段为fullUrl
packages/orders-module-mt/tests/integration/user-orders-routes.integration.test.ts - 添加订单商品关联验证测试
packages/orders-module-mt/tests/factories/orders-test-factory.ts - 修复订单商品创建方法
mini/src/components/order/OrderCard/index.tsx - 更新使用orderGoods关联关系
mini/src/pages/order-detail/index.tsx - 更新使用orderGoods关联关系
mini/tests/unit/pages/order-detail/order-detail.test.tsx - 更新测试数据
mini/tests/unit/pages/order-detail/basic.test.tsx - 更新测试数据

架构决策

采用一对多关联关系：替代原有的goodsDetail字段解析，保持架构一致性
遵循商品模块模式：使用与商品轮播图相同的关联关系模式
通用CRUD路由配置：通过relations配置实现关联查询，无需修改路由逻辑
类型安全：通过TypeORM关联关系和Zod Schema确保类型安全
统一文件URL格式：使用fullUrl字段和z.url()验证器，与文件模块保持一致，确保完整的URL访问地址

QA Results

Results from QA Agent QA review of the completed story implementation

003.002.order-goods-display-fix.story.md 11 KB 履歴 Raw

Story 003.002: 修复订单列表和详情页商品显示问题

Status

Story

Acceptance Criteria

Tasks / Subtasks

Dev Notes

技术栈信息 [Source: architecture/tech-stack.md#现有技术栈维护]

项目结构信息 [Source: architecture/source-tree.md#实际项目结构]

多租户订单模块信息 [Source: packages/orders-module-mt/src/entities/order.mt.entity.ts]

订单状态定义 [Source: packages/orders-module-mt/src/entities/order.mt.entity.ts]

编码标准 [Source: architecture/coding-standards.md#关键集成规则]

测试要求 [Source: docs/architecture/testing-strategy.md#测试金字塔策略]

Testing

小程序前端测试

测试标准 [Source: docs/architecture/testing-strategy.md#测试金字塔策略]

具体测试要求

后端模块测试

测试标准 [Source: packages/orders-module-mt/package.json#测试配置]

具体测试要求

Change Log

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes List

File List

架构决策

QA Results

003.002.order-goods-display-fix.story.md 11 KB

履歴 Raw