From de9134773f9c2f0650e2e959e3161e4630420888 Mon Sep 17 00:00:00 2001
From: Council <council@openclaw>
Date: Tue, 21 Apr 2026 13:02:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9C=BA=E9=A6=86?=
 =?UTF-8?q?=E5=92=8C=E5=88=86=E5=8C=BA=E9=80=89=E6=8B=A9=E5=99=A8=20+=20sp?=
 =?UTF-8?q?ecTypeList=20=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SeatSkuService: 返回 specTypeList 包含所有4维规格
- Goods.php: 注入 specTypeList
- ticket_detail.html:
  - 添加 venueSelector 和 sectionSelector HTML 容器
  - 添加 renderAllSelectors() 渲染场次/场馆/分区
  - 添加 selectVenue/selectSection/filterSeats 函数
- CSS: 添加规格选择器样式
---
 shopxo/app/index/controller/Goods.php         |   1 +
 .../vr_ticket/service/SeatSkuService.php      |  30 +++-
 .../plugins/vr_ticket/static/css/ticket.css   |  13 ++
 .../vr_ticket/view/goods/ticket_detail.html   | 129 +++++++++++++++++-
 4 files changed, 168 insertions(+), 5 deletions(-)

diff --git a/shopxo/app/index/controller/Goods.php b/shopxo/app/index/controller/Goods.php
index a6c271e..59ba130 100755
--- a/shopxo/app/index/controller/Goods.php
+++ b/shopxo/app/index/controller/Goods.php
@@ -143,6 +143,7 @@ class Goods extends Common
                     'vr_seat_template' => $viewData['vr_seat_template'] ?? null,
                     'goods_spec_data'  => $viewData['goods_spec_data'] ?? [],
                     'seatSpecMap'      => $viewData['seatSpecMap'] ?? [],
+                    'specTypeList'     => $viewData['specTypeList'] ?? [],
                 ]);
                 // 使用绝对路径 + fetch() 方法，让 Think 驱动正确解析 include 路径
                 $tplFile = ROOT . 'app' . DS . 'plugins' . DS . 'vr_ticket' . DS . 'view' . DS . 'goods' . DS . 'ticket_detail.html';
diff --git a/shopxo/app/plugins/vr_ticket/service/SeatSkuService.php b/shopxo/app/plugins/vr_ticket/service/SeatSkuService.php
index 456ba35..7404e45 100644
--- a/shopxo/app/plugins/vr_ticket/service/SeatSkuService.php
+++ b/shopxo/app/plugins/vr_ticket/service/SeatSkuService.php
@@ -422,8 +422,31 @@ class SeatSkuService extends BaseService
             }
         }
 
-        // ========== 新增：构建 seatSpecMap ==========
-        $seatSpecMap = self::buildSeatSpecMap($goodsId, $seatTemplate);
+        // ========== 构建规格类型列表（4维：场馆、分区、座位号、场次）==========
+        // 从 GoodsSpecType 读取所有维度定义
+        $specTypeList = [];
+        $specTypes = \think\facade\Db::name('GoodsSpecType')
+            ->where('goods_id', $goodsId)
+            ->order('id', 'asc')
+            ->select()
+            ->toArray();
+
+        foreach ($specTypes as $type) {
+            $dimName = $type['name'] ?? '';
+            $values = json_decode($type['value'] ?? '[]', true);
+            $options = [];
+            foreach ($values as $v) {
+                if (isset($v['name'])) {
+                    $options[] = $v['name'];
+                }
+            }
+            if (!empty($dimName) && !empty($options)) {
+                $specTypeList[$dimName] = [
+                    'name'    => $dimName,
+                    'options' => $options,
+                ];
+            }
+        }
 
         // ========== 构建场次列表（goods_spec_data）==========
         $sessions = $config['sessions'] ?? [];
@@ -450,7 +473,7 @@ class SeatSkuService extends BaseService
             }
 
             $goodsSpecData[] = [
-                'spec_id'   => 0, // 不再需要 spec_id，前端用 seatSpecMap
+                'spec_id'   => 0,
                 'spec_name' => $timeRange,
                 'price'     => $sessionPrice ?? floatval($goods['price'] ?? 0),
                 'start'     => $start,
@@ -484,6 +507,7 @@ class SeatSkuService extends BaseService
             'vr_seat_template' => $seatTemplate ?: null,
             'goods_spec_data'  => $goodsSpecData,
             'seatSpecMap'      => $seatSpecMap,
+            'specTypeList'     => $specTypeList,  // 4维规格类型列表
             'goods_config'     => $config,
         ];
     }
diff --git a/shopxo/app/plugins/vr_ticket/static/css/ticket.css b/shopxo/app/plugins/vr_ticket/static/css/ticket.css
index eaa6c41..bf6ed75 100644
--- a/shopxo/app/plugins/vr_ticket/static/css/ticket.css
+++ b/shopxo/app/plugins/vr_ticket/static/css/ticket.css
@@ -102,3 +102,16 @@
 .vr-goods-info { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
 .vr-goods-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 15px; }
 .vr-goods-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
+
+/* 规格选择器样式 */
+.vr-spec-selector { margin-bottom: 15px; }
+.vr-spec-label { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; }
+.vr-spec-options { display: flex; flex-wrap: wrap; gap: 8px; }
+.vr-spec-option {
+    border: 1px solid #ddd; border-radius: 6px; padding: 8px 16px;
+    cursor: pointer; font-size: 13px; color: #333;
+    transition: all 0.15s;
+}
+.vr-spec-option:hover { border-color: #409eff; }
+.vr-spec-option.selected { border-color: #409eff; background: #ecf5ff; color: #409eff; }
+
diff --git a/shopxo/app/plugins/vr_ticket/view/goods/ticket_detail.html b/shopxo/app/plugins/vr_ticket/view/goods/ticket_detail.html
index dad75d0..69c7885 100644
--- a/shopxo/app/plugins/vr_ticket/view/goods/ticket_detail.html
+++ b/shopxo/app/plugins/vr_ticket/view/goods/ticket_detail.html
@@ -25,6 +25,18 @@
         </div>
     </div>
 
+    <!-- 场馆选择 -->
+    <div class="vr-seat-section" id="venueSection">
+        <div class="vr-section-title">选择场馆</div>
+        <div id="venueSelector"><!-- 由 JS 动态渲染 --></div>
+    </div>
+
+    <!-- 分区选择 -->
+    <div class="vr-seat-section" id="sectionSection">
+        <div class="vr-section-title">选择分区</div>
+        <div id="sectionSelector"><!-- 由 JS 动态渲染 --></div>
+    </div>
+
     <!-- 座位图 -->
     <div class="vr-seat-section" id="seatSection" style="display:none">
         <div class="vr-section-title">选择座位 <span
@@ -80,6 +92,7 @@
             // vr_seat_template already contains the decoded seat_map (venue, rooms, sections, seats)
             seatMap: <?php echo json_encode($vr_seat_template ?? []); ?>,
             seatSpecMap: <?php echo json_encode($seatSpecMap ?? []); ?>,
+            specTypeList: <?php echo json_encode($specTypeList ?? []); ?>,  // 4维规格类型列表
             selectedSeats: [],      // [{seatKey, price, rowLabel, colNum, section}]
             soldSeats: { },          // {seatKey: true}
             currentSession: null,   // 当前选中场次 value (e.g. "15:00-16:59")
@@ -87,11 +100,123 @@
             currentSection: null,    // 当前选中分区 char
 
             init: function() {
-                this.renderSessions();
+                this.renderAllSelectors();
                 this.bindEvents();
             },
 
-            // 渲染场次列表
+            // 渲染所有选择器（场次、场馆、分区）
+            renderAllSelectors: function() {
+                var specTypeList = this.specTypeList;
+                var goodsSpecData = <?php echo json_encode($goods_spec_data ?? []); ?> || [];
+
+                // 1. 渲染场次选择器
+                var sessionHtml = '';
+                if (goodsSpecData.length > 0) {
+                    goodsSpecData.forEach(function (spec) {
+                        sessionHtml += '<div class="vr-session-item" data-session="' + spec.spec_name + '" onclick="vrTicketApp.selectSession(this)">' +
+                            '<div class="date">' + spec.spec_name + '</div>' +
+                            '<div class="price">¥' + spec.price + '</div></div>';
+                    });
+                } else if (specTypeList['$vr-场次']) {
+                    specTypeList['$vr-场次'].options.forEach(function(session) {
+                        sessionHtml += '<div class="vr-session-item" data-session="' + session + '" onclick="vrTicketApp.selectSession(this)">' +
+                            '<div class="date">' + session + '</div>' +
+                            '<div class="price">¥0</div></div>';
+                    });
+                }
+                document.getElementById('sessionGrid').innerHTML = sessionHtml;
+
+                // 2. 渲染场馆选择器
+                var venueHtml = '<div class="vr-spec-selector"><div class="vr-spec-label">选择场馆</div><div class="vr-spec-options">';
+                if (specTypeList['$vr-场馆']) {
+                    specTypeList['$vr-场馆'].options.forEach(function(venue) {
+                        venueHtml += '<div class="vr-spec-option" data-venue="' + venue + '" onclick="vrTicketApp.selectVenue(this)">' + venue + '</div>';
+                    });
+                }
+                venueHtml += '</div></div>';
+                document.getElementById('venueSelector').innerHTML = venueHtml;
+
+                // 3. 渲染分区选择器
+                var sectionHtml = '<div class="vr-spec-selector"><div class="vr-spec-label">选择分区</div><div class="vr-spec-options">';
+                if (specTypeList['$vr-分区']) {
+                    specTypeList['$vr-分区'].options.forEach(function(section) {
+                        sectionHtml += '<div class="vr-spec-option" data-section="' + section + '" onclick="vrTicketApp.selectSection(this)">' + section + '</div>';
+                    });
+                }
+                sectionHtml += '</div></div>';
+                document.getElementById('sectionSelector').innerHTML = sectionHtml;
+            },
+
+            // 选择场馆
+            selectVenue: function(el) {
+                document.querySelectorAll('#venueSelector .vr-spec-option').forEach(function (item) {
+                    item.classList.remove('selected');
+                });
+                el.classList.add('selected');
+                this.currentVenue = el.dataset.venue;
+                this.filterSeats();
+            },
+
+            // 选择分区
+            selectSection: function(el) {
+                document.querySelectorAll('#sectionSelector .vr-spec-option').forEach(function (item) {
+                    item.classList.remove('selected');
+                });
+                el.classList.add('selected');
+                this.currentSection = el.dataset.section;
+                this.filterSeats();
+            },
+
+            // 根据选择过滤座位
+            filterSeats: function() {
+                var self = this;
+                document.querySelectorAll('.vr-seat.available').forEach(function(el) {
+                    var seatKey = el.dataset.seatKey;
+                    var seatInfo = self.seatSpecMap[seatKey] || {};
+
+                    var matchSession = true, matchVenue = true, matchSection = true;
+
+                    if (self.currentSession) {
+                        matchSession = false;
+                        for (var i = 0; i < seatInfo.spec.length; i++) {
+                            if (seatInfo.spec[i].type === '$vr-场次' && seatInfo.spec[i].value === self.currentSession) {
+                                matchSession = true;
+                                break;
+                            }
+                        }
+                    }
+
+                    if (self.currentVenue) {
+                        matchVenue = false;
+                        for (var i = 0; i < seatInfo.spec.length; i++) {
+                            if (seatInfo.spec[i].type === '$vr-场馆' && seatInfo.spec[i].value === self.currentVenue) {
+                                matchVenue = true;
+                                break;
+                            }
+                        }
+                    }
+
+                    if (self.currentSection) {
+                        matchSection = false;
+                        for (var i = 0; i < seatInfo.spec.length; i++) {
+                            if (seatInfo.spec[i].type === '$vr-分区' && seatInfo.spec[i].value === self.currentSection) {
+                                matchSection = true;
+                                break;
+                            }
+                        }
+                    }
+
+                    if (matchSession && matchVenue && matchSection && seatInfo.inventory > 0) {
+                        el.style.opacity = '1';
+                        el.style.pointerEvents = 'auto';
+                    } else {
+                        el.style.opacity = '0.3';
+                        el.style.pointerEvents = 'none';
+                    }
+                });
+            },
+
+            // 渲染场次列表（保留向后兼容）
             renderSessions: function() {
                 var specData = <?php echo json_encode($goods_spec_data ?? []); ?> || [];
                 var html = '';