diff --git a/.workbuddy/memory/2026-07-14.md b/.workbuddy/memory/2026-07-14.md index e2fbef7..dc6159f 100644 --- a/.workbuddy/memory/2026-07-14.md +++ b/.workbuddy/memory/2026-07-14.md @@ -219,3 +219,14 @@ adapter `/list` 接口忽略分页,一次返回全部收藏;前端 `listShop - 去掉条件里的 `product.gainIntegral &&`,改成 `{Number(product.gainIntegral) > 0 && (...)}`,避免 `0` 泄漏。 - 顺手把配送区域 `goodsWeight` 的同类写法也改成 `{Number(product.goodsWeight) > 0 && (...)}`,防止重量为 0 时同样泄漏。 - 另按用户要求「是 0 就不显示」,把销量行也改为 `{Number(product.sales) > 0 && (...)}`,销量为 0 时整条「销量: 0」不渲染。 + +## 商品详情页底部购物车角标(2026-07-14) + +### 需求 +`pages/shop/product-detail` 底部操作栏的购物车入口需要显示当前购物车商品数量角标。 + +### 修改 +- **`src/pages/shop/product-detail.tsx`**: + 1. 从 `useCartContext` 额外解构 `totalCount`、`refresh` + 2. 引入 `useDidShow`,页面显示时(已登录)调 `refresh()` 拉取最新购物车,保证角标准确 + 3. 购物车图标外包一层 `relative` 容器,`totalCount > 0` 时右上角显示红色圆角角标(>99 显示 `99+`),样式与商城列表页浮动购物车角标一致 diff --git a/src/pages/shop/index.tsx b/src/pages/shop/index.tsx index c7666c7..5e331eb 100644 --- a/src/pages/shop/index.tsx +++ b/src/pages/shop/index.tsx @@ -325,7 +325,7 @@ const ShopPage: React.FC = () => { {/* 加购按钮 */} handleAddToCart(e, item)} > + diff --git a/src/pages/shop/product-detail.tsx b/src/pages/shop/product-detail.tsx index 58d42d4..a99c62a 100644 --- a/src/pages/shop/product-detail.tsx +++ b/src/pages/shop/product-detail.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from 'react' import { View, Text, Image, ScrollView, Swiper, SwiperItem, RichText } from '@tarojs/components' import { Tag } from '@nutui/nutui-react-taro' -import Taro, { useRouter } from '@tarojs/taro' +import Taro, { useRouter, useDidShow } from '@tarojs/taro' import { getShopGoods } from '@/api/shop/shopGoods' import { addShopGoodsFavorite, @@ -34,7 +34,7 @@ const ProductDetailPage: React.FC = () => { const [skuVisible, setSkuVisible] = useState(false) const [skuMode, setSkuMode] = useState<'cart' | 'buy'>('cart') const [isFavorite, setIsFavorite] = useState(false) - const { addItem } = useCartContext() + const { addItem, totalCount, refresh } = useCartContext() const { isLoggedIn } = useUserContext() // 底部操作栏高度约 90px(含按钮 + 安全区),动态计算 ScrollView 可用高度 const scrollHeight = useScrollHeight(44) @@ -58,6 +58,11 @@ const ProductDetailPage: React.FC = () => { } }, [id, isLoggedIn]) + // 页面显示时刷新购物车数量,确保底部购物车角标准确 + useDidShow(() => { + if (isLoggedIn) refresh() + }) + // 监听 product 变化后再添加到历史记录,并异步生成分享海报 useEffect(() => { if (product) { @@ -422,7 +427,31 @@ const ProductDetailPage: React.FC = () => { {/* 图标入口 */} - 🛒 + + 🛒 + {totalCount > 0 && ( + + + {totalCount > 99 ? '99+' : totalCount} + + + )} + 购物车