From 8ce0e5b7d20f9ee459a37fbdb04c646705f42ce9 Mon Sep 17 00:00:00 2001 From: Council Date: Sat, 13 Jun 2026 04:02:26 +0800 Subject: [PATCH] =?UTF-8?q?fix(vr-ticket):=20=E6=BC=94=E5=87=BA=E8=AF=A6?= =?UTF-8?q?=E6=83=85=20content=5Fapp=20=E5=86=85=E5=AE=B9=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 detailContent data 字段，从 tree API 的 apiData.goods.content_app 提取 - 参考 goods-detail.vue 的嵌套循环模式渲染 content_app（不用 rich-text） - 新增 detail-content/detail-item/content-items/item 等 CSS 样式 - 新增 docs/vr-ticket-work-record-20260612.md 工作留痕文档 --- docs/vr-ticket-work-record-20260612.md | 221 ++++++++++++++++++++++ pages/goods-vr-ticket/goods-vr-ticket.css | 33 ++++ pages/goods-vr-ticket/goods-vr-ticket.vue | 25 ++- 3 files changed, 278 insertions(+), 1 deletion(-) create mode 100644 docs/vr-ticket-work-record-20260612.md diff --git a/docs/vr-ticket-work-record-20260612.md b/docs/vr-ticket-work-record-20260612.md new file mode 100644 index 00000000..dadb9772 --- /dev/null +++ b/docs/vr-ticket-work-record-20260612.md @@ -0,0 +1,221 @@ +# 工作留痕 — VR 票务详情页演出详情内容渲染修复 + +> 创建时间：2026-06-12 +> 关联对话：2fb4912f-8100-45fc-b11f-d2ac37536abf +> 涉及文件： +> - `pages/goods-vr-ticket/goods-vr-ticket.vue` +> - `pages/goods-vr-ticket/goods-vr-ticket.css` +> - `docs/test.json`（后端返回的 tree API 示例数据） + +--- + +## 一、问题描述 + +票务商品详情页 `/pages/goods-vr-ticket/goods-vr-ticket?id=121` 的"演出详情"区域完全不显示内容。 + +### 1.1 现象 +- 页面加载后，"演出详情" section 只有标题，无正文 +- 图片和文字详情均不渲染 + +### 1.2 根因分析 + +**原因 A（模板层面）**：演出详情 section 在模板中只有 ``，没有渲染 body： + +```html + + + + 演出详情 + + + +``` + +**原因 B（数据层面）**：`handleTreeData` 方法从未从 tree API 响应中提取 `content_app` 字段。 + +### 1.3 数据来源确认 + +后端 `vr_ticket` 插件的 tree 接口已更新，`data.goods.content_app` 包含详情内容： + +``` +tree API: plugins/index?pluginsname=vr_ticket&pluginscontrol=goods&pluginsaction=tree&...&goods_id=121 +``` + +响应结构（关键字段）： +```json +{ + "code": 0, + "data": { + "goods": { + "id": 121, + "title": "一个多日测试票务商品2", + "content_app": [ + { + "id": 13, + "images": "http://localhost:10000/static/upload/images/goods/2026/05/29/1779992828577719.jpeg", + "content": ["这是一条测试详情，这是一条测试详情，这是一条测试详情..."], + "content_old": "这是一条测试详情，这是一条测试详情..." + } + ] + } + } +} +``` + +--- + +## 二、修复方案 + +### 2.1 数据层：提取 `content_app` + +**文件**：`pages/goods-vr-ticket/goods-vr-ticket.vue` + +在 `handleTreeData` 方法中添加对 `apiData.goods.content_app` 的提取： + +```javascript +handleTreeData(apiData) { + this.treeData = apiData.tree; + this.seatTemplates = apiData.seat_templates; + + // 提取会话元数据和同场次商品 + this.sessionMeta = apiData.session_meta || []; + this.peerGoods = apiData.peer_goods || []; + + // 提取 goods 属性中的 content_app（演出详情） ✅ 新增 + if (apiData.goods && apiData.goods.content_app) { + this.detailContent = apiData.goods.content_app; + console.log('[VR Ticket] detailContent loaded:', this.detailContent); + } + + // 提取场馆数据... +} +``` + +同步在 `data()` 中新增字段： +```javascript +data() { + return { + // ... + detailContent: [], // 详情内容（从 tree API 的 goods.content_app 获取） + // ... + } +} +``` + +### 2.2 渲染层：嵌套循环渲染 + +参考 `pages/goods-detail/goods-detail.vue`（lines 401-408）的渲染模式： + +```html + + + + + {{ items }} + + +``` + +**关键点**：`item.content` 是一个字符串数组，不能直接传给 `rich-text`，而需要对每个字符串做嵌套循环渲染。 + +修复后的模板（`goods-vr-ticket.vue`）： + +```html + + + + + {{ text }} + + + +暂无演出详情 +``` + +### 2.3 样式层：CSS 类名对齐 + +**文件**：`pages/goods-vr-ticket/goods-vr-ticket.css` + +新增样式（与 `goods-detail.vue` 的 `.goods-detail-app` / `.content-items` / `.item` 体系对齐）： + +```css +.detail-empty { + font-size: 13px; + color: #999; + padding: 20px 0; + text-align: center; +} + +.detail-content { + margin-top: 16px; +} + +.detail-item { + margin-bottom: 16px; +} + +.detail-image { + width: 100%; + border-radius: 8px; + margin-bottom: 8px; +} + +.content-items { + padding: 0 4px; +} + +.content-items .item { + font-size: 14px; + color: #333; + line-height: 1.8; + text-align: left; + margin-bottom: 8px; +} +``` + +--- + +## 三、变更文件清单 + +| 文件 | 变更类型 | 说明 | +|------|---------|------| +| `pages/goods-vr-ticket/goods-vr-ticket.vue` | 修改 | 新增 `detailContent` data 字段、`handleTreeData` 提取逻辑、模板渲染 body | +| `pages/goods-vr-ticket/goods-vr-ticket.css` | 修改 | 新增 `.detail-content`、`.detail-item`、`.content-items`、`.item` 等样式 | +| `docs/vr-ticket-work-record-20260612.md` | 新增 | 本工作留痕文档 | +| `docs/test.json` | 修改 | 后端返回的 tree API 完整示例数据（goods.content_app 字段） | + +--- + +## 四、验证方式 + +1. 启动 H5 编译：`npm run dev:h5`（端口 8082） +2. 访问：`http://localhost:8082/#/pages/goods-vr-ticket/goods-vr-ticket?id=121` +3. 滚动到"演出详情"区域，应能看到： + - 图片（如有）：宽度 100%，圆角 8px + - 文字详情：每行文字独立渲染，14px，行高 1.8 + +--- + +## 五、技术备注 + +### 5.1 为什么不用 `rich-text`？ +`content_app` 中的 `item.content` 是字符串数组（如 `["文字1", "文字2"]`）。之前错误地将整个数组传给 `rich-text :nodes="item.content"`，导致渲染失败。正确做法是对数组中每个字符串做 `v-for` 嵌套循环渲染，与 `goods-detail.vue` 保持一致。 + +### 5.2 tree API vs detail API +VR 票务商品详情页**不再调用** `goods/detail` 接口，直接通过 `goods/tree` (pluginsname=vr_ticket) 接口获取所有数据（含 `goods.content_app`），符合 vr_ticket 插件的数据自包含设计。 + +--- + +## 六、参考文件 + +| 文件 | 用途 | +|------|------| +| `pages/goods-detail/goods-detail.vue` (L389-L408) | content_app 渲染模式参考 | +| `docs/test.json` | tree API 完整响应示例 | +| `docs/vr-ticket-uniapp-supplement.md` | VR 票务 UniApp 移植完整文档 | diff --git a/pages/goods-vr-ticket/goods-vr-ticket.css b/pages/goods-vr-ticket/goods-vr-ticket.css index 1655011a..abca1cd7 100644 --- a/pages/goods-vr-ticket/goods-vr-ticket.css +++ b/pages/goods-vr-ticket/goods-vr-ticket.css @@ -607,6 +607,39 @@ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } +.detail-empty { + font-size: 13px; + color: #999; + padding: 20px 0; + text-align: center; +} + +.detail-content { + margin-top: 16px; +} + +.detail-item { + margin-bottom: 16px; +} + +.detail-image { + width: 100%; + border-radius: 8px; + margin-bottom: 8px; +} + +.content-items { + padding: 0 4px; +} + +.content-items .item { + font-size: 14px; + color: #333; + line-height: 1.8; + text-align: left; + margin-bottom: 8px; +} + .round { border-radius: 50%; } diff --git a/pages/goods-vr-ticket/goods-vr-ticket.vue b/pages/goods-vr-ticket/goods-vr-ticket.vue index e6837b59..ad7ef73d 100644 --- a/pages/goods-vr-ticket/goods-vr-ticket.vue +++ b/pages/goods-vr-ticket/goods-vr-ticket.vue @@ -51,6 +51,21 @@ 演出详情 + + + + + {{ text }} + + + + 暂无演出详情 @@ -186,6 +201,8 @@ export default { peerGoods: [], // 场次元数据（用于停售控制） sessionMeta: [], + // 详情内容（从 tree API 的 goods.content_app 获取） + detailContent: [], // 服务说明数据 (可从 API 获取) defaultServices: [ { title: '电子票', desc: '现场验票时，请观演人出示APP票夹中的电子票二维码验票入场，不支持截屏。', status: 'success' }, @@ -363,11 +380,17 @@ export default { handleTreeData(apiData) { this.treeData = apiData.tree; this.seatTemplates = apiData.seat_templates; - + // 提取会话元数据和同场次商品 this.sessionMeta = apiData.session_meta || []; this.peerGoods = apiData.peer_goods || []; + // 提取 goods 属性中的 content_app（演出详情） + if (apiData.goods && apiData.goods.content_app) { + this.detailContent = apiData.goods.content_app; + console.log('[VR Ticket] detailContent loaded:', this.detailContent); + } + // 提取场馆数据 const venuesMap = {}; Object.values(apiData.seat_templates || {}).forEach(template => {