Appearance
官方团购详情页 PRD
版本: V1.4
更新日期: 2026-01-21
依赖: 通用组件规范更新内容: V1.4 封面轮播(多图+指示器+箭头)、标题移至卡片区、库存上限展示、商品详情简化(亮点+套餐包含)
一、模块定位
场景:官方发起的标准化商品拼团(雪票、酒店套餐等),支持阶梯定价和自动退差。
核心交互:查看进度 → 支付当前价 → 结束后自动退差
运营机制:通过「模拟成团」保障,确保活动必定成功,不存在拼团失败场景。
二、封面与标题区
V1.4 更新:封面改为轮播组件,标题移至白色卡片区
2.1 封面轮播
┌────────────────────────────────────┐
│ [←] [图片1/3/图片] [→] │
│ │
│ ● ○ ○ (底部指示器) │
└────────────────────────────────────┘交互规则:
- 支持多图轮播(3秒自动切换)
- 底部小圆点指示器 + 左右箭头
- 与其他活动类型保持一致的轮播样式
2.2 标题卡片区
┌────────────────────────────────────┐
│ [官方团购] ⏰ 1天 23:58:05 │
│ 北大湖住滑套餐 · 3天2晚 │
│ ¥1499 当前解锁价 原价 ¥2499 │
│ [官方自营] [过期退] [随时退] │
└────────────────────────────────────┘三、阶梯价格区
3.1 拼团进度
┌────────────────────────────────────┐
│ 📊 拼团进度 │
│ 45人已参团 / 限1000份 │
│ ┌────────────────────────────────┐ │
│ │ ███████████░░░░░ │ │
│ └────────────────────────────────┘ │
│ 再来5人解锁 ¥1299 │
└────────────────────────────────────┘V1.4 新增:库存上限(限X份)展示
字段定义
| 字段名 | 类型 | 说明 |
|---|---|---|
| 阶梯配置 | 数组 | 价格阶梯列表 |
| 当前人数 | 整数 | 当前参团人数 |
| 库存上限 | 整数 | 限购总份数(来自发布页) |
| 结束时间 | 时间戳 | 拼团截止时间 |
四、商品详情区
V1.4 更新:简化结构,移除商品图片和描述(复用封面轮播)
┌────────────────────────────────────┐
│ 🎫 商品详情 │
├────────────────────────────────────┤
│ 亚洲顶级粉雪·五星酒店配套·含早餐自助 │
│ │
│ ┌────────────────────────────────┐ │
│ │ 套餐包含 │ │
│ │ ✓ 假日酒店双床房 2晚 │ │
│ │ ✓ 全天索道票 2张 │ │
│ │ ✓ 早餐自助 2位 │ │
│ └────────────────────────────────┘ │
│ 有效期:2026-01-01 至 2026-03-15 │
│ 使用规则:周一至周五可用,节假日除外 │
└────────────────────────────────────┘字段定义(来自引用产品 SKU)
| 字段名 | 类型 | 说明 |
|---|---|---|
| 产品亮点 | 字符串 | 简短卖点文案 |
| 套餐包含 | 数组 | 包含项目列表 |
| 有效期 | 日期范围 | 商品有效期 |
| 使用规则 | 字符串 | 使用规则说明 |
注意:商品图片复用封面轮播,不在商品详情区重复展示
2.3 拼团规则区
V1.3 新增:对齐发布页的阶梯设置、结算规则、模拟成团字段
┌────────────────────────────────────┐
│ 📋 拼团规则 │
├────────────────────────────────────┤
│ ● 结算规则 │
│ 用户入局时按当前已解锁的最高价支付; │
│ 活动结束时按最终达到的最低价结算, │
│ 差额发放至您的钱包。 │
│ │
│ ● 成团保障 ✓ │
│ 人数不足自动成团,享受当前阶梯价。 │
│ │
│ ● 退改政策 │
│ 未核销前可随时申请退款; │
│ 过期未核销自动退款。 │
└────────────────────────────────────┘字段定义(来自活动配置)
| 字段名 | 类型 | 来源 | 说明 |
|---|---|---|---|
| 结算规则 | 文案 | 发布页 | 阶梯定价+退差说明 |
| 模拟成团 | 布尔 | 发布页 | 是否开启自动补位 |
| 退改政策 | 枚举 | 引用产品 | 继承商品退改规则 |
| 过期自动退 | 布尔 | 引用产品 | 继承商品配置 |
三、发布者卡片配置
特殊处理:官方团购的发布者显示关联的雪场/商家信息
┌──────────────────────────────────────┐
│ [雪场Logo] 万龙滑雪场 ✅ 官方认证│
│ 崇礼五大雪场之一 · 优质粉雪 │
│ [查看详情] │
└──────────────────────────────────────┘四、报名流程(底部抽屉)
┌────────────────────────────────────┐
│ 确认参团 [×] │
├────────────────────────────────────┤
│ 商品:万龙滑雪场 平日雪票 │
│ 当前价:¥600/人 │
│ 数量:1 [- +] │
├────────────────────────────────────┤
│ 联系人信息 │
│ 姓名 * [ ] │
│ 手机号 * [ ] │
├────────────────────────────────────┤
│ ⚠️ 活动结束后,若解锁更低价格,差价 │
│ 将自动退回您的钱包 │
├────────────────────────────────────┤
│ 费用明细 │
│ ¥600 × 1 = ¥600 │
├────────────────────────────────────┤
│ [确认支付 ¥600] │
└────────────────────────────────────┘五、须知规则区配置
标题:📋 拼团规则
默认内容:
- 支付当前已解锁价格,活动结束后自动退差
- 差价将在活动结束后 3 个工作日内退至钱包
- 退款遵循商品退改政策
- 本活动由官方保障,确保成团
六、底部操作栏配置
| 元素 | 内容 |
|---|---|
| 左侧信息 | ¥{当前阶梯价}/人 + 原价划线 |
| 主按钮 | 立即参团 |
| 倒计时 | 距结束小于 24 小时时,显示倒计时 |
七、关联信息展示规则
V1.2 新增:遵循通用组件规范中的 ClubCard / ResortCard 定义
7.1 关联俱乐部 (ClubCard)
位置:发布者卡片下方
条件渲染:
- 仅当活动配置了关联俱乐部时显示
- 官方自营活动不展示:避免与发布者卡片信息重复
7.2 关联雪场 (ResortCard)
位置:拼团规则区下方(页面底部)
条件渲染:仅当活动配置了关联雪场时显示
八、不做范围
以下场景运营机制上不允许出现:
- ❌ 拼团失败:通过「模拟成团」机制,确保活动必定成功
- ❌ 库存不足导致的失败:官方需提前预留充足库存
八、验收标准
- 阶梯进度实时更新:新用户参团后,进度条和当前人数即时刷新
- 当前价格高亮:正确标识当前已解锁的阶梯档位
- 支付价格正确:用户支付金额 = 当前阶梯价格 × 数量
- 退差提示可见:底部抽屉中必须展示退差说明
- 倒计时准确:距结束时间倒计时每秒更新
- 进度条计算正确:进度 = 当前人数 / 下一阶梯门槛
- 提示文案正确:正确显示「再来 N 人解锁 ¥X」
