# P12 信息详情与联系方式三种可见性 · 设计说明（info-detail.vue）

> 单元：`info-detail` ｜ group=information ｜ P12 ｜ 依据：pages.json unit#19 + 规格表 P12 + 执行方案 §5.19
> 实现：`vue/src/pages/info-detail.vue` ｜ 状态帧 fixtures（全组单文件）：`design/fixtures/information.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 类型徽章+标题 | Pill（绿/橙/蓝+图标）+ 页题级标题（20/700）+ 发布者/时间/示意编号行 | — | ✓ |
| ② 图文正文 | descParagraphs ×3 + 图集（assets 键 img / `.ph` 示意占位+角标，2 列网格） | — | ✓ |
| ③ 关键信息卡 | 浅粉洗底 2×2 网格 **4 字段**：价格（售价 PriceText/预算红字/面议）、成色、交易方式、城市（面交）（空值显 `--`，D 维不留白） | **4** | ✓ |
| ④ 发布者卡 | AvatarUser（登记头像）+昵称+「信用 88 · 已实名（示意）」（间隔点分隔）+「TA 的在售 →」→seller-profile | — | ✓ |
| ⑤ 联系方式区三可见性 | 区卡头=「联系方式」+可见性 Pill；**public**=脱敏手机 138\*\*\*\*5678（17px tabular）+复制/拨打（拨打→lock-mask 确认弹层）；**login**=拦截行「登录后可查看联系方式」+一键登录→login；**private**=「仅接受站内私信」+发私信→customer-service；每态附行为说明小字 | 三态 | ✓ |
| ⑥ 常驻风险提示条 | NavBar 下固定（不随滚动离场）「撮合信息不走平台担保，交易请谨慎」（warn 双色 5.53:1）；拨打确认弹层内二次复述 | 常驻 | ✓ |
| ⑦ 举报 | 正文尾「举报此信息」行（≥44 触高）→report；NavBar「更多」文字胶囊按钮（浅粉底+文字，与系统胶囊 ··· 点点外观区分防误认）ActionSheet（举报/在线客服/复制链接） | 双入口 | ✓ |
| ⑧ 转为拍品 | 出物类型显示底部栏「转为拍品」（soft）→ 预填语义 toast（POST /info/{id}/to-item 占位）+→publish-item | sell 专属 | ✓ |

底部操作栏=flex 兄弟节点（scroll 内 tail 预留），固定位不压末条数据；主按钮随可见性切换（拨打电话/登录后联系/发私信）。

## 2. 状态帧（8 帧）

| 帧 | 渲染 |
|---|---|
| normal | 出物·公开样例（id1）：完整 8 区块，联系方式=公开态 |
| contact-public | 同 id1 强制公开可见性帧（脱敏手机+拨打/复制） |
| contact-login | 登录可见拦截呈现：锁定行+一键登录（页内无可见性切换控件，演示经 `?state=` 参数，见维度 E） |
| contact-private | 仅私信帧：站内私信入口→customer-service |
| deleted | 「该内容已被删除或下架」EmptyState+返回信息广场；风险条随内容退场 |
| error | ErrorRetry 黄条+缓存正文照常渲染 |
| guest | ＝contact-login 拦截呈现+登录引导 Sheet（一键登录→login，登录后回跳本页） |
| extreme | 面议+超长标题压测（fixtures infoExtreme[1]）：标题不破版、面议灰字过 H、关键信息卡空值 `--` |

empty 不单列（pages.json na_reason）：详情必有上下文，入口必带信息 id。

## 3. 决策触点与字段/组件对应

- **怎么联系上对方（可见性三态直给）**：联系方式区 Pill 标识+动作按钮随态切换；公开=号码+拨打/复制、登录可见=拦截+登录、仅私信=私信入口。
- **出物帖可一键转拍品**：sell 类型底部栏「转为拍品」→publish-item（预填 toast 明示原型语义）。

## 4. 九维度（A–I）本页取值

| 维 | 取值 |
|---|---|
| A | 可见性三帧是核心态；deleted/error/guest/extreme 另列；风险条常驻（deleted 退场） |
| B | 「拨打」拉起拨号前确认弹层（Sheet lock-mask，确认后才示意呼出）；复制=toast「已复制（原型示意）」；举报防误触走「···」/行入口 |
| C | N/A：表单在 publish-info（pages.json 同口径） |
| D | 手机号脱敏 138\*\*\*\*5678（17px tabular）；面议=--text-2 5.44:1 过 H；空值 `--` 不留白；相对时间+发布日期行 |
| E | 可见性三态由 `?state=` 帧呈现（**页内无切换控件**——可见性属发布者发布时选择，页面对观众只读；pages.json「可见性切换 action-sheet」落在 publish-info ⑨ 的 ActionSheet）；「···」ActionSheet（举报/客服/复制）；拨打确认弹层 lock-mask |
| F | 按 §0.5：分享卡片=标题+首图（「复制信息链接」为原型替代语义） |
| G | 按 §0.6：正文图懒加载；无分页 |
| H | 风险提示常驻可读（warn-ink 5.53:1）；可见性三态图标+文字双通道；举报行触高 ≥44 |
| I | `GET /info/{id}`；`POST /info/{id}/to-item`（占位）；联系区字段映射 visibility/contact（fixtures infoExtras） |

## 5. 数据一致性说明

- 样例=mock `infos[0]`（id1，出物 ¥199.00）+fixtures 扩展（summary/正文/可见性 public/脱敏手机）；与 info 列表卡同 id 同价同名同图。
- 发布者=users.ying（樱桃小完子，信用 88）；「已实名（示意）」随 users.verified 显隐——**示意数据披露**，不宣称真实核验。
- 转为拍品按钮当前按**类型**展示（sell）；生产语义建议=仅发布者本人可见（已登记 fixtures/design 提案，未在原型内伪造作者态）。

## 6. 占位与缺口

- 「拨打电话/发私信/复制」均为原型示意，不真实拨号/发信/写剪贴板。
- 详情图集第 2 张为 `.ph` 示意占位（素材缺口：商品细节图，见 docs/asset-gaps 口径）。
- 示意信息编号 `0001` 为页内自造展示位（接口字段 id 的 zero-pad 呈现），非新增业务。

## 7. 视觉验收修复登记（2026-10-10 第二批）

- issue#1（中·error 帧矛盾）：error 帧原以 `v-else-if` 整体替换正文致「已保留缓存内容」+空白页——改为黄条+缓存正文照常渲染，与本文档 §2/fixtures 声明一致。
- issue#2（低·数据矛盾）：fixtures id1 正文去掉「也接受杭州同城面交」表述（trade=邮寄、城市展示 `--` 为既定空值形态）。
- issue#3（低·文档笔误）：§1④ 信用98→信用 88（users.ying 真值），并给「信用/已实名」加间隔点。
- issue#4（低·入口混淆）：NavBar「···」图标钮改为「更多」文字胶囊钮，与系统胶囊区分。