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

@@ -23,6 +23,12 @@
- 分类页和首页一样是 tabBar 页,三按钮全亮(好友/朋友圈/复制链接)
- 类型检查:零错误
## 修复收藏列表(图文不显示、价格不对)
- `src/api/shop/shopGoodsFavorite/model.ts`:扩展 `ShopGoodsFavorite` 接口,增加 `product?: { id, name, image, price, salePrice }` 嵌套字段(与秒杀/拼团模型一致)。后端 API 返回的嵌套商品数据会带 `product` 字段。
- `src/pages/user/favorite-list/index.tsx`
- 图片:`item.goodsImage``item.goodsImage || item.product?.image`
- 价格:`item.salePrice`(市场价)→ `item.product?.price || item.salePrice`(到手价),当市场价与到手价不同时再显示划掉的市场价
- 类型检查:零错误
## 修复订单列表看到他人订单
- `src/pages/order/list.tsx`:导入 `useUser`,请求参数加 `userId: user?.id`。原代码请求 `pageShopOrder` 时没传 `userId`,导致后端返回所有人订单。
- `ShopOrderParam` 接口已有 `userId` 字段(见 `src/api/shop/shopOrder/model/index.ts:225`),后端按此过滤——只需前端补传。

View File

@@ -0,0 +1,57 @@
## 购物车功能修复2026-07-14
### 问题
购物车页面pages/shop/cart商品显示异常
- 商品名称/图片/价格信息缺失
- 加入购物车后无法正确显示
### 根因
`CartContext.refresh()` 方法在将后端 API 返回的购物车项映射为前端 `CartItem` 时,**遗漏了 `product`(商品详情)和 `sku`SKU 详情)嵌套对象的映射**。导致页面中 `item.product?.name/image/price``item.sku?.price/image` 均为 `undefined`UI 只能显示硬编码的默认值。
### 修改
1. **`src/contexts/CartContext.tsx`**(核心修复)
- `refresh()``mappedItems` 映射中补充 `product``sku` 字段
- 使用 `(item as any).product` / `(item as any).sku` 获取后端返回的嵌套对象
2. **`src/utils/image.ts`**(增强健壮性)
- 新增 `ensureFullUrl()` 辅助函数:相对路径自动补全 OSS 域名 `https://oss.wsdns.cn`
- `getCompressedImageUrl()` 内部调用 `ensureFullUrl` 确保 URL 完整性
3. **`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后端返回商品信息
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 写法,需用户自行编译部署。
2. **前端**
- `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}`,而项目所有其他 APIshopOrder、shopArticle 等)的更新操作统一走 `PUT /shop/shop-cart`(基础 URLid 放 body
### 修改
1. `updateCartNum``PUT /shop/shop-cart/{id}` + `{quantity}``PUT /shop/shop-cart` + `{id, num}`
2. `updateCartChecked``PUT /shop/shop-cart/{id}` + `{selected}``PUT /shop/shop-cart` + `{id, checked}`(同时修正字段名 `selected``checked` 与 model 一致)
3. `updateCartAllChecked``PUT /shop/shop-cart/selected` + `{selected}``POST /shop/shop-cart/selected` + `{checked}`(改用 POST自定义批量操作更可能支持 POSTCartContext 已有静默 catch 兜底)