# 商城门店端直播原型 · 水滴标注清单 > 来源文件：`直播2/商城门店端直播原型.html` > 文案集中位置：脚本内 `Anno` → `REGISTRY` > 水滴挂载：DOM 上 `anno-anchor` + `anno-drop`（`data-anno-id`） > 切换页面：`showPage()` → `Anno.onPageChange(pageKey)`，侧边栏内容自动更新 > 交互对齐：`直播2/商城后台直播功能原型.html`、`直播2/PC直播间原型.html` > 水滴交互：第一次点击展开右侧标注；再次点击同一水滴收起 > **三端联动演示场次：** liveId=30「午间秒杀」，主播 b/190595；同浏览器多标签联调公屏/发券/画面 ## 标注规范（全局） 1. **一功能一水滴**：不把无关能力塞进同一滴（如「开始直播」与「实时数据」必须拆开）。 2. **说明写清**：子元素、字段口径、状态差异（待开播/直播中/已结束）、交互结果（Toast/弹窗/跳转）。 3. **挂载对准**：水滴挂在对应 UI 区域，点开侧栏即该功能说明。弹层（分享/更多等）水滴须带 `data-anno-page` 指向独立 REGISTRY key，**不可**落到底层直播间页。 4. **抽屉/子页独立 key**：商品列表、更多、结束页、分享弹窗等各自独立 `REGISTRY` 条目。 --- ## 现有标注总览 | 页面 key | 页面名 | 水滴 | 标题 | 挂载位置 | |----------|--------|------|------|----------| | `mine` | 我的（个人中心） | ①② | 直播入口 / 主播入口 | 「直播」格 / 「主播」格 | | `list` | 直播中心 | ①② | 直播中心 / 我的收益入口 | 列表滚动区 / 【我的收益】按钮 | | `earnings` | 我的收益 | ①② | Tab 切换 / 列表字段与口径 | 一级 Tab / 列表滚动区 | | `anchor` | 主播工作台（直播中心） | ①②③ | 主播资料 / 数据·订单入口 / 场次 Tab | 资料区 / 入口卡 / Tab | | `anchorReplay` | 直播回放 | ① | 回放页控件 | 顶栏 | | `anchorAnalytics` | 数据分析 | ① | 概况·漏斗·趋势字段口径 | 滚动区 | | `anchorOrders` | 直播订单 | ① | 收益统计 / 订单列表 / Tab | 滚动区 | | `anchorLive` | H5 主播中控 | ①～⑥ | 顶栏 / 实时数据 / 开始直播 / 画面 / 评论区 / 底栏 | 右侧竖排 | | `hostEndPage` | 直播结束页 | ① | 结束页字段 | 结束页左上 | | `hostGoodsSheet` | 主播商品列表 | ①② | 搜索/置顶/上下架/店库存入口 / 图左上奖励% / 库存 | 底部 Sheet | | `hostStockSheet` | 门店库存 | ①② | 商品名+门店搜索 / 库存列表 | 底部 Sheet（叠于商品列表之上） | | `hostAudienceSheet` | 在线观众 | ① | 昵称搜索 / 头像+昵称列表 | 底部 Sheet | | `hostMoreSheet` | 更多 | ① | 分享→三渠道弹窗 / 商品/券/摄像/麦克 | 底部 Sheet | | `hostCouponSheet` | 主播发券 | ① | 待开播可看不可发；点击【发放】先二次确认；发放/停止发放状态机 | 底部 Sheet | | `hostMicSheet` | 连麦 | ① | 开启连麦/红点/当前连麦【结束】/已申请接通拒绝 | 底部 Sheet | | `anchorGoodsSheet` | 商品信息弹窗 | ① | 图/标题/单价/数量 | 底部 Sheet | | `preview` | 直播预告 | ①② | 预告信息 / 分享 | 封面信息区 / 底部按钮 | | `room` | 直播间 | ①②③ | 顶部主播 / 公屏 / 底栏 | **右侧安全区竖排** | | `roomAudienceSheet` | 在线观众（会员） | ① | 昵称搜索 / 头像+昵称列表 | 底部 Sheet | | `roomMoreSheet` | 更多 | ① | 仅分享→打开三渠道弹窗 | 底部 Sheet | | `roomMicBar` | 连麦中工具条 | ① | 闭麦/摄像头/结束 | 底部浮层 | | `roomMicEndSheet` | 结束连麦确认 | ① | 结束连麦 / 取消 | 底部 Sheet | | `roomMicCancelSheet` | 等待接通 | ① | 取消申请 / 取消 | 底部 Sheet | | `couponIssue` | 发券推送弹窗 | ① | 待领取弹窗 | 全屏蒙层 | | `couponSuccess` | 领券成功弹窗 | ① | 领取成功 | 全屏蒙层 | | `couponSheet` | 优惠券抽屉 | ① | 优惠券抽屉 | 底部 Sheet | | `goodsSheet` | 商品列表面板 | ① | 商品列表（深色） | 底部 Sheet | | `goodsDetail` | 直播商品详情 | ① | 商品详情 / 顶栏分享→仅复制链接 | 详情页 | | `goodsShareSheet` | 商品详情分享 | ① | 仅复制链接（live_id+sharer，不计邀约） | 底部 Sheet；水滴 `data-anno-page=goodsShareSheet` | | `mallHome` | 商城首页占位 | ① | 首页占位 | 占位页 | | `specSheet` | 规格选择弹窗 | ① | 规格弹窗 | 底部 Sheet | | `mallOrders` | 我的订单 | ① | 我的订单 | 订单列表滚动区 | | `orderDetail` | 订单详情 | ① | 订单详情 | 状态头区域 | | `shareSheet` | 分享弹窗 | ① | 三渠道分享与邀约归因 | 底部 Sheet；水滴 `data-anno-page=shareSheet`，与直播间水滴隔离 | | `sharePoster` | 生成海报 | ① | 封面/标题/码/优惠文案 | 海报预览层；`data-anno-page=sharePoster` | | `wxSharePreview` | 微信好友卡片 | ① | 左文右图卡片字段 | 微信卡片预览层；`data-anno-page=wxSharePreview` | | `memberEnd` | 会员直播结束页 | ① | 分享进已结束落地 | 结束页 | | `checkout` | 提交订单 | ① | 提交订单 | 全屏页 | | `pay` | 订单支付 | ① | 订单支付 | 支付滚动区 | | `paySuccess` | 支付成功 | ① | 支付成功 | 成功头图区 | | `roomBackFloat` | 直播中浮窗 | ① | 直播中浮窗 | 右侧白圆 FAB（icon + 直播中 + 关闭） | | `block` | 未参与拦截 | ① | 未参与拦截 | 拦截页中部 | --- ## 1. 我的（`mine`） ### ① 直播入口 功能宫格「直播」→ **直播中心**。 ### ② 主播入口 功能宫格「直播」右侧「主播」→ 校验后台主播身份后进入**主播工作台**。 | 情况 | 行为 | |------|------| | 未绑定主播 | Toast「该账号未绑定主播」 | | 主播已禁用 | Toast「主播已禁用」 | | 已绑定且启用 | 进入主播页 | **数据隔离：** 主播页订单/分析 = **主播带货奖励**；「我的收益」= **邀约人奖励**；两套互不混用。 **订单入口（无水滴，交互说明）：**「全部订单 ›」及待付款/待发货/待收货/待评价 →「我的订单」（对应 Tab）；退换货 → 售后占位 Toast。 **演示账号：** 用户1=主播启用（hostId=190595）；用户2=未绑定；用户3=主播禁用。 --- ## 1.1 主播工作台（`anchor`） ### ① 主播资料 头像显示当前主播头像；昵称显示当前主播昵称（**不再**固定显示「直播中心」文案）。去掉主播 ID、手机号、编辑入口。 ### ② 数据分析 / 直播订单入口 资料区下方入口卡；进入本主播维度的数据与订单（奖励口径=主播带货奖励，与「我的收益」邀约人奖励互不混用）。 | 入口 | 说明 | | --- | --- | | 数据分析 | 本主播概况等，内容见 §1.2（`anchorAnalytics`） | | 直播订单 | 本主播带货奖励明细，内容见 §1.3（`anchorOrders`） | ### ③ 场次 Tab（直播中 / 待开播 / 已结束） Tab：**直播中**（默认）/ **待开播** / **已结束** 三个，按状态 Tab 过滤当前主播场次。Tab 采用**文字型样式**：横排文字，未选中常规字重，选中项**加粗 + 底部短横线指示条**；资料区 / 入口 / Tab **固定**，列表区可**上下滑动**（隐藏滚动条）。 **排序：** ① 直播中 ＞ 待开播；② 开播时间升序；③ 创建时间降序。 **卡片：** 直播封面图、直播标题、直播时间（如 `2026-07-22 12:00:00`，无「开播时间」前缀）。 | Tab | 内容 | | --- | --- | | 直播中 | 显示直播中的直播场次 | | 待开播 | 显示待开播的直播场次 | | 已结束 | 已结束的直播场次时间轴「直播动态」；封面点击进入「直播回放」页 | | 操作 | 说明 | |------|------| | 【开播】 | 直播中 / 待开播显示；→ H5 中控 | | 【取消】 | 直播中 / 待开播显示；弹窗「确认取消这场直播吗？」→ 已取消，同步后台，不进历史 | --- ## 1.1a 已结束卡片字段（`anchor`「已结束」Tab） 「已结束」Tab 展示本主播已结束场次时间轴「直播动态」。列表区可**上下滑动**（隐藏滚动条）。 | 展示项 | 说明 | |------|------| | 节点时间 | 格式如 `2026-08-29开播` | | 直播时长 | 本场时长，小时统计；展示如 `直播时长：1.84h` | | 观看人数 | 本场观看人数；展示如 `观看人数：100` | | GMV | 含实付+未付款/取消/拒收；各订单金额（含运费）之和；展示如 `GMV：￥100.00` | | 带货奖励 | 本场主播带货提成；展示如 `带货奖励：￥20.00` | | 封面 | 本场封面；点击进入「直播回放」页（仅观看，不做回放带货，见 R6） | 布局：时间节点 → 两列指标（时长/观看、GMV/奖励）→ 封面在指标下方。 --- ## 1.1b 直播回放（`anchorReplay`） **入口（主播）：** 「已结束」Tab 卡片封面点击。× 返回主播工作台「已结束」Tab。无回放资源 → Toast「暂无回放」。 **会员入口：** <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">【V1.08】一期不做；直播中心点击已结束一律 Toast「本场已结束」，不进入本页。</span> 竖屏全屏回放；标题「直播回放」。底栏控件：播放/暂停、当前时长、进度条、总时长、全屏。**仅观看，不做回放带货计佣（R6）**；不可下单。 --- ## 1.1c 数据分析 / 直播订单（`anchorAnalytics` / `anchorOrders`） 入口：主播工作台（`anchor`）资料区下方入口卡。内容分别见 §1.2、§1.3。 --- ## 1.2 数据分析（`anchorAnalytics`） 时间筛选：全部 / 今日 / 本周 / 本月。页面顺序：**概况 → 直播转化漏斗 → 实时观众人数趋势**（不含 GMV / 带货转化率 / 订单成交金额 / 订单成交数量 / 主播带货奖励经营趋势图）。 **直播概况 7 张卡**（与后台主播详情 §4.3.1 严格同构）：GMV、带货转化率、主播带货奖励、访问人数、观看人数（累计）、订单成交金额、订单成交数量。**不含**最高点赞数 / 最高在线数 / 累计开播次数。访问人数 / 观看人数 / 带货转化率跨场次不去重（同一会员在多个场次分别计数）。 漏斗三层为访问人数 → 观看 → 成交（成交跨场次不去重）；观众趋势为访问/观看/离开（截至该日累计、跨场次不去重）。口径对齐后台 §4.2.3 / §4.3.1。 --- ## 1.3 直播订单（`anchorOrders` / `anchorGoodsSheet`） ### ① 收益统计 统计对象：**主播带货奖励**（与「我的收益」邀约人奖励隔离）。 | 指标 | 口径 | |------|------| | 累计总收益 | 当前主播的带货奖励合计；**累计总收益 = 已结算 + 待结算**（仅含已达结算周期计入时点的订单） | | 已结算收益 | 当前主播的带货奖励中，**仅含已结算**的合计 | ### ② 订单列表 展示当前主播在**所有直播间**产生的订单（按 Tab 过滤）。卡片字段： | 字段 | 说明 | |------|------| | 订单编号 | **子订单编号**，如 `SE20260829100759950101` | | 商品信息 | 商品图片、商品名称、下单商品数量 | | 订单金额 | 当前订单实付金额，如 `100.00` | | 奖励比例 | 商品的主播奖励比例，如 `10%` | | 奖励金额 | 奖励给主播的金额，高亮如 `+ 10.00`（= 实付 × 比例） | 点商品卡 → 商品信息弹窗（图/标题/单价/数量）。 ### ③ Tab | Tab | 说明 | |------|------| | 已结算 | 显示已结算的订单数据；选中态紫粉渐变 | | 待结算 | 显示待结算的订单数据；**订单完成**模式下未确认收货的已支付订单不出现在列表 | --- ## 1.4 H5 主播中控（`anchorLive`）+ 结束页（`hostEndPage`） **App 可交互开播**。入口：主播工作台【开播】→ 中控。关播确认后切 `hostEndPage`（仍为 `anchorLive` 页内叠加层，侧栏标注 key 独立为 `hostEndPage`，勿与中控 ①～⑥ 混用）。 ### 三态总览 | 状态 | 触发 | 要点 | |------|------|------| | 待开播 | 主播工作台【开播】 | 摄像/麦克默认开；不显观看人数与实时数据；底栏上方居中【开始直播】 | | 直播中 | 点【开始直播】 | Toast「直播已开始」；展示观看人数与实时数据；无独立结束按钮 | | 已结束 | 返回/× 确认关播 | 独立结束页 `hostEndPage` | ### ① 顶部栏 | 项 | 说明 | |------|------| | 返回 / × | 待开播→主播工作台；直播中→「确认关闭直播吗」→确认进结束页；无独立【结束直播】 | | 主播 | 头像 + 名称（超 6 字…） | | 观看人数 | 仅直播中；前 3 头像 + 在线人数；点击→在线观众抽屉 | ### ② 实时数据 仅直播中。字段：**直播时长** `HH:MM:SS`（实时）、**今日奖励**、**本月获得奖励**、**已发放奖励**、**待发放奖励**。**不含带货奖励。** ### ③ 开始直播 仅待开播；底栏上方居中；点击→直播中 + Toast「直播已开始」。 ### ④ 画面 主题不展示；默认开摄像/麦克；关摄像提示「摄像头已关闭」；可推预览帧至会员端；连麦成功后画面区左右分屏。 ### ⑤ 评论区（公屏） 四类胶囊气泡（粉丝/主播评论、发商品、发券）；三端联动 `live2_chat_bus_v1`；连麦不进公屏。 ### ⑥ 底栏 评论输入（待开播发送无效）/ 购物车（商品列表）/ **连麦（购物车右侧，红点=申请数）** / 更多（分享·商品·券·摄像·麦克）。 | 按钮 | 说明 | |------|------| | 连麦 | 红点=已申请人数；连麦中文案「连麦中」；抽屉含**开启连麦**开关、当前连麦（【结束】）、已申请观众（接通/拒绝）；支持语音+视频（接通默认语音）；画面分屏；禁排队；与 PC 同源 `live2_mic_bus_v1` | ### 结束页（`hostEndPage` ①） × → 主播工作台；「直播已结束」；时长；**观看人数**（开播起至今直播中进房去重累计；演示默认 100人）；**最高在线人数**（最高同时进房观看；演示默认 80人）。 ### 关联抽屉 | key | 说明 | |------|------| | `hostGoodsSheet` | 搜索、置顶、上下架；【店库存】打开 `hostStockSheet`（按钮展示有货/无货门店数）；图左上「奖励X%」=本场商品主播奖励比例；卡片展示「销售价：￥x.xx」「直播价：￥x.xx」（默认规格）与「库存：X」（统计逻辑：云连锁=本场参与门店总库存；qimall=商城商品总库存） | | `hostStockSheet` | 门店库存抽屉；入口为商品列表【店库存】；逻辑同 PC `goodsStockMask`；加粗商品名、门店名称模糊搜索、仅参与门店、门店 logo/名称/电话+库存有/无（无标红） | | `hostAudienceSheet` | 昵称模糊搜索（失焦）；列表头像+昵称；无普通/邀约 Tab | | `hostMoreSheet` | 分享→三渠道弹窗 / 商品/券/摄像/麦克（不含连麦） | | `hostCouponSheet` | 待开播可看不可发；点击【发放】先二次确认（标题「提示」，确认发放该优惠券吗？），确定后执行；发放/停止发放状态机（发放中可停、停止后库存≠0 可续发） | | `hostMicSheet` | 开启连麦开关；红点=申请数；当前连麦仅【结束】；画面分屏；已申请观众接通/拒绝；禁排队 | --- ## 1.5 门店库存抽屉（`hostStockSheet`） > 入口：H5 主播中控 → 主播商品列表（`hostGoodsSheet`）→ 商品卡【店库存】→ 抽屉标题「门店库存」。 > 逻辑对齐 PC `goodsStockMask`（§5.5 门店库存弹窗）；门店端为底部抽屉，打开时 `Anno.onPageChange('hostStockSheet')`。 ### ① 商品名与门店搜索 | 元素 | 说明 | |------|------| | 标题 | 「**门店库存**」；右上角 × 关闭（无底部关闭按钮） | | 商品名 | 当前 SPU 名称**加粗**（默认规格 SKU 名称） | | 门店搜索 | 占位「请输入门店名称」；名称**模糊**匹配；【查询】刷新 | | 数据范围 | **仅本场参与门店** | ### ② 库存列表 | 字段 | 说明 | |------|------| | 布局 | **浅灰底 + 白卡片**（一店一张）；可纵向滑动且**隐藏滚动条** | | 门店 logo | 左侧圆形头像 | | 门店名称 | 卡片主标题 | | 库存状态 | 名称旁标签：有库存（绿底）/ 无库存（红底红字，合计可售 = 0） | | 门店电话 | 名称下方灰色电话 | | 空态 | 无匹配门店 →「暂无门店数据」 | ### 商品列表侧入口（`hostGoodsSheet` 仅保留） | 项 | 说明 | |----|------| | 【店库存】 | 打开 `hostStockSheet`（抽屉标题「门店库存」）；按钮副文案「有货门店数 / 无货门店数」 | | 已结束 | 可点店库存；置顶/上下架禁用 | | 联动 | `live2_goods_bus_v1`；会员端本店下单扣库存后同步 | --- ## 2. 直播中心（`list`） ### ① 直播中心 | 规则 | 说明 | |------|------| | 页名 | 直播中心 | | 过滤 | 仅参与门店含本店的场次；已取消不展示 | | 状态 | 待开播、直播中、**已结束** | | 排序 | 直播中 ＞ 待开播 ＞ **已结束**，再按开播时间升序 | | 布局 | 深色双列宫格；列表纵向滚动、**隐藏滚动条** | | 直播中卡片 | 封面；左上「正在直播中…」；右上**在点人数**；底栏主播头像/名称/ID（可复制）；**无【分享】** | | 待开播卡片 | 纯色底；左上「待开播…」；中部主播头像、直播名称、开播时间 | | 已结束卡片 | 封面；左上「已结束」；底栏主播头像、直播名称、开播时间；**无【分享】** | | 点击·待开播 | → 预告页 | | 点击·直播中 | → 观看页 | | 点击·已结束 | <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">【V1.08】Toast「**本场已结束**」；一期**不做**会员回放入口、不做只读结束说明页；**不可下单**</span> | | 空态 | 「暂无本店可参与的直播」 | ### ② 我的收益入口 顶区【我的收益】→「我的收益」页（当前会员作为邀约人的邀约记录 + 奖励明细；**无** C 端邀约排名）。 --- ## 2.1 我的收益（`earnings`） ### ① Tab 切换 - 一级：邀约列表 / 奖励明细 - 奖励明细二级：已结算 / 待结算 - 返回 → 直播中心 ### ② 列表字段与口径（对齐后台统计维度） **邀约列表（视角=当前会员=邀约人）** | 字段 | 口径 | |------|------| | 头像/名称/ID | 邀约对象 | | 下单数量 | 该对象在本邀约归因下的订单数；0 →「未下单」 | | 邀约时间 | 对象首次经该会员分享链进房时间 | <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">同一场被多人分享的对象，只出现在其**第一次点开并成功进房**的那条链接对应的邀约人名下。对象先自然进房再点分享链的，**不出现在任何邀约人的列表中**。</span> **奖励明细（邀约人奖励，非主播带货奖励）** | 字段 | 口径 | |------|------| | 头像/名称/ID | 下单的邀约对象 | | 奖励金额 | 实付 × 邀约人奖励比例 | | 订单编号 / 订单金额 | 同后台 | | 奖励比例 | 邀约人奖励比例 | | 奖励时间 | 待结算=计入待结算的时间；已结算=划扣完成时间（R9）；取决于后台结算周期配置 | | 累计总收益 | 当前二级 Tab（已结算/待结算）下金额合计；**切 Tab 总额跟着变**；未达结算周期计入时点不出现在列表 | 列表均可纵向滚动、隐藏滚动条。 --- ## 3. 直播预告（`preview`） 封面、名称、开播时间、主播；底部【分享】打开三渠道分享弹窗（见 §10）；不可下单（R8）。 <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">经分享链进入预告页 = **第一次进入直播间并锁定**邀约关系（待开播/未开播进预告即算，不必等到开播后观看页；与观看页同一归因规则，见 PRD §6.5）。若本场已自然进过房或已锁定，再点开他人链接可进房，不记/不改邀约人。</span> --- ## 4. 直播间（`room`）— 对齐参考截图 ### ① 顶部主播与观看 返回（‹ → 直播中心，**不结束在房会话**；直播中心仍显示【直播中】浮窗）；主播头像 + 名称（超 6 字以 ... 截断）；当前在线观众前 3 人头像 + 在线人数；**点击头像组 + 在线人数 → 打开「在线观众」抽屉**。 **直播画面：** 同步 PC 中控摄像头预览（原型 canvas 帧广播 `live2_preview_bus_v1`；正式版 CDN 拉流）；关摄像头显示「主播已关闭摄像头」；未收到帧显示「等待主播画面…」。 ### ①′ 在线观众抽屉（`roomAudienceSheet`） - **入口**：观看页顶栏头像组 + 在线人数 - **标题**：`在线观众(N)`；N = 当前在线总数 - **搜索**：昵称模糊；占位「请输入观众昵称」；失焦过滤（回车等同失焦） - **列表**：仅头像 + 昵称；**不展示**普通/邀约 Tab - **关闭**：右上 × 或点遮罩 - **口径**：与主播中控 / PC「在线观众」一致；会员端只读 ### ② 优惠券图标与抽屉 - **入口**：左侧红橙渐变「券」票券图标；点击打开优惠券抽屉 - **抽屉**：仅展示主播已发放的券；卡片布局对齐展开截图 - **按钮**：抽屉内【立即领取】→ Toast「领券成功」、按钮变【去使用】；【去使用】打开商品列表，下单时手动选券；【已使用】支付核销后置灰；【已过期】整卡置灰 - **停止发放**：主播停止发放后，未领取的券立即从抽屉移除；已领取的券保留且仍可使用 ### ③ 发券推送弹窗（`couponIssue`） - **触发**：PC 中控【发放】→ `COUPON_ISSUED`（原型 localStorage 跨标签） - **停止发放**：PC 中控停止发放 → `COUPON_STOPPED`；不再强弹，未领取券移除、已领取保留 - **标题**：直播惊喜券（无顶部红包/装饰图） - **内容**：券卡 + 立即领取；关闭后不再强弹 ### ④ 领券成功弹窗（`couponSuccess`） - 仅发券推送弹窗内领取成功后弹出；抽屉领取不触发 - 标题「优惠券领取成功」（无顶部红包/装饰图）+ 券卡 + 去使用 + 底部关闭 ### ⑤ 公屏评论 胶囊气泡：身份标签（主播/粉丝）+ 昵称 + 正文；与 PC 中控、后台单场数据页样式一致。 | 消息类型 | 展示 | |----------|------| | 粉丝评论 | 粉丝标签 + 昵称 + 正文 | | 主播评论 | 主播标签 + 昵称 + 正文 | | 主播发商品 | 主播标签 +「发送了一个商品」+ 商品卡（名称/直播价） | | 主播发券 | 主播标签 +「主播发送了优惠券【券名】」 | **不在公屏：** 连麦申请/接通/挂断。 **滚动：** 不展示滚动条；评论超出可视区时可**手动上下滑动**（按住拖拽或滚轮）查看历史；贴底时新消息自动滚底，上滑后不强制打断。 **位置：** 公屏贴直播画面**左下角并横向铺满**（底栏上方）。**已去掉讲解浮窗。** **联动：** 原型 `live2_chat_bus_v1` 跨标签；演示场次 liveId=30「午间秒杀」。 ### ⑥ 底部工具栏 「说点什么」、表情、**紫色购物车**、**【连麦】**（购物车右侧）、**更多 ⋯**（仅分享）。 | 按钮 | 说明 | |------|------| | 连麦 | 受「开启连麦」控制显隐；连麦成功后画面左右分屏；空闲/等待接通/连麦中三态；联动 `live2_mic_bus_v1` | | 等待接通 | 文案「等待接通」；`roomMicCancelSheet`：【取消申请】【取消】 | | 连麦中 | 文案「连麦中」；`roomMicBar` 工具条：闭麦/开麦、开/关摄像头、结束（`roomMicEndSheet` 二次确认）；默认语音 | | 分享（更多内） | 关闭更多面板 → 打开三渠道分享弹窗（`shareSheet`；废除右上角 Toast） | ### ⑦ 直播中浮窗（`roomBackFloat`） **触发：** 会员已进入本场观看页且直播中；离开观看页后**全局**展示（含直播中心、我的、商品详情、下单等）。 | 项 | 说明 | | --- | --- | | 样式 | **白色正圆 FAB**（约 46px），对齐商城首页浮钮风格；轻阴影 | | 结构 | 上：**直播 icon**（带呼吸红点）；下：圆内小字 **「直播中」**；**右上关闭 ×**（白色圆钮，约 20px） | | 位置 | 屏幕**右侧垂直居中**；距右缘约 **10px** | | 水滴 ① | 挂在浮钮左上外侧；`data-anno-page="roomBackFloat"`，与商品详情等页面水滴互不覆盖 | | 点击浮钮 | 仅回**观看页**；不自动打开商品列表 / 券抽屉 | | 点击 × | **结束在房会话**（离开该直播间）；全局隐藏浮窗 | | 不展示 | 仍在观看页；场次已结束；**主播工作台**任意页（进入即自动退房） | | 本期不做 | 视频缩放小窗 / 画中画；浮窗内无画面预览 | **主播工作台例外：** `我的 → 主播` 下全部页面（`anchor` / `anchorAnalytics` / `anchorOrders` / `anchorLive` / `anchorReplay`）不展示浮窗，且自动结束在房会话。 **位置：** `phone-inner` 层**右侧**贴边悬浮；层级低于全屏弹窗。 --- ## 6. 发券推送弹窗（`couponIssue`） 标题「直播惊喜券」；中控发放后自动弹出；立即领取 → 领券成功弹窗。 ## 7. 领券成功弹窗（`couponSuccess`） 领取成功后弹出；无顶部装饰图；去使用 → 商品列表。 ## 8. 优惠券抽屉（`couponSheet`） 仅已发放券；四态按钮（立即领取 / 去使用 / 已使用 / 已过期）；卡片样式对齐参考截图。 主播**停止发放**后：未领取的券不再展示，已领取的券保留且仍可使用。 高度与商品列表面板一致（固定 **75%**，内容少时不收缩）；列表超出**不显示滚动条**，可手动上下滑动，不左右滑。 ## 8.1 提交订单选券（`orderCouponSheet`） 对齐原商城「可用优惠券」抽屉： - 提交订单点「优惠券」弹出抽屉；标题「可用优惠券」；右上 × 关闭 - 卡片：左「¥面值 / 门槛」、中名称+有效期、右单选圆点；可选手动「不使用优惠券」 - 底部【确认】后回填；点选不立即关闭 - 默认不自动匹配；列表含已领商城券与本场券，互斥只选 1 张 - 未满门槛置灰不可选；正式支付成功且选用该券时核销 --- ## 9. 商品列表面板（`goodsSheet`） 深色面板：搜索「请输入商品名称」+ 搜索（回车同样过滤）；【订单】跳转本店「我的订单」（`from: room`，返回回直播间并打开商品列表）。 **数据：** 仅中控已上架商品；顺序同中控；库存读本店可售。与中控运行时互通（`live2_goods_bus_v1`：上下架、排序、讲解、分店库存）。门店 ID：u1=1001 旗舰店、u2=1002 南山、u3=1003 福田。 **卡片：** 按 **SPU** 出卡。点卡片或【抢购】进入直播商品详情。图左上角序号（已上架中控 SPU 顺序，**搜索不重编**）；**不展示「讲解中」**、**不展示销量**；展示商品图、名称、**商品规格**（多规格取本场已上架排序第一 SKU 规格名；仅 1 规格显示「默认」）、**默认规格直播价**；本店可买规格库存均为 0 时整卡置灰、按钮「售罄」（仍可进详情）。 高度与优惠券抽屉一致（固定 **75%**，内容少时不收缩）；列表超出**不显示滚动条**，可手动上下滑动、不左右滑。 --- ## 9.1 商品详情（`goodsDetail`） 从直播间进入，或从本场**直播商品分享链**进入。沿用原商城详情：「直播价」标签 + 直播价金额 + 划线销售价；**无活动卡片**；领券行与商城一致；规格仅本场已添加 SKU；**返回 ‹ / 分享 顶栏固定不随滚动**；底栏首页（商城首页占位，返回回直播间）+立即购买；无加购。顶栏【分享】打开 `goodsShareSheet`（仅复制链接，见 §10.1）。本期不限购，数量≤本店库存。**离房后展示全局【直播中】白圆浮钮**（见 §4.⑦；水滴 ① 挂在浮钮左上）。 **按直播状态 / 权限区分（底部灰条 + 立即购买）：** | 场景 | 灰条文案 | 立即购买 | | --- | --- | --- | | 直播中 · 可买 | 不展示 | 可点 → 规格弹窗 → 提交订单 | | 商品售罄（含规格下架 / 本店库存 0） | 商品已售罄 | 置灰**不可点** | | 直播未开始（待开播） | **直播未开始，直播开始后才可购买** | 置灰**不可点** | | 直播已结束 | **直播已结束，直播结束后不可购买** | 置灰**不可点** | | 非参与门店（分享链） | **很抱歉你当前无法查看该商品** | 置灰**不可点** | - **不可购买优先级：① 商品售罄 ＞ ② 直播状态（未开始 / 已结束）＞ ③ 非参与门店**；四者样式一致（底部灰条 + 立即购买置灰不可点），仅灰条文案不同。 - 不可购买态：商品主图、价格、标题、规格、评价均**正常显示**，不改灰度、不加遮罩。 ## 9.1.1 规格弹窗（`specSheet`） 沿用商城规格弹窗（图/数量/库存/规格）；**高度固定为可视区 60%**；「直播价」标签 + 直播价金额 + 划线销售价；无加入购物车；多规格可点切换并同步背后详情价/库存；立即购买进入提交订单。演示：货架第二张「500ml 保温杯」红/白。 ## 9.1.2 商城首页占位（`mallHome`） 详情【首页】进入；返回回到直播间。 --- ## 9.2 我的订单（`mallOrders`） | 段 | 内容 | | --- | --- | | 底座 | 原商城：搜索、状态 Tab、订单卡片、状态操作、点卡片进详情 | | 新增 | 搜索可按直播间名称；自直播间【订单】进入时返回→回房并打开商品列表 | | 边界 | 列表**不**展示店名旁「直播」、**不**展示「直播价」；普通订单不变 | 入口：「我的 → 全部订单 / 状态快捷入口」或购物车【订单】。 --- ## 9.3 订单详情（`orderDetail`） | 段 | 内容 | | --- | --- | | 底座 | 原商城：状态头、地址、商品卡、金额、订单信息、底栏 | | 新增 | 直播购：商品卡展示销售价（无「直播价」标签）；金额区在优惠券上方增加「直播优惠」；可含所属直播、主播 | | 边界 | 仅直播商品有差异；普通订单=原商城 | --- ## 10. 分享弹窗（`shareSheet`） **页面入口（共用同一弹窗）：** | 页面 | 入口 | |------|------| | 直播预告 `preview` | 底部【分享】 | | 观众直播间 `room` | 底栏「更多」→【分享】 | | 主播 H5 中控 `anchorLive` | 「更多」→【分享】（邀约人=当前登录会员） | 直播中心列表**无**分享按钮。直播商品详情顶栏【分享】**不**走本弹窗，见 §10.1 `goodsShareSheet`。 **UI：** 白底 Sheet；标题「分享」；三渠道（**不含朋友圈**）+【取消】。 | 渠道 | 行为 | 结果 | |------|------|------| | 微信好友 | 打开 `wxSharePreview` 卡片预览后确认分享 | 标题=直播名称；描述=「直播间有更多优惠等你」；缩略图=直播封面（左文右图） | | 生成海报 | 打开 `sharePoster` 海报预览 | 封面/标题/二维码/「直播间有更多优惠等你」 | | 复制链接 | 写入剪贴板 | Toast「链接已复制」 | | 取消 | 关弹窗 | — | **链接规范：** `https://{域名}/live/{live_id}?inviter={member_id}&from=share` **进房前置：** 观看须登录；参与门店校验失败 → 拦截页文案「很抱歉你当前无法进入直播间」。 **分享/扫码状态分流：** 待开播→预告页；直播中→观看页；已结束→`memberEnd` 会员结束页。 **归因要点（按功能）：** | 功能点 | 说明 | |--------|------| | 记邀约 | <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">参与店会员首次经链成功进房记 1 条并锁定；**待开播（未开播）进预告即算第一次进入直播间**</span> | | 同场多链 | <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">同一直播间 A、B 都把链接发给 C，且 C 两条都点开过：只记 1 条，邀约人=C 第一次点开并成功进房的链接</span> | | 自然进房后再点分享 | <span style="color:#6d28d9;background:#f3e8ff;font-weight:600">C 先经直播中心等自然流量成功进房，再点 A 的分享链：不记邀约、不锁定</span> | | 唯一键 | `(live_id, invitee_id)` → 固定 `inviter_id`；后到链不覆盖 | | 自分享 | inviter=本人不记 | | 未参与 | 拦截页「很抱歉你当前无法进入直播间」，不记（见未参与拦截） | | 下单 | 订单挂本场锁定邀约人；奖励=实付×邀约人奖励比例 →「我的收益」 | | 排名 | 后台与门店端均不做邀约排名；后台用单场 / 主播详情「邀约人列表」回看 | ## 10.0 生成海报（`sharePoster`） 分享弹窗点【生成海报】进入。字段：直播封面、直播标题、二维码、「直播间有更多优惠等你」。**不展示**「邀约人 ID · 扫码进房锁定归因」、主播信息。码内参数与复制链接一致。【保存海报】原型 Toast 占位；【关闭】回原页。 ## 10.0a 微信好友卡片（`wxSharePreview`） 分享弹窗点【微信好友】进入。会话内横向卡片：左文（直播名称 +「直播间有更多优惠等你」）右图（直播封面）。 ## 10.0c 直播商品详情分享（`goodsShareSheet`） 直播商品详情顶栏【分享】打开。与 §10 三渠道邀约分享**隔离**。 | 项 | 说明 | | --- | --- | | UI | 底部白底 Sheet；右上 ×；**仅**橙色圆形「复制链接」 | | 链接 | `live_id` + `sharer` + 商品标识；`from=goods_share`；**无** `inviter` | | 归因 | **不参与**本场邀约锁定 / 计奖 | | 有权限落地 | 本场该商品 **直播商品详情**（直播价） | | 无权限落地 | 落地**直播商品详情「无法查看」态**：底部灰条「**很抱歉你当前无法查看该商品**」（复用已售罄视觉，商品信息正常可见，仅文案不同）；【立即购买】置灰不可点；不可下单；亦不可进该直播间 | | Toast | 复制成功「链接已复制」 | 演示：顶栏工具「商品链·直播中 / 未开始 / 已结束」；**「商品链·无权查看」** = 旗舰店王芳把「午间秒杀」商品链分享给福田店陈静（非参与门店）→ 落地商品详情「无法查看」态（灰条「很抱歉你当前无法查看该商品」）。 ## 10.0b 会员直播结束页（`memberEnd`） 分享链 / 扫码进入**已结束**场次时落地。标题「直播已结束」；可返回直播中心。与列表点已结束的回放双条件规则独立；一期不在此页直接播回放。 ## 10.1 观众直播间更多（`roomMoreSheet`） 底栏【更多】打开；**仅【分享】**（连麦已在购物车右侧）。点【分享】→ 打开 `shareSheet` 三渠道弹窗（**不再** Toast「点击右上角进行分享」）。 ## 10.2 主播 H5 更多（`hostMoreSheet`） 含分享/商品/券/摄像/麦克（不含连麦）。点【分享】→ 同样打开 `shareSheet`（邀约人=当前主播会员账号）。 --- ## 11. 提交订单（`checkout`） | 段 | 内容 | | --- | --- | | 底座 | 地址/留言/券/积分/运费/会员折扣/底栏【去支付】 | | 新增 | 商品卡同原商城（销售价、无「直播价」标签）；金额区在优惠券立减上方增加「直播优惠」；商城券与本场券互斥选 1 | | 边界 | 仅直播间购；普通商品行不变 | --- ## 11.1 订单支付（`pay`） | 段 | 内容 | | --- | --- | | 底座 | 倒计时、应付、余额支付、确认付款 | | 新增 | 成功后扣本店库存、核销券、回写中控、写直播快照；后台标识=直播 | | 边界 | 支付页无「直播」角标；超时回提交订单 | --- ## 11.2 支付成功（`paySuccess`） | 段 | 内容 | | --- | --- | | 底座 | 原商城成功页与按钮 | | 新增 | 【查看订单】→本单详情（待发货） | | 边界 | C 端无店名「直播」角标；详情商品卡无「直播价」标签，金额区有「直播优惠」 | --- ## 12. 未参与拦截（`block`） 未参与店直链/分享链拦截（R1）。 | 场景 | 文案 | | --- | --- | | 直播间直链 / 邀约分享链 | **很抱歉你当前无法进入直播间** | | 跨店分享（B 店未参与本场） | 与直链同一句 **很抱歉你当前无法进入直播间** | | 直播商品详情分享链 | **不跳本页**；落地商品详情「**很抱歉你当前无法查看该商品**」灰条态（复用已售罄视觉），不可下单、不可进直播间 | 【主页】进入商城首页。从拦截页进入时，首页返回回到拦截页，不进入直播间。不记邀约。 示意（直播间）：顶部「模拟跨店无权观看」——旗舰店王芳把「午间秒杀」**直播间**分享给福田店陈静 → 进房拦截页。 示意（商品链）：顶部「**商品链·无权查看**」——旗舰店王芳把「午间秒杀」**商品链**分享给福田店陈静 → 落地**直播商品详情「无法查看」态**（灰条「很抱歉你当前无法查看该商品」），**不跳拦截页**；南山店会员点开同链则正常见直播商品详情。 --- ## 开发备注 - **水滴点击：** 第一次点击展开右侧标注说明并定位对应条目；再次点击同一水滴收起；点击其他水滴则切换条目 - 订单相关标注统一按「底座 / 新增 / 边界」三段式；与 PRD 附录《原商城改动影响面》一致 - 交互与商城后台 / PC 直播间原型一致