# 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
- [x] **重构订单提交页整体布局结构** (AC: 1)
  - [x] 分析tcb-shop-demo订单确认页结构 `tcb-shop-demo/pages/order/order-confirm/index.wxml`
  - [x] 重新组织页面布局，包含收货地址、商品列表、支付详情、底部提交栏等区域
  - [x] 应用tcb-shop-demo页面容器类名和结构
  - [x] 更新订单提交页面 `mini/src/pages/order-submit/index.tsx` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxml`]
- [x] **实现收货地址区域重构** (AC: 2)
  - [x] 重新设计收货地址区域布局，参照demo地址卡片设计
  - [x] 实现地址卡片组件，包含收货人信息、地址信息显示
  - [x] 支持地址选择功能，保持现有地址管理集成
  - [x] 应用tcb-shop-demo收货地址区域设计规范
  - [x] 更新收货地址区域 `mini/src/pages/order-submit/index.tsx` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxml` 中的address-card部分]
- [x] **重构商品列表区域** (AC: 3)
  - [x] 重新设计商品列表布局，参照demo商品列表结构
  - [x] 实现商品图片、商品标题、规格信息、价格、数量显示
  - [x] 应用tcb-shop-demo商品列表设计规范
  - [x] 保持现有商品数据集成和购物车数据来源
  - [x] 更新商品列表区域 `mini/src/pages/order-submit/index.tsx` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxml` 中的goods-wrapper部分]
- [x] **实现支付详情区域** (AC: 4)
  - [x] 重新设计支付详情区域布局，参照demo支付详情结构
  - [x] 实现商品总额、运费、实付款等金额计算和显示
  - [x] 应用tcb-shop-demo支付详情设计规范
  - [x] 保持现有金额计算逻辑
  - [x] 更新支付详情区域 `mini/src/pages/order-submit/index.tsx` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxml` 中的pay-detail部分]
- [x] **重构底部提交栏** (AC: 5)
  - [x] 重构底部提交栏布局，参照demo底部提交栏设计
  - [x] 实现实付款显示和提交订单按钮
  - [x] 应用tcb-shop-demo底部提交栏设计规范
  - [x] 保持现有订单提交功能
  - [x] 更新底部提交栏 `mini/src/pages/order-submit/index.tsx` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxml` 中的wx-pay-cover部分]
- [x] **创建专用CSS样式文件** (AC: 6)
  - [x] 创建专用CSS文件 `mini/src/pages/order-submit/index.css` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxss`]
  - [x] 应用tcb-shop-demo订单确认页设计规范
  - [x] 集成tcb-theme.css主题样式
  - [x] 保持与现有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
- [x] 创建专用CSS样式文件 `mini/src/pages/order-submit/index.css`
- [x] 重构订单提交页整体布局结构 `mini/src/pages/order-submit/index.tsx`
- [x] 应用tcb-shop-demo页面容器类名和结构
- [x] 重构收货地址区域，优化地址卡片显示
- [x] 重构商品列表区域，应用demo商品列表设计
- [x] 实现支付详情区域，显示金额计算信息
- [x] 重构底部提交栏，优化提交按钮样式
- [x] 保持现有订单提交功能完整性

### File List
- `mini/src/pages/order-submit/index.css` (新建)
- `mini/src/pages/order-submit/index.tsx` (修改)

## QA Results