# 发局流程 · 设计师稿 > **团队运动活动** 创建流程 · 三端共用逻辑 · 小程序步骤最全 · H5/App 可复用 > 前置阅读：[运动类型配置](./../04-domain/sport-types-config.md) --- ## 一、流程总览 ```mermaid flowchart TD A[入口: 发一场] --> B{已登录?} B -->|否| B1[登录/绑手机] --> C B -->|是| C[Step1 选运动类型] C --> D[Step2 选场地集合 必填] D --> E{需要指定片?} E -->|是| F[Step3 选场地片+档期] E -->|否| G[Step4 日期时间] F --> G G --> H[Step5 人数/水平/费用] H --> I[Step6 报名模式+球队] I --> J[Step7 预览] J --> K{发布} K -->|成功| L[详情页+分享+局内群] K -->|失败| M[错误提示/回退] ``` --- ## 二、入口 | 端 | 入口位置 | |----|----------| | 小程序 | 首页 FAB「+」/ 球队页「发一场」 | | App | 底部中心 Tab「+」→ 发一场 | | H5 | 球队页 / 国外首页（国内引导小程序） | **前置校验：** - 球队发局：校验角色（队长/副队/经理） - 个人发局：允许，但建议关联球队（可选） --- ## 三、分步线框 ### Step 0 · 登录（未登录时） ``` ┌─────────────────────────────┐ │ 登录后继续发局 │ │ [微信授权] / [手机号] │ └─────────────────────────────┘ ``` --- ### Step 1 · 选运动类型 ``` ┌─────────────────────────────┐ │ ← 发一场 │ │ 选择团队运动类型 │ ├─────────────────────────────┤ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │足球│ │篮球│ │排球│ │羽毛│ │ ← 图标网格 │ └────┘ └────┘ └────┘ └────┘ │ │ ┌────┐ ┌────┐ │ │ │乒乓│ │其他│ │ │ └────┘ └────┘ │ ├─────────────────────────────┤ │ 足球可选子类型: │ │ ○ 5人制 ○ 7人制 ○ 11人制 │ └─────────────────────────────┘ [下一步] ``` **交互：** - 选中后高亮；写入 `sport` + `sub_format` - 底部显示默认：「约 12 人 · 90 分钟」 --- ### Step 2 · 选场地集合（必填） ``` ┌─────────────────────────────┐ │ ← 选择场地 │ │ 篮球 · 仅显示支持篮球的集合 │ ├─────────────────────────────┤ │ [搜索] [地图] [列表] │ ├─────────────────────────────┤ │ ┌─────────────────────────┐ │ │ │ XX 运动中心 1.2km │ │ │ │ 篮球·足球·羽毛球 ★4.8 │ │ │ │ 今日可约: 3 时段 │ │ │ └─────────────────────────┘ │ │ ┌─────────────────────────┐ │ │ │ YY 综合馆 3.5km │ │ │ └─────────────────────────┘ │ ├─────────────────────────────┤ │ 无结果: 换运动类型或扩大范围 │ └─────────────────────────────┘ [下一步] ``` **规则：** - 未选集合不可下一步 - 显示集合支持的运动标签 - 可进集合详情预览片列表 --- ### Step 3 · 选场地片 + 档期（可选但推荐） ``` ┌─────────────────────────────┐ │ ← XX 运动中心 │ │ 选择场地片（可选） │ ├─────────────────────────────┤ │ ○ 不指定片（仅约集合内见面） │ │ ● 篮球全场 1号 │ │ ○ 篮球半场 2号 │ ├─────────────────────────────┤ │ 3月28日 周六 │ │ [08][10][14][16][19]... │ ← 可约时段 │ 14:00-16:00 ¥400 [选中] │ └─────────────────────────────┘ [下一步] ``` **交互：** - 选片后档期仅显示该片可用时段 - 不选片则 Step4 自由选时间（不锁档期） --- ### Step 4 · 日期与时间 ``` ┌─────────────────────────────┐ │ ← 时间 │ ├─────────────────────────────┤ │ [日历] │ │ 开始 3/28 周六 14:00 │ │ 结束 3/28 周六 16:00 │ ← 默认按运动时长 │ 时区 自动 │ └─────────────────────────────┘ [下一步] ``` **校验：** 与 Step3 档期冲突则提示改时间 --- ### Step 5 · 人数 / 水平 / 费用 ``` ┌─────────────────────────────┐ │ ← 活动设置 │ ├─────────────────────────────┤ │ 人数上限 [ - ] 12 [ + ] │ │ 开启候补 [开关] │ │ 水平 ○休闲 ○竞技 ○新手 │ │ 费用说明 [AA 约 50 元/人] │ │ 在线收款 [开关] P1 │ │ 备注 [多行文本] │ └─────────────────────────────┘ [下一步] ``` --- ### Step 6 · 报名模式 + 关联球队 ``` ┌─────────────────────────────┐ │ ← 报名设置 │ ├─────────────────────────────┤ │ 关联球队 [XX 篮球队 ▼] │ │ 报名模式 │ │ ○ 公开报名 │ │ ○ 队员优先，余量公开 │ │ ○ 仅队员 │ │ 需队长确认 [开关] │ └─────────────────────────────┘ [下一步] ``` --- ### Step 7 · 预览 & 发布 ``` ┌─────────────────────────────┐ │ ← 预览 │ ├─────────────────────────────┤ │ [篮球] 周六 14:00-16:00 │ │ XX 运动中心 · 全场 1号 │ │ 12 人 · 休闲 · AA 50/人 │ │ XX 篮球队 · 公开报名 │ ├─────────────────────────────┤ │ ━━━━━━━━ 发布 ━━━━━━━━ │ └─────────────────────────────┘ ``` --- ### 发布成功 ``` ┌─────────────────────────────┐ │ ✓ 发布成功 │ │ [分享卡片] [小程序码] [复制链] │ │ [进入局内群] [查看详情] │ └─────────────────────────────┘ ``` 自动：创建 Event、局内群、分享链接 `lala.one/m/{id}` --- ## 四、三端差异 | 步骤 | 小程序 | H5 国内 | H5 国外 | App | |------|:------:|:-------:|:-------:|:---:| | 全流程 | ✓ | ○ 引导 | ✓ | ✓ | | 地图选集合 | ✓ | 列表为主 | ✓ | ✓ | | 档期日历 | ✓ | 简版 | ✓ | ✓ 完整 | | 发布成功分享 | 小程序卡片 | 复制链+打开小程序 | OG+Line | 系统分享 | --- ## 五、异常态（设计必画） | 状态 | 文案/表现 | |------|-----------| | 无支持运动的集合 | 插图 + 「暂无篮球场地，试试足球或换城市」 | | 档期被占 | 「该时段已被预订，请另选」 | | 未绑手机 | 阻断发布，引导绑定 | | 仅队员可报预览 | 预览区标注「外链用户需先入队」 | | 草稿 | 「保存草稿」P1；退出确认 | --- ## 六、页面 ID 清单（Figma 命名建议） ``` flow/create-session/ 01-sport-type 02-venue-complex-list 03-venue-complex-map 04-venue-unit-slot 05-datetime 06-capacity-fee 07-registration-mode 08-preview 09-success-share error-no-venue error-slot-conflict ``` --- ## 七、与详情页字段一致 详情页展示顺序须与预览一致： ``` [运动图标] 标题/时间 场地集合名 → 可点击 └ 场地片（若有） 人数 · 水平 · 费用 球队 · 报名模式 CTA 报名 / 局内群 ``` --- ## 相关文档 - [运动类型配置](../04-domain/sport-types-config.md) · [sports.json](../../packages/shared/sports.json) - [详情/报名设计稿](./designer-session-detail-register.md) - [场地 B 端设计稿](./designer-venue-complex-admin.md) - [设计师 IA 线框](./designer-ia-wireframes.md) - [小程序功能点](./miniprogram-features.md)