# P03 拍品详情 · 设计说明（item.vue）

> 单元：`item` ｜ group=core ★★★ ｜ P03 ｜ 依据：pages.json unit#3 + 规格表 P03 + 执行方案 §5.3
> 实现：`vue/src/pages/item.vue` ｜ 状态帧 fixtures：`design/fixtures/item.states.json`

## 1. 区块与密度对照（10 区块硬指标 ≥9；参数 ≥6；记录首屏 ≥3）

| # | 区块 | 实现落点 | 达成 |
|---|---|---|---|
| ① | 图集轮播 3–9 张+计数+成色角标+双指放大 | `.gal`：计数「1/5」左下、成色角标左上、点按→image-preview（双指放大落地全屏层）、5 指示点可切 | ✓ |
| ② | 标题两行+标签胶囊 | `.head .ttlrow`（···在标题行右上避让小程序胶囊）：Pill 品类/成色/支持验货图（开关示意） | ✓ |
| ③ | 竞价面板 | `.panel`：PriceText big 当前价+「N次出价 · N人围观」+CountDown（<10min 红大号脉动）+立即出价+「{fmtMoney(buyout)} 一口价」 | ✓ |
| ④ | 参数表 6 字段 | `.params`：起拍价/加价幅度/开始时间/截拍时间/保证金（0=未开启）/交易方式（邮寄·包邮）——不缺保证金/交易方式 | **6/6** ✓ |
| ⑤ | 图文描述 | `.block`（违禁词已过滤示意） | ✓ |
| ⑥ | 卖家卡 | AvatarUser+昵称+信用徽章+在售 6·成交 23+「主页→」→seller-profile | ✓ |
| ⑦ | 出价记录时间线 | bidLog 6 条全渲染（脱敏昵称/金额/时间/领先绿点+领先 Pill）首屏可滚动即见 ≥3 | **≥3** ✓ |
| ⑧ | 同类推荐横滑 | `.sim`：itemDetail.similar 4 卡（图/题/价），id=similar-sec 供流拍锚点滚动 | ✓ |
| ⑨ | 违约与竞拍规则折叠 | `.rules`：折叠可展开；extreme 帧默认展开供截图；文案【占位】 | ✓ |
| ⑩ | 底部操作栏 | 收藏（心形可切+toast）/分享（toast 卡片语义）/立即出价→bid-sheet/一口价→bid-sheet；sold/failed 变体（禁用+看看相似） | ✓ |

## 2. 拍品大态（A 维 8 帧）

| 帧 | 渲染要点 |
|---|---|
| normal | 竞拍中满数据 |
| sold | 成交价（PriceText big 成交价标签）+已售罄绿 Pill+按钮灰禁用「已截拍」+热度行改「已截拍」 |
| failed | 「本场流拍」+未成交灰 Pill+看看相似（页内锚点滚动到同类推荐，不造新页）；**出价记录隐藏「领先」Pill**（流拍无人领先，验收修复项） |
| deleted | 整页 EmptyState「该内容已被删除或下架」+去逛逛→home |
| loading | 骨架（图集位 SkeletonList） |
| error | 黄条+缓存内容随后 |
| guest | 页面照常渲染+半屏登录引导 Sheet（一键登录→login；出价/收藏动作拦截并 toast） |
| extreme | 299999.99 大金额/超长标题两行截断/999+ 计数/规则面板展开（供截图验证） |

## 3. 维度差异

- B：出价 loading 锁语义由 bid-sheet 状态机承载；收藏 toast「已收藏/已取消」；举报=「···」ActionSheet→report。
- **面板内「一口价」soft 按钮修复（验收项）**：面板底 --bg-tint 与 AppButton.soft 底 --primary-weak 同为 #FFF3F7 致零对比——页内 scoped :deep 覆盖为白底+樱粉描边（不改共享件），主操作区按钮可供性恢复。
- **extreme 价格行换行修复（验收项）**：金额/标签 nowrap 不拆字，热度行整行换行（无「当前/价」「人围/观」孤字断词）。
- C：N/A（输入在 P04，pages.json na）。
- D：CountDown 按 §0.3；当前价跨屏一致（itemDetail=items[0] 同源 456）。
- E：bid-sheet 半屏（lockMask）/「···」ActionSheet（举报/客服均注册 key）/分享=平台能力语义 toast。
- F：分享卡片=标题+当前价+倒计时+主图（toast 语义）；收藏后订阅引导=交付语义。
- H：sold/failed 状态 Pill 图标+文字双通道。
- I：GET /item/{id}、GET /item/{id}/bids?page（查看全部=toast 分页示意）、POST /item/{id}/favorite。

## 4. 素材纪律（重要，走查规避 #3）

- **详情图集位全部 `.ph` 示意占位**：asset-manifest 对一切裁切素材禁用 `detail-gallery-main` 槽位（执行方案 §6.5 将「详情图集位 ≥1080px 方图」列为素材缺口，需主代理批准新图）。图集 5 帧带语义说明文字（封面/细节/包装/场景/待补）+「示意图」角标，不冒充实拍。
- itemDetail.gallery 数据键保留在 data 层不动；待缺口补图后按键直换。
- 跨页同商品同源：详情=items[0]（标题/456/卖家/素材键全链一致）。

## 5. 占位与缺口

- 规则面板 4 条文案【占位】（延时 3min/支付 24h/售后 7 天/服务费后台可配）——随占位清单交付替换。
- 「查看全部出价」：toast（分页 10/页 语义）。
- 详情图集位：素材缺口（见 §4）。
- **guest 帧主按钮空白（验收硬项）已修**：复拍仍复现→DOM/样式表实证根因＝**本页区块类名 `.block` 与 AppButton 的 `block` prop 类名撞车**——scoped 同权重(0,2,0) 且页面 CSS 后加载，`.block[data-v]{background:var(--card)}` 覆盖 `.primary` 的樱粉渐变 → 白底白字；全页唯一显式 `block` 的按钮即该 CTA。修复：本页区块类改名 `.iblock`（本组文件内根治，不改共享件）；复拍确认「一键登录」粉底白字完整渲染（screens/item/states-3.png）。
- 「评价」入口不在本页（归订单域 order-detail，toast 占位已在 orders 组范围登记）。

## 6. 压测样值声明

extreme：current=299999.99、bids/watchers=9999、标题=原题+「·限定特别版全球首弹特典付属超长标题压测示意」。