gxwebsoft/xinlong-shop-taro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(shop): 调整商品列表为一排两个竖向方格布局

Browse Source 
- 商品列表容器调整为 flex-wrap 布局以支持多列显示
- 每个商品项宽度设为 50%，左右间距微调
- 商品卡片改为竖向结构，图片置顶，固定高度 144px，图片模式改为 aspectFill
- 商品名称、积分标签、价格、销量排布调整优化
- 加购按钮位置及样式微调增加左边距
- 保持顶部搜索栏、左侧分类栏和排序栏布局不变
This commit is contained in:
赵忠林
2026-07-11 18:06:53 +08:00
parent 02acd5b311
commit 7572738bcd
2 changed files with 66 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/pages/shop/index.tsx
View File

@@ -259,73 +259,75 @@ const ShopPage: React.FC = () => {
>
<View className='p-2'>
{goodsList.length > 0 ? (
<View className='flex flex-col gap-2'>
<View className='flex flex-wrap'>
{goodsList.map(item => (
<View
key={item.goodsId}
className='bg-white rounded-lg p-2 flex gap-2'
className='w-1/2 p-1'
onClick={() => goDetail(item)}
>
{/* 商品图片 */}
<View className='w-20 h-20 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0'>
<Image
className='w-full h-full'
src={getCompressedImageUrl(item.image || item.files || '')}
mode='aspectFit'
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 className='bg-white rounded-lg overflow-hidden flex flex-col'>
{/* 商品图片 */}
<View className='w-full h-36 bg-gray-100 overflow-hidden'>
<Image
className='w-full h-full'
src={getCompressedImageUrl(item.image || item.files || '')}
mode='aspectFill'
lazyLoad
/>
</View>
{/* 价格 + 销量 + 加购 */}
<View className='flex items-end justify-between'>
<View className='flex-1 min-w-0'>
<Text className='text-sm text-red-500 font-medium'>
¥{getDisplayPrice(item)}
{/* 商品信息 */}
<View className='p-2 flex flex-col gap-1'>
{/* 标题 + 积分标签 */}
<View>
<Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
{item.name || item.goodsName}
</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}
{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}
{/* 销量 */}
{item.sales !== undefined && item.sales > 0 && (
<Text className='text-xs text-gray-400 ml-2'>
已售{item.sales}
</Text>
)}
</View>
{/* 加购按钮 */}
<View
className='w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0'
onClick={(e) => handleAddToCart(e, item)}
>
<Text className='text-white text-lg leading-none'>+</Text>
{/* 价格 + 销量 + 加购 */}
<View className='flex items-end justify-between'>
<View className='flex-1 min-w-0'>
<Text className='text-sm text-red-500 font-medium'>
¥{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>