邀请有礼

页面27-invite-g6.html · 邀请有礼 · 验收见 ⑧ · 分工见 ⓪

阅读方式：每条先写界面上是什么，再写元素 ID 与接口；复制成功 embed 时由 index 父页 HUD 展示。

展示顺序（按角色 · 章节号固定）

• 产品 / 老板：⓪ → ①～⑤ → ⑧
• 测试：⑧ → ①～⑤ → ⑦
• 研发：接口速查 → ①～⑤ → ⑥ → ⑦
• UI：①～⑤（图标路径在控件下）
• 数据 / 增长：⑨ → ⑥
• 多态页：③ 内分态 · ⑥⑦⑧⑨ 号不变

接口本页唯一 · GET /growth/invite/code → display_invite_code 等 · 原型 mock · 完整字段/何时调/失败见 ⑥

⓪ 本页做什么 · 分工速查

一句话：用户复制邀请链接/码或生成带二维码的海报拉新，邀请人得能量点（被邀请人无赠送，对齐 PRD §9 Q11）。

• 产品 / 老板：⑧；规则「仅邀请人得点」非「各得」；奖励点数/月上限/海报均后台可配
• 测试：复制 HUD、生成海报跳转、返回 fallback
• UI：规则区 + 邀请码 + 双 CTA（选款/预览在下游海报页）
• 前端 / 后端：GET /growth/invite/code · dev-notes · G6

① 顶栏

• 「←」返回箭头 · 顶栏左侧 · 可点击 → btn_nav_back
  • history.back()；无历史 fallback 02-home.html
• 「邀请有礼」 · 顶栏标题 → page_title

② 规则文案区

• 「邀请好友，你得能量点」 · 主标题 → copy_invite_headline（非「各得」；文案可后台配置）
• 「好友注册并登录 → 你 +10 点」 · 规则正文 → copy_invite_rule + display_invite_reward
  • 界面上的 「+10」 为接口字段 reward_points 示例值，须读后台，禁止写死
• 「被邀请人无赠送 · 每月上限 5 次」 · 灰字细则 → copy_invite_fineprint + display_invite_monthly_cap
  • 界面上的 「5」 为 monthly_limit 示例值，须读后台

③ 邀请码

• 「INV8K2M9」 · 大号邀请码展示 → display_invite_code（原型 mock；上线读接口禁止写死）
• 来源 · 怎么开发
  • 进页（已登录）请求 GET /growth/invite/code · 需带登录态
  • 后端：该用户首次进入无记录 → 生成唯一 code（建议 8 位字母数字）并绑定 user_id 持久化；再次进入返回同一码
  • 响应字段 code → 写入 display_invite_code
  • 响应字段 invite_link → 含 code 的分享 URL（H5 / 小程序 path + query）；「复制邀请链接」整链复制此字段，前端勿自行拼接
  • 同一响应的 code / invite_link 须传给下游海报页，供大图 foot 邀请码与 QR 使用（须同码同链）
  • 失败：Toast「加载失败，请重试」+ 可点重试；加载中可对邀请码区 skeleton
  • 未登录：按 PRD 跳登录页，登录成功后回跳本页再拉码

④ 操作按钮

• 「复制邀请链接」 · 橙色主按钮 · 可点击 → btn_copy_invite_link
  • 剪贴板内容 = 接口 invite_link（非前端拼 URL）→ HUD「已复制」
  • 埋点 invite_share_click · share_type=link
• 「生成邀请海报」 · 次要按钮 · 可点击 → btn_gen_invite_poster
  • 跳转独立页 27-invite-poster.html（选款/预览在本页完成 · 非同页弹层）
  • 埋点 invite_share_click · share_type=poster

⑤ 页脚说明 · 卡片下方灰字

• 「邀请关系绑定后生效 · 同一好友仅计一次」 · 页脚灰字 → copy_invite_footer · CMS 可配

⑥ 邀请码 · GET /growth/invite/code（本页唯一）

说明：邀请码/规则/链接为 _invite-prototype.js mock；上线由 GET /growth/invite/code 渲染 display_invite_code 等。海报页共用本接口 · 响应含 posters[] 在下游页渲染 · 详例见 27-invite-poster.html ⑥。替换清单 → dev-notes · 静态 mock → API。

• 何时调 · 进页（已登录）请求 · 无缓存则拉取；成功后建议写入 store 供海报页复用
• 本页字段 → 控件
  • headline → copy_invite_headline · CMS 可配
  • reward_points → display_invite_reward（+N）· 禁止写死
  • monthly_limit → display_invite_monthly_cap · 禁止写死
  • code → display_invite_code · 服务端按用户生成/读取（见 ③）
  • invite_link → btn_copy_invite_link 剪贴板 · 禁止前端拼 URL
  • posters[] → 本页不渲染 · 跳转海报页使用 · 须同一次响应
• 响应示例（原型 mock 对齐 ②③）
  • { "code": "INV8K2M9", "invite_link": "https://…/invite?code=INV8K2M9", "reward_points": 10, "monthly_limit": 5, "headline": "邀请好友，你得能量点", "posters": […] } · posters[] 供下游海报页
• 失败与边界
  • 401 未登录 → 跳登录，成功后回跳本页再拉码
  • 网络/5xx → Toast「加载失败，请重试」+ 可点重试 · 勿展示过期 mock 码
  • 加载中 → 邀请码区 skeleton

⑦ 入口 · 出口

• 入口：首页 banner_invite · 我的页 menu_invite
• 出口：← 返回首页（fallback 02-home.html）· 「生成邀请海报」→ 27-invite-poster.html · 「复制邀请链接」→ 系统剪贴板 + HUD
• 跨页：同一次 GET /growth/invite/code 响应须缓存供海报页 · code/invite_link 两页一致

⑧ 怎么验收

1. 左右对照：主标题「邀请好友，你得能量点」· 规则「好友注册并登录 → 你 +10 点」· 邀请码 INV8K2M9 须与 ②③ 开发说明一致。
2. 接口专章：打开说明滚到 ⑥，可见 GET /growth/invite/code 何时调、字段→控件、失败重试。
3. 打开：Finder 双击 27-invite-g6.html 或 index 首页邀请条进入。
4. 复制：点「复制邀请链接」→ HUD「已复制」（index 机模内由父页 overlay）。
5. 海报：点「生成邀请海报」→ 跳转 27-invite-poster.html 独立全屏页（选款/大图在海报页 · 见该页 ⑧）。
6. 返回：← 应回首页（无历史时 fallback）。

⑨ 团队补充

• 图标资产（第二批） · app-image/ICON-CATALOG.md · 全站通用 §7 · 上传 §8 · 品牌 §9 · 本页见 §10 索引表
• 图标资产（第三批） · app-image/ICON-CATALOG.md · 状态栏 §11 · 增长/分享 §12 · 表单/附件 §13 · 法务 §14 · 订单/空态 §15 · 媒体/语音 §16 · 本页见 §10
• 图标资产（第四批） · app-image/ICON-CATALOG.md · F4 模块 §18 · 状态徽章 §19 · 弹窗/加载 §20 · 联系打码 §21 · 折叠/更多 §22 · 文件类型 §23 · 分享装饰 §24 · 账号 §25 · 本页见 §10
• 分期与排期 · 产品/研发见 launch-static-to-api · 开发说明 ②～⑦ 不写「阶段 N」
• 内部代号 G6 · 仅文件名/PRD/研发沟通用 · 机模与 C 端只显示「邀请有礼」· 对照 dev-notes · G6
• 埋点 · invite_page_view · invite_share_click（share_type=link|poster）· invite_bind（绑定成功 · 防刷 unionId/设备）
• CMS 可配 · copy_invite_fineprint · copy_invite_footer（非 ⑥ 响应字段）
• 保存与分享：海报页详表 · dev-notes · 小程序保存分享
• 原型限制：mock 邀请码/规则 · _invite-prototype.js · ⑥ 字段禁止写死进生产 · 正式上线 → launch-static-to-api

字段/API 见 dev-notes · G6。