131 lines
3.1 KiB
Markdown
131 lines
3.1 KiB
Markdown
|
# 商品详情页说明
|
|||
|
|
|
|||
|
|
## 页面功能
|
|||
|
|
|
|||
|
|
### 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. **分享功能**：添加商品分享功能
|
|||
|
|
|