49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
# FrontendDev — Issue 4 Findings: 商品详情/图片加载评估
|
||
|
||
## 当前实现
|
||
|
||
**商品内容渲染（ticket_detail.html:161-166）**:
|
||
```php
|
||
<?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 中渲染**。如需展示，应使用：
|
||
```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、段落间距等）
|