C 端活动详情页 - 通用组件规范

版本: V2.0
更新日期: 2026-01-21
状态: 定稿 更新内容: V6.0 沉浸式 UI 标准、ClubCard/ResortCard 关联信息组件、ParticipantList 模态框交互、OrganizerCard 极简版变体

本文档定义所有活动详情页共享的 UI 组件规范，确保跨模块的一致性与可复用性。

一、页面骨架

┌────────────────────────────────────┐
│ 导航栏                              │
├────────────────────────────────────┤
│ 封面区                              │
├────────────────────────────────────┤
│ 标题区                              │
├────────────────────────────────────┤
│ [差异化插槽区 - 支持多个区块]         │  ← 各模块定制
├────────────────────────────────────┤
│ 发布者卡片                          │
├────────────────────────────────────┤
│ 详情描述区                          │
├────────────────────────────────────┤
│ 须知规则区                          │
├────────────────────────────────────┤
│ 评价区 / 完赛感言区                  │
└────────────────────────────────────┘
┌────────────────────────────────────┐
│ 底部操作栏（吸底）                   │
└────────────────────────────────────┘

差异化插槽机制

各模块可在「差异化插槽区」插入 1-3 个定制区块，排序规则如下：

模块	插槽区块（按顺序）
周期性活动	场次选择区
官方团购	阶梯价格区 → 商品信息区
里程挑战	排行榜区 → 挑战规则区
雪友组局	报名信息区 → 费用信息区

二、统一字段字典

为保证前后端契约一致，所有模块使用以下统一字段命名：

时间类字段

字段名	类型	说明
开始时间	时间戳	活动/场次开始时间
结束时间	时间戳	活动/场次结束时间
创建时间	时间戳	记录创建时间

人数类字段

字段名	类型	说明
当前人数	整数	当前已报名/参与人数
人数上限	整数	最大可报名人数
最低人数	整数	成行所需最低人数
剩余名额	整数	人数上限 - 当前人数

价格类字段

字段名	类型	说明
单价	金额	每人价格（精确到分）
原价	金额	划线价格
预估费用	金额	AA 模式下的预估金额
当前阶梯价	金额	团购当前已解锁价格

状态枚举

字段名	可选值	说明
活动状态	招募中/已生效/已结束/已取消	活动生命周期状态
场次状态	可报名/已满/已截止/已结束	单个场次状态
订单状态	待支付/已报名/已完成/已取消	用户订单状态

三、沉浸式 UI 标准 (Immersive UI)

版本 V6.0 新增：适用于所有活动详情页

3.1 设计原则

原则	说明
全屏出血	封面区无边距，撑满屏幕宽度
信息降噪	移除非核心元素（咨询/收藏按钮），聚焦主流程
浮动导航	返回/分享按钮浮于封面区，使用毛玻璃圆形背景

3.2 导航栏

沉浸式模式（默认）：

元素	位置	样式
返回按钮	封面左上角	40x40pt 圆形毛玻璃背景 `bg-black/30 backdrop-blur`
分享按钮	封面右上角	同上

注：收藏功能移至分享面板内，不再独立显示。

传统模式（可选）：

元素	位置	行为
返回按钮	左侧	返回上一页
分享按钮	右侧	唤起系统分享面板
收藏按钮	右侧	切换收藏状态（实心/空心）

样式：默认透明悬浮，下滑后渐变为白底。

3.3 封面区

字段	类型	规则
媒体列表	数组	最多 9 张图或 1 个视频
封面比例	枚举	`16:9`（默认）/ `4:3`

沉浸式样式：

无内边距，图片撑满屏幕宽度
轮播指示器居中显示于图片底部
返回/分享按钮浮于图片上层

交互：

左右滑动切换
点击进入全屏浏览
视频自动静音播放，点击开启声音

3.3 标题区

┌────────────────────────────────────┐
│ [活动标题 - 单行/双行]              │
│                                    │
│ 🏷️ [价格展示]        [参与数徽标]   │
│ [类型标签] [状态标签]               │
└────────────────────────────────────┘

字段	类型	说明
title	String	最多 50 字
price_display	Component	见「价格展示规范」
participation_badge	String	`已有 128 人参与`
type_tag	Tag	活动类型（团购/挑战/组局等）
status_tag	Tag	状态标签（进行中/即将开始/已结束）

价格展示规范

场景	展示样式	示例
固定价格	`¥{price}/人`	¥299/人
起步价	`¥{min_price}/人起`	¥299/人起
阶梯区间	`¥{min}-{max}/人`	¥550-680/人
免费	`免费` (绿色标签)	免费
AA 模式	`AA约¥{estimate}/人`	AA约¥150/人

3.5 OrganizerCard 发布者卡片

完整版（传统布局）

┌──────────────────────────────────────┐
│ [头像]  [昵称]              ⭐ 4.9 (86)│
│ [认证标签] · [简介]                   │
│                          [关注] [私信]│
└──────────────────────────────────────┘

字段	类型	说明
avatar	Image	48x48 圆形
nickname	String	昵称
certification	`Array<Tag>`	认证标签（教练/摄影师/官方/俱乐部）
rating	Float + Int	评分 + 评价数
bio	String	一句话简介，最多 30 字

极简版（沉浸式布局）

V6.0 新增：适用于沉浸式 UI 下的信息降噪

┌──────────────────────────────────────┐
│ 🔹 发起人                             │
│ [头像] [昵称]                    [→]  │
└──────────────────────────────────────┘

字段	类型	说明
avatar	Image	48x48 圆形
nickname	String	昵称

交互：点击整行进入发起人/组织者详情页，可进行关注/私信操作

认证标签样式

🎿 认证教练（蓝色）
📷 认证摄影师（紫色）
✅ 官方认证（金色）
🏔️ 俱乐部（橙色）

3.6 ParticipantList 已报名用户列表

┌────────────────────────────────────┐
│ 🔹 已报名（128/200）           [＞]  │
│ [头像1] [头像2] [头像3] ... +120   │
└────────────────────────────────────┘

字段	类型	说明
total	Integer	已报名总人数
max	Integer	人数上限
users	Array	用户信息数组（id/name/avatar/level）
max_display	Integer	默认展示 8 个头像

交互方式

模态框模式（V6.0 默认）：

点击头像行 → 展开 Bottom Sheet 模态框

┌────────────────────────────────────┐
│ 已报名 (128/200)              [×]  │
├────────────────────────────────────┤
│ [头像] 雪友小张         [关注][私信]│
│        Lv.5 中级滑雪者              │
│ [头像] 摄影达人老李      [关注][私信]│
│        Lv.8 高级滑雪者              │
│ ...                                │
└────────────────────────────────────┘

模态框交互：

使用 slideUp 动画从底部滑入
点击蒙层或 × 按钮关闭
用户行可点击跳转个人主页
每行提供「关注」「私信」快捷操作

传统模式（可选）：

点击头像 → 跳转用户主页
点击右箭头 → 跳转全部报名用户列表页

2.5 DescriptionBlock 详情描述

配置项	说明
折叠阈值	默认展示 200 字，超出显示「展开」
富文本支持	文字 + 图片 + 有序/无序列表

标题样式：📝 活动详情 + 可点击展开/收起

3.8 RulesBlock 须知/规则

配置项	说明
标题	`📋 {规则类型}须知`
内容格式	无序列表
折叠	默认折叠，显示前 3 条

3.9 ClubCard 关联俱乐部

V6.0 新增：适用于沉浸式 UI 布局

位置：发起人/组织者卡片（OrganizerCard）下方

┌──────────────────────────────────────┐
│ [Logo] 崇礼滑雪俱乐部           [→]  │
│        1,580 会员                    │
└──────────────────────────────────────┘

字段	类型	说明
logo	Image	俱乐部 Logo，40x40 圆形
name	String	俱乐部名称
memberCount	Integer	会员数量

条件渲染：仅当活动配置了关联俱乐部时显示

交互：点击整行跳转俱乐部详情页

3.10 ResortCard 关联雪场

V6.0 新增：适用于沉浸式 UI 布局

位置：页面内容区底部（须知/规则区之后）

┌──────────────────────────────────────┐
│ 🏔️ 关联雪场                          │
│ [Logo] 万龙滑雪场                [→]  │
│        河北省张家口市崇礼区万龙路1号    │
└──────────────────────────────────────┘

字段	类型	说明
logo	Image	雪场 Logo，40x40 圆形
name	String	雪场名称
address	String	雪场地址

条件渲染：仅当活动配置了关联雪场时显示

交互：点击整行跳转雪场详情页

2.7 ReviewBlock 评价模块

💬 评价（86条）                 [查看全部]
┌──────────────────────────────────────┐
│ 👤 雪友A  ⭐⭐⭐⭐⭐                    │
│ 评价内容（最多显示2行）...            │
│ [图片缩略图 x N]                      │
│ 2025-01-12                          │
└──────────────────────────────────────┘

配置项	说明
默认展示	最新 3 条评价
点击「查看全部」	跳转评价列表页

替代版本：里程挑战模块使用 AchievementBlock（完赛感言）

2.8 ActionBar 底部操作栏

┌────────────────────────────────────┐
│ [价格/状态信息]    [主操作按钮]      │
└────────────────────────────────────┘

配置项	说明
左侧信息	价格摘要或状态文字
主按钮	根据模块配置（见下表）
高度	固定 64pt，安全区适配

主按钮配置

模块	按钮文案	点击行为
周期性活动	`立即报名`	唤起 Bottom Sheet（选场次 → 填信息 → 支付）
官方团购	`立即参团`	唤起 Bottom Sheet（确认信息 → 支付）
里程挑战	`报名挑战`	直接报名确认弹窗
雪友组局	`我要报名`	唤起 Bottom Sheet（填信息 → 支付/确认）

统一交互：所有报名操作使用 Bottom Sheet 模式，避免页面跳转造成流失。

三列布局版本（雪友组局/里程挑战）

┌─────────────────────────────────────────┐
│ [咨询] [收藏] │ ¥价格 │ [主操作按钮]     │
└─────────────────────────────────────────┘

元素	说明
咨询按钮	图标+文字，点击联系发起人/客服
收藏按钮	图标+文字，切换收藏状态
价格区	见「价格展示规范」，支持 FREE/AA/FIXED
主按钮	报名/加入按钮

适用于雪友组局、里程挑战等社交属性较强的活动页面。

三、状态变体

3.1 活动状态-按钮映射表

注：按钮文案与可交互状态的完整映射

活动状态	按钮文案	可点击	点击行为
报名中	`立即加入`	✅ 是	唤起报名 Bottom Sheet
已满员	`已满员`	❌ 否	置灰禁用
报名已结束	`报名已结束`	❌ 否	置灰禁用
进行中	`活动进行中`	❌ 否	置灰禁用
已结束	`已结束`	❌ 否	置灰禁用
已取消	`已取消`	❌ 否	置灰禁用

按钮样式规范

状态	背景色	文字色	样式
可点击	`--color-primary` (#0369A1)	白色	圆角填充
禁用	`#E2E8F0`	`#94A3B8`	圆角填充，无点击反馈

3.2 活动状态标签（展示用）

状态	标签样式
报名中	🟢 报名中
已满员	🟡 已满员
报名已结束	⚫ 报名已结束
进行中	🔵 活动进行中
已结束	⚫ 已结束
已取消	🔴 已取消

3.3 空状态

场景	展示
无评价	隐藏 ReviewBlock
无排行榜数据	显示「暂无数据，快来成为第一名」

四、报名流程（Bottom Sheet）

4.1 通用报名表单

唤起条件：用户点击「立即加入」按钮

┌────────────────────────────────────┐
│ 确认报名                      [×]  │
├────────────────────────────────────┤
│ 活动：{活动标题}                    │
│ 时间：{MM/DD 周X HH:MM}            │
│ 地点：{活动地点}                    │
├────────────────────────────────────┤
│ 报名人信息                         │
│ 姓名 *        [            ]       │
│ 手机号 *      [🔒 138****8888 ]      │
│                                    │
│ ⓘ 默认使用注册手机号                │
├────────────────────────────────────┤
│ ☑ 我已阅读并同意《活动须知与风险告知书》│
├────────────────────────────────────┤
│ ⓘ 报名成功后将自动加入活动群聊      │  ← 自动加群提示
├────────────────────────────────────┤
│           [确认报名]               │   ← 免费/AA 活动
│           [确认支付 ¥{价格}]        │   ← 付费活动
└────────────────────────────────────┘

字段定义

字段名	类型	必填	说明
手机号	String	✅ 是	只读。默认使用注册手机号，带锁图标，不可修改。

4.2 自动加群提示规则

条件	提示文案	显示位置
创办人开启「自动加群」	`ⓘ 报名成功后将自动加入活动群聊`	表单底部，确认按钮上方
创办人未开启或无群聊	不显示任何提示	-

4.3 报名成功页

唤起条件：用户提交报名表单成功后

┌────────────────────────────────────┐
│            ✅ 报名成功              │
├────────────────────────────────────┤
│ {活动标题}                          │
│ 📅 {MM/DD 周X HH:MM}               │
│ 📍 {活动地点}                       │
├────────────────────────────────────┤
│ 💬 已自动加入活动群聊               │  ← 仅开启加群时显示
├────────────────────────────────────┤
│   [进入群聊]      [返回活动]        │  ← 双按钮
│   [返回活动]                        │  ← 单按钮（无群聊时）
└────────────────────────────────────┘

交互规则

按钮	条件	点击行为
进入群聊	开启自动加群	跳转 IM 群聊页面
返回活动	始终显示	关闭成功页，返回活动详情页

4.4 付费活动报名

需要支付的活动，在确认表单底部显示费用明细

├────────────────────────────────────┤
│ 费用明细                           │
│ ¥{单价} × {人数}人 = ¥{总价}        │
├────────────────────────────────────┤
│           [确认支付 ¥{总价}]        │
└────────────────────────────────────┘

支付成功后同样跳转「报名成功页」

4.5 报名异常处理 (Error Sheet)

V5.0 新增：统一的错误反馈弹窗

┌────────────────────────────────────┐
│          ⚠️ (红色图标)              │
│ 标题：{错误标题}                    │
│ 描述：{错误详细文案}                │
│                                    │
│ [   重试   ]                       │
│ [   关闭   ]                       │
└────────────────────────────────────┘

错误类型枚举

错误代码	标题	描述文案
`NETWORK`	网络异常	当前网络不稳定，请稍后重试。
`FULL`	名额已满	手慢了，该活动名额已抢光。
`EXPIRED`	报名截止	活动报名时间已过，下次早点来哦。
`CANCELLED`	活动取消	活动发起人已取消该活动。
`NO_QUALIFICATION`	无报名资格	您的条件不符合活动要求 (如性别/等级)。

四、设计 Token

Token	值	用途
`--color-primary`	#0369A1	主操作按钮
`--color-bg`	#F8FAFC	页面背景
`--color-text-primary`	#0F172A	标题文字
`--color-text-secondary`	#64748B	次要文字
`--radius-card`	12px	卡片圆角
`--spacing-section`	16px	区块间距

C 端活动详情页 - 通用组件规范 ​

一、页面骨架 ​

差异化插槽机制 ​

二、统一字段字典 ​

时间类字段 ​

人数类字段 ​

价格类字段 ​

状态枚举 ​

三、沉浸式 UI 标准 (Immersive UI) ​

3.1 设计原则 ​

3.2 导航栏 ​

3.3 封面区 ​

3.3 标题区 ​

价格展示规范 ​

3.5 OrganizerCard 发布者卡片 ​

完整版（传统布局） ​

极简版（沉浸式布局） ​

认证标签样式 ​

3.6 ParticipantList 已报名用户列表 ​

交互方式 ​

2.5 DescriptionBlock 详情描述 ​

3.8 RulesBlock 须知/规则 ​

3.9 ClubCard 关联俱乐部 ​

3.10 ResortCard 关联雪场 ​

2.7 ReviewBlock 评价模块 ​

2.8 ActionBar 底部操作栏 ​

主按钮配置 ​

三列布局版本（雪友组局/里程挑战） ​

三、状态变体 ​

3.1 活动状态-按钮映射表 ​

按钮样式规范 ​

3.2 活动状态标签（展示用） ​

3.3 空状态 ​

四、报名流程（Bottom Sheet） ​

4.1 通用报名表单 ​

字段定义 ​

4.2 自动加群提示规则 ​

4.3 报名成功页 ​

交互规则 ​

4.4 付费活动报名 ​

4.5 报名异常处理 (Error Sheet) ​

错误类型枚举 ​

四、设计 Token ​

雪哒产品文档