qiube
ed745ee6a5
- 添加商品创建表单，支持商品基本信息录入 - 实现多图片上传功能，支持主图和SKU图片上传 - 添加SKU配置模块，支持多个SKU的添加和管理 - 实现销售地区选择功能，支持多地区价格设置 - 添加物流信息配置，包括重量和尺寸设置 - 实现批量编辑功能，支持批量设置价格和库存 - 添加表单验证和提交逻辑，确保数据完整性 - 集成API接口，实现商品创建功能 - 添加页面路由配置，支持从商品管理页面跳转
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. **分享功能**：添加商品分享功能
|
||
|