sileya-ai
/
vr-shopxo-plugin
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity
vr-shopxo-plugin/docs/council-F1-F2-findings.md

6.9 KiB
Raw Blame History

F1 + F2 研究发现（FrontendDev 内部工作文件）

供 Round 2 Review 和 Task O1 汇总使用 Q1 置信度：高 | Q4 置信度：高（依赖 Q2 结论）

Q1：ShopXO 自定义模板最佳实践

核心结论

现有 ticket_detail.html 的技术选型（原生 HTML+CSS+JS）已经是 ShopXO PHP 模板的最优解。 不需要引入 Vue CDN 或 Tailwind 等额外框架。

理由

  1. ShopXO 模板引擎是 ThinkTemplate（PHP），不是 Vue

    • ThinkTemplate 标签 {$var}、{if}、{foreach} 与 Vue 指令 {{}}、v-if 完全冲突
    • Vue CDN 加载后，页面内的 ThinkTemplate 标签会被 Vue 先解析，导致错误
    • 结论：Vue CDN 方案不可行

  2. 原生 HTML+CSS+JS 方案已验证可用

    • ticket_detail.html 使用 ModuleInclude('public/header') + 绝对路径 View::fetch() 已成功渲染
    • 自包含 CSS（vr- 前缀隔离）、IIFE 模式 JS 已正常工作
    • 已有功能：座位图渲染、座选选中交互、场次选择、观演人表单、订单提交

  3. ShopXO 原生可复用资源

    • ModuleInclude('public/header') → 复用 ShopXO 统一头部（含登录态/导航）
    • ModuleInclude('public/footer') → 复用统一底部
    • ThinkPHP 的 Url::build() → 生成正确的 API 链接
    • ShopXO 原生 UI 组件库（static/index/css/default/module.css）

"酷炫化"可行增强方向（无需换技术栈）

增强项 实现方式 复杂度
座位图缩放/拖拽 CSS transform: scale() + touch事件 低
座位动画（入场/高亮） CSS @keyframes + transition 低
座位图 Canvas 渲染（大数据量） 原生 Canvas API 替换 DOM 渲染 中
3D 舞台效果 CSS 3D transform-style: preserve-3d 低
潮流动效（GSAP） GSAP CDN（非 Vue，纯 JS） 低
暗色主题切换 CSS Variables + localStorage 低
座位区域热力图颜色 根据价格区间动态计算 RGB 低
触控手势（双指缩放） Hammer.js 手势库（非 Vue） 中

推荐优先级：座位入场动画 > 3D 舞台 > 触控缩放 > 暗色主题

H5 预览兼容性保障

  • 当前方案天然兼容：ShopXO 的 H5 路由（?s=goods/index/id/xxx）直接渲染 ticket_detail.html
  • 无需额外配置，浏览器直接访问即预览
  • 微信开发者工具 H5 调试模式同样支持

技术栈最终建议（Q1）

项目 选型 原因
模板引擎 ThinkTemplate（现有） ShopXO 官方，不换
HTML 结构 原生 HTML5 无需改动
CSS 方案 原生 CSS + vr- 前缀隔离 已有，无需引入 Tailwind
JS 框架 原生 JS（IIFE 模式） ThinkTemplate 标签冲突，无法用 Vue
动画库 GSAP（非必须） CDN 引入，纯 JS，不冲突
手势库 Hammer.js（非必须） 同上
响应式 CSS Flexbox/Grid + 媒体查询 已有

置信度：高（基于已有代码验证）

Q4：uni-app 兼容性技术栈选型

核心结论

最终目标（微信小程序）：fork shopxo-uniapp，直接改 Vue 源码，比 PHP 模板方案更优雅。 当前 PHP 模板方案（ticket_detail.html）作为 H5 专用保底，两套并行。

两条路径对比

维度 路径 A：增强 PHP 模板 路径 B：fork shopxo-uniapp
微信小程序 ❌ 不支持 ✅ 官方支持
H5 ✅ 原生支持 ✅ 官方支持
开发工具 任意编辑器 HBuilderX（必需）
技术栈 原生 HTML/CSS/JS Vue 3 + uni-app
座位图组件 DOM 渲染（大量座位时性能差） Canvas/Vue 组件，性能好
ShopXO 耦合 高（直接用 ThinkTemplate） 低（纯 API 对接）
多端一致性 ⚠️ 需单独维护小程序 UI ✅ 一套代码 H5+小程序
开发工作量 低（增强现有模板） 中（新建 Vue 组件）

路径 B 详细方案（推荐）

1. fork shopxo-uniapp → vr-shopxo-uniapp
2. 修改 App.vue 的 request_url/static_url
3. 新建 pages/ticket-buy/（票务选座主流程）
   - pages/ticket-buy/components/seat-selector.vue
   - pages/ticket-buy/components/attendee-form.vue
   - pages/ticket-buy/components/purchase-bar.vue
4. 修改 pages/goods-detail/goods-detail.vue
   - goods.item_type === 'ticket' 时，跳转 pages/ticket-buy
5. 新建 pages/ticket-wallet/（我的票夹）
6. 新建 pages/ticket-verify/（核销 B 端）
7. H5 预览：HBuilderX 运行 → Chrome
8. 微信小程序：HBuilderX 发行 → 微信开发者工具

H5 与小程序一致性保障

uni-app 的 H5 和小程序都基于 WebView，CSS 渲染一致。关键遵循：

  • 用 rpx 代替 vw/vh（uni-app 标准响应式）
  • 用 <view> 代替 <div>
  • 避免 calc() 混用单位
  • 避免浏览器私有前缀（小程序不需要）
  • position: fixed 吸底用 scroll-view 模拟（HBuilder 已有方案）

ShopXO H5 模板与 uni-app 的关系

结论：两套前端体系完全独立，无桥接需求。

  • ShopXO PHP 模板（H5）= 通过 ThinkPHP 渲染，浏览器直接访问
  • shopxo-uniapp（H5/小程序）= 纯前端 SPA，通过 API 调用 ShopXO 后端
  • 票务插件同时暴露两套接口：PHP 渲染用原生模板，API 用 ?s=plugins/vr_ticket/...

不需要"共存/桥接" — 可以理解为两个独立的 C 端入口：

  • 用户 A（PC/手机浏览器）→ ShopXO PHP H5 模板
  • 用户 B（微信小程序）→ shopxo-uniapp fork

最小可行方案（MVP）vs 理想方案

维度 最小可行方案 理想方案
H5 增强现有 ticket_detail.html 继续增强（已满足）
微信小程序 不做 fork shopxo-uniapp + 票务 Vue 页面
优先级 H5 酷炫化 > 多座位 > 小程序 H5+小程序双端一致
开发时间 1-2天（增强现有） 1-2周（新建 Vue 组件）

风险点

风险 级别 缓解方案
Q2 多SKU不支持 P0 等 BackendArchitect 结论；若不支持，降级为逐座单独下单
uni-app 学习曲线 P1 shopxo-uniapp 已有完整模板，直接参照改写
HBuilderX IDE 依赖 P1 仅票务页面用 HBuilderX，普通页面继续用 VSCode
两套代码重复维护 P2 Q2 结论后决定：若多SKU支持，只做 uni-app；若不支持，PHP 模板为主

置信度：高（shopxo-uniapp 已验证，docs/12_UNIAPP_FRONTEND_RESEARCH.md 详述）

依赖关系确认

Q2（BackendArchitect）→ Q4：Q2 支持多SKU → uni-app 多座位组件有订单支撑
                     → Q2 不支持多SKU → 降级为逐座单独下单，uni-app 仍可行
Q1 → Q3：Q1 确定 PHP 模板约束 → 影响 Q3 的 prompt 设计

Q4 不等待 Q2 结论，可以先执行基础工作（fork shopxo-uniapp），Q2 结论影响的是具体组件逻辑，不影响基础架构。