Appearance
周期性活动详情页 PRD
版本: V1.1
更新日期: 2026-01-21
依赖: 通用组件规范更新内容: 新增关联信息展示规则(ClubCard/ResortCard)
一、模块定位
场景:摄影师/教练发布的周期性服务(跟拍、教学),用户选择具体场次报名。
核心交互:选场次 → 填信息 → 确认支付
二、差异化插槽 - 场次选择区 (SessionSelector)
2.1 页面结构
┌────────────────────────────────────┐
│ 📍 万龙滑雪场 · 银龙道集合点 │
│ 🕐 每周六 09:00-12:00 · 约3小时 │
│ 👤 每场次限 4 人 │
├────────────────────────────────────┤
│ 📅 选择场次 │
│ ┌────────────────────────────────┐ │
│ │ 01/18 周六 09:00 ¥299 剩余3位 │ │
│ │ 01/19 周日 09:00 ¥299 [已满] │ │
│ │ 01/25 周六 09:00 ¥299 剩余4位 │ │
│ │ 01/26 周日 09:00 ¥299 剩余4位 │ │
│ │ [查看更多场次 ▼] │ │
│ └────────────────────────────────┘ │
└────────────────────────────────────┘2.2 字段定义
| 字段 | 类型 | 说明 |
|---|---|---|
| location | POI | 集合地点(关联雪场) |
| schedule_pattern | String | 排期规律描述 |
| duration | Int | 服务时长(分钟) |
| capacity_per_session | Int | 每场次人数上限 |
| sessions | Array<Session> | 场次列表 |
Session 对象
| 字段 | 类型 | 说明 |
|---|---|---|
| session_id | String | 场次唯一标识 |
| date | Date | 日期 |
| weekday | String | 星期几 |
| start_time | Time | 开始时间 |
| end_time | Time | 结束时间 |
| price | Decimal | 价格 |
| total_slots | Int | 总名额 |
| remaining_slots | Int | 剩余名额 |
| status | Enum | OPEN / FULL / CLOSED / ENDED |
2.3 场次状态展示
| 状态 | 显示样式 | 可点击 |
|---|---|---|
| OPEN (有余位) | ¥{price} 剩余{n}位 | ✅ |
| OPEN (≤3位) | ¥{price} 🔥仅剩{n}位 (橙色) | ✅ |
| FULL | 灰色 + 已满 标签 | ❌ |
| CLOSED | 灰色 + 已截止 标签 | ❌ |
| ENDED | 灰色 + 已结束 标签 | ❌ |
三、报名流程 (Bottom Sheet)
3.1 步骤一:确认场次
┌────────────────────────────────────┐
│ 确认报名 [×] │
├────────────────────────────────────┤
│ 已选场次 │
│ 📅 01/25 周六 09:00-12:00 │
│ 📍 万龙滑雪场 · 银龙道集合点 │
│ 剩余名额:4 位 │
├────────────────────────────────────┤
│ [下一步] │
└────────────────────────────────────┘3.2 步骤二:填写信息
┌────────────────────────────────────┐
│ 报名人信息 [×] │
├────────────────────────────────────┤
│ 姓名 * [ ] │
│ 手机号 * [ ] │
│ 滑雪水平 [初级 ▼] │
│ 备注 [ ] │
├────────────────────────────────────┤
│ ☑ 我已阅读并同意《报名须知》 │
├────────────────────────────────────┤
│ 费用明细 │
│ ¥299 × 1人 = ¥299 │
├────────────────────────────────────┤
│ [确认报名 ¥299] │
└────────────────────────────────────┘3.3 字段配置
| 字段 | 必填 | 说明 |
|---|---|---|
| name | 是 | 真实姓名 |
| phone | 是 | 手机号(自动填充已绑定号码) |
| skill_level | 否 | 滑雪水平(初级/中级/高级) |
| remark | 否 | 备注信息 |
四、RulesBlock 配置
标题:📋 报名须知
默认内容:
- 报名截止:活动开始前 24 小时
- 提前 24 小时取消可全额退款
- 12-24 小时取消退 50%
- 12 小时内取消需发起人同意
五、ActionBar 配置
| 元素 | 内容 |
|---|---|
| 左侧信息 | ¥{min_price}/人起 或 ¥{price}/人 |
| 主按钮 | 立即报名 |
| 禁用状态 | 所有场次已满/已结束时,按钮置灰显示「暂无可报名场次」 |
六、关联信息展示规则
V1.1 新增:遵循通用组件规范中的 ClubCard / ResortCard 定义
6.1 关联俱乐部 (ClubCard)
位置:活动组织者卡片下方
条件渲染:仅当活动配置了关联俱乐部时显示
6.2 关联雪场 (ResortCard)
位置:购买须知区下方(页面底部)
条件渲染:仅当活动配置了关联雪场时显示
七、验收标准
- 场次列表渲染:正确展示未来 30 天内的所有场次
- 库存紧张标识:剩余 ≤3 位时显示橙色「仅剩 N 位」
- 已满场次不可点:状态为 FULL 的场次点击无响应
- 报名信息预填:手机号自动填充用户绑定号码
- 须知勾选校验:未勾选须知时,「确认报名」按钮禁用
