xinlong-shop-taro/2026-07-14.md at 711db25093ffd5f2fcde077f3301cb4fc7bc9737

Files

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

- 购物车上下文补全映射后端返回的 product 和 sku 嵌套对象字段
- 购物车页面商品图片资源回退增加 sku.image
- 添加 ensureFullUrl 辅助函数，完善图片 URL 完整性，增强图片压缩函数健壮性
- 收藏列表扩展 ShopGoodsFavorite 模型，支持嵌套商品详情字段
- 收藏列表图片、名称、价格显示逻辑升级，优先显示嵌套商品信息
- 购物车相关接口请求参数及方法调整，修正 PUT 请求路径和请求体字段
- 收藏列表列表项 key 使用 id 或 goodsId 避免重复Key警告

2026-07-14 00:55:35 +08:00

4.2 KiB

Raw Blame History

购物车功能修复（2026-07-14）

问题

购物车页面（pages/shop/cart）商品显示异常：

商品名称/图片/价格信息缺失
加入购物车后无法正确显示

根因

CartContext.refresh() 方法在将后端 API 返回的购物车项映射为前端 CartItem 时，遗漏了 product（商品详情）和 sku（SKU 详情）嵌套对象的映射。导致页面中 item.product?.name/image/price 和 item.sku?.price/image 均为 undefined，UI 只能显示硬编码的默认值。

修改

src/contexts/CartContext.tsx（核心修复）
- refresh() 的 mappedItems 映射中补充 product 和 sku 字段
- 使用 (item as any).product / (item as any).sku 获取后端返回的嵌套对象
src/utils/image.ts（增强健壮性）
- 新增 ensureFullUrl() 辅助函数：相对路径自动补全 OSS 域名 https://oss.wsdns.cn
- getCompressedImageUrl() 内部调用 ensureFullUrl 确保 URL 完整性
src/pages/shop/cart.tsx（补充图片回退源）
- 图片 src 回退链增加 (item.sku as any)?.image
- 完整回退链：goodsImage -> product.image -> sku.image -> ''

收藏列表图片/价格不显示修复（2026-07-14）

问题

pages/user/favorite-list/index 收藏列表：商品图片、价格、名称均空白。

根因

后端 /api/shop/goods/favorite/list（前端 /shop/goods/favorite/list）走 ShopGoodsFavoriteServiceImpl.listRel → selectListRel，SQL 只 SELECT a.* 未关联商品表，返回字段仅 id/userId/goodsId/merchantId/tenantId/createTime，不含商品信息。前端依赖 goodsImage/goodsName/price/salePrice 均为 undefined。

修改（方案1：后端返回商品信息）

后端 guilixu-java：
- ShopGoodsFavorite.java：新增 4 个 @TableField(exist=false) 非持久化字段 goodsName(String)、goodsImage(String)、price(BigDecimal)、salePrice(BigDecimal)，并补 BigDecimal/TableField import。
- ShopGoodsFavoriteMapper.xml 的 selectSql：SELECT a.*, g.name AS goods_name, g.image AS goods_image, g.price AS price, g.sale_price AS sale_price，LEFT JOIN shop_goods g ON a.goods_id = g.goods_id（已确认 map-underscore-to-camel-case: true，别名可映射）。
- 注意：本机无 maven 无法编译，改动为常规 MyBatis/MP 写法，需用户自行编译部署。
前端：
- src/api/shop/shopGoodsFavorite/model.ts：favoriteId 改为 id（后端实际返回 id）；新增 price?: string|number；salePrice 改为 string|number。
- pages/user/favorite-list/index.tsx：图片用 item.goodsImage；价格改为优先 item.price（到手价），salePrice 作为划线价（salePrice > price 时显示）；key 改用 item.id ?? item.goodsId（原 favoriteId 始终 undefined 会导致 key 重复）。
- 注：src/pages/favorite-list.tsx 为未注册路由的重复文件，未改动。

遗留（非本次范围，供参考）

adapter /list 接口忽略分页，一次返回全部收藏；前端 listShopGoodsFavorite({page,limit:20}) 的无限滚动在收藏>20条时会重复追加。如需彻底解决建议改前端走 /page 接口或后端 /list 支持分页。

购物车更新 API 请求方式修复（2026-07-14）

问题

PUT /api/shop/shop-cart/{id} 返回 HttpRequestMethodNotSupportedException: Request method 'PUT' not supported。

根因

src/api/shop/shopCart/index.ts 中 3 个函数用了非标准 URL 模式 PUT /shop/shop-cart/{id}，而项目所有其他 API（shopOrder、shopArticle 等）的更新操作统一走 PUT /shop/shop-cart（基础 URL，id 放 body）。

修改

updateCartNum：PUT /shop/shop-cart/{id} + {quantity} → PUT /shop/shop-cart + {id, num}
updateCartChecked：PUT /shop/shop-cart/{id} + {selected} → PUT /shop/shop-cart + {id, checked}（同时修正字段名 selected→checked 与 model 一致）
updateCartAllChecked：PUT /shop/shop-cart/selected + {selected} → POST /shop/shop-cart/selected + {checked}（改用 POST，自定义批量操作更可能支持 POST；CartContext 已有静默 catch 兜底）

4.2 KiB Raw Blame History Unescape Escape