From f92e399d72164401d7879babd1b054740ecd2522 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Tue, 14 Jul 2026 03:05:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(shop):=20=E4=BF=AE=E5=A4=8D=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5=E5=AD=A4=E7=AB=8B=E2=80=9C?=
 =?UTF-8?q?0=E2=80=9D=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修正赚取积分、重量和销量条件渲染，避免数字0被渲染成文本节点
- 赚取积分判断改为仅判断数值是否大于0，防止0泄漏
- 重量同样改为判断数值大于0避免显示无效数据
- 销量为0时隐藏销量信息，符合用户需求
- 调整加购按钮尺寸，使其视觉更协调
---
 .workbuddy/memory/2026-07-14.md   | 11 ++++++++++
 src/pages/shop/index.tsx          |  2 +-
 src/pages/shop/product-detail.tsx | 35 ++++++++++++++++++++++++++++---
 3 files changed, 44 insertions(+), 4 deletions(-)

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 = () => {
                           </View>
                           {/* 加购按钮 */}
                           <View
-                            className='w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 ml-1'
+                            className='w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 ml-1'
                             onClick={(e) => handleAddToCart(e, item)}
                           >
                             <Text className='text-white text-lg leading-none'>+</Text>
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 = () => {
         {/* 图标入口 */}
         <View className='flex items-center px-2 py-2' style={{ minWidth: '120px' }}>
           <View className='flex-1 flex flex-col items-center' onClick={handleGoCart}>
-            <Text className='text-lg'>🛒</Text>
+            <View className='relative inline-flex items-center justify-center'>
+              <Text className='text-lg'>🛒</Text>
+              {totalCount > 0 && (
+                <View
+                  className='flex items-center justify-center'
+                  style={{
+                    position: 'absolute',
+                    top: '-6px',
+                    right: '-10px',
+                    minWidth: '16px',
+                    height: '16px',
+                    borderRadius: '8px',
+                    backgroundColor: '#ef4444',
+                    borderWidth: '1.5px',
+                    borderStyle: 'solid',
+                    borderColor: '#ffffff',
+                    paddingHorizontal: '3px',
+                  }}
+                >
+                  <Text className='text-white text-[10px] font-bold leading-none'>
+                    {totalCount > 99 ? '99+' : totalCount}
+                  </Text>
+                </View>
+              )}
+            </View>
             <Text className='text-xs text-gray-500 mt-1 whitespace-nowrap'>购物车</Text>
           </View>
           <View className='flex-1 flex flex-col items-center' onClick={handleContactService}>