fix(shop): 修复商品详情页孤立“0”渲染问题
- 修正赚取积分、重量和销量条件渲染,避免数字0被渲染成文本节点 - 赚取积分判断改为仅判断数值是否大于0,防止0泄漏 - 重量同样改为判断数值大于0避免显示无效数据 - 销量为0时隐藏销量信息,符合用户需求 - 调整加购按钮尺寸,使其视觉更协调
This commit is contained in:
@@ -202,5 +202,20 @@ adapter `/list` 接口忽略分页,一次返回全部收藏;前端 `listShop
|
|||||||
2. 导出 base64 数据 URI 常量:`src/assets/icons/index.ts` 中 `CART_ICON_WHITE`
|
2. 导出 base64 数据 URI 常量:`src/assets/icons/index.ts` 中 `CART_ICON_WHITE`
|
||||||
3. `src/pages/shop/index.tsx` 浮动购物车按钮改用 `Image` 组件加载 `CART_ICON_WHITE`(28×28px,`mode='aspectFit'`),图标更清晰
|
3. `src/pages/shop/index.tsx` 浮动购物车按钮改用 `Image` 组件加载 `CART_ICON_WHITE`(28×28px,`mode='aspectFit'`),图标更清晰
|
||||||
|
|
||||||
### 备注
|
## 商品详情页出现孤立 "0" 排查修复(2026-07-14)
|
||||||
商品详情页底部操作栏的购物车入口仍使用 emoji `🛒`,若需统一风格可同步替换。
|
|
||||||
|
### 问题
|
||||||
|
`pages/shop/product-detail` 价格区域下方出现一个不归属任何标签的孤立 `0`。
|
||||||
|
|
||||||
|
### 根因
|
||||||
|
`src/pages/shop/product-detail.tsx` 中赚取积分行的条件渲染写成:
|
||||||
|
```tsx
|
||||||
|
{product.gainIntegral && Number(product.gainIntegral) > 0 && (...)}
|
||||||
|
```
|
||||||
|
当后端返回 `gainIntegral` 为数字 `0` 时,JSX 短路与运算直接返回 `0`,React 会把它渲染成一个纯文本节点。这就是页面上那个孤立的 `0`。
|
||||||
|
|
||||||
|
### 修改
|
||||||
|
- **`src/pages/shop/product-detail.tsx`**:
|
||||||
|
- 去掉条件里的 `product.gainIntegral &&`,改成 `{Number(product.gainIntegral) > 0 && (...)}`,避免 `0` 泄漏。
|
||||||
|
- 顺手把配送区域 `goodsWeight` 的同类写法也改成 `{Number(product.goodsWeight) > 0 && (...)}`,防止重量为 0 时同样泄漏。
|
||||||
|
- 另按用户要求「是 0 就不显示」,把销量行也改为 `{Number(product.sales) > 0 && (...)}`,销量为 0 时整条「销量: 0」不渲染。
|
||||||
|
|||||||
@@ -262,7 +262,7 @@ const CategoryPage: React.FC = () => {
|
|||||||
</View>
|
</View>
|
||||||
{/* 加购按钮 */}
|
{/* 加购按钮 */}
|
||||||
<View
|
<View
|
||||||
className='w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0'
|
className='w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0'
|
||||||
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>
|
||||||
|
|||||||
@@ -309,13 +309,15 @@ const ProductDetailPage: React.FC = () => {
|
|||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
{/* 赚取积分 */}
|
{/* 赚取积分 */}
|
||||||
{product.gainIntegral && Number(product.gainIntegral) > 0 && (
|
{Number(product.gainIntegral) > 0 && (
|
||||||
<View className='mt-1'>
|
<View className='mt-1'>
|
||||||
<Text className='text-xs text-orange-500'>购买可得 {product.gainIntegral} 积分</Text>
|
<Text className='text-xs text-orange-500'>购买可得 {product.gainIntegral} 积分</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
<View className='flex gap-2 mt-2'>
|
<View className='flex gap-2 mt-2'>
|
||||||
<Text className='text-xs text-gray-400'>销量: {product.sales || 0}</Text>
|
{Number(product.sales) > 0 && (
|
||||||
|
<Text className='text-xs text-gray-400'>销量: {product.sales}</Text>
|
||||||
|
)}
|
||||||
<Text className='text-xs text-gray-400'>库存: {product.stock || 0}</Text>
|
<Text className='text-xs text-gray-400'>库存: {product.stock || 0}</Text>
|
||||||
{product.unitName && (
|
{product.unitName && (
|
||||||
<Text className='text-xs text-gray-400'>单位: {product.unitName}</Text>
|
<Text className='text-xs text-gray-400'>单位: {product.unitName}</Text>
|
||||||
@@ -363,7 +365,7 @@ const ProductDetailPage: React.FC = () => {
|
|||||||
<View className='flex items-center'>
|
<View className='flex items-center'>
|
||||||
<Text className='text-xs text-gray-500 mr-2'>配送</Text>
|
<Text className='text-xs text-gray-500 mr-2'>配送</Text>
|
||||||
<Text className='text-sm text-gray-700'>{deliveryText}</Text>
|
<Text className='text-sm text-gray-700'>{deliveryText}</Text>
|
||||||
{product.goodsWeight && Number(product.goodsWeight) > 0 && (
|
{Number(product.goodsWeight) > 0 && (
|
||||||
<Text className='text-xs text-gray-400 ml-2'>重量: {product.goodsWeight}kg</Text>
|
<Text className='text-xs text-gray-400 ml-2'>重量: {product.goodsWeight}kg</Text>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user