2
0
Эх сурвалжийг харах

📝 docs(prd): update theme integration progress and add order detail page story

- update completion rate from 100% (13/13) to 92% (13/14)
- add "订单详情页UI重构" as story 14 with detailed requirements
- update to-do list to include "订单详情页UI重构"
- remove redundant对照文件section from story 13
- update completion status indicators and checklists accordingly
yourname 1 сар өмнө
parent
commit
2cf4bf8b32

+ 34 - 10
docs/prd/epic-001-tcb-shop-theme-integration.md

@@ -4,9 +4,9 @@
 将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中,提升UI一致性和用户体验,同时保持现有系统的完整性。
 
 ## 当前进度
-- **完成度**: 100% (13/13 故事完成)
+- **完成度**: 92% (13/14 故事完成)
 - **已集成**: 主题变量、颜色系统、字体系统、布局工具类、组件样式、首页UI重构、首页商品列表数据读取、首页轮播图后台广告数据、用户中心UI重构、商品分类页基础组件开发、商品列表页UI重构、商品详情页UI重构、购物车页面UI重构、订单列表页UI重构
-- **待完成**: 
+- **待完成**: 订单详情页UI重构
 
 ## 史诗描述
 
@@ -181,12 +181,6 @@
      - 页面组件TypeScript编译正常,无错误
 
 13. ✅ **故事13:订单列表页UI重构** - 参照tcb-shop-demo订单列表页设计,在小程序中实现完整的订单列表功能,包含订单状态筛选、订单卡片展示、订单操作按钮等功能 (已完成)
-   - **对照文件**:
-     - `tcb-shop-demo/pages/order/order-list/index.wxml` - 订单列表页结构模板
-     - `tcb-shop-demo/pages/order/order-list/index.wxss` - 订单列表页样式文件
-     - `tcb-shop-demo/pages/order/order-list/index.js` - 订单列表页逻辑文件
-     - `tcb-shop-demo/pages/order/components/order-card/*` - 订单卡片组件
-     - `tcb-shop-demo/pages/order/components/order-button-bar/*` - 订单按钮栏组件
    - **目标文件**:
      - `mini/src/pages/order-list/index.tsx` - 订单列表页面
      - `mini/src/components/order/OrderCard/index.tsx` - 订单卡片组件
@@ -208,6 +202,35 @@
      - `tcb-shop-demo/pages/cart/components/cart-empty/index.js` - 购物车空态组件
      - `tcb-shop-demo/pages/cart/components/goods-card/index.js` - 购物车商品卡片组件
 
+14. **故事14:订单详情页UI重构** - 参照tcb-shop-demo订单详情页设计,重构现有订单详情页UI,实现完整的订单详情展示功能和操作交互
+   - **对照文件**:
+     - `tcb-shop-demo/pages/order/order-detail/index.wxml` - 订单详情页结构模板
+     - `tcb-shop-demo/pages/order/order-detail/index.wxss` - 订单详情页样式文件
+     - `tcb-shop-demo/pages/order/order-detail/index.js` - 订单详情页逻辑文件
+     - `tcb-shop-demo/pages/order/components/order-card/*` - 订单卡片组件
+     - `tcb-shop-demo/pages/order/components/order-goods-card/*` - 订单商品卡片组件
+     - `tcb-shop-demo/pages/order/components/order-button-bar/*` - 订单按钮栏组件
+   - **目标文件**: `mini/src/pages/order-detail/index.tsx`
+   - **技术要点**:
+     - **页面结构重构**:参照demo页面结构,重新组织页面布局,包含顶部状态卡片、收货地址区域、订单商品列表、支付详情、订单信息等区域
+     - **顶部状态卡片**:实现带背景图片的订单状态卡片,显示订单状态描述,应用圆角设计和白色文字
+     - **收货地址区域**:实现定位图标、收货人信息、地址信息布局,支持地址修改功能
+     - **订单商品卡片**:使用现有的OrderCard组件,集成OrderGoodsCard组件显示商品信息
+     - **支付详情区域**:重新设计支付详情布局,显示商品总额、实付金额等
+     - **订单信息区域**:实现订单编号、下单时间等信息显示,支持订单编号复制功能
+     - **底部操作栏**:重构底部操作栏,使用OrderButtonBar组件,根据不同订单状态显示相应操作按钮
+     - **下拉刷新功能**:集成TDesign PullDownRefresh组件,支持下拉刷新订单数据
+     - **样式集成**:应用tcb-shop-demo订单详情页设计规范,创建专用CSS文件
+     - **功能完整性**:验证所有订单操作功能正常工作(取消订单、立即支付、确认收货、申请退款等)
+   - **成功标准**:
+     - 订单详情页UI与tcb-shop-demo设计完全一致
+     - 所有功能模块正常工作(订单状态显示、商品列表、支付详情、订单操作等)
+     - 数据API集成完整,显示真实订单数据
+     - 订单操作功能正常(取消、支付、确认收货、退款等)
+     - 页面组件TypeScript编译正常,无错误
+     - `tcb-shop-demo/pages/order/components/order-card/*` - 订单卡片组件
+     - `tcb-shop-demo/pages/order/components/order-button-bar/*` - 订单按钮栏组件
+
 ## 兼容性要求
 
 - [ ] 现有API保持不变
@@ -223,7 +246,7 @@
 
 ## 完成定义
 
-- [ ] 所有故事完成且验收标准满足 (11/12 完成)
+- [ ] 所有故事完成且验收标准满足 (13/14 完成)
 - [x] 现有功能通过测试验证
 - [x] 集成点正常工作
 - [x] 文档适当更新
@@ -359,7 +382,8 @@
 - ✅ 商品分类页与tcb-shop-demo设计一致
 - ✅ 商品详情页与tcb-shop-demo设计一致
 - ✅ 购物车页面与tcb-shop-demo设计一致
-- ⏳ 订单列表页与tcb-shop-demo设计一致
+- ✅ 订单列表页与tcb-shop-demo设计一致
+- ⏳ 订单详情页与tcb-shop-demo设计一致
 
 ## 故事完成状态