vr-shopxo-plugin/reviews/FrontendDev-Issue4-GoodsDetail.md

FrontendDev — Issue 4 Findings: 商品详情/图片加载评估

当前实现

商品内容渲染（ticket_detail.html:161-166）:

<?php if (!empty($goods['content'])): ?>
<div class="vr-seat-section">
    <div class="vr-section-title">演出详情</div>
    <div class="goods-detail-content"><?php echo $goods['content']; ?></div>
</div>
<?php endif; ?>

$goods['content'] 来自 GoodsService::GoodsList()（Goods.php:65），请求参数 is_photo => 1 表示同时加载相册数据。

图片加载

ShopXO 商品内容使用富文本编辑器（UEditor/TinyMCE 等），图片路径通常存储为：

• 绝对路径（完整 URL）：直接可用
• 相对路径（如 /public/upload/...）：在 H5 页面中同样可用（浏览器自动补全域名）

商品相册（goods['photos']）未在 ticket_detail.html 中渲染。如需展示，应使用：

<?php if (!empty($goods['photos'])): ?>
<div class="vr-goods-photos">
    <?php foreach ($goods['photos'] as $photo): ?>
    <img src="<?php echo $photo['image']; ?>" alt="">
    <?php endforeach; ?>
</div>
<?php endif; ?>

评估结论

项目	状态	说明
商品详情内容	✅ 正常	$goods['content'] 正确渲染
商品图片	⚠️ 未使用	相册数据 $goods['photos'] 未在模板渲染
商品标题/副标题	✅ 正常	$goods['title'] / $goods['simple_desc'] 正常
放大镜组件	N/A	ticket_detail.html 不加载 ShopXO goods-detail 相关 CSS/JS
视频播放器	N/A	不加载 CKPlayer

建议

1. 补充相册渲染：在页面头部（.vr-ticket-header 下方）添加相册轮播，提升商品展示完整性
2. 图片懒加载：如果座位图很大，演出详情图片应使用 loading="lazy"
3. 内容样式：.goods-detail-content 的 CSS 未定义，建议补充样式（图片 max-width、段落间距等）