赵忠林
711db25093
- 购物车上下文补全映射后端返回的 product 和 sku 嵌套对象字段 - 购物车页面商品图片资源回退增加 sku.image - 添加 ensureFullUrl 辅助函数，完善图片 URL 完整性，增强图片压缩函数健壮性 - 收藏列表扩展 ShopGoodsFavorite 模型，支持嵌套商品详情字段 - 收藏列表图片、名称、价格显示逻辑升级，优先显示嵌套商品信息 - 购物车相关接口请求参数及方法调整，修正 PUT 请求路径和请求体字段 - 收藏列表列表项 key 使用 id 或 goodsId 避免重复Key警告
58 lines
4.2 KiB
Markdown
58 lines
4.2 KiB
Markdown
## 购物车功能修复（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}`，而项目所有其他 API（shopOrder、shopArticle 等）的更新操作统一走 `PUT /shop/shop-cart`（基础 URL，id 放 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，自定义批量操作更可能支持 POST；CartContext 已有静默 catch 兜底）
|