yz/frontend-store

Fork 0

davy a88d939796 多酒款功能可用

2025-08-04 09:59:12 +08:00

5.8 KiB

Raw Blame History

整版酒单功能使用指南

功能概述

整版酒单功能允许用户创建包含多款啤酒的整页图片模板，支持2-12款酒的灵活布局，并可在小程序端一键生成个性化酒单图片。

核心特性

✅ 灵活规格选择 - 支持A4竖版/横版、正方形、自定义尺寸
✅ 多商品布局 - 支持2-12款酒的网格、列表、自由布局
✅ 可视化编辑 - 基于FastPoster的拖拽式设计器
✅ 变量绑定 - 自动生成变量名，支持动态数据填充
✅ 示例数据 - 内置示例数据，实时预览设计效果
✅ 模板管理 - 支持模板保存、复制、编辑、删除
✅ 小程序集成 - 无缝对接现有酒单生成流程

系统架构

frontend-store (管理端)     frontend-fastposter (编辑器)     小程序端
      ↓                           ↓                         ↓
  模板规格选择    →    可视化设计器 + 自动生成    →    数据填充 + 图片生成
      ↓                           ↓                         ↓
  模板列表管理    ←    模板保存 + 预览图        ←    Base64/OSS 图片

使用流程

1. 创建整版模板 (管理端)

登录管理系统
- 访问 http://store.beerape.com/template/menu
选择规格
- 点击"新建整版酒单"
- 选择画布尺寸、商品数量、布局方向
- 输入模板名称和描述
设计模板
- 自动跳转到FastPoster编辑器
- 系统自动生成对应数量的酒款区块
- 拖拽调整布局、修改样式、添加背景等
保存模板
- 点击编辑器中的"保存"按钮
- 选择私有/公共模板权限

2. 生成酒单图片 (小程序端)

选择酒款
- 在酒单页面点击"整页导出"
- 进入多选模式，选择要包含的酒款
选择模板
- 点击"下一步"进入模板选择页面
- 系统显示匹配商品数量的模板
- 选择心仪的模板样式
生成图片
- 点击"生成图片"
- 系统自动填充酒款数据到模板
- 生成高清图片供预览和保存

技术实现详情

前端组件结构

frontend-store/src/views/template/menu/
├── index.vue                    # 模板管理主页面
├── components/
│   ├── SpecSelector.vue         # 规格选择组件
│   └── MenuDesignWizard.vue     # 设计向导组件
└── api/
    └── template.js              # 模板API接口

变量命名规范

系统采用 beer{index}_{field} 的命名规范：

// 第一款酒的变量
beer0_name    // 酒款名称
beer0_style   // 酒款风格
beer0_abv     // 酒精度
beer0_ibu     // 苦度值
beer0_price   // 价格
beer0_spec    // 规格
beer0_img     // 图片URL

// 第二款酒以此类推
beer1_name, beer1_style, ...

FastPoster集成

自动生成功能：

// 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)

小程序数据映射

// 小程序端数据映射示例
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 更新：

# 安装依赖
npm install

# 构建生产版本
npm run build

# 部署到服务器
cp -r dist/* /var/www/store.beerape.com/

frontend-fastposter 更新：

# 安装依赖
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，可在规格选择时自定义更高分辨率。

后续优化建议

批量操作增强 - 完善克隆、对齐等批量操作工具
模板市场 - 建立公共模板分享机制
样式预设 - 提供多种设计风格预设
动态布局 - 支持可变行数的自适应布局
数据源对接 - 支持直接从酒款库选择示例数据

技术支持

如有问题请联系开发团队或查看技术实现方案文档。

5.8 KiB Raw Blame History Unescape Escape