营销页小程序 - 用户指南
Marketing 小程序让运营人员搭建品牌化的营销页（横幅 + 绑定的券 / 活动），并通过 Ops 生成的链接或二维码分享给会员。运营人员在 Marketing Ops 后台创建和管理营销页。
说明： 每个营销页都是一个独立的 PWA，托管在
/marketing/{Marketing Page ID}。会员通过 Ops 后台生成的链接 / 二维码进入 —— 通常通过邮件、应用内推送、社交媒体或印刷物料分发。如果会员从 VIO 会员端内打开该链接，会在会员端外壳里加载；否则直接在设备浏览器中打开。运营人员通过管理后台进入 Ops 后台，并需先为该租户配置 VIO External API Key（参见注册奖励 - VIO External API Key）。
目录
1. 如何进入
会员 —— 打开运营分享的营销页链接（邮件、应用内推送、社交、印刷二维码等渠道）。链接格式为 {pwaBaseUrl}/marketing/{Marketing Page ID}，可直接渲染营销页。如果会员从 VIO 会员端内打开同一个链接，则会在会员端外壳里加载，自带返回 / 刷新控件。
运营 —— 登录管理后台，在 Mini Apps 区域打开 Marketing。Ops 后台默认进入 /marketing 下的 Marketing Page 列表，列出当前租户已配置的所有营销页。
提示： 要生成一个页面的链接，在 Ops 后台找到该行，点 Actions 列里的 Download QR。QR 弹窗里会显示 Marketing Page Link、Copy link 按钮以及 Download QR Code 按钮（参见 §3.2 行操作）。
2. 会员体验 - 营销页
2.1 页面状态
营销页 PWA 会根据 URL 与页面配置渲染下列状态之一：
| 状态 | 出现时机 | 会员看到的内容 |
|---|---|---|
| Loading | 页面数据加载中。 | 居中加载指示与 Loading... 文案。 |
| Configured marketing page | URL 为 /marketing/{id}，页面已发布且未隐藏。 | 完整布局（logo、横幅轮播、Slogan、券 / 活动区块、Let's Discover More CTA）。 |
| No Marketing Page Configured | URL 为 / 或没有 page ID。 | 标题 No Marketing Page Configured，正文：This link does not include a marketing page ID. Please open a valid marketing page link from the campaign or contact the organiser. 此状态没有 Go Back 按钮。 |
| Page Not Found | Page ID 不存在或 API 报错。 | 标题 Page Not Found，正文：Marketing page not found 或 The marketing page you are looking for does not exist. |
| Page Unavailable | 运营通过 Hide Page 隐藏了该页。 | 锁图标 🔒，标题 Page Unavailable，正文：This marketing page is currently not available. |
提示： 利用页面状态可诊断链接问题：No Marketing Page Configured = 链接格式不对，Page Not Found = 该页已被删除，Page Unavailable = 运营暂时隐藏。
2.2 营销页布局
当页面已配置时，只展示 Ops 后台启用的部分：
- Logo header —— 已上传的 Company Logo，或文字回退（Step 2 中设置的公司名称，默认 Company）。
- Banner carousel —— 横幅自动轮播（约每 4 秒一次）。点击行为取决于 Banner Link：
- Custom Link —— 在新标签页打开外部 HTTPS URL。
- Voucher Detail Page —— 在新标签页打开会员端的券详情页。
- Slogan —— 横幅下方的可选标语（仅在 Step 2 中填写了 Slogan 时显示）。
- Link Voucher 区块 —— 区块标题取自 Step 3 中填写的 Voucher section title（未填写时回退为 Vouchers）。每张卡片显示券图、券名、代币图标与代币符号、价格（为 0 时显示
Free）。 - Link Campaign 区块 —— 区块标题取自 Step 3 中填写的 Campaign section title（未填写时回退为 Campaign）。加载中显示
Loading vouchers...，空状态显示No vouchers available for this campaign. Let's Discover MoreCTA —— 当存在 SSO URL 时，在新标签页打开{base}/sso-login；否则渲染为同名的禁用按钮。
提示： 横幅与券卡片始终在新标签页打开。会员可用系统 / 浏览器的返回手势回到营销页。
会员点击券卡片后会发生什么
营销页会在新标签页打开该券在会员端的券页面。该页面显示券图、标题、代币价格、有效期、商户、说明与条款，底部固定一个 Redeem 按钮。按钮的文案 / 行为取决于会员的登录状态以及券本身的状态：
| 会员状态 | 点击 Redeem 的行为 |
|---|---|
| 已登录会员端（同一浏览器内会话有效） | 按钮显示 Redeem。点击后立即兑换该券；成功时弹出提示 Voucher redeemed successfully!，页面跳转到已领取券的详情页。 |
| 未登录 | 按钮仍显示 Redeem，但点击后弹出 Login Prompt 弹窗，提示 Please log in to redeem vouchers.，会员需先登录（或注册）后才能再次尝试。 |
3. Ops 后台 - 营销页列表
Marketing Ops 后台默认进入 /marketing 下的 Marketing Page 列表。
3.1 页面结构
- Title —— Marketing Page。
- + Create New Marketing Page（右上） —— 打开
/marketing/create的 4 步向导。 - 搜索框（占位
Search by name...）—— 按营销页名称过滤列表。 - Hidden badge —— 当 Hide Page 开启时出现在名称旁边。
- 空状态 —— 标题 No Marketing Page，附 Create new marketing page 链接。
Pages 表的列： Marketing Page ID（用于公开 URL /marketing/{id}）、Marketing Page Name、Created Date Time、No. of Banner（最多 5）、Link Voucher、Link Campaign、Actions。
说明： Ops 后台目前没有 Import / Export —— 营销页只能通过向导逐个创建。
3.2 行操作
- View Details —— 打开只读模式的向导。
- Edit —— 在
/marketing/edit/{id}打开 4 步向导用于原地编辑。 - Delete —— 打开 Delete Marketing Page（Are you sure you want to delete this marketing page?，按钮 Cancel / Delete）。成功 toast：Marketing page deleted successfully!。
- Download QR —— 打开 QR Code 弹窗，弹窗包含：
- 二维码本身（下方的 Download QR Code 按钮，保存为
qr-code-{name}.png，成功 toast QR code downloaded successfully!）。 - Marketing Page Link 标签、链接文本（
{pwaBaseUrl}/marketing/{id}）和一个 Copy link 图标按钮。成功 toast：Link copied to clipboard!。如果浏览器禁用了剪贴板，会回退到提示框，请会员 Copy this link (select the text, then Cmd/Ctrl+C):。
- 二维码本身（下方的 Download QR Code 按钮，保存为
- Hide Page / Unhide Page —— 切换 hidden 标志。隐藏后会员看到 Page Unavailable，行名旁边出现 Hidden 徽章。
3.3 使用方法
使用方法：
- 在管理后台打开 Marketing。
- 用列表顶部的搜索框找已有页面，或点 + Create New Marketing Page 创建新页面。
- 要分享某个页面，点击该行的 Download QR —— 复制 Marketing Page Link 或下载二维码图片，再通过你选择的渠道（邮件、社交、印刷、应用内推送）分发。
- 用 Hide Page 临时下线；隐藏期间会员看到 Page Unavailable。用 Unhide Page 恢复可见。
- 仅在确认不再需要某页时使用 Delete —— 操作不可逆，链接会开始返回 Page Not Found。
4. Ops 后台 - 创建 / 编辑营销页
Create 与 Edit 共用同一个 4 步向导。面包屑为 Marketing page > Create New Marketing Page（编辑模式为 Edit Marketing Page）。
步骤条：
- Basic Setting
- Banner Details
- Content Configuration
- Confirmation of creation（编辑模式渲染为 Confirmation of changes）
底部导航：第 1 步显示 Cancel，第 2-4 步显示 Back，步与步之间用 Next，最后一步显示 Create（编辑模式为 Save）。
4.1 Step 1 — Basic Setting
- Marketing Page Name（必填，最长 30 字符，占位 Enter marketing page name） —— 同时出现在列表视图与面包屑中。
- Description（必填，最长 200 字符，占位 Enter description，多行
rows={6}）。
4.2 Step 2 — Banner Details
- 点击 Add Banner 打开 Add Banner 弹窗：
- Banner Title —— 占位 Enter banner title，最长 30 字符。
- Banner Image —— JPG, PNG, GIF or WEBP (Max 5MB, square ratio)。非 GIF 图片会进入 1:1 裁剪弹窗（Crop Image、Zoom:、Confirm Crop）；GIF 跳过裁剪并以 toast 解释原因。
- Banner Link —— 选 Voucher Detail Page（点 Select → Select Voucher 弹窗，提供搜索框（占位
Search by voucher name）与筛选 Brand、Category、Voucher Type、Country）或 Custom Link（占位https://example.com，校验 Please enter a valid URL (e.g., https://example.com) —— 仅接受http:///https://）。 - 提交按钮：Add Banner（新建）或 Confirm（编辑）。
- 最多 5 个横幅，添加第 6 个时触发 Maximum 5 banners allowed。
- 横幅表列：Banner Title、Banner Image、Banner Link，行级 Edit / Delete。空状态：No banners added yet。
- Slogan —— 可选，最长 30 字符，占位 Enter slogan。
- Company Logo —— 通过 Click to upload image 上传，JPG or PNG (Max 5MB)。裁剪使用 Crop Company Logo 弹窗（Drag the corners or edges...）。
警告： 横幅 UI 上限是 5 MB，后端上传器允许到 10 MB。从 Ops 后台上传时务必遵守 UI 上限。
4.3 Step 3 — Content Configuration
配置营销页上显示的区块。至少需启用 Link Voucher 或 Link Campaign 之一，Next 才会激活。
- Link Voucher —— 打开开关后设置 Voucher section title（占位 Enter title，最长 30 字符，会员页默认 Vouchers）。Add Voucher 打开 Select Voucher 弹窗（搜索框占位为
Search by voucher name，与横幅选择器相同的筛选，Previous / Next 分页，底部 Add Voucher (n)）。已选券以表格列出：Voucher、Voucher Type、Price、Brand、Available Quantity、Validity Period、Category、Country（空状态 No vouchers added yet）。已过期券会被自动过滤。 - Link Campaign —— 打开开关后设置 Campaign section title（默认 Campaign），再在 Campaign 下拉中选择活动（占位 Loading campaigns... / Select Campaign）。
4.4 Step 4 — Confirmation
在保存前复核每一区块（Basic Setting、Banner Details、Content Configuration），点击 Create（新建模式）或 Save（编辑模式）。成功 toast：Marketing page created successfully! / Marketing page updated successfully!，之后页面返回 Marketing Page 列表。
5. 运营工作流
5.1 上线一个新的营销页
- 在 Ops 后台点击 + Create New Marketing Page。
- Step 1 —— 设置 Marketing Page Name 与 Description。
- Step 2 —— 添加最多 5 个横幅（Voucher Detail Page 或 Custom Link），及可选的 Slogan 与 Company Logo。
- Step 3 —— 启用 Link Voucher 和 / 或 Link Campaign，并配置各自的区块标题、券与活动选择。
- Step 4 —— 复核每一节并点击 Create。
- 回到列表视图，点击 Download QR 获取 Marketing Page Link 与 / 或二维码图片，再通过选定渠道分发。
- 在测试设备上打开链接，确认横幅、券卡片、活动券与
Let's Discover More表现符合预期。
5.2 编辑线上营销页
警告： 点击 Save 后改动会立即生效，会员刷新页面就能看到最新的横幅与券。
- 在行上点击 Edit。
- 调整对应步骤（改名、替换横幅图、换券、改活动）。
- 走到 Step 4 点击 Save。
- 在测试设备上验证。若改动较大，可先 Hide Page，保存验证后再 Unhide Page。
5.3 临时隐藏营销页
- 在行上点击 Hide Page。
- 会员打开链接会看到 Page Unavailable（锁图标）。
- 点击 Unhide Page 恢复上线。
5.4 删除营销页
- 在行上点击 Delete。
- 在 Delete Marketing Page 弹窗中确认。
- 页面被永久删除，链接开始返回 Page Not Found。
6. 故障排查
会员侧
| 现象 | 排查方向 |
|---|---|
| 页面空白 / 一直转圈 | 在浏览器中重新打开链接。若是从会员端内打开，点击会员端外壳的 Refresh 图标。 |
No Marketing Page Configured | 链接缺少营销页 ID。请向运营索取有效链接。 |
Page Not Found | 营销页 ID 无效或已在 Ops 后台被删除。 |
Page Unavailable（锁图标） | 运营暂时隐藏了该页，稍后再试。 |
| 横幅或券卡片点击无反应 | 确认浏览器已允许弹窗 / 打开新标签页。 |
| 券卡片打开后是无效 URL | 营销页 PWA 无法解析 Member App 的 URL；请运营（或工程团队）确认已配置的 Member App URL。 |
运营侧
| 现象 | 排查方向 |
|---|---|
| Add Banner 不可用或显示 Maximum 5 banners allowed | 已有 5 个横幅，先删一个再加。 |
| Confirm Crop 始终不可点 | 图片是 GIF —— GIF 跳过裁剪，但其他校验（大小、比例）仍可能不通过。 |
| Select Voucher 列表为空 | 确认 VIO External API Key 已配置（闸门弹窗已通过），且活动未过期。 |
| 横幅 Custom Link 校验始终失败 | URL 必须以 http:// 或 https:// 开头。 |
| Copy link toast 显示 Link copied to clipboard! 但粘贴为空 | 浏览器禁用了剪贴板（Permissions-Policy 或非安全源）。使用回退提示框，或从可见的链接文本中手动复制。 |
| 会员仍看到旧内容 | 横幅图片有客户端缓存；请会员重新加载链接（如在会员端内打开，可点 Refresh）。 |
| VIO External API Key 弹窗反复出现 | 已保存的 key 无效或被吊销。粘贴新的 vio_live_… key 并点 Confirm。 |
7. 业务规则与说明
- 分发方式 —— 营销页通过 Ops 后台生成的链接或二维码分享。链接是一个独立 URL（
{pwaBaseUrl}/marketing/{id}），可在任何现代浏览器中打开；从会员端内打开时则在会员端外壳里渲染。 - 横幅上限 —— 每页最多 5 个横幅（UI 限制）。UI 图片上限 5 MB，后端上传器允许到 10 MB —— 始终遵守 UI 上限。
- 图片格式 —— Banner：JPG, PNG, GIF, WEBP（正方形比例）。Company Logo：JPG, PNG（最大 5 MB）。
- Custom Link —— 仅接受
http://与https://。无效输入被拒绝，提示 Please enter a valid URL (e.g., https://example.com)。 - 券 / 活动集成 —— 券与活动通过 VIO External API 拉取。已过期的券会从选择器中过滤掉。
- 可见性 —— 由 Hide Page / Unhide Page 控制，没有独立的草稿 / 已发布生命周期 —— 已保存的页面默认是线上，除非被隐藏。
- 编辑线上页面 —— 点 Save 后改动立刻生效。改动较大时可先隐藏页面再保存。
- 租户相关内容 —— Company Logo、Slogan、横幅、券池、活动绑定都因租户而异。会员端默认文案（Vouchers、Campaign、
Let's Discover More）是固定字符串。 - 合规 —— 营销文案应与所绑定的券和活动一致。在监管要求的地区，通过 Custom Link 横幅暴露隐私 / 条款链接。
另请参阅 小程序总览、幸运抽奖小程序、收据上传小程序、注册奖励小程序，以及 管理后台 - 品牌设置。