qiube
ed745ee6a5
- 添加商品创建表单，支持商品基本信息录入 - 实现多图片上传功能，支持主图和SKU图片上传 - 添加SKU配置模块，支持多个SKU的添加和管理 - 实现销售地区选择功能，支持多地区价格设置 - 添加物流信息配置，包括重量和尺寸设置 - 实现批量编辑功能，支持批量设置价格和库存 - 添加表单验证和提交逻辑，确保数据完整性 - 集成API接口，实现商品创建功能 - 添加页面路由配置，支持从商品管理页面跳转
3.1 KiB
3.1 KiB
商品详情页说明
页面功能
1. 商品展示区域
- 左侧大图：支持点击放大预览
- 缩略图列表：点击切换主图
- 图片预览：Element Plus图片预览功能
2. 商品信息区域
- 商品标题：大字体，醒目展示
- 商品副标题：补充说明信息
- 价格展示：
- 现价（大字体，红色高亮）
- 原价（删除线，灰色）
- 节省金额提示
3. 规格选择
- 多规格支持：颜色、尺寸等
- 可视化选择：标签式选择，选中高亮
- 必选验证：支付前验证所有规格已选择
4. 数量选择
- 数量输入框：支持增减
- 库存显示：实时显示库存信息
- 库存限制：超过库存时禁用
5. 服务保障
- 7天无理由退货
- 正品保证
- 极速发货
6. 操作按钮
- 立即购买：橙色渐变按钮
- 立即支付：红色渐变按钮（主要支付按钮）
- 悬停效果：按钮有阴影和上浮动画
7. 商品详情标签页
- 商品详情：HTML格式的商品描述
- 规格参数：表格形式展示参数
- 用户评价：评价列表展示
样式特点
参考主流电商设计
- 价格突出：大字体、红色、渐变背景
- 图片展示：大图+缩略图，支持预览
- 按钮设计：渐变背景、阴影效果、悬停动画
- 卡片布局：圆角、阴影、层次分明
- 响应式设计：移动端自适应
颜色方案
- 主色调：红色系（#f56c6c, #ff4757）
- 辅助色：橙色系（#ff9500, #ff6b00）
- 背景色：浅灰色（#f5f7fa）
- 文字色：深灰色（#333, #666）
支付流程
- 用户选择商品规格和数量
- 点击"立即支付"按钮
- 系统自动生成订单号
- 调用后端API创建支付订单
- 跳转到收银台页面完成支付
数据格式
商品数据结构
{
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
从其他页面跳转
router.push('/product/1')
router.push({ path: '/product', params: { id: '1' } })
扩展建议
- 商品列表页：创建商品列表，点击跳转到详情页
- 购物车功能：添加购物车按钮和功能
- 商品推荐：在详情页下方展示相关商品
- 图片轮播：主图支持自动轮播
- 视频展示：支持商品视频播放
- 分享功能：添加商品分享功能