|
|
@@ -4,9 +4,9 @@
|
|
|
将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中，提升UI一致性和用户体验，同时保持现有系统的完整性。
|
|
|
|
|
|
## 当前进度
|
|
|
-- **完成度**: 100% (10/10 故事完成)
|
|
|
+- **完成度**: 91% (10/11 故事完成)
|
|
|
- **已集成**: 主题变量、颜色系统、字体系统、布局工具类、组件样式、首页UI重构、首页商品列表数据读取、首页轮播图后台广告数据、用户中心UI重构、商品分类页基础组件开发、商品列表页UI重构
|
|
|
-- **待完成**: 无
|
|
|
+- **待完成**: 商品详情页UI重构
|
|
|
|
|
|
## 史诗描述
|
|
|
|
|
|
@@ -133,6 +133,32 @@
|
|
|
- 作为tabbar一级页面集成 - ✅ 已实现
|
|
|
- 使用现有TDesign组件：Image、Toast - ✅ 已实现
|
|
|
|
|
|
+11. **故事11：商品详情页UI重构** - 参照tcb-shop-demo商品详情页设计，重构现有商品详情页UI，实现完整的商品详情展示功能
|
|
|
+ - **对照文件**:
|
|
|
+ - `tcb-shop-demo/pages/goods/details/index.wxml` - 商品详情页结构模板
|
|
|
+ - `tcb-shop-demo/pages/goods/details/index.wxss` - 商品详情页样式文件
|
|
|
+ - `tcb-shop-demo/pages/goods/details/index.js` - 商品详情页逻辑文件
|
|
|
+ - **目标文件**: `mini/src/pages/goods-detail/index.tsx`
|
|
|
+ - **技术要点**:
|
|
|
+ - **页面结构重构**：参照demo页面结构，重新组织页面布局，包含商品轮播图、商品信息、规格选择、商品评价、详情介绍等区域
|
|
|
+ - **轮播图区域**：保持使用现有shadcn Carousel组件，高度调整为750rpx（当前为375），支持自动播放、分页指示器
|
|
|
+ - **商品信息区域**：重新设计商品信息布局，显示商品价格、标题、规格选择
|
|
|
+ - **价格显示**：使用特殊字体DIN Alternate，红色主题色，支持"起"字标识（当前为普通字体）
|
|
|
+ - **规格选择**：实现规格选择交互，显示"已选"状态，支持规格弹窗（当前无规格选择功能）
|
|
|
+ - **商品评价**：新增评价统计和部分评价列表，支持跳转到评价列表页（当前无评价功能）
|
|
|
+ - **详情介绍**：重新设计详情介绍区域，显示商品详情图片和富文本内容
|
|
|
+ - **底部操作栏**：重构底部操作栏，改为固定底部，包含加入购物车、立即购买等功能
|
|
|
+ - **规格弹窗**：实现商品规格选择弹窗，支持SKU选择和数量调整
|
|
|
+ - **数据集成**：集成商品详情API，获取商品信息、SKU数据、评价数据
|
|
|
+ - **样式集成**：应用tcb-shop-demo商品详情页设计规范，替换现有Tailwind样式
|
|
|
+ - **功能实现**：支持加入购物车、立即购买、规格选择、评价查看等完整功能
|
|
|
+ - **成功标准**：
|
|
|
+ - 商品详情页UI与tcb-shop-demo设计完全一致
|
|
|
+ - 所有功能模块正常工作（轮播图、规格选择、评价、详情介绍等）
|
|
|
+ - 数据API集成完整，显示真实商品数据
|
|
|
+ - 底部操作栏功能正常（加入购物车、立即购买）
|
|
|
+ - 页面组件TypeScript编译正常，无错误
|
|
|
+
|
|
|
## 兼容性要求
|
|
|
|
|
|
- [ ] 现有API保持不变
|
|
|
@@ -148,7 +174,7 @@
|
|
|
|
|
|
## 完成定义
|
|
|
|
|
|
-- [x] 所有故事完成且验收标准满足 (10/10 完成)
|
|
|
+- [ ] 所有故事完成且验收标准满足 (10/11 完成)
|
|
|
- [x] 现有功能通过测试验证
|
|
|
- [x] 集成点正常工作
|
|
|
- [x] 文档适当更新
|
|
|
@@ -282,6 +308,7 @@
|
|
|
- ✅ 用户中心UI与tcb-shop-demo设计一致
|
|
|
- ✅ 商品分类页基础组件与tcb-shop-demo设计一致
|
|
|
- ✅ 商品分类页与tcb-shop-demo设计一致
|
|
|
+- ❌ 商品详情页与tcb-shop-demo设计一致
|
|
|
|
|
|
## 故事完成状态
|
|
|
|
yourname