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. 隐私政策

1. 登录 ​

你可以使用 Email 或 Phone（国家代码 + 手机号）登录。相关入口包括 Create account（/register）、Forgot password（/forgot-password），以及注册后进入的 Verify OTP（/verify-otp）。本指南也包含手机号登录和忘记密码流程的截图。

使用邮箱登录 ​

Login — email

使用手机号登录 ​

切换到 Phone 标签页，选择 country code，输入 mobile number（仅数字），然后输入密码并登录。

Login — phone

忘记密码 ​

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

  1. Request code - 选择 Email 或 Phone，输入你已注册的邮箱或手机号，然后点击 Send verification code。

Forgot password — email

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

Forgot password — phone

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

Verify OTP — enter 6-digit code

  1. New password - 输入并确认你的新密码后提交。成功后可以使用 Back to Sign In 返回登录页。

Forgot password — new password

2. 首页 ​

登录后进入 / 首页：这里会显示 wallet 地址与 balance，以及 Send / Receive 快捷入口、mini programmes 区块和可滚动的内容（礼券、新闻等），底部带导航栏。

如何使用 ​

  1. Wallet - 点击打码的钱包地址行（带 copy 图标）可复制你的完整钱包地址，成功后会有 toast 提示。
  2. Balance - Current balance 可通过 token symbol 下拉菜单（chevron）在多个代币之间切换；receipt 图标会打开 token history（/token-history）。
  3. Actions - Receive 和 Send 分别打开 /receive 和 /send（对应下文“发送代币”“接收代币”页面）。当租户启用了 mini apps 时，Mini programme 区块中的 See all 会打开 /mini-apps。
  4. Navigation - 向下滚动可以看到礼券、新闻等内容；底部导航栏可切换 Explore、Home、Account 等页面。

Figures - Home 总览（钱包、余额、快捷操作）。Mini programmes - 通过 See all 打开的完整列表（/mini-apps）。完整的 Send / Receive 流程见下面对应章节。

Home overview

Mini programmes — See all

3. 发送代币 ​

在 /send 页面发送代币：选择 recipient（手机号、钱包地址或二维码）、token、amount、可选 memo，然后 confirm。

如何使用 ​

  1. Recipient - 输入手机号或钱包地址；如支持也可使用 scan QR。
  2. Token - 从选择器或列表里选择要发送的代币。
  3. Amount - 输入发送数量，并留意页面中显示的手续费、限额或余额提示。
  4. Memo - 如页面提供，可填写一条可选备注。
  5. Confirm - 检查摘要后提交，并等待成功或失败反馈。

Figures - Send Tokens 编辑 / 确认页面（/send）。

Send Tokens

4. 接收代币 ​

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

如何使用 ​

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

Figures - Receive Tokens 页面（/receive）。

Receive Tokens

5. 新闻 ​

/news 新闻流页面提供：头部 search 和 refresh、category 标签、infinite scroll、每张卡片上的 like 按钮，以及点击进入 /news/:id 的文章详情。

如何使用 ​

  1. Search - 点击右上角 magnifying glass 打开内联搜索框；输入内容后会以约 400ms 的防抖方式筛选文章。点击输入框上的 X 可清空关键词；点击圆形按钮里的 X（替代原来的放大镜）可关闭搜索并恢复普通标题栏。
  2. Refresh - 在搜索 关闭 的状态下，点击搜索控件旁的 circular arrows 可从第 1 页重新加载列表（保持当前分类和搜索词）。加载时图标会旋转。
  3. Categories - 使用横向 pills（All、Announcement、Event、Promotion、Update、Other）进行筛选。
  4. List - 列表按最新优先排序；pinned 项会显示图钉标记。向下滚动会触发 infinite 加载。
  5. Like - 点击卡片上的 heart 可点赞，不会打开文章。
  6. Open article - 点击卡片正文（标题、图片、摘要）可进入 full article 详情页（/news/:id）。

Figures - News list（/news）。Article - 点击卡片后的详情页（/news/:id）。

News — list

News — article detail

6. 探索 ​

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

如何使用 ​

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

Figures - Explore 列表页（/explore）。Voucher claim - 礼券领取 / 详情页（/vouchers/:id，含分享、收藏、Claim）。

Explore

Voucher claim — detail and redeem

7. 礼券 ​

在 /vouchers 查看你已领取的礼券（访客会先看到登录提示）。页面有四个 tabs：Active、Used（已核销）、Expired 和 Favorites（从 Explore 收藏的模板）。每一行会显示商户、标题以及带 clock 图标的到期提示行。也支持可选 deep link：?tab=active|redeemed|expired|favorites。

如何使用 ​

  1. Tabs - Active：仍有效且尚未使用。Used：已在商户处 redeemed。Expired：已过期。Favorites：你保存的礼券模板，它们不是你真正持有的礼券，除非你在别处再次领取。
  2. How cards look (My vouchers) - 礼券可用时，卡片保持彩色。如果礼券已过期（无论位于 Expired 标签，还是仍显示在 Active/Used 中但日期已过），卡片会变成灰度并降低透明度。Favorites 行始终保持彩色，只有到期提示行会显示紧迫或“expired”状态。
  3. Expiry line (clock) - 距离结束时间 超过 24 小时 时，会显示 Expires on 加本地化短日期（天、短月份、年份）。如果 24 小时内 但尚未结束，则整行会变成红色并带 clock 图标：1–24 小时显示剩余小时数；不足 1 小时显示实时 minutes:seconds 倒计时（每秒更新）。结束后则显示 Expired（灰色，不是红色）。
  4. 点击 claimed 行（Active / Used / Expired）会打开你自己的礼券页面 /voucher/:id。在 Favorites 中点击，则会打开公开礼券 / 领取页面 /vouchers/:id（和从 Explore 进入时相同）。

已领礼券上的消费类型 ​

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

Figures - List（默认截图为首次加载，即 Active 标签）。Tabs - Active、Used、Expired、Favorites（vouchers-tab-*.png）。Detail - 已持有礼券与 Favorites 公共礼券详情（voucher-detail-*.png）。

Vouchers — list overview

Vouchers — Active tab

Vouchers — Used tab

Vouchers — Expired tab

Vouchers — Favorites tab

Owned voucher — Active

Owned voucher — Used

Owned voucher — Expired

Favorites → voucher (public claim page)

8. 交易记录 ​

/history 是统一账本页面：包含 All、Token 和 Voucher 三个标签页；支持 filters（日期范围、方向：all / sent / received）、Load more；点击任意 row 会打开 transaction detail（/transaction，通过导航 state 传入该条记录，而不是单纯通过 URL deep link）。

如何使用 ​

  1. Tabs - 在 All、Token、Voucher 之间切换，聚焦不同类型的记录。
  2. Filters - 打开筛选面板，设置 date range 和 direction（all / sent / received），然后应用或清空。
  3. Pagination - 当有更多记录时，使用 Load more 继续加载。
  4. Detail - 点击某一行进入 transaction detail（/transaction）：可查看类型、金额、参与方、memo、状态、时间戳以及可复制内容等。

Figures - History 列表（/history）。Detail - 交易详情（transaction-detail.png）。

Transaction History — list

Transaction detail

9. 账户 ​

这里是 Profile、Member Card（钱包二维码弹窗）、Notifications、Security、Linked accounts、Settings、Help & support、Logout 以及 Terms / Privacy 的入口中心。Member Card 到 Help & Support 这些项目在本指南后面都各有独立章节（含截图）；Logout（第 17 节）、Terms of Service（第 18 节）和 Privacy Policy（第 19 节）也分别有自己的章节。

如何使用 ​

  1. 通过底部导航打开 Account
  2. 点击顶部资料卡编辑 Profile（/account/profile）- 见后面的 Profile 章节
  3. 在 General 区块中，Member Card（二维码弹窗）、Notifications、Security、Linked accounts、Settings 都在后面有独立说明
  4. 在 Feedback 区块中，Help & support 对应后面的 Help & Support 章节
  5. 在 About 区块中，Terms 和 Privacy 会打开应用内路由（/terms、/privacy）
  6. Logout - 位于 Feedback 卡片底部红色一行。点击 Cancel 关闭弹窗；确认后会结束当前会话并使用 history replace 返回 home（/）

Figures - Account 总览。Logout - 确认弹窗（account-logout-confirm.png）；点击 Cancel 则保持登录。

Account

Logout confirmation dialog

10. 个人资料 ​

在 /account/profile 编辑 display name（最多 30 个字符）和 profile photo。Email 和 phone 在这个页面只会以只读方式显示，不能在这里修改（每个字段下方都带有说明）。

如何使用 ​

  1. Display name - 可编辑文本框，并带 character counter（最多 30 个字符）
  2. Email / phone - 仅当账号中存在这些信息时才显示；字段为 disabled（只读）。这些内容不能在这里修改，字段下方会有辅助说明文字
  3. Profile photo - 点击头像右下角的 camera 控件，选择 from gallery 或 take a photo（在支持的设备上打开相机）。如果已经设置过照片，Remove photo 会在你保存前清除这次待提交的修改。文件必须 不超过 2 MB，否则会出现错误 toast。只有在点击 Save changes 后，新头像才会和显示名一起真正保存
  4. Save changes - 位于表单底部的全宽按钮；只有当显示名或头像发生变化时才会启用。保存过程中会显示 loading 状态
  5. Delete account - 在底部分隔线下方点击红色的 Delete Account（垃圾桶图标）。系统会弹出对话框，显示标题、警告（数据、礼券、代币将永久丢失）、Cancel 和 Delete 按钮。确认后会删除账号、自动登出 并跳转到 login

Figures - Profile 编辑页（/account/profile）：头像、显示名、只读邮箱/手机号、Save changes、Delete account。

Profile

11. 会员卡 ​

从 Account → Member Card 打开（不是独立 URL）：这是一个 modal，带渐变头部，会显示你的 name、email or phone，以及一个编码了你 wallet address 的 QR code，方便其他人给你发代币。如果尚未生成钱包地址，二维码区域会显示简短的空状态说明。

如何使用 ​

  1. 在 Account 页的 General 区块点击 Member Card
  2. 查看弹窗内容；可通过右上角 X 或点击变暗的 backdrop 关闭
  3. 该二维码可解析到你的钱包地址；二维码下方也可能会显示一行等宽字体的钱包地址

Figures - 从 Account 打开的 Member Card 弹窗（二维码与钱包地址）。

Member Card

12. 通知 ​

在 /account/notifications 管理通知偏好：包括 push（浏览器支持 Web Push 时）、email 和各个 category 开关（Transactions、Vouchers、Promotions、News）。如果浏览器阻止或不支持 push，也可能会显示提示横幅。

如何使用 ​

  1. 切换 push 开关 - 浏览器可能会请求通知权限；如果被拒绝，应用可能会恢复开关状态并显示提示
  2. 切换 email 通知
  3. 为各个 category 行启用或关闭通知（transactions、vouchers、promotions、news）
  4. 每次切换时，变更会通过 API 自动保存（注意页面中的 loading 或 toast 提示）

Figures - Notifications 偏好设置页（/account/notifications）。

Notifications

13. 安全 ​

在 /account/security 管理安全设置：包括 Change password（跳转到 /account/security/change-password）、2FA 状态（可能显示“coming soon”），以及在支持设备/浏览器上使用的 Biometric login（WebAuthn）。

如何使用 ​

  1. 查看摘要卡片中的 password / 2FA 状态
  2. 点击 Change password 打开独立流程
  3. Enable 2FA 在功能尚未上线前可能处于禁用状态
  4. 在支持的环境中切换 Biometric login，用于注册或清除本设备的生物识别凭据

Figures - Security 页面（/account/security）：password、2FA、biometrics。

Security

14. 关联账户 ​

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

如何使用 ​

  1. 阅读顶部的 info 卡片
  2. 如果没有 global identity，则会看到 no linked accounts 提示
  3. 当存在关联时，可在其他门户卡片上使用 Switch（箭头）跳转到 /{tenantSlug}/ 或 /{tenantSlug}/{subCompanySlug}/
  4. 当前所在门户会以 current badge 高亮显示

Figures - Linked accounts 页面（/account/linked-accounts）：全局身份和门户切换。

Linked Accounts

15. 设置 ​

/account/settings 是应用设置页：点击 Language 行会进入 /account/settings/language；About 区块展示 version、build 和 platform（只读）。

如何使用 ​

  1. 点击 Language 修改界面语言
  2. 向下查看 About，可查看 version / build / platform 信息

Figures - Settings 主列表（/account/settings）。Language - 语言设置页（/account/settings/language，settings-language.png）。

Settings

Settings — Language

16. 帮助与支持 ​

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

如何使用 ​

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

Figures - Help & Support 页面（/account/help）。Logout - 与 Account 页相同的确认弹窗（account-logout-confirm.png）；具体步骤见 Logout 章节。

Help & Support

Logout confirmation

17. 登出 ​

在 Account → Feedback 中点击红色的 Logout，然后确认或取消。确认后会结束当前会话并返回 home（/）；Cancel 则只关闭弹窗，不退出登录。

如何使用 ​

  1. 在 Account 页的 Feedback 区块点击红色 Logout
  2. 点击确认结束会话并返回 home（/），或点击 Cancel 保持登录

Figures - Logout 确认弹窗（account-logout-confirm.png）。

Logout confirmation

18. 服务条款 ​

/terms 是 Terms of Service 页面：这里是可滚动的法律文本，顶部带有 back 返回控件（也可从 Account → About，以及登录/注册页中的相关链接进入）。

如何使用 ​

  1. 从 Account → About → Terms 打开，或从登录页 / 注册页中的 Terms / Privacy 链接进入
  2. 向下滚动阅读全文；完成后可使用 back 返回

Figures - Terms of Service 页面（/terms），可滚动查看法律内容。

Terms of Service

19. 隐私政策 ​

/privacy 是 Privacy Policy 页面：这里是可滚动的政策内容，顶部带有 back 返回控件（同样可从 Account → About，以及登录/注册页中的链接进入）。

如何使用 ​

  1. 从 Account → About → Privacy 打开，或从登录页 / 注册页中的 Terms / Privacy 链接进入
  2. 向下滚动阅读；完成后使用 back 返回

Figures - Privacy Policy 页面（/privacy），可滚动查看政策内容。

Privacy Policy

需要帮助？ ​

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

本指南对应 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