feat(shop): 调整商品列表为一排两个竖向方格布局
- 商品列表容器调整为 flex-wrap 布局以支持多列显示 - 每个商品项宽度设为 50%，左右间距微调 - 商品卡片改为竖向结构，图片置顶，固定高度 144px，图片模式改为 aspectFill - 商品名称、积分标签、价格、销量排布调整优化 - 加购按钮位置及样式微调增加左边距 - 保持顶部搜索栏、左侧分类栏和排序栏布局不变
This commit is contained in:
8
.workbuddy/memory/2026-07-11.md
Normal file
8
.workbuddy/memory/2026-07-11.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# 2026-07-11
|
||||||
|
|
||||||
|
## 商品列表布局改为一排两个方格
|
||||||
|
- 文件：`src/pages/shop/index.tsx` 商品列表区域
|
||||||
|
- 改动：从「一排一个横向卡片（左小图+右信息）」改为「一排两个竖向方格卡片」
|
||||||
|
- 实现：容器 `flex flex-wrap`，每项 `w-1/2 p-1`；卡片竖向结构：图片(`h-36`, `mode=aspectFill`)在上，商品信息在下
|
||||||
|
- 顶部搜索栏、左侧分类栏、排序栏保持不变
|
||||||
|
- 注：`tsc --noEmit` 报 TS2688(@tarojs/taro 类型缺失) 为改动前既有问题，非本次引入
|
||||||
@@ -259,73 +259,75 @@ const ShopPage: React.FC = () => {
|
|||||||
>
|
>
|
||||||
<View className='p-2'>
|
<View className='p-2'>
|
||||||
{goodsList.length > 0 ? (
|
{goodsList.length > 0 ? (
|
||||||
<View className='flex flex-col gap-2'>
|
<View className='flex flex-wrap'>
|
||||||
{goodsList.map(item => (
|
{goodsList.map(item => (
|
||||||
<View
|
<View
|
||||||
key={item.goodsId}
|
key={item.goodsId}
|
||||||
className='bg-white rounded-lg p-2 flex gap-2'
|
className='w-1/2 p-1'
|
||||||
onClick={() => goDetail(item)}
|
onClick={() => goDetail(item)}
|
||||||
>
|
>
|
||||||
{/* 商品图片 */}
|
<View className='bg-white rounded-lg overflow-hidden flex flex-col'>
|
||||||
<View className='w-20 h-20 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0'>
|
{/* 商品图片 */}
|
||||||
<Image
|
<View className='w-full h-36 bg-gray-100 overflow-hidden'>
|
||||||
className='w-full h-full'
|
<Image
|
||||||
src={getCompressedImageUrl(item.image || item.files || '')}
|
className='w-full h-full'
|
||||||
mode='aspectFit'
|
src={getCompressedImageUrl(item.image || item.files || '')}
|
||||||
lazyLoad
|
mode='aspectFill'
|
||||||
/>
|
lazyLoad
|
||||||
</View>
|
/>
|
||||||
|
|
||||||
{/* 商品信息 */}
|
|
||||||
<View className='flex-1 flex flex-col justify-between min-w-0'>
|
|
||||||
{/* 标题 + 积分标签 */}
|
|
||||||
<View>
|
|
||||||
<Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
|
|
||||||
{item.name || item.goodsName}
|
|
||||||
</Text>
|
|
||||||
{item.gainIntegral && item.gainIntegral > 0 ? (
|
|
||||||
<View className='inline-block mt-1'>
|
|
||||||
<Text className='text-xs text-orange-500 bg-orange-50 px-1 py-0.5 rounded'>
|
|
||||||
+{item.gainIntegral}积分
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : null}
|
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 价格 + 销量 + 加购 */}
|
{/* 商品信息 */}
|
||||||
<View className='flex items-end justify-between'>
|
<View className='p-2 flex flex-col gap-1'>
|
||||||
<View className='flex-1 min-w-0'>
|
{/* 标题 + 积分标签 */}
|
||||||
<Text className='text-sm text-red-500 font-medium'>
|
<View>
|
||||||
¥{getDisplayPrice(item)}
|
<Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
|
||||||
|
{item.name || item.goodsName}
|
||||||
</Text>
|
</Text>
|
||||||
{item.unitName ? (
|
{item.gainIntegral && item.gainIntegral > 0 ? (
|
||||||
<Text className='text-xs text-gray-400'>/{item.unitName}</Text>
|
<View className='inline-block mt-1'>
|
||||||
) : null}
|
<Text className='text-xs text-orange-500 bg-orange-50 px-1 py-0.5 rounded'>
|
||||||
{/* VIP 划掉原价 */}
|
+{item.gainIntegral}积分
|
||||||
{isVipMember() && item.dealerPrice ? (
|
|
||||||
<Text className='text-xs text-gray-400 line-through ml-1'>
|
|
||||||
¥{item.price}
|
|
||||||
</Text>
|
|
||||||
) : item.salePrice && item.salePrice !== item.price ? (
|
|
||||||
isGuest() ? null : (
|
|
||||||
<Text className='text-xs text-gray-400 line-through ml-1'>
|
|
||||||
¥{item.salePrice}
|
|
||||||
</Text>
|
</Text>
|
||||||
)
|
</View>
|
||||||
) : null}
|
) : null}
|
||||||
{/* 销量 */}
|
|
||||||
{item.sales !== undefined && item.sales > 0 && (
|
|
||||||
<Text className='text-xs text-gray-400 ml-2'>
|
|
||||||
已售{item.sales}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
</View>
|
||||||
{/* 加购按钮 */}
|
|
||||||
<View
|
{/* 价格 + 销量 + 加购 */}
|
||||||
className='w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0'
|
<View className='flex items-end justify-between'>
|
||||||
onClick={(e) => handleAddToCart(e, item)}
|
<View className='flex-1 min-w-0'>
|
||||||
>
|
<Text className='text-sm text-red-500 font-medium'>
|
||||||
<Text className='text-white text-lg leading-none'>+</Text>
|
¥{getDisplayPrice(item)}
|
||||||
|
</Text>
|
||||||
|
{item.unitName ? (
|
||||||
|
<Text className='text-xs text-gray-400'>/{item.unitName}</Text>
|
||||||
|
) : null}
|
||||||
|
{/* VIP 划掉原价 */}
|
||||||
|
{isVipMember() && item.dealerPrice ? (
|
||||||
|
<Text className='text-xs text-gray-400 line-through ml-1'>
|
||||||
|
¥{item.price}
|
||||||
|
</Text>
|
||||||
|
) : item.salePrice && item.salePrice !== item.price ? (
|
||||||
|
isGuest() ? null : (
|
||||||
|
<Text className='text-xs text-gray-400 line-through ml-1'>
|
||||||
|
¥{item.salePrice}
|
||||||
|
</Text>
|
||||||
|
)
|
||||||
|
) : null}
|
||||||
|
{/* 销量 */}
|
||||||
|
{item.sales !== undefined && item.sales > 0 && (
|
||||||
|
<Text className='text-xs text-gray-400 block mt-0.5'>
|
||||||
|
已售{item.sales}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{/* 加购按钮 */}
|
||||||
|
<View
|
||||||
|
className='w-7 h-7 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>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user