# 详情页 / 报名页 · 设计师线框

> 与 [发局流程](./designer-create-session-flow.md) 对称 · 路径 `/m/{id}`  
> 三端共用信息架构，CTA 与分享按端差异

---

## 一、流程总览

```mermaid
flowchart TD
    L[分享链接/列表点击进入] --> D[活动详情页]
    D --> A{用户状态}
    A -->|未登录| R0[登录/绑手机]
    R0 --> D
    A -->|已登录| B{报名资格}
    B -->|可报| R1[报名确认弹层/页]
    B -->|仅队员| R2[引导申请入队]
    B -->|已满| R3[候补/已满态]
    B -->|已报| R4[已报名态/取消]
    R1 --> P{需支付?}
    P -->|是| R5[支付]
    P -->|否| S[报名成功]
    R5 --> S
    S --> G[局内群/订阅消息]
    D --> C[分享]
    D --> CH[进入群聊]
    D --> F[论坛帖]
```

---

## 二、详情页 · 信息结构（与发局预览对称）

| 区块 | 字段 | 发局预览对应 |
|------|------|--------------|
| 顶栏 | 返回、分享 | Step7 |
| 运动头图 | 图标 + 运动名 + 子赛制 | Step1 |
| 时间 | 开始–结束、倒计时 | Step4 |
| 场地集合 | 名称、地址、导航 | Step2 |
| 场地片 | 片名（若有） | Step3 |
| 人数 | 已报/上限、候补 | Step5 |
| 水平/费用 | 标签 + 费用说明 | Step5 |
| 球队/组织者 | 头像、角色 Badge | Step6 |
| 报名模式 | 公开/队员优先等 | Step6 |
| 已报名列表 | 头像、昵称 | — |
| 次级入口 | 局内群、论坛、圈子 | — |
| 底栏 CTA | 报名/取消/已满/入队 | — |

---

## 三、详情页线框

### 3.1 标准态（可报名）

```
┌─────────────────────────────┐
│ ←                    [分享] │
├─────────────────────────────┤
│ [篮球]  周六 3/28           │
│ 14:00 - 16:00    还有 2 天   │
├─────────────────────────────┤
│ ┌─────────────────────────┐ │
│ │   [地图] XX 运动中心  →   │ │
│ │   篮球全场 1号            │ │
│ │   朝阳区 xx 路      导航  │ │
│ └─────────────────────────┘ │
├─────────────────────────────┤
│ 8 / 12 人  ·  休闲  ·  AA 50/人
│ 公开报名 · XX 篮球队         │
│ 组织者 [头像] 李队长 [队长]   │
├─────────────────────────────┤
│ 已报名                       │
│ (○)(○)(○)(○)(○)(○)(○)(○)    │
│ 查看全部 →                   │
├─────────────────────────────┤
│ [局内群 3条新消息]  [论坛]    │
│ [本场相册/圈子]              │
├─────────────────────────────┤
│ 备注: 请穿队服，迟到超过15分… │
└─────────────────────────────┘
│  ━━━━━━━━ 立即报名 ━━━━━━━━  │  ← 固定底栏
└─────────────────────────────┘
```

### 3.2 已报名态

```
│  ━━━━━ 已报名 · 取消报名 ━━━━━  │
│  或: 已确认 ✓  |  候补中 #2    │
```

### 3.3 已满 · 可候补

```
│  名额已满  [加入候补]          │
```

### 3.4 仅队员（外链用户）

```
│  本场仅队员可报               │
│  ━━━━━━━ 申请加入球队 ━━━━━━━  │
```

### 3.5 已结束 / 已取消

```
│  [灰色蒙层] 活动已结束         │
│  查看圈子回顾 / 下场推荐 →     │
```

### 3.6 组织者管理条（队长/经理）

```
┌─────────────────────────────┐
│ [管理报名] [改期] [取消活动]   │  ← 顶栏下浮动条
└─────────────────────────────┘
```

---

## 四、报名流程线框

### Step R1 · 报名确认（Bottom Sheet / 半屏）

```
┌─────────────────────────────┐
│          ───                 │
│ 确认报名                     │
├─────────────────────────────┤
│ [篮球] 周六 14:00            │
│ XX 运动中心 · 全场1号        │
│ 费用: AA 约 50 元/人         │
├─────────────────────────────┤
│ 昵称  [张三分]               │
│ 手机  [138****1234]          │
│ 备注  [可选]                 │
├─────────────────────────────┤
│ □ 订阅活动提醒（小程序）      │
│ □ 同意活动须知               │
├─────────────────────────────┤
│  ━━━━━━━━ 确认报名 ━━━━━━━━  │
└─────────────────────────────┘
```

### Step R2 · 需队长确认

```
报名后 Toast: 「已提交，等待队长确认」
详情底栏: 「审核中」
```

### Step R3 · 支付（P1）

```
┌─────────────────────────────┐
│ 支付报名费  ¥50              │
│ [微信支付] / [Stripe]        │
│ 支付成功即确认报名            │
└─────────────────────────────┘
```

### Step R4 · 报名成功

```
┌─────────────────────────────┐
│ ✓ 报名成功                   │
│ 周六 14:00 见                │
│ [进入局内群]  [添加日历]      │
│ [分享叫朋友一起]             │
└─────────────────────────────┘
```

---

## 五、分享态（各端）

| 端 | 分享内容 |
|----|----------|
| 小程序 | 卡片：运动+时间+集合+人数+封面 |
| H5 | OG：标题/图/描述；复制链接 |
| App | 系统分享面板 |

**分享图模板区域（设计稿）：**

```
┌──────────────────┐
│ [运动图标] 篮球   │
│ 周六 14:00       │
│ XX 运动中心      │
│ 8/12 人已报名    │
│ [二维码/品牌]    │
└──────────────────┘
  5:4 小程序卡片 / 1200×630 OG
```

---

## 六、三端差异

| 能力 | 小程序 | H5 | App |
|------|:------:|:--:|:---:|
| 详情完整信息 | ✓ | ✓ | ✓ |
| 底栏报名 CTA | ✓ | ✓ | ✓ |
| 分享卡片 | ✓ | OG | 系统 |
| 订阅提醒 | 订阅消息 | — | Push |
| 局内群 | ✓ | ✓ | ✓ |
| 管理报名 | ✓ | ○ | ✓ |
| 国内引导小程序 | — | 底栏 | — |

---

## 七、异常与边界态

| 状态 | UI |
|------|-----|
| 活动不存在 | 404 + 回首页 |
| 链接过期 | 「活动已结束」 |
| 未绑手机 | 报名前阻断绑手机 |
| 信用分不足 | 提示 + 联系组织者 |
| 支付失败 | 重试 / 改为线下 AA 说明 |
| 取消报名截止 | 「已过取消截止时间」 |

---

## 八、Figma 页面命名

```
flow/session-detail/
  detail-open
  detail-registered
  detail-waitlist
  detail-full
  detail-members-only
  detail-ended
  detail-organizer-bar
  register-confirm-sheet
  register-pending
  register-pay
  register-success
  share-poster-template
  error-not-found
```

---

## 九、与发局字段对照表

| 发局 Step | 详情页区块 |
|-----------|------------|
| Step1 运动 | 头图区 |
| Step2 集合 | 地图卡片 |
| Step3 片 | 地图卡片副行 |
| Step4 时间 | 时间区 |
| Step5 人数/费用 | 标签行 |
| Step6 球队/模式 | 球队+组织者 |
| Step7 预览 | 整页一致 |

---

## 十、交互明细（原型已实现）

> 原型路径：[H5 交互原型](../../prototype/h5/index.html) · 设计系统：[Lala One](../../prototype/design-system/index.html) · 入口：[设计师工作台](../../prototype/index.html)

| 区域 | 元素 | 手势 | 结果 |
|------|------|------|------|
| 顶栏 | 返回 | Tap | history.back |
| 顶栏 | 分享 | Tap | 分享面板 Toast |
| 地图卡片 | 整块 / 导航 | Tap | 唤起地图 App（设计稿标注） |
| 组织者行 | Cell | Tap | → 球队主页 |
| 已报名头像 | 横向列表 | Tap | → 成员列表（P1） |
| 局内群 Cell | — | Tap | → 群聊页，可发消息 |
| 论坛 Cell | — | Tap | → 论坛列表 → 帖详情 |
| 相册 Cell | — | Tap | → 圈子帖详情 |
| 底栏 CTA | 主按钮 | Tap | 见状态机 §7.3 |
| 报名 Sheet | 确认 | Tap | → 报名成功，人数 +1 |
| 报名 Sheet | 取消 / 遮罩 | Tap | 关闭 Sheet |
| 报名成功 | 进群 | Tap | → 局内群 |
| 组织者条 | 切换报名模式 | Tap | 公开 ↔ 仅队员 |

### 原型 screen ID 对照

| 线框态 | 原型 `#screen-*` |
|--------|-------------------|
| detail-open | `session-detail` |
| register-confirm-sheet | Sheet 模板 |
| register-success | `register-success` |
| detail-registered | 详情页 CTA 切换 |
| detail-members-only | toggle-members-only 演示 |
| forum-thread | `forum-detail` |
| circle-post | `circle-detail` |

---

## 相关文档

- [发局流程](./designer-create-session-flow.md)
- [运动类型配置](../04-domain/sport-types-config.md)
- [活动与报名](../04-domain/events-booking.md)