# 商品详情页说明

## 页面功能

### 1. 商品展示区域
- **左侧大图**：支持点击放大预览
- **缩略图列表**：点击切换主图
- **图片预览**：Element Plus图片预览功能

### 2. 商品信息区域
- **商品标题**：大字体，醒目展示
- **商品副标题**：补充说明信息
- **价格展示**：
  - 现价（大字体，红色高亮）
  - 原价（删除线，灰色）
  - 节省金额提示

### 3. 规格选择
- **多规格支持**：颜色、尺寸等
- **可视化选择**：标签式选择，选中高亮
- **必选验证**：支付前验证所有规格已选择

### 4. 数量选择
- **数量输入框**：支持增减
- **库存显示**：实时显示库存信息
- **库存限制**：超过库存时禁用

### 5. 服务保障
- **7天无理由退货**
- **正品保证**
- **极速发货**

### 6. 操作按钮
- **立即购买**：橙色渐变按钮
- **立即支付**：红色渐变按钮（主要支付按钮）
- **悬停效果**：按钮有阴影和上浮动画

### 7. 商品详情标签页
- **商品详情**：HTML格式的商品描述
- **规格参数**：表格形式展示参数
- **用户评价**：评价列表展示

## 样式特点

### 参考主流电商设计
1. **价格突出**：大字体、红色、渐变背景
2. **图片展示**：大图+缩略图，支持预览
3. **按钮设计**：渐变背景、阴影效果、悬停动画
4. **卡片布局**：圆角、阴影、层次分明
5. **响应式设计**：移动端自适应

### 颜色方案
- **主色调**：红色系（#f56c6c, #ff4757）
- **辅助色**：橙色系（#ff9500, #ff6b00）
- **背景色**：浅灰色（#f5f7fa）
- **文字色**：深灰色（#333, #666）

## 支付流程

1. 用户选择商品规格和数量
2. 点击"立即支付"按钮
3. 系统自动生成订单号
4. 调用后端API创建支付订单
5. 跳转到收银台页面完成支付

## 数据格式

### 商品数据结构
```javascript
{
  id: '1',
  name: '商品名称',
  subtitle: '商品副标题',
  price: 20.00,
  originalPrice: 25.00,
  currency: 'USD',
  stock: 100,
  images: ['图片URL数组'],
  specs: [
    {
      name: '规格名称',
      options: [
        { label: '选项标签', value: '选项值' }
      ]
    }
  ],
  description: 'HTML格式的商品描述',
  params: [
    { name: '参数名', value: '参数值' }
  ],
  reviews: [
    {
      user: '用户名',
      rating: 5,
      date: '日期',
      content: '评价内容'
    }
  ]
}
```

## 路由配置

- **路径**：`/` 或 `/product/:id`
- **组件**：`ProductDetail.vue`
- **参数**：`id` - 商品ID（可选）

## 使用示例

### 访问商品详情页
```
http://localhost:3000/
http://localhost:3000/product/1
```

### 从其他页面跳转
```javascript
router.push('/product/1')
router.push({ path: '/product', params: { id: '1' } })
```

## 扩展建议

1. **商品列表页**：创建商品列表，点击跳转到详情页
2. **购物车功能**：添加购物车按钮和功能
3. **商品推荐**：在详情页下方展示相关商品
4. **图片轮播**：主图支持自动轮播
5. **视频展示**：支持商品视频播放
6. **分享功能**：添加商品分享功能