155 lines
3.7 KiB
Markdown
155 lines
3.7 KiB
Markdown
# 前端多规格功能测试指南
|
||
|
||
## 功能概述
|
||
已完成商品详情页多规格功能集成，包括：
|
||
- 规格数据加载
|
||
- 规格选择器组件
|
||
- 购物车支持SKU信息
|
||
- 立即购买支持SKU信息
|
||
|
||
## 测试步骤
|
||
|
||
### 1. 准备测试数据
|
||
在后端创建一个多规格商品，包含：
|
||
- 基础商品信息
|
||
- 规格组：颜色(红色、蓝色)、尺寸(S、M、L)
|
||
- 对应的SKU数据
|
||
|
||
### 2. 商品详情页测试
|
||
1. 访问商品详情页：`/shop/goodsDetail/index?id={商品ID}`
|
||
2. 检查是否正确加载：
|
||
- 商品基本信息
|
||
- 商品图片轮播
|
||
- 价格显示
|
||
|
||
### 3. 规格选择测试
|
||
1. 点击"加入购物车"按钮
|
||
2. 应该弹出规格选择器
|
||
3. 检查规格选择器内容：
|
||
- 商品图片和基本信息
|
||
- 规格组显示(颜色、尺寸)
|
||
- 规格值选项
|
||
- 数量选择器
|
||
|
||
### 4. 规格交互测试
|
||
1. 选择不同规格组合
|
||
2. 检查：
|
||
- SKU价格更新
|
||
- 库存数量更新
|
||
- 不可选规格置灰
|
||
- 数量限制(不超过库存)
|
||
|
||
### 5. 加入购物车测试
|
||
1. 选择完整规格
|
||
2. 设置购买数量
|
||
3. 点击确定
|
||
4. 检查：
|
||
- 成功提示
|
||
- 购物车数量更新
|
||
- 购物车页面显示规格信息
|
||
|
||
### 6. 立即购买测试
|
||
1. 点击"立即购买"按钮
|
||
2. 选择规格和数量
|
||
3. 点击确定
|
||
4. 检查是否正确跳转到订单确认页
|
||
|
||
## 预期行为
|
||
|
||
### 单规格商品
|
||
- 直接加入购物车/立即购买
|
||
- 不显示规格选择器
|
||
|
||
### 多规格商品
|
||
- 必须选择规格才能操作
|
||
- 显示规格选择器
|
||
- 根据选择更新价格和库存
|
||
|
||
## 数据流验证
|
||
|
||
### 1. API调用检查
|
||
打开浏览器开发者工具，检查以下API调用：
|
||
```
|
||
GET /shop/shop-goods/{id} // 商品详情
|
||
GET /shop/shop-goods-spec?goodsId={id} // 商品规格
|
||
GET /shop/shop-goods-sku?goodsId={id} // 商品SKU
|
||
```
|
||
|
||
### 2. 购物车数据检查
|
||
检查本地存储中的购物车数据：
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
JSON.parse(localStorage.getItem('cart_items') || '[]')
|
||
```
|
||
|
||
应该包含SKU信息：
|
||
```json
|
||
[{
|
||
"goodsId": 123,
|
||
"name": "测试商品",
|
||
"price": "99.00",
|
||
"image": "...",
|
||
"quantity": 2,
|
||
"skuId": 456,
|
||
"specInfo": "颜色:红色|尺寸:L",
|
||
"addTime": 1640995200000
|
||
}]
|
||
```
|
||
|
||
## 常见问题排查
|
||
|
||
### 1. 规格选择器不显示
|
||
- 检查 `specs` 数组是否有数据
|
||
- 检查 `showSpecSelector` 状态
|
||
- 检查API返回数据格式
|
||
|
||
### 2. SKU匹配失败
|
||
- 检查规格值字符串格式
|
||
- 检查SKU数据中的 `sku` 字段格式
|
||
- 确认规格名称排序一致性
|
||
|
||
### 3. 价格不更新
|
||
- 检查SKU数据中的 `price` 字段
|
||
- 检查 `selectedSku` 状态更新
|
||
- 确认价格显示逻辑
|
||
|
||
### 4. 库存显示错误
|
||
- 检查SKU数据中的 `stock` 字段
|
||
- 检查库存为0时的处理逻辑
|
||
- 确认数量选择器的最大值限制
|
||
|
||
## 调试技巧
|
||
|
||
### 1. 控制台日志
|
||
在关键位置添加日志：
|
||
```javascript
|
||
console.log('Specs loaded:', specs);
|
||
console.log('SKUs loaded:', skus);
|
||
console.log('Selected SKU:', selectedSku);
|
||
```
|
||
|
||
### 2. React DevTools
|
||
使用React DevTools检查组件状态：
|
||
- GoodsDetail组件的state
|
||
- SpecSelector组件的props和state
|
||
|
||
### 3. 网络面板
|
||
检查API请求和响应：
|
||
- 请求参数是否正确
|
||
- 响应数据格式是否符合预期
|
||
- 是否有错误状态码
|
||
|
||
## 性能优化建议
|
||
|
||
1. **数据预加载**: 考虑在商品详情加载时同时加载规格数据
|
||
2. **缓存策略**: 对规格数据进行适当缓存
|
||
3. **懒加载**: 规格选择器可以考虑懒加载
|
||
4. **防抖处理**: 规格选择时的价格更新可以添加防抖
|
||
|
||
## 后续优化方向
|
||
|
||
1. **规格图片**: 支持规格值对应的商品图片
|
||
2. **规格预设**: 支持默认选中某个规格组合
|
||
3. **批量操作**: 支持批量添加不同规格的商品
|
||
4. **规格搜索**: 在规格较多时支持搜索功能
|