mini-starter/docs/stories/001.015.order-submit-ui-refactor.story.md

Story 001.015: 订单提交页UI重构

Status

Development In Progress

Story

As a 用户， I want 查看与tcb-shop-demo设计一致的订单提交页面， so that 我可以获得统一的视觉体验和流畅的订单提交流程

Acceptance Criteria

1. 页面结构重构：参照demo订单确认页结构，重新组织页面布局，包含收货地址区域、商品列表区域、支付详情区域、底部提交栏等
2. 收货地址区域：实现地址卡片组件，包含收货人信息、地址信息，支持地址选择功能
3. 商品列表区域：重新设计商品列表布局，包含商品图片、商品标题、规格信息、价格、数量等
4. 支付详情区域：实现商品总额、运费、实付款等金额计算和显示
5. 底部提交栏：重构底部提交栏，包含实付款显示和提交订单按钮，应用demo设计规范
6. 样式集成：应用tcb-shop-demo订单确认页设计规范，创建专用CSS文件
7. 功能完整性：保持现有订单提交功能，包括地址选择、订单创建、支付跳转等

Tasks / Subtasks

• 重构订单提交页整体布局结构 (AC: 1)
  • 分析tcb-shop-demo订单确认页结构 tcb-shop-demo/pages/order/order-confirm/index.wxml
  • 重新组织页面布局，包含收货地址、商品列表、支付详情、底部提交栏等区域
  • 应用tcb-shop-demo页面容器类名和结构
  • 更新订单提交页面 mini/src/pages/order-submit/index.tsx [对照: tcb-shop-demo/pages/order/order-confirm/index.wxml]
• 实现收货地址区域重构 (AC: 2)
  • 重新设计收货地址区域布局，参照demo地址卡片设计
  • 实现地址卡片组件，包含收货人信息、地址信息显示
  • 支持地址选择功能，保持现有地址管理集成
  • 应用tcb-shop-demo收货地址区域设计规范
  • 更新收货地址区域 mini/src/pages/order-submit/index.tsx [对照: tcb-shop-demo/pages/order/order-confirm/index.wxml 中的address-card部分]
• 重构商品列表区域 (AC: 3)
  • 重新设计商品列表布局，参照demo商品列表结构
  • 实现商品图片、商品标题、规格信息、价格、数量显示
  • 应用tcb-shop-demo商品列表设计规范
  • 保持现有商品数据集成和购物车数据来源
  • 更新商品列表区域 mini/src/pages/order-submit/index.tsx [对照: tcb-shop-demo/pages/order/order-confirm/index.wxml 中的goods-wrapper部分]
• 实现支付详情区域 (AC: 4)
  • 重新设计支付详情区域布局，参照demo支付详情结构
  • 实现商品总额、运费、实付款等金额计算和显示
  • 应用tcb-shop-demo支付详情设计规范
  • 保持现有金额计算逻辑
  • 更新支付详情区域 mini/src/pages/order-submit/index.tsx [对照: tcb-shop-demo/pages/order/order-confirm/index.wxml 中的pay-detail部分]
• 重构底部提交栏 (AC: 5)
  • 重构底部提交栏布局，参照demo底部提交栏设计
  • 实现实付款显示和提交订单按钮
  • 应用tcb-shop-demo底部提交栏设计规范
  • 保持现有订单提交功能
  • 更新底部提交栏 mini/src/pages/order-submit/index.tsx [对照: tcb-shop-demo/pages/order/order-confirm/index.wxml 中的wx-pay-cover部分]
• 创建专用CSS样式文件 (AC: 6)
  • 创建专用CSS文件 mini/src/pages/order-submit/index.css [对照: tcb-shop-demo/pages/order/order-confirm/index.wxss]
  • 应用tcb-shop-demo订单确认页设计规范
  • 集成tcb-theme.css主题样式
  • 保持与现有Tailwind CSS的兼容性
• 功能完整性测试 (AC: 7)
  • 验证地址选择功能正常工作
  • 验证订单创建功能正常工作
  • 验证支付跳转功能正常工作
  • 验证所有现有功能无回归
• 单元测试编写
  • 创建单元测试文件 mini/tests/unit/pages/order-submit/basic.test.tsx [对照: mini/tests/unit/pages/order-detail/basic.test.tsx]
  • 测试页面渲染和基本功能
  • 测试地址选择功能
  • 测试订单提交功能
  • 测试样式应用

Dev Notes

技术栈信息 [Source: architecture/tech-stack.md]

• 前端框架: React 19.1.0
• 小程序框架: Taro
• 样式系统: Tailwind CSS 4.1.11 + tcb-theme.css
• 状态管理: React Query 5.83.0
• API客户端: Hono RPC客户端

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

• 目标文件: mini/src/pages/order-submit/index.tsx
• 样式文件: mini/src/pages/order-submit/index.css
• 测试文件: mini/tests/unit/pages/order-submit/basic.test.tsx
• API客户端: mini/src/api.ts

现有订单提交页分析

当前订单提交页 (mini/src/pages/order-submit/index.tsx) 已实现：

• 收货地址选择和管理
• 商品列表显示（从购物车或结算页面获取）
• 订单金额计算
• 订单提交和支付跳转功能
• 使用TDesign组件：Card、Button、Image、Navbar

tcb-shop-demo订单确认页设计规范

基于 tcb-shop-demo/pages/order/order-confirm/index.wxml 和 tcb-shop-demo/pages/order/order-confirm/index.wxss 分析：

• 页面结构: 使用 .order-sure 容器，包含地址卡片、商品列表、支付详情、金额区域、底部提交栏
• 收货地址区域: 使用 address-card 组件（需要分析具体实现）
• 商品列表区域: 使用 .goods-wrapper 布局，包含商品图片、商品内容、商品右侧信息
• 支付详情区域: 使用 .pay-detail 区域，显示商品总额等
• 金额区域: 使用 .amount-wrapper 区域，显示商品数量和总价
• 底部提交栏: 使用 .wx-pay-cover 固定底部，包含价格显示和提交按钮

样式设计规范

• 页面背景色: #f6f6f6
• 容器背景色: #ffffff
• 主色调: #fa4126 (按钮和价格)
• 字体颜色: #333333 (主要文字), #666666 (次要文字), #999999 (辅助文字)
• 按钮样式: 圆角40rpx，高度80rpx，背景色#fa4126，白色文字
• 商品图片尺寸: 176rpx × 176rpx
• 底部提交栏高度: 112rpx (包含安全区域)

组件依赖

• 现有组件: Navbar、Card、Button、Image (已存在)
• API集成: deliveryAddressClient、orderClient (已存在)
• 状态管理: useAuth、useCart (已存在)

功能保持要求

• 保持现有地址选择和管理功能
• 保持现有订单创建和支付跳转功能
• 保持现有购物车数据集成
• 保持现有错误处理和加载状态

Testing

测试标准 [Source: architecture/testing-strategy.md]

• 测试框架: Vitest + Testing Library
• 测试位置: mini/tests/unit/pages/order-submit/basic.test.tsx
• 覆盖率目标: ≥ 80%
• 测试类型: 单元测试

测试要求

• 测试页面渲染和基本功能
• 测试地址选择功能
• 测试订单提交功能
• 测试样式应用
• 测试错误处理

测试文件位置

• mini/tests/unit/pages/order-submit/basic.test.tsx

Change Log

Date	Version	Description	Author
2025-11-22	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

Agent Model Used

James (Developer Agent)

Implementation Summary

已完成所有主要UI重构任务：

1. 重构订单提交页整体布局结构

   • 创建了专用CSS文件，应用tcb-shop-demo设计规范
   • 重新组织了页面布局结构，包含收货地址、商品列表、支付详情、金额区域、底部提交栏
   • 应用了tcb-shop-demo的页面容器类名和结构

2. 实现收货地址区域重构

   • 重新设计了收货地址区域布局，参照demo地址卡片设计
   • 实现了地址卡片组件，包含收货人信息、地址信息显示
   • 支持地址选择功能，保持现有地址管理集成
   • 应用了tcb-shop-demo收货地址区域设计规范

3. 重构商品列表区域

   • 重新设计了商品列表布局，参照demo商品列表结构
   • 实现了商品图片、商品标题、规格信息、价格、数量显示
   • 应用了tcb-shop-demo商品列表设计规范
   • 保持现有商品数据集成

4. 实现支付详情区域

   • 重新设计了支付详情区域布局，参照demo支付详情结构
   • 实现了商品总额、运费、实付款等金额计算和显示
   • 应用了tcb-shop-demo支付详情设计规范

5. 重构底部提交栏

   • 重构了底部提交栏布局，参照demo底部提交栏设计
   • 实现了实付款显示和提交订单按钮
   • 应用了tcb-shop-demo底部提交栏设计规范

6. 创建专用CSS样式文件

   • 创建了专用CSS文件 mini/src/pages/order-submit/index.css
   • 应用了tcb-shop-demo订单确认页设计规范
   • 集成了tcb-theme.css主题样式
   • 保持了与现有Tailwind CSS的兼容性

Key Implementation Details

• 页面结构: 使用 .order-sure 容器，包含地址卡片、商品列表、支付详情、金额区域、底部提交栏
• 样式规范: 应用tcb-shop-demo的设计规范，包括颜色、字体、间距等
• 功能保持: 保持现有订单提交功能，包括地址选择、订单创建、支付跳转
• 地址卡片: 优化了地址显示布局，添加了默认地址标签样式
• 商品列表: 采用flex布局，包含商品图片、标题、规格、价格、数量
• 支付详情: 显示商品总额、运费、实付款等金额信息
• 底部提交栏: 包含实付款显示和提交订单按钮，支持禁用状态

Debug Log References

无

Completion Notes List

• 创建专用CSS样式文件 mini/src/pages/order-submit/index.css
• 重构订单提交页整体布局结构 mini/src/pages/order-submit/index.tsx
• 应用tcb-shop-demo页面容器类名和结构
• 重构收货地址区域，优化地址卡片显示
• 重构商品列表区域，应用demo商品列表设计
• 实现支付详情区域，显示金额计算信息
• 重构底部提交栏，优化提交按钮样式
• 保持现有订单提交功能完整性

File List

• mini/src/pages/order-submit/index.css (新建)
• mini/src/pages/order-submit/index.tsx (修改)

QA Results