|
@@ -1,7 +1,7 @@
|
|
|
# Story 001.015: 订单提交页UI重构
|
|
# Story 001.015: 订单提交页UI重构
|
|
|
|
|
|
|
|
## Status
|
|
## Status
|
|
|
-Ready for Development
|
|
|
|
|
|
|
+Development In Progress
|
|
|
|
|
|
|
|
## Story
|
|
## Story
|
|
|
**As a** 用户,
|
|
**As a** 用户,
|
|
@@ -29,29 +29,29 @@ Ready for Development
|
|
|
- [x] 支持地址选择功能,保持现有地址管理集成
|
|
- [x] 支持地址选择功能,保持现有地址管理集成
|
|
|
- [x] 应用tcb-shop-demo收货地址区域设计规范
|
|
- [x] 应用tcb-shop-demo收货地址区域设计规范
|
|
|
- [x] 更新收货地址区域 `mini/src/pages/order-submit/index.tsx` [对照: `tcb-shop-demo/pages/order/order-confirm/index.wxml` 中的address-card部分]
|
|
- [x] 更新收货地址区域 `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的兼容性
|
|
|
|
|
|
|
+- [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)
|
|
- [ ] **功能完整性测试** (AC: 7)
|
|
|
- [ ] 验证地址选择功能正常工作
|
|
- [ ] 验证地址选择功能正常工作
|
|
|
- [ ] 验证订单创建功能正常工作
|
|
- [ ] 验证订单创建功能正常工作
|
|
@@ -145,7 +145,7 @@ Ready for Development
|
|
|
James (Developer Agent)
|
|
James (Developer Agent)
|
|
|
|
|
|
|
|
### Implementation Summary
|
|
### Implementation Summary
|
|
|
-已完成前两个任务:
|
|
|
|
|
|
|
+已完成所有主要UI重构任务:
|
|
|
1. **重构订单提交页整体布局结构**
|
|
1. **重构订单提交页整体布局结构**
|
|
|
- 创建了专用CSS文件,应用tcb-shop-demo设计规范
|
|
- 创建了专用CSS文件,应用tcb-shop-demo设计规范
|
|
|
- 重新组织了页面布局结构,包含收货地址、商品列表、支付详情、金额区域、底部提交栏
|
|
- 重新组织了页面布局结构,包含收货地址、商品列表、支付详情、金额区域、底部提交栏
|
|
@@ -157,11 +157,36 @@ James (Developer Agent)
|
|
|
- 支持地址选择功能,保持现有地址管理集成
|
|
- 支持地址选择功能,保持现有地址管理集成
|
|
|
- 应用了tcb-shop-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
|
|
### Key Implementation Details
|
|
|
- **页面结构**: 使用 `.order-sure` 容器,包含地址卡片、商品列表、支付详情、金额区域、底部提交栏
|
|
- **页面结构**: 使用 `.order-sure` 容器,包含地址卡片、商品列表、支付详情、金额区域、底部提交栏
|
|
|
- **样式规范**: 应用tcb-shop-demo的设计规范,包括颜色、字体、间距等
|
|
- **样式规范**: 应用tcb-shop-demo的设计规范,包括颜色、字体、间距等
|
|
|
- **功能保持**: 保持现有订单提交功能,包括地址选择、订单创建、支付跳转
|
|
- **功能保持**: 保持现有订单提交功能,包括地址选择、订单创建、支付跳转
|
|
|
- **地址卡片**: 优化了地址显示布局,添加了默认地址标签样式
|
|
- **地址卡片**: 优化了地址显示布局,添加了默认地址标签样式
|
|
|
|
|
+- **商品列表**: 采用flex布局,包含商品图片、标题、规格、价格、数量
|
|
|
|
|
+- **支付详情**: 显示商品总额、运费、实付款等金额信息
|
|
|
|
|
+- **底部提交栏**: 包含实付款显示和提交订单按钮,支持禁用状态
|
|
|
|
|
|
|
|
### Debug Log References
|
|
### Debug Log References
|
|
|
无
|
|
无
|
|
@@ -170,6 +195,11 @@ James (Developer Agent)
|
|
|
- [x] 创建专用CSS样式文件 `mini/src/pages/order-submit/index.css`
|
|
- [x] 创建专用CSS样式文件 `mini/src/pages/order-submit/index.css`
|
|
|
- [x] 重构订单提交页整体布局结构 `mini/src/pages/order-submit/index.tsx`
|
|
- [x] 重构订单提交页整体布局结构 `mini/src/pages/order-submit/index.tsx`
|
|
|
- [x] 应用tcb-shop-demo页面容器类名和结构
|
|
- [x] 应用tcb-shop-demo页面容器类名和结构
|
|
|
|
|
+- [x] 重构收货地址区域,优化地址卡片显示
|
|
|
|
|
+- [x] 重构商品列表区域,应用demo商品列表设计
|
|
|
|
|
+- [x] 实现支付详情区域,显示金额计算信息
|
|
|
|
|
+- [x] 重构底部提交栏,优化提交按钮样式
|
|
|
|
|
+- [x] 保持现有订单提交功能完整性
|
|
|
|
|
|
|
|
### File List
|
|
### File List
|
|
|
- `mini/src/pages/order-submit/index.css` (新建)
|
|
- `mini/src/pages/order-submit/index.css` (新建)
|