Selaa lähdekoodia

📝 docs(stories): update cart UI refactor story with TabBarLayout integration

- add TabBarLayout integration section to Done list with 7 completed tasks
- update technical specifications to include TabBarLayout as一级页面布局
- update implementation checklist with 3 new completed items:
  - TabBarLayout集成完成,购物车作为一级页面
  - 修复底部结算栏高度,为TabBar预留足够空间
  - 更新任务总数从9项增至11项

💄 style(cart): adjust cart page layout for TabBar integration

- fix bottom checkout bar positioning by setting bottom to 128rpx
- adjust advertisement area bottom position to 280rpx to accommodate TabBar
- ensure proper spacing between page content and TabBar navigation
yourname 1 kuukausi sitten
vanhempi
sitoutus
a46721f2b4
2 muutettua tiedostoa jossa 14 lisäystä ja 3 poistoa
  1. 12 1
      docs/stories/001.012.cart-ui-refactor.story.md
  2. 2 2
      mini/src/pages/cart/index.css

+ 12 - 1
docs/stories/001.012.cart-ui-refactor.story.md

@@ -45,6 +45,14 @@ Done
   - [x] 验证TypeScript编译正常,无错误 (`mini/src/pages/cart/index.tsx`)
   - [x] 测试所有功能模块正常工作 (`mini/tests/unit/pages/cart/basic.test.tsx`)
 
+- [x] **TabBarLayout集成** (AC: 1, 2)
+  - [x] 将购物车页面配置为TabBar一级页面 (`mini/src/app.config.ts`)
+  - [x] 使用TabBarLayout包裹购物车页面内容 (`mini/src/pages/cart/index.tsx`)
+  - [x] 设置activeKey为"cart"以激活购物车标签页 (`mini/src/pages/cart/index.tsx`)
+  - [x] 实现购物车数量角标显示 (`mini/src/pages/cart/index.tsx`)
+  - [x] 验证TabBar导航功能正常,支持页面间切换
+  - [x] 修复底部结算栏定位,为TabBar预留空间 (`mini/src/pages/cart/index.css`)
+
 ## Dev Notes
 
 ### 技术栈信息 [Source: architecture/tech-stack.md]
@@ -65,6 +73,7 @@ Done
 - **数据结构**: `CartItem` 接口包含 id, name, price, image, stock, quantity, spec
 - **状态管理**: `useCart` hook 提供完整的购物车操作API
 - **UI组件**: 使用TDesign组件和自定义组件
+- **页面布局**: 使用TabBarLayout作为一级页面布局,支持TabBar导航
 
 ### tcb-shop-demo购物车设计规范
 - **页面结构**: 分层购物车设计,支持店铺分组 (`tcb-shop-demo/pages/cart/index.wxml`)
@@ -111,7 +120,9 @@ Done
 6. ✅ 保持现有购物车数据API集成,功能完整
 7. ✅ TypeScript编译正常,无错误
 8. ✅ 单元测试创建并通过验证
-9. ⚠️ 侧滑删除功能暂未实现(技术复杂度较高)
+9. ✅ TabBarLayout集成完成,购物车作为一级页面
+10. ✅ 修复底部结算栏高度,为TabBar预留足够空间
+11. ⚠️ 侧滑删除功能暂未实现(技术复杂度较高)
 
 ### File List
 - **Modified**: `mini/src/pages/cart/index.tsx` - 重构购物车页面

+ 2 - 2
mini/src/pages/cart/index.css

@@ -328,7 +328,7 @@
 /* 广告区域样式 */
 .cart-advertisement {
   position: fixed;
-  bottom: 15%;
+  bottom: 280rpx; /* 在结算栏上方,为结算栏和TabBar预留空间 */
   right: 3%;
   width: 70%;
   padding: 20rpx;
@@ -356,7 +356,7 @@
 /* 底部结算栏样式 */
 .cart-bar {
   position: fixed;
-  bottom: 0;
+  bottom: 128rpx; /* TabBar高度为128rpx (64px) */
   left: 0;
   right: 0;
   background: white;