86 lines
3.0 KiB
Markdown
86 lines
3.0 KiB
Markdown
|
# FrontendDev — Issue 3 Findings: Spec 加载问题（前端视角）
|
|||
|
|
|
|||
|
|
## 当前状态
|
|||
|
|
|
|||
|
|
`loadSoldSeats()` 函数（ticket_detail.html:375-383）**完全是 TODO stub**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
loadSoldSeats: function() {
|
|||
|
|
// TODO: 从后端加载已售座位
|
|||
|
|
// $.get(this.requestUrl + '?s=plugins/vr_ticket/index/sold_seats', {
|
|||
|
|
// goods_id: this.goodsId,
|
|||
|
|
// spec_base_id: this.sessionSpecId
|
|||
|
|
// }, function(res) {
|
|||
|
|
// // 标记已售座位
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
没有任何网络请求，soldSeats 永远是空对象 `{}`。
|
|||
|
|
|
|||
|
|
## 真实库存加载
|
|||
|
|
|
|||
|
|
**GetGoodsViewData 返回的数据（SeatSkuService.php:358-464）**：
|
|||
|
|
|
|||
|
|
`$goods_spec_data` 只包含**场次维度的 spec_base_id**（非座位级）：
|
|||
|
|
```php
|
|||
|
|
[
|
|||
|
|
'spec_id' => $specValue['goods_spec_base_id'] ?? 0, // 场次级 ID
|
|||
|
|
'spec_name' => $timeRange, // "08:00-23:59"
|
|||
|
|
'price' => floatval($sv['price']),
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
前端通过 `selectSession()` 选择场次后，`this.sessionSpecId` 被设置为场次级 spec_base_id。**但座位级的 spec_base_id_map（每个座位的 SKU ID）需要从后端接口查询**。
|
|||
|
|
|
|||
|
|
## specBaseIdMap 的局限性
|
|||
|
|
|
|||
|
|
ticket_detail.html:187 注入的 `specBaseIdMap` 来自 `seatTemplate['spec_base_id_map']`。这个 map 的 key 格式是 `rowLabel_colNum`（如 "A_1"），value 是座位级 GoodsSpecBase ID。
|
|||
|
|
|
|||
|
|
问题：**前端无法仅凭前端数据知道哪些座位已售**。需要后端接口：
|
|||
|
|
1. 根据 `goods_id` + `sessionSpecId` 查询所有已售 GoodsSpecBase（`inventory = 0`）
|
|||
|
|
2. 返回已售座位 key 列表
|
|||
|
|
3. 前端在 `loadSoldSeats()` 中标记 `.sold` class
|
|||
|
|
|
|||
|
|
## 修复方案（前端部分）
|
|||
|
|
|
|||
|
|
需要实现一个 AJAX 接口 `plugins/vr_ticket/index/sold_seats`，前端调用：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
loadSoldSeats: function() {
|
|||
|
|
if (!this.sessionSpecId) return;
|
|||
|
|
var self = this;
|
|||
|
|
$.get(this.requestUrl + '?s=plugins/vr_ticket/index/sold_seats', {
|
|||
|
|
goods_id: this.goodsId,
|
|||
|
|
spec_base_id: this.sessionSpecId // 场次级 ID
|
|||
|
|
}, function(res) {
|
|||
|
|
if (res.code === 0 && res.data) {
|
|||
|
|
// res.data: [{row_col: "A_1", row_label: "A", col_num: 1}, ...]
|
|||
|
|
res.data.forEach(function(sold) {
|
|||
|
|
self.soldSeats[sold.row_label + '_' + sold.col_num] = true;
|
|||
|
|
});
|
|||
|
|
self.markSoldSeats();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
markSoldSeats: function() {
|
|||
|
|
var self = this;
|
|||
|
|
document.querySelectorAll('.vr-seat-row .vr-seat:not(.aisle):not(.space)').forEach(function(el) {
|
|||
|
|
var key = el.dataset.rowLabel + '_' + el.dataset.colNum;
|
|||
|
|
if (self.soldSeats[key]) {
|
|||
|
|
el.classList.add('sold');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API 设计建议
|
|||
|
|
|
|||
|
|
后端需要新增一个控制器方法（可能是 `plugins/vr_ticket/index/Index` 中的 `sold_seats` action），查询 `GoodsSpecBase` 中 `inventory = 0` 的座位记录，按场次 ID 过滤。
|
|||
|
|
|
|||
|
|
## 依赖
|
|||
|
|
|
|||
|
|
- BackendArchitect 提供 `sold_seats` 接口的准确路径和返回格式
|
|||
|
|
- BackendArchitect 确认 GoodsSpecBase 的 inventory 字段在购票后是否被正确扣减
|