fix(shop): 修复购物车和收藏列表图片及价格显示问题

- 购物车上下文补全映射后端返回的 product 和 sku 嵌套对象字段
- 购物车页面商品图片资源回退增加 sku.image
- 添加 ensureFullUrl 辅助函数,完善图片 URL 完整性,增强图片压缩函数健壮性
- 收藏列表扩展 ShopGoodsFavorite 模型,支持嵌套商品详情字段
- 收藏列表图片、名称、价格显示逻辑升级,优先显示嵌套商品信息
- 购物车相关接口请求参数及方法调整,修正 PUT 请求路径和请求体字段
- 收藏列表列表项 key 使用 id 或 goodsId 避免重复Key警告
This commit is contained in:
2026-07-14 00:55:35 +08:00
parent 59ebef2f22
commit 711db25093
8 changed files with 135 additions and 22 deletions

View File

@@ -170,7 +170,7 @@ const CartPage: React.FC = () => {
</View>
<Image
className="w-20 h-20 rounded-md bg-gray-100 flex-shrink-0"
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || (item.sku as any)?.image || '')}
mode="aspectFill"
/>
<View className="flex-1 flex flex-col justify-between">

View File

@@ -63,23 +63,30 @@ const FavoriteListPage: React.FC = () => {
<View className='grid grid-cols-2 gap-3'>
{list.map(item => (
<View
key={item.favoriteId}
key={item.id ?? item.goodsId}
className='bg-white rounded-lg overflow-hidden'
onClick={() => handleItemClick(item.goodsId!)}
>
<Image
className='w-full'
style={{ height: '160px' }}
src={getCompressedImageUrl(item.goodsImage)}
mode='aspectFill'
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
mode='aspectFit'
/>
<View className='p-2'>
<Text className='text-sm text-gray-800 line-clamp-2 block'>
{item.goodsName}
</Text>
<Text className='text-red-500 text-sm font-medium mt-1 block'>
¥{item.salePrice || '0'}
{item.goodsName || item.product?.name}
</Text>
<View className='flex flex-row items-baseline gap-1 mt-1'>
<Text className='text-red-500 text-sm font-medium'>
¥{item.price || item.salePrice || '0'}
</Text>
{item.salePrice && Number(item.salePrice) > Number(item.price || 0) ? (
<Text className='text-xs text-gray-400 line-through'>
¥{item.salePrice}
</Text>
) : null}
</View>
</View>
</View>
))}