203 lines
5.8 KiB
Markdown
203 lines
5.8 KiB
Markdown
# 整版酒单功能使用指南
|
||
|
||
## 功能概述
|
||
|
||
整版酒单功能允许用户创建包含多款啤酒的整页图片模板，支持2-12款酒的灵活布局，并可在小程序端一键生成个性化酒单图片。
|
||
|
||
## 核心特性
|
||
|
||
- ✅ **灵活规格选择** - 支持A4竖版/横版、正方形、自定义尺寸
|
||
- ✅ **多商品布局** - 支持2-12款酒的网格、列表、自由布局
|
||
- ✅ **可视化编辑** - 基于FastPoster的拖拽式设计器
|
||
- ✅ **变量绑定** - 自动生成变量名，支持动态数据填充
|
||
- ✅ **示例数据** - 内置示例数据，实时预览设计效果
|
||
- ✅ **模板管理** - 支持模板保存、复制、编辑、删除
|
||
- ✅ **小程序集成** - 无缝对接现有酒单生成流程
|
||
|
||
## 系统架构
|
||
|
||
```
|
||
frontend-store (管理端) frontend-fastposter (编辑器) 小程序端
|
||
↓ ↓ ↓
|
||
模板规格选择 → 可视化设计器 + 自动生成 → 数据填充 + 图片生成
|
||
↓ ↓ ↓
|
||
模板列表管理 ← 模板保存 + 预览图 ← Base64/OSS 图片
|
||
```
|
||
|
||
## 使用流程
|
||
|
||
### 1. 创建整版模板 (管理端)
|
||
|
||
1. **登录管理系统**
|
||
- 访问 `http://store.beerape.com/template/menu`
|
||
|
||
2. **选择规格**
|
||
- 点击"新建整版酒单"
|
||
- 选择画布尺寸、商品数量、布局方向
|
||
- 输入模板名称和描述
|
||
|
||
3. **设计模板**
|
||
- 自动跳转到FastPoster编辑器
|
||
- 系统自动生成对应数量的酒款区块
|
||
- 拖拽调整布局、修改样式、添加背景等
|
||
|
||
4. **保存模板**
|
||
- 点击编辑器中的"保存"按钮
|
||
- 选择私有/公共模板权限
|
||
|
||
### 2. 生成酒单图片 (小程序端)
|
||
|
||
1. **选择酒款**
|
||
- 在酒单页面点击"整页导出"
|
||
- 进入多选模式，选择要包含的酒款
|
||
|
||
2. **选择模板**
|
||
- 点击"下一步"进入模板选择页面
|
||
- 系统显示匹配商品数量的模板
|
||
- 选择心仪的模板样式
|
||
|
||
3. **生成图片**
|
||
- 点击"生成图片"
|
||
- 系统自动填充酒款数据到模板
|
||
- 生成高清图片供预览和保存
|
||
|
||
## 技术实现详情
|
||
|
||
### 前端组件结构
|
||
|
||
```
|
||
frontend-store/src/views/template/menu/
|
||
├── index.vue # 模板管理主页面
|
||
├── components/
|
||
│ ├── SpecSelector.vue # 规格选择组件
|
||
│ └── MenuDesignWizard.vue # 设计向导组件
|
||
└── api/
|
||
└── template.js # 模板API接口
|
||
```
|
||
|
||
### 变量命名规范
|
||
|
||
系统采用 `beer{index}_{field}` 的命名规范：
|
||
|
||
```javascript
|
||
// 第一款酒的变量
|
||
beer0_name // 酒款名称
|
||
beer0_style // 酒款风格
|
||
beer0_abv // 酒精度
|
||
beer0_ibu // 苦度值
|
||
beer0_price // 价格
|
||
beer0_spec // 规格
|
||
beer0_img // 图片URL
|
||
|
||
// 第二款酒以此类推
|
||
beer1_name, beer1_style, ...
|
||
```
|
||
|
||
### FastPoster集成
|
||
|
||
**自动生成功能：**
|
||
```javascript
|
||
// URL参数格式
|
||
/fastposter?mode=menu&itemCount=6&layout=grid&width=794&height=1123
|
||
|
||
// 自动生成的模板包含：
|
||
- 1个背景组件
|
||
- 1个标题组件 (vd: menu_title)
|
||
- N组酒款区块，每组包含7个组件：
|
||
- 背景框
|
||
- 酒款图片 (vd: beer{i}_img)
|
||
- 酒款名称 (vd: beer{i}_name)
|
||
- 酒款风格 (vd: beer{i}_style)
|
||
- 酒精度 (vd: beer{i}_abv)
|
||
- 苦度值 (vd: beer{i}_ibu)
|
||
- 价格 (vd: beer{i}_price)
|
||
- 规格 (vd: beer{i}_spec)
|
||
```
|
||
|
||
### 小程序数据映射
|
||
|
||
```javascript
|
||
// 小程序端数据映射示例
|
||
const params = { uuid: templateId }
|
||
selectedBeers.forEach((beer, i) => {
|
||
params[`beer${i}_name`] = beer.name
|
||
params[`beer${i}_style`] = beer.customStyle || ''
|
||
params[`beer${i}_abv`] = beer.abv || ''
|
||
params[`beer${i}_ibu`] = beer.ibu || ''
|
||
params[`beer${i}_price`] = beer.price1
|
||
params[`beer${i}_spec`] = beer.spec1
|
||
params[`beer${i}_img`] = beer.image
|
||
})
|
||
|
||
// 调用生成接口
|
||
genPoster(params).then(result => {
|
||
// result.base64 或 result.url
|
||
})
|
||
```
|
||
|
||
## 部署说明
|
||
|
||
### 1. 前端部署
|
||
|
||
**frontend-store 更新：**
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 部署到服务器
|
||
cp -r dist/* /var/www/store.beerape.com/
|
||
```
|
||
|
||
**frontend-fastposter 更新：**
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 部署到服务器
|
||
cp -r dist/* /var/www/bar.beerape.com/fastposter/
|
||
```
|
||
|
||
### 2. 后端配置
|
||
|
||
无需修改后端代码，现有的 `/bar/poster/genPoster` 接口已支持多变量模板。
|
||
|
||
### 3. 小程序更新
|
||
|
||
只需更新 `templateSelect.vue` 中的参数映射逻辑即可。
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 模板生成后为什么看不到酒款信息？
|
||
A1: 需要在编辑器中应用示例数据或手动填入变量值才能看到效果。保存后在小程序端会自动填充真实数据。
|
||
|
||
### Q2: 如何修改单个酒款区块的样式？
|
||
A2: 在FastPoster编辑器中选中对应的组件（文字/图片），在右侧属性面板调整字体、颜色、大小等样式。
|
||
|
||
### Q3: 模板支持的最大酒款数量是多少？
|
||
A3: 理论上支持20款，但建议不超过12款以保证显示效果和性能。
|
||
|
||
### Q4: 如何让空位自动隐藏？
|
||
A4: 在组件的vd绑定完成后，FastPoster会自动处理空值情况。如果变量值为空或null，对应组件不会显示。
|
||
|
||
### Q5: 生成的图片分辨率如何？
|
||
A5: 图片分辨率与模板画布设置一致，A4模板通常为794×1123px，可在规格选择时自定义更高分辨率。
|
||
|
||
## 后续优化建议
|
||
|
||
1. **批量操作增强** - 完善克隆、对齐等批量操作工具
|
||
2. **模板市场** - 建立公共模板分享机制
|
||
3. **样式预设** - 提供多种设计风格预设
|
||
4. **动态布局** - 支持可变行数的自适应布局
|
||
5. **数据源对接** - 支持直接从酒款库选择示例数据
|
||
|
||
---
|
||
|
||
## 技术支持
|
||
|
||
如有问题请联系开发团队或查看 [技术实现方案文档](./技术实现方案文档——"整版酒单生成"功能.md)。 |