sileya-ai
/
vr-shopxo-plugin
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

feat(Phase 3-1): Vue3 交互式场馆配置表单编辑器 save.html 

- admin/view/venue/save.html：Vue3 CDN 嵌入
  - 实时彩色座位预览（每格 30x30px，背景色=zone.color，悬浮显示座位号/分区/价格）
  - 动态增删分区（char/name/price/color + 预设色板）
  - 每排座位行编辑器（动态 input）
  - 双向同步：改 zone char/color → 预览即时刷新
  - 初始默认值：3 区（VIP区/看台区/普通区），6座/排
  - mounted() 回填：zones_json / map_json / venue_json
  - computed 序列化：zonesJson / seatMapRowsJson / venueJson → 隐藏字段

- Venue.php 补充：新增 venue_json 字段供 Vue3 回填
  - venue_json = {name, address, image}

关联：docs/11_EDITOR_AND_INJECTION_DESIGN.md v3.0
refactor/vr-ticket-20260416
Council 2026-04-15 22:06:21 +08:00
parent 136efb9b92
commit 49e256a9ab
2 changed files with 458 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
shopxo/app/plugins/vr_ticket/admin/controller/Venue.php
View File

@ -183,6 +183,11 @@ class Venue extends Base
$row['venue_address'] = $seatMap['venue']['address'] ?? '';
$row['venue_image'] = $seatMap['venue']['image'] ?? '';
$row['zones_json'] = json_encode($seatMap['sections'] ?? [], JSON_UNESCAPED_UNICODE);
$row['venue_json'] = json_encode([
'name' => $seatMap['venue']['name'] ?? '',
'address' => $seatMap['venue']['address'] ?? '',
'image' => $seatMap['venue']['image'] ?? '',
], JSON_UNESCAPED_UNICODE);
$row['map_json'] = json_encode($seatMap['map'] ?? [], JSON_UNESCAPED_UNICODE);
$info = $row;
}

453
shopxo/app/plugins/vr_ticket/admin/view/venue/save.html Normal file
View File

@ -0,0 +1,453 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{if isset($info['id'])}编辑{else}添加{/if}场馆</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
<style>
[v-cloak] { display: none; }
.venue-editor { margin-top: 20px; }
.venue-editor .section-title {
font-size: 16px;
font-weight: 600;
margin: 20px 0 10px;
padding-bottom: 6px;
border-bottom: 2px solid #009688;
color: #009688;
}
/* 座位预览 */
.seat-preview-wrap {
margin: 15px 0;
padding: 15px;
background: #f5f5f5;
border: 1px solid #e2e2e2;
border-radius: 4px;
min-height: 80px;
}
.seat-preview-wrap .preview-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.seat-preview-wrap .preview-row:last-child { margin-bottom: 0; }
.seat-preview-wrap .seat-cell {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #fff;
font-weight: 600;
border-radius: 3px;
cursor: default;
position: relative;
transition: transform 0.1s;
}
.seat-preview-wrap .seat-cell:hover {
transform: scale(1.15);
z-index: 10;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.seat-preview-wrap .seat-cell .seat-tooltip {
display: none;
position: absolute;
bottom: 38px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.85);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
font-size: 11px;
z-index: 100;
pointer-events: none;
}
.seat-preview-wrap .seat-cell:hover .seat-tooltip { display: block; }
.seat-preview-wrap .seat-cell .seat-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0,0,0,0.85);
}
.seat-preview-stats {
margin-top: 10px;
font-size: 13px;
color: #666;
}
.seat-preview-stats span {
margin-right: 16px;
}
/* 分区配置 */
.zone-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 8px;
background: #fafafa;
border: 1px solid #e2e2e2;
border-radius: 4px;
}
.zone-row .zone-char { width: 60px; }
.zone-row .zone-name { flex: 1; }
.zone-row .zone-price { width: 100px; }
.zone-row .zone-color { width: 50px; height: 36px; padding: 2px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; }
/* 座位排布 */
.seat-map-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.seat-map-row label {
width: 70px;
font-size: 13px;
color: #555;
}
.seat-map-row input[type="text"] {
flex: 1;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
font-family: monospace;
letter-spacing: 2px;
}
/* 颜色预设 */
.color-presets {
margin-top: 6px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.color-presets .preset-swatch {
width: 24px;
height: 24px;
border-radius: 3px;
cursor: pointer;
border: 1px solid #ccc;
transition: transform 0.1s;
}
.color-presets .preset-swatch:hover { transform: scale(1.2); }
/* 工具栏按钮 */
.toolbar { margin: 10px 0; }
/* 隐藏字段同步占位提示 */
.sync-hint {
font-size: 11px;
color: #999;
margin-top: 4px;
}
</style>
</head>
<body>
<div class="layui-fluid" style="padding:20px;">
<div class="layui-card">
<div class="layui-card-header">
{if isset($info['id'])}编辑{else}添加{/if}场馆
</div>
<div class="layui-card-body">
<form class="layui-form" method="POST" lay-filter="venue-form">
<!-- 场馆基本信息 -->
<div class="layui-form-item">
<label class="layui-form-label">场馆名称</label>
<div class="layui-input-block">
<input type="text" name="name" value="{$info.name|default=''}" class="layui-input"
lay-verify="required" placeholder="请输入场馆名称">
</div>
</div>
<!-- ============================================================
Vue3 交互式场馆编辑器
============================================================ -->
<div id="venue-editor" v-cloak>
<div class="section-title">票务配置</div>
<!-- 场馆票务名 & 地址 -->
<div class="layui-form-item">
<label class="layui-form-label">场馆名（票务用）</label>
<div class="layui-input-block">
<input type="text" v-model="venue.name" class="layui-input" placeholder="票务系统展示的场馆名称">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">场馆地址</label>
<div class="layui-input-block">
<input type="text" v-model="venue.address" class="layui-input" placeholder="场馆详细地址">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">场馆图片</label>
<div class="layui-input-block">
<input type="text" v-model="venue.image" class="layui-input" placeholder="场馆图片URL（可选）">
</div>
</div>
<!-- ============================================================
实时座位预览
============================================================ -->
<div class="layui-form-item">
<label class="layui-form-label">座位预览</label>
<div class="layui-input-block">
<div class="seat-preview-wrap">
<template v-for="(rowStr, rowIdx) in seatMapRows" :key="rowIdx">
<div class="preview-row" v-if="rowStr.trim() !== ''">
<template v-for="(ch, colIdx) in rowStr.trim()" :key="rowIdx + '_' + colIdx">
<div class="seat-cell"
:style="{ backgroundColor: getZoneColor(ch) }"
:title="getSeatTooltip(rowIdx, colIdx, ch)">
{{ ch }}{{ colIdx + 1 }}
<div class="seat-tooltip">{{ getSeatTooltip(rowIdx, colIdx, ch) }}</div>
</div>
</template>
</div>
</template>
<div v-if="totalSeats === 0" style="color:#999;font-size:13px;text-align:center;padding:10px 0;">
暂无座位，请添加分区和排布
</div>
<div class="seat-preview-stats" v-if="totalSeats > 0">
<span>总座位数：<strong>{{ totalSeats }}</strong></span>
<span>总排数：<strong>{{ seatMapRows.filter(r => r.trim()).length }}</strong></span>
<span>分区数：<strong>{{ activeZones.length }}</strong></span>
</div>
</div>
</div>
</div>
<!-- ============================================================
分区配置
============================================================ -->
<div class="layui-form-item">
<label class="layui-form-label">分区配置</label>
<div class="layui-input-block">
<div v-for="(zone, idx) in zones" :key="idx" class="zone-row">
<input type="text" v-model="zone.char" maxlength="1"
class="layui-input zone-char"
placeholder="字符"
@input="onZoneChange">
<input type="text" v-model="zone.name"
class="layui-input zone-name"
placeholder="分区名称，如 VIP区">
<input type="number" v-model="zone.price"
class="layui-input zone-price"
placeholder="价格" min="0">
<input type="color" v-model="zone.color"
class="zone-color"
@input="onZoneChange">
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger"
@click="removeZone(idx)">删除</button>
</div>
<div class="toolbar">
<button type="button" class="layui-btn layui-btn-sm" @click="addZone">
<i class="layui-icon layui-icon-add-1"></i> 添加分区
</button>
</div>
<div class="color-presets">
<span style="font-size:12px;color:#888;margin-right:4px;">预设色：</span>
<template v-for="c in colorPresets" :key="c">
<div class="preset-swatch"
:style="{ backgroundColor: c }"
:title="c"
@click="applyPresetColor(c)"></div>
</template>
</div>
</div>
</div>
<!-- ============================================================
座位排布
============================================================ -->
<div class="layui-form-item">
<label class="layui-form-label">座位排布</label>
<div class="layui-input-block">
<div v-for="(row, idx) in seatMapRows" :key="idx" class="seat-map-row">
<label>第 {{ idx + 1 }} 排：</label>
<input type="text"
:value="row"
@input="updateSeatMapRow(idx, $event)"
placeholder="输入座位字符，如 AAAAAA">
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger"
@click="removeSeatRow(idx)">删除</button>
</div>
<div class="toolbar">
<button type="button" class="layui-btn layui-btn-sm" @click="addSeatRow">
<i class="layui-icon layui-icon-add-1"></i> 添加排
</button>
<span class="sync-hint">每排字符对应上方分区，例：ABABAB 表示交替座位</span>
</div>
</div>
</div>
</div>
<!-- / Vue3 编辑器 -->
<!-- 隐藏字段：提交给 PHP -->
<input type="hidden" name="zones" :value="zonesJson">
<input type="hidden" name="seat_map_rows" :value="seatMapRowsJson">
<input type="hidden" name="venue_json" :value="venueJson">
<div class="layui-form-item" style="margin-top:20px;">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="venue-submit">
提交
</button>
<a href="{:PluginsAdminUrl('vr_ticket/admin/venue/index')}" class="layui-btn layui-btn-primary">
返回
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="__STATIC__/layui/layui.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
(function() {
// ============================================================
// Vue3 编辑器
// ============================================================
var COLOR_PRESETS = [
'#e74c3c', '#3498db', '#2ecc71', '#9b59b6',
'#f39c12', '#1abc9c', '#34495e', '#e67e22',
'#16a085', '#8e44ad', '#27ae60', '#c0392b'
];
var DEFAULT_ZONE = { char: '', name: '', price: 0, color: '#3498db' };
var app = Vue.createApp({
data: function() {
return {
venue: { name: '', address: '', image: '' },
zones: [
{ char: 'A', name: 'VIP区', price: 899, color: '#e74c3c' },
{ char: 'B', name: '看台区', price: 599, color: '#3498db' }
],
seatMapRows: ['AAAAAA', 'BBBBBB', 'CCCCCC'],
colorPresets: COLOR_PRESETS
};
},
computed: {
activeZones: function() {
var map = {};
this.zones.forEach(function(z) {
if (z.char.trim()) map[z.char.trim().toUpperCase()] = z;
});
return map;
},
zonesJson: function() {
return JSON.stringify(this.zones);
},
seatMapRowsJson: function() {
return JSON.stringify(this.seatMapRows);
},
venueJson: function() {
return JSON.stringify(this.venue);
},
totalSeats: function() {
var total = 0;
this.seatMapRows.forEach(function(row) {
if (row && row.trim) total += row.trim().length;
});
return total;
}
},
methods: {
getZoneColor: function(ch) {
var z = this.activeZones[ch.toUpperCase()];
return z ? z.color : '#cccccc';
},
getZone: function(ch) {
return this.activeZones[ch.toUpperCase()] || null;
},
getSeatTooltip: function(rowIdx, colIdx, ch) {
var zone = this.getZone(ch);
if (!zone) return ch + (colIdx + 1);
return zone.name + ' · ¥' + zone.price + ' · ' + ch + (colIdx + 1);
},
addZone: function() {
this.zones.push(Vue.util.extend({}, DEFAULT_ZONE));
},
removeZone: function(idx) {
this.zones.splice(idx, 1);
},
applyPresetColor: function(color) {
// 把颜色应用到最后一个未填写颜色的 zone
var lastEmpty = -1;
for (var i = 0; i < this.zones.length; i++) {
if (!this.zones[i].color || this.zones[i].color === '#cccccc') {
lastEmpty = i;
}
}
if (lastEmpty >= 0) {
this.zones[lastEmpty].color = color;
} else {
this.zones[this.zones.length - 1].color = color;
}
},
addSeatRow: function() {
var lastRow = this.seatMapRows.length > 0
? this.seatMapRows[this.seatMapRows.length - 1]
: 'A';
var ch = lastRow.trim().split('')[0] || 'A';
var count = 6;
this.seatMapRows.push(new Array(count + 1).join(ch));
},
removeSeatRow: function(idx) {
this.seatMapRows.splice(idx, 1);
},
updateSeatMapRow: function(idx, event) {
this.seatMapRows[idx] = event.target.value.toUpperCase();
},
onZoneChange: function() {
// 强制 Vue 重新渲染预览（响应式已处理，这里可扩展自定义校验）
}
},
mounted: function() {
// 编辑时回填
var zonesRaw = '{$info.zones_json|raw}' || '[]';
var mapRaw = '{$info.map_json|raw}' || '[]';
var venueRaw = '{$info.venue_json|raw}' || '{}';
if (zonesRaw && zonesRaw !== '[]') {
try { this.zones = JSON.parse(zonesRaw); } catch(e) {}
}
if (mapRaw && mapRaw !== '[]') {
try { this.seatMapRows = JSON.parse(mapRaw); } catch(e) {}
}
if (venueRaw && venueRaw !== '{}') {
try { this.venue = JSON.parse(venueRaw); } catch(e) {}
}
}
});
app.mount('#venue-editor');
// ============================================================
// layui 初始化
// ============================================================
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
form.on('submit(venue-submit)', function(data){
// 数据已通过隐藏字段序列化，此处不做额外处理
return true;
});
form.render();
});
})();
</script>
</body>
</html>