优化下单流程

docs/frontend-multi-spec-test.md

@@ -0,0 +1,154 @@
+# 前端多规格功能测试指南
+
+## 功能概述
+已完成商品详情页多规格功能集成，包括：
+- 规格数据加载
+- 规格选择器组件
+- 购物车支持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. **规格搜索**: 在规格较多时支持搜索功能