fix(shop): 修复商品详情页孤立“0”渲染问题
- 修正赚取积分、重量和销量条件渲染,避免数字0被渲染成文本节点 - 赚取积分判断改为仅判断数值是否大于0,防止0泄漏 - 重量同样改为判断数值大于0避免显示无效数据 - 销量为0时隐藏销量信息,符合用户需求 - 调整加购按钮尺寸,使其视觉更协调
This commit is contained in:
@@ -219,3 +219,14 @@ adapter `/list` 接口忽略分页,一次返回全部收藏;前端 `listShop
|
|||||||
- 去掉条件里的 `product.gainIntegral &&`,改成 `{Number(product.gainIntegral) > 0 && (...)}`,避免 `0` 泄漏。
|
- 去掉条件里的 `product.gainIntegral &&`,改成 `{Number(product.gainIntegral) > 0 && (...)}`,避免 `0` 泄漏。
|
||||||
- 顺手把配送区域 `goodsWeight` 的同类写法也改成 `{Number(product.goodsWeight) > 0 && (...)}`,防止重量为 0 时同样泄漏。
|
- 顺手把配送区域 `goodsWeight` 的同类写法也改成 `{Number(product.goodsWeight) > 0 && (...)}`,防止重量为 0 时同样泄漏。
|
||||||
- 另按用户要求「是 0 就不显示」,把销量行也改为 `{Number(product.sales) > 0 && (...)}`,销量为 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+`),样式与商城列表页浮动购物车角标一致
|
||||||
|
|||||||
@@ -325,7 +325,7 @@ const ShopPage: React.FC = () => {
|
|||||||
</View>
|
</View>
|
||||||
{/* 加购按钮 */}
|
{/* 加购按钮 */}
|
||||||
<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)}
|
onClick={(e) => handleAddToCart(e, item)}
|
||||||
>
|
>
|
||||||
<Text className='text-white text-lg leading-none'>+</Text>
|
<Text className='text-white text-lg leading-none'>+</Text>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react'
|
import React, { useState, useEffect, useRef } from 'react'
|
||||||
import { View, Text, Image, ScrollView, Swiper, SwiperItem, RichText } from '@tarojs/components'
|
import { View, Text, Image, ScrollView, Swiper, SwiperItem, RichText } from '@tarojs/components'
|
||||||
import { Tag } from '@nutui/nutui-react-taro'
|
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 { getShopGoods } from '@/api/shop/shopGoods'
|
||||||
import {
|
import {
|
||||||
addShopGoodsFavorite,
|
addShopGoodsFavorite,
|
||||||
@@ -34,7 +34,7 @@ const ProductDetailPage: React.FC = () => {
|
|||||||
const [skuVisible, setSkuVisible] = useState(false)
|
const [skuVisible, setSkuVisible] = useState(false)
|
||||||
const [skuMode, setSkuMode] = useState<'cart' | 'buy'>('cart')
|
const [skuMode, setSkuMode] = useState<'cart' | 'buy'>('cart')
|
||||||
const [isFavorite, setIsFavorite] = useState(false)
|
const [isFavorite, setIsFavorite] = useState(false)
|
||||||
const { addItem } = useCartContext()
|
const { addItem, totalCount, refresh } = useCartContext()
|
||||||
const { isLoggedIn } = useUserContext()
|
const { isLoggedIn } = useUserContext()
|
||||||
// 底部操作栏高度约 90px(含按钮 + 安全区),动态计算 ScrollView 可用高度
|
// 底部操作栏高度约 90px(含按钮 + 安全区),动态计算 ScrollView 可用高度
|
||||||
const scrollHeight = useScrollHeight(44)
|
const scrollHeight = useScrollHeight(44)
|
||||||
@@ -58,6 +58,11 @@ const ProductDetailPage: React.FC = () => {
|
|||||||
}
|
}
|
||||||
}, [id, isLoggedIn])
|
}, [id, isLoggedIn])
|
||||||
|
|
||||||
|
// 页面显示时刷新购物车数量,确保底部购物车角标准确
|
||||||
|
useDidShow(() => {
|
||||||
|
if (isLoggedIn) refresh()
|
||||||
|
})
|
||||||
|
|
||||||
// 监听 product 变化后再添加到历史记录,并异步生成分享海报
|
// 监听 product 变化后再添加到历史记录,并异步生成分享海报
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (product) {
|
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 items-center px-2 py-2' style={{ minWidth: '120px' }}>
|
||||||
<View className='flex-1 flex flex-col items-center' onClick={handleGoCart}>
|
<View className='flex-1 flex flex-col items-center' onClick={handleGoCart}>
|
||||||
|
<View className='relative inline-flex items-center justify-center'>
|
||||||
<Text className='text-lg'>🛒</Text>
|
<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>
|
<Text className='text-xs text-gray-500 mt-1 whitespace-nowrap'>购物车</Text>
|
||||||
</View>
|
</View>
|
||||||
<View className='flex-1 flex flex-col items-center' onClick={handleContactService}>
|
<View className='flex-1 flex flex-col items-center' onClick={handleContactService}>
|
||||||
|
|||||||
Reference in New Issue
Block a user