VIO v4 文档

简体中文

English

简体中文

English

Appearance

会员端指南 ​

欢迎使用 VIO v4 会员端。本指南说明主要页面与路由（App.jsx）。截图位于 guides/member-app/screenshots/，并通过 scripts/sync-guides-to-docs.sh 同步到文档站点。

目录 ​

  1. 登录
  2. 首页
  3. 发送代币
  4. 接收代币
  5. 最新消息
  6. 探索
  7. 优惠券
  8. 交易记录
  9. 账号
  10. 个人资料
  11. 会员卡
  12. 通知
  13. 安全
  14. 关联账号
  15. 设置
  16. 帮助与支持
  17. 退出登录
  18. 服务条款
  19. 隐私政策
  20. 会员等级

1. 登录 ​

你可以使用电子邮箱或电话（国家代码 + 电话号码）登录。相关入口包括创建账号（/register）、忘记密码（/forgot-password），以及注册后进入的验证 OTP（/verify-otp）。本指南也包含手机号登录和忘记密码流程的截图。

使用邮箱登录 ​

登录 — 邮箱

使用手机号登录 ​

切换到电话标签页，选择国家代码，输入电话号码（仅数字），然后输入密码并登录。

登录 — 电话

忘记密码 ​

在登录页点击忘记密码进入 /forgot-password。该流程与登录页一样支持邮箱和手机号两种标签页：先请求验证码，再输入 6 位验证码，设置新密码，最后返回登录页。

  1. 请求验证码 — 选择电子邮箱或电话，输入你已注册的邮箱或手机号，然后点击发送验证码。

忘记密码 — 邮箱

  1. 电话 — 在电话标签页中选择国家代码和手机号，然后发送验证码。

忘记密码 — 电话

  1. 输入验证码 — 输入或粘贴 6 位验证码（计时结束后可以使用重新发送）。注册后的 /verify-otp 也使用同样的验证 OTP 模式。

验证 OTP — 输入 6 位验证码

  1. 新密码 — 输入并确认你的新密码后提交。成功后可以使用返回登录按钮回到登录页。

忘记密码 — 新密码

2. 首页 ​

登录后进入 / 首页：这里会显示钱包地址与余额，以及发送 / 接收快捷入口、小程序区块和可滚动的内容（优惠券、最新消息等），底部带导航栏。

如何使用 ​

  1. 钱包 — 点击打码的钱包地址行（带复制图标）可复制你的完整钱包地址，成功后会有提示。
  2. 余额 — 当前余额可通过代币符号下拉菜单在多个代币之间切换；交易记录图标会打开代币历史（/token-history）。
  3. 操作 — 接收和发送分别打开 /receive 和 /send（对应下文"发送代币""接收代币"页面）。当租户启用了小程序时，小程序区块中的查看全部会打开 /mini-apps。
  4. 导航 — 向下滚动可以看到优惠券、最新消息等内容；底部导航栏可切换探索、首页、账号等页面。

说明 — 首页总览（钱包、余额、快捷操作）。小程序 — 通过查看全部打开的完整列表（/mini-apps）。完整的发送 / 接收流程见下面对应章节。

首页总览

小程序 — 查看全部

3. 发送代币 ​

在 /send 页面发送代币：选择接收者（电话、钱包地址或二维码）、代币、金额、可选备注，然后确认。

如何使用 ​

  1. 接收者 — 输入电话号码或钱包地址；如支持也可使用扫描 QR Code。
  2. 代币 — 从选择器或列表里选择要发送的代币。
  3. 金额 — 输入发送数量，并留意页面中显示的手续费、限额或余额提示。
  4. 备注 — 如页面提供，可填写一条可选备注。
  5. 确认 — 检查摘要后提交，并等待成功或失败反馈。

说明 — 发送代币编辑 / 确认页面（/send）。

发送代币

4. 接收代币 ​

在 /receive 页面接收代币：页面会展示你的 QR Code 和钱包地址，让其他人向你转账；如果你持有多个代币，也可选择对应的代币上下文。

如何使用 ​

  1. QR Code — 展示你的收款二维码供他人扫描。
  2. 地址 — 如果页面提供相关操作，可复制或分享你的钱包地址。
  3. 代币 — 当你持有多个代币时，可选择当前接收的是哪种代币。
  4. 动态 — 完成转账后，可在余额或交易记录中查看到账记录。

说明 — 接收代币页面（/receive）。

接收代币

5. 最新消息 ​

/news 最新消息页面提供：头部搜索和刷新、分类标签、无限滚动、每张卡片上的点赞按钮，以及点击进入 /news/:id 的文章详情。

如何使用 ​

  1. 搜索 — 点击右上角放大镜打开内联搜索框；输入内容后会以约 400ms 的防抖方式筛选文章。点击输入框上的 X 可清空关键词；点击圆形按钮里的 X（替代原来的放大镜）可关闭搜索并恢复普通标题栏。
  2. 刷新 — 在搜索关闭的状态下，点击搜索控件旁的循环箭头可从第 1 页重新加载列表（保持当前分类和搜索词）。加载时图标会旋转。
  3. 分类 — 使用横向标签（全部、公告、活动、促销、更新、其他）进行筛选。
  4. 列表 — 列表按最新优先排序；置顶项会显示图钉标记。向下滚动会触发无限加载。
  5. 点赞 — 点击卡片上的爱心图标可点赞，不会打开文章。
  6. 打开文章 — 点击卡片正文（标题、图片、摘要）可进入文章详情页（/news/:id）。

说明 — 最新消息列表（/news）。文章 — 点击卡片后的详情页（/news/:id）。

最新消息 — 列表

最新消息 — 文章详情

6. 探索 ​

在 /explore 浏览租户优惠券：顶部有代币标签（全部或具体代币）用于限制显示哪些优惠券，同时还支持搜索、排序、筛选面板、分类标签、精选区域和无限滚动。

如何使用 ​

  1. 代币标签 — 点击全部查看全部优惠券；点击某个代币（图标/符号来自可用于兑换的代币和你的余额）则只显示以该代币计价的优惠券。
  2. 搜索与筛选 — 使用搜索框、排序方式（如最新优先、即将到期、最高价值）和筛选（有效期、代币价格范围、商家、国家）进一步筛选；也可以点击某个分类标签按分类缩小范围。
  3. 打开优惠券 — 点击卡片进入优惠券领取 / 详情页面（/vouchers/:id）。你可以查看图片、描述和所需代币数量。
  4. 分享 — 在优惠券详情页顶部点击分享（位于爱心图标旁边）。许多手机和浏览器会打开系统分享面板；如果不支持，则会把当前页面 URL 复制到剪贴板并给出提示。
  5. 兑换 — 如果系统要求，请先登录。点击兑换消耗代币领取优惠券；成功后会跳转到你已领取的优惠券页面 /voucher/:userVoucherId。
  6. 收藏 — 在探索页或详情页头部，使用爱心图标将优惠券加入或移出收藏（部分情况下需要登录）。

说明 — 探索列表页（/explore）。优惠券领取 — 优惠券领取 / 详情页（/vouchers/:id，含分享、收藏、兑换）。

探索

优惠券领取 — 详情与兑换

7. 优惠券 ​

在 /vouchers 查看你已领取的优惠券（访客会先看到登录提示）。页面有四个标签页：有效、已使用（已核销）、已过期和收藏（从探索页收藏的模板）。每一行会显示商家、标题以及带时钟图标的到期提示行。也支持可选 deep link：?tab=active|redeemed|expired|favorites。

如何使用 ​

  1. 标签页 — 有效：仍有效且尚未使用。已使用：已在商家处核销。已过期：已过期。收藏：你保存的优惠券模板，它们不是你真正持有的优惠券，除非你在别处再次领取。
  2. 卡片样式（我的优惠券） — 优惠券可用时，卡片保持彩色。如果优惠券已过期（无论位于已过期标签，还是仍显示在有效/已使用中但日期已过），卡片会变成灰度并降低透明度。收藏行始终保持彩色，只有到期提示行会显示紧迫或"已过期"状态。
  3. 到期提示行（时钟图标） — 距离结束时间超过 24 小时时，会显示到期日加本地化短日期（天、短月份、年份）。如果 24 小时内但尚未结束，则整行会变成红色并带时钟图标：1–24 小时显示剩余小时数；不足 1 小时显示实时分:秒倒计时（每秒更新）。结束后则显示已过期（灰色，不是红色）。
  4. 点击已领取行（有效 / 已使用 / 已过期）会打开你自己的优惠券页面 /voucher/:id。在收藏中点击，则会打开公开优惠券 / 领取页面 /vouchers/:id（和从探索页进入时相同）。

已领优惠券上的消费类型 ​

  • 领取 vs 使用 — 在探索页点击兑换只是把优惠券领进钱包（消耗代币）。不一定会进入已使用标签。已使用表示该条领取记录在 VIO 中已被核销/使用（例如店员扫码、会员点击获取码完成分配与记账等）。
  • VIO 核销码 — 领取后可能显示用于向店员出示的 VIO 核销码或 QR Code（指向 /redeem/... 类链接）。这与供应商秘钥码不同；在系统记录「已使用」前，优惠券通常仍在有效中。
  • QR Code（CSV 码池）— 页面上展示的 QR Code 编码的是 CSV 中的供应商码，仅在你点击获取码（从池中分配一条码并记账）之后才显示；在此之前不会用 VIO 的 redemptionCode 冒充供应商码占位。
  • 优惠券代码（CSV 码池）— 与上类似：点击获取码后显示条码 + 可复制供应商码。
  • URL / 手动 / 外部（VouChain） — 以应用内文案与步骤为准。

说明 — 列表（默认截图为首次加载，即有效标签）。标签页 — 有效、已使用、已过期、收藏（vouchers-tab-*.png）。详情 — 已持有优惠券与收藏公共优惠券详情（voucher-detail-*.png）。

优惠券 — 列表总览

优惠券 — 有效标签

优惠券 — 已使用标签

优惠券 — 已过期标签

优惠券 — 收藏标签

已领优惠券 — 有效

已领优惠券 — 已使用

已领优惠券 — 已过期

收藏 → 优惠券（公开领取页面）

8. 交易记录 ​

/history 是统一账本页面：包含全部、代币和优惠券三个标签页；支持筛选（日期范围、方向：全部 / 已发送 / 已收到）、加载更多；点击任意行会打开交易详情（/transaction，通过导航 state 传入该条记录，而不是单纯通过 URL deep link）。

如何使用 ​

  1. 标签页 — 在全部、代币、优惠券之间切换，聚焦不同类型的记录。
  2. 筛选 — 打开筛选面板，设置日期范围和方向（全部 / 已发送 / 已收到），然后应用或清空。
  3. 分页 — 当有更多记录时，使用加载更多继续加载。
  4. 详情 — 点击某一行进入交易详情（/transaction）：可查看类型、金额、参与方、备注、状态、时间戳以及可复制内容等。

说明 — 交易记录列表（/history）。详情 — 交易详情（transaction-detail.png）。

交易记录 — 列表

交易详情

9. 账号 ​

这里是个人资料、会员卡（钱包二维码弹窗）、通知、安全、关联账号、设置、帮助与支持、退出登录以及服务条款 / 隐私政策的入口中心。会员卡到帮助与支持这些项目在本指南后面都各有独立章节（含截图）；退出登录（第 17 节）、服务条款（第 18 节）和隐私政策（第 19 节）也分别有自己的章节。

如何使用 ​

  1. 通过底部导航打开账号
  2. 点击顶部资料卡编辑个人资料（/account/profile）— 见后面的个人资料章节
  3. 在常规区块中，会员卡（二维码弹窗）、通知、安全、关联账号、设置都在后面有独立说明
  4. 在意见反馈区块中，帮助与支持对应后面的帮助与支持章节
  5. 在关于区块中，服务条款和隐私政策会打开应用内路由（/terms、/privacy）
  6. 退出登录 — 位于意见反馈卡片底部红色一行。点击取消关闭弹窗；确认后会结束当前会话并使用 history replace 返回首页（/）

说明 — 账号总览。退出登录 — 确认弹窗（account-logout-confirm.png）；点击取消则保持登录。

账号

退出登录确认弹窗

10. 个人资料 ​

在 /account/profile 编辑显示名称（最多 30 个字符）和头像。电子邮箱和电话在这个页面只会以只读方式显示，不能在这里修改（每个字段下方都带有说明）。

如何使用 ​

  1. 显示名称 — 可编辑文本框，并带字符计数器（最多 30 个字符）
  2. 电子邮箱 / 电话 — 仅当账号中存在这些信息时才显示；字段为只读状态。这些内容不能在这里修改，字段下方会有辅助说明文字
  3. 头像 — 点击头像右下角的相机控件，选择从相册选择或拍照（在支持的设备上打开相机）。如果已经设置过照片，移除头像会在你保存前清除这次待提交的修改。文件必须不超过 2 MB，否则会出现错误提示。只有在点击保存更改后，新头像才会和显示名一起真正保存
  4. 保存更改 — 位于表单底部的全宽按钮；只有当显示名或头像发生变化时才会启用。保存过程中会显示加载状态
  5. 删除账户 — 在底部分隔线下方点击红色的删除账户（垃圾桶图标）。系统会弹出对话框，显示标题、警告（数据、优惠券、代币将永久丢失）、取消和删除按钮。确认后会删除账号、自动登出并跳转到登录页

说明 — 个人资料编辑页（/account/profile）：头像、显示名称、只读邮箱/电话、保存更改、删除账户。

个人资料

11. 会员卡 ​

从账号 → 会员卡打开（不是独立 URL）：这是一个弹窗，带渐变头部，会显示你的姓名、邮箱或电话，以及一个编码了你钱包地址的 QR Code，方便其他人给你发代币。如果尚未生成钱包地址，二维码区域会显示简短的空状态说明。

如何使用 ​

  1. 在账号页的常规区块点击会员卡
  2. 查看弹窗内容；可通过右上角 X 或点击变暗的背景遮罩关闭
  3. 该二维码可解析到你的钱包地址；二维码下方也可能会显示一行等宽字体的钱包地址

说明 — 从账号打开的会员卡弹窗（二维码与钱包地址）。

会员卡

12. 通知 ​

在 /account/notifications 管理通知偏好：包括推送通知（浏览器支持 Web Push 时）、电子邮箱通知和各个分类开关（交易、优惠券、促销活动、最新消息）。如果浏览器阻止或不支持推送，也可能会显示提示横幅。

如何使用 ​

  1. 切换推送通知开关 — 浏览器可能会请求通知权限；如果被拒绝，应用可能会恢复开关状态并显示提示
  2. 切换电子邮箱通知
  3. 为各个分类行启用或关闭通知（交易、优惠券、促销活动、最新消息）
  4. 每次切换时，变更会通过 API 自动保存（注意页面中的加载或提示状态）

说明 — 通知偏好设置页（/account/notifications）。

通知

13. 安全 ​

在 /account/security 管理安全设置：包括更改密码（跳转到 /account/security/change-password）、双重验证状态（可能显示"即将推出"），以及在支持设备/浏览器上使用的生物识别登录（WebAuthn）。

如何使用 ​

  1. 查看摘要卡片中的密码 / 双重验证状态
  2. 点击更改密码打开独立流程
  3. 启用双重验证在功能尚未上线前可能处于禁用状态
  4. 在支持的环境中切换生物识别登录，用于注册或清除本设备的生物识别凭据

说明 — 安全页面（/account/security）：密码、双重验证、生物识别。

安全

14. 关联账号 ​

在 /account/linked-accounts 查看属于你全局身份的关联账号。如果没有全局身份，你会看到空状态；否则每张卡片会显示租户（及子公司）、当前标记、关联日期，以及跳转到其他租户的切换按钮，打开方式是整页导航。

如何使用 ​

  1. 阅读顶部的信息卡片
  2. 如果没有全局身份，则会看到暂无关联账号提示
  3. 当存在关联时，可在其他门户卡片上使用切换（箭头）跳转到 /{tenantSlug}/ 或 /{tenantSlug}/{subCompanySlug}/
  4. 当前所在门户会以当前标记高亮显示

说明 — 关联账号页面（/account/linked-accounts）：全局身份和门户切换。

关联账号

15. 设置 ​

/account/settings 是应用设置页：点击语言行会进入 /account/settings/language；关于区块展示版本、版本号和平台（只读）。

如何使用 ​

  1. 点击语言修改界面语言
  2. 向下查看关于，可查看版本 / 版本号 / 平台信息

说明 — 设置主列表（/account/settings）。语言 — 语言设置页（/account/settings/language，settings-language.png）。

设置

设置 — 语言

16. 帮助与支持 ​

/account/help 是帮助中心：可浏览主题、搜索内容，并访问支持入口或问题反馈（具体内容取决于租户配置）。退出登录位于账号页的同一个意见反馈卡片中，也就是和帮助与支持同区块（本节使用的退出登录确认截图与退出登录章节相同）。

如何使用 ​

  1. 使用返回按钮回到账号页
  2. 浏览或搜索当前租户配置的帮助内容
  3. 当页面显示相关入口时，可继续点击进入联系支持或问题反馈

说明 — 帮助与支持页面（/account/help）。退出登录 — 与账号页相同的确认弹窗（account-logout-confirm.png）；具体步骤见退出登录章节。

帮助与支持

退出登录确认

17. 退出登录 ​

在账号 → 意见反馈中点击红色的退出登录，然后确认或取消。确认后会结束当前会话并返回首页（/）；取消则只关闭弹窗，不退出登录。

如何使用 ​

  1. 在账号页的意见反馈区块点击红色退出登录
  2. 点击确认结束会话并返回首页（/），或点击取消保持登录

说明 — 退出登录确认弹窗（account-logout-confirm.png）。

退出登录确认

18. 服务条款 ​

/terms 是服务条款页面：这里是可滚动的法律文本，顶部带有返回控件（也可从账号 → 关于，以及登录/注册页中的相关链接进入）。

如何使用 ​

  1. 从账号 → 关于 → 服务条款打开，或从登录页 / 注册页中的服务条款 / 隐私政策链接进入
  2. 向下滚动阅读全文；完成后可使用返回按钮回到上一页

说明 — 服务条款页面（/terms），可滚动查看法律内容。

服务条款

19. 隐私政策 ​

/privacy 是隐私政策页面：这里是可滚动的政策内容，顶部带有返回控件（同样可从账号 → 关于，以及登录/注册页中的链接进入）。

如何使用 ​

  1. 从账号 → 关于 → 隐私政策打开，或从登录页 / 注册页中的服务条款 / 隐私政策链接进入
  2. 向下滚动阅读；完成后使用返回按钮回到上一页

说明 — 隐私政策页面（/privacy），可滚动查看政策内容。

隐私政策

20. 会员等级 ​

当租户启用了会员等级功能时，会员等级页面（/membership）即可访问。页面展示你的专属会员卡 — 显示当前等级名称、主题色、已积累的成长值与成长倍率，以及一条显示晋升下一等级还需多少成长值的进度条。

卡片下方的三个标签页提供更多详情：

  • 权益 — 列出你当前等级的专属福利与特权
  • 成长记录 — 分页展示每条成长值记录（活动类型、所得积分、时间）
  • 所有等级 — 展示计划中所有等级的概览，方便了解各等级的晋升门槛与对应权益

如果你近期发生了等级变动，下次打开此页面时会自动弹出等级变动通知；点击关闭按钮即可关闭。

如何使用 ​

  1. 点击底部导航中的会员等级，或前往账号 → 会员等级
  2. 在渐变风格的会员卡上查看当前等级 — 显示等级名称、成长值与倍率
  3. 查看卡片下方进度条，了解距下一等级还差多少成长值
  4. 点击权益标签页，查看当前等级的权益内容
  5. 点击成长记录标签页，按时间顺序浏览成长值的获取历史
  6. 点击所有等级标签页，对比各等级并规划晋升路径
  7. 如出现等级变动弹窗（升级或降级），阅读提示内容后点击关闭按钮关闭

需要帮助？ ​

如果你在使用过程中遇到问题，或有任何疑问，请前往应用中的帮助与支持区块，或联系你的管理员。

本指南对应 npm run generate:member 于 2026-04-13 生成的内容。若需要额外抓取 forgot-password-2-otp.png，可在 scripts/config.js 中设置 MEMBER_CAPTURE_FORGOT_PASSWORD_OTP（会发送真实重置验证码）。如果某个优惠券标签页为空但仍需要详情截图，可设置 MEMBER_VOUCHER_CAPTURE_IDS。

VIO v4 平台文档

Copyright © 2024-present VIO