Merge branch 'mini-multi-tenant-mall' of https://git.d8d.fun/186-template-175/mini-starter into mini-multi-tenant-mall

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

@@ -0,0 +1,156 @@
+# Story 001.015: 订单提交页UI重构
+
+## Status
+Ready for Development
+
+## 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
+
+### Implementation Summary
+
+### Key Implementation Details
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results