159 lines
6.9 KiB
Markdown
159 lines
6.9 KiB
Markdown
|
# 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 结论影响的是具体组件逻辑，不影响基础架构。
|