会员端指南
欢迎使用 VIO v4 会员端。本指南说明主要页面与路由(App.jsx)。截图位于 guides/member-app/screenshots/,并通过 scripts/sync-guides-to-docs.sh 同步到文档站点。
目录
1. 登录
你可以使用电子邮箱或电话(国家代码 + 电话号码)登录。相关入口包括创建账号(/register)、忘记密码(/forgot-password),以及注册后进入的验证 OTP(/verify-otp)。本指南也包含手机号登录和忘记密码流程的截图。
使用邮箱登录

使用手机号登录
切换到电话标签页,选择国家代码,输入电话号码(仅数字),然后输入密码并登录。

忘记密码
在登录页点击忘记密码进入 /forgot-password。该流程与登录页一样支持邮箱和手机号两种标签页:先请求验证码,再输入 6 位验证码,设置新密码,最后返回登录页。
- 请求验证码 — 选择电子邮箱或电话,输入你已注册的邮箱或手机号,然后点击发送验证码。

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

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

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

2. 首页
登录后进入 / 首页:这里会显示钱包地址与余额,以及发送 / 接收快捷入口、小程序区块和可滚动的内容(优惠券、最新消息等),底部带导航栏。
如何使用
- 钱包 — 点击打码的钱包地址行(带复制图标)可复制你的完整钱包地址,成功后会有提示。
- 余额 — 当前余额可通过代币符号下拉菜单在多个代币之间切换;交易记录图标会打开代币历史(
/token-history)。 - 操作 — 接收和发送分别打开
/receive和/send(对应下文"发送代币""接收代币"页面)。当租户启用了小程序时,小程序区块中的查看全部会打开/mini-apps。 - 导航 — 向下滚动可以看到优惠券、最新消息等内容;底部导航栏可切换探索、首页、账号等页面。
说明 — 首页总览(钱包、余额、快捷操作)。小程序 — 通过查看全部打开的完整列表(/mini-apps)。完整的发送 / 接收流程见下面对应章节。


3. 发送代币
在 /send 页面发送代币:选择接收者(电话、钱包地址或二维码)、代币、金额、可选备注,然后确认。
如何使用
- 接收者 — 输入电话号码或钱包地址;如支持也可使用扫描 QR Code。
- 代币 — 从选择器或列表里选择要发送的代币。
- 金额 — 输入发送数量,并留意页面中显示的手续费、限额或余额提示。
- 备注 — 如页面提供,可填写一条可选备注。
- 确认 — 检查摘要后提交,并等待成功或失败反馈。
说明 — 发送代币编辑 / 确认页面(/send)。

4. 接收代币
在 /receive 页面接收代币:页面会展示你的 QR Code 和钱包地址,让其他人向你转账;如果你持有多个代币,也可选择对应的代币上下文。
如何使用
- QR Code — 展示你的收款二维码供他人扫描。
- 地址 — 如果页面提供相关操作,可复制或分享你的钱包地址。
- 代币 — 当你持有多个代币时,可选择当前接收的是哪种代币。
- 动态 — 完成转账后,可在余额或交易记录中查看到账记录。
说明 — 接收代币页面(/receive)。

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


6. 探索
在 /explore 浏览租户优惠券,以及在电商模块启用后浏览商品。页面顶部有分段控件用于切换优惠券标签(?tab=vouchers,默认)与商品标签(?tab=products);优惠券标签提供代币标签(全部或具体代币)用于限制显示哪些优惠券,同时还支持搜索、排序、筛选面板、分类标签、精选区域和无限滚动。
如何使用
- 代币标签 — 点击全部查看全部优惠券;点击某个代币(图标/符号来自可用于兑换的代币和你的余额)则只显示以该代币计价的优惠券。
- 搜索与筛选 — 使用搜索框、排序方式(如最新优先、即将到期、最高价值)和筛选(有效期、代币价格范围、商家、国家)进一步筛选;也可以点击某个分类标签按分类缩小范围。
- 打开优惠券 — 点击卡片进入优惠券兑换 / 详情页面(
/vouchers/:id)。你可以查看图片、描述和所需代币数量。 - 分享 — 在优惠券详情页顶部点击分享(位于爱心图标旁边)。许多手机和浏览器会打开系统分享面板;如果不支持,则会把当前页面 URL 复制到剪贴板并给出提示。
- 兑换 — 如果系统要求,请先登录。点击兑换消耗代币将优惠券存入钱包;成功后会跳转到你已兑换的优惠券页面
/voucher/:userVoucherId。 - 收藏 — 在探索页或详情页头部,使用爱心图标将优惠券加入或移出收藏(部分情况下需要登录)。
说明 — 探索列表页(/explore)。优惠券兑换 — 优惠券兑换 / 详情页(/vouchers/:id,含分享、收藏、兑换)。

商品标签
仅当租户启用电商模块时显示。横向分类标签栏(全平台共享的全局分类)加上两列商品网格,支持搜索与无限滚动(每页 20 条)。每张卡片展示封面图、名称、起始价格(当各规格价格不同时显示“起 <价格>”)、库存为 0 时的已售罄标签(图片会转为灰度),以及商品支持积分抵扣时的小徽标。
- 点击全部或某个分类标签筛选商品网格;使用搜索框按名称筛选(有输入防抖)
- 点击卡片打开商品详情页
/product/:id(参见第 21 节)

7. 优惠券
在 /vouchers 查看你已兑换的优惠券(访客会先看到登录提示)。页面有四个标签页:有效、已使用、已过期和收藏(从探索页收藏的模板)。每一行会显示商家、标题以及带时钟图标的到期提示行。也支持可选 deep link:?tab=active|redeemed|expired|favorites。
如何使用
- 标签页 — 有效:仍有效且尚未使用。已使用:已在商家处核销。已过期:已过期。收藏:你保存的优惠券模板,它们不是你真正持有的优惠券,除非你在别处完成兑换。
- 卡片样式(我的优惠券) — 优惠券可用时,卡片保持彩色。如果优惠券已过期(无论位于已过期标签,还是仍显示在有效/已使用中但日期已过),卡片会变成灰度并降低透明度。收藏行始终保持彩色,只有到期提示行会显示紧迫或"已过期"状态。
- 到期提示行(时钟图标) — 距离结束时间超过 24 小时时,会显示到期日加本地化短日期(天、短月份、年份)。如果 24 小时内但尚未结束,则整行会变成红色并带时钟图标:1–24 小时显示剩余小时数;不足 1 小时显示实时分:秒倒计时(每秒更新)。结束后则显示已过期(灰色,不是红色)。
- 点击已兑换行(有效 / 已使用 / 已过期)会打开你自己的优惠券页面
/voucher/:id。在收藏中点击,则会打开公开优惠券 / 兑换页面/vouchers/:id(和从探索页进入时相同)。
已领优惠券上的消费类型
- 兑换 vs 使用 — 兑换(在探索页点击兑换)只是消耗代币把优惠券存入钱包,不会因此进入已使用标签。使用(核销)指该张优惠券在 VIO 中被真正核销(例如店员扫码、会员点击获取码,或调用
redeem-by-code/ PIN 接口),此时状态才变为已使用。 - VIO 核销码 — 兑换后可能显示用于向店员出示的 VIO 核销码或 QR Code(指向
/redeem/...类链接)。这与供应商秘钥码不同;在系统记录「已使用」前,优惠券通常仍在有效中。 - QR Code(CSV 码池)— 页面上展示的 QR Code 编码的是 CSV 中的供应商码,仅在你点击获取码(从池中分配一条码并将优惠券标记为已使用)之后才显示;在此之前不会用 VIO 的核销码冒充供应商码占位。
- 优惠券代码(CSV 码池)— 与上类似:点击获取码后显示条码 + 可复制供应商码。
- URL / 手动 / 外部(VouChain) — 以应用内文案与步骤为准。
说明 — 列表(默认截图为首次加载,即有效标签)。标签页 — 有效、已使用、已过期、收藏(vouchers-tab-*.png)。详情 — 已持有优惠券与收藏公共优惠券详情(voucher-detail-*.png)。









8. 交易记录
/history 是统一账本页面:包含全部、代币和优惠券三个标签页;支持筛选(日期范围、方向:全部 / 已发送 / 已收到)、加载更多;点击任意行会打开交易详情(/transaction,通过导航 state 传入该条记录,而不是单纯通过 URL deep link)。
如何使用
- 标签页 — 在全部、代币、优惠券之间切换,聚焦不同类型的记录。
- 筛选 — 打开筛选面板,设置日期范围和方向(全部 / 已发送 / 已收到),然后应用或清空。
- 分页 — 当有更多记录时,使用加载更多继续加载。
- 详情 — 点击某一行进入交易详情(
/transaction):可查看类型、金额、参与方、备注、状态、时间戳以及可复制内容等。
说明 — 交易记录列表(/history)。详情 — 交易详情(transaction-detail.png)。


9. 账号
这里是个人资料、会员卡(钱包二维码弹窗)、通知、安全、关联账号、设置、帮助与支持、退出登录以及服务条款 / 隐私政策的入口中心。会员卡到帮助与支持这些项目在本指南后面都各有独立章节(含截图);退出登录(第 17 节)、服务条款(第 18 节)和隐私政策(第 19 节)也分别有自己的章节。
如何使用
- 通过底部导航打开账号
- 点击顶部资料卡编辑个人资料(
/account/profile)— 见后面的个人资料章节 - 在常规区块中,会员卡(二维码弹窗)、通知、安全、关联账号、设置都在后面有独立说明
- 在意见反馈区块中,帮助与支持对应后面的帮助与支持章节
- 在关于区块中,服务条款和隐私政策会打开应用内路由(
/terms、/privacy) - 退出登录 — 位于意见反馈卡片底部红色一行。点击取消关闭弹窗;确认后会结束当前会话并使用 history replace 返回首页(
/)
说明 — 账号总览。退出登录 — 确认弹窗(account-logout-confirm.png);点击取消则保持登录。


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

11. 会员卡
从账号 → 会员卡打开(不是独立 URL):这是一个弹窗,带渐变头部,会显示你的姓名、邮箱或电话,以及一个编码了你钱包地址的 QR Code,方便其他人给你发代币。如果尚未生成钱包地址,二维码区域会显示简短的空状态说明。
如何使用
- 在账号页的常规区块点击会员卡
- 查看弹窗内容;可通过右上角 X 或点击变暗的背景遮罩关闭
- 该二维码可解析到你的钱包地址;二维码下方也可能会显示一行等宽字体的钱包地址
说明 — 从账号打开的会员卡弹窗(二维码与钱包地址)。

12. 通知
在 /account/notifications 管理通知偏好:包括推送通知(浏览器支持 Web Push 时)、电子邮箱通知和各个分类开关(交易、优惠券、促销活动、最新消息)。如果浏览器阻止或不支持推送,也可能会显示提示横幅。
如何使用
- 切换推送通知开关 — 浏览器可能会请求通知权限;如果被拒绝,应用可能会恢复开关状态并显示提示
- 切换电子邮箱通知
- 为各个分类行启用或关闭通知(交易、优惠券、促销活动、最新消息)
- 每次切换时,变更会通过 API 自动保存(注意页面中的加载或提示状态)
说明 — 通知偏好设置页(/account/notifications)。

13. 安全
在 /account/security 管理安全设置:包括更改密码(跳转到 /account/security/change-password)、双重验证状态(可能显示"即将推出"),以及在支持设备/浏览器上使用的生物识别登录(WebAuthn)。
如何使用
- 查看摘要卡片中的密码 / 双重验证状态
- 点击更改密码打开独立流程
- 启用双重验证在功能尚未上线前可能处于禁用状态
- 在支持的环境中切换生物识别登录,用于注册或清除本设备的生物识别凭据
说明 — 安全页面(/account/security):密码、双重验证、生物识别。

14. 关联账号
在 /account/linked-accounts 查看属于你全局身份的关联账号。如果没有全局身份,你会看到空状态;否则每张卡片会显示租户(及子公司)、当前标记、关联日期,以及跳转到其他租户的切换按钮,打开方式是整页导航。
如何使用
- 阅读顶部的信息卡片
- 如果没有全局身份,则会看到暂无关联账号提示
- 当存在关联时,可在其他门户卡片上使用切换(箭头)跳转到
/{tenantSlug}/或/{tenantSlug}/{subCompanySlug}/ - 当前所在门户会以当前标记高亮显示
说明 — 关联账号页面(/account/linked-accounts):全局身份和门户切换。

15. 设置
/account/settings 是应用设置页:点击语言行会进入 /account/settings/language;关于区块展示版本、版本号和平台(只读)。
如何使用
- 点击语言修改界面语言
- 向下查看关于,可查看版本 / 版本号 / 平台信息
说明 — 设置主列表(/account/settings)。语言 — 语言设置页(/account/settings/language,settings-language.png)。


16. 帮助与支持
/account/help 是帮助中心:可浏览主题、搜索内容,并访问支持入口或问题反馈(具体内容取决于租户配置)。退出登录位于账号页的同一个意见反馈卡片中,也就是和帮助与支持同区块(本节使用的退出登录确认截图与退出登录章节相同)。
如何使用
- 使用返回按钮回到账号页
- 浏览或搜索当前租户配置的帮助内容
- 当页面显示相关入口时,可继续点击进入联系支持或问题反馈
说明 — 帮助与支持页面(/account/help)。退出登录 — 与账号页相同的确认弹窗(account-logout-confirm.png);具体步骤见退出登录章节。


17. 退出登录
在账号 → 意见反馈中点击红色的退出登录,然后确认或取消。确认后会结束当前会话并返回首页(/);取消则只关闭弹窗,不退出登录。
如何使用
- 在账号页的意见反馈区块点击红色退出登录
- 点击确认结束会话并返回首页(
/),或点击取消保持登录
说明 — 退出登录确认弹窗(account-logout-confirm.png)。

18. 服务条款
/terms 是服务条款页面:这里是可滚动的法律文本,顶部带有返回控件(也可从账号 → 关于,以及登录/注册页中的相关链接进入)。
如何使用
- 从账号 → 关于 → 服务条款打开,或从登录页 / 注册页中的服务条款 / 隐私政策链接进入
- 向下滚动阅读全文;完成后可使用返回按钮回到上一页
说明 — 服务条款页面(/terms),可滚动查看法律内容。

19. 隐私政策
/privacy 是隐私政策页面:这里是可滚动的政策内容,顶部带有返回控件(同样可从账号 → 关于,以及登录/注册页中的链接进入)。
如何使用
- 从账号 → 关于 → 隐私政策打开,或从登录页 / 注册页中的服务条款 / 隐私政策链接进入
- 向下滚动阅读;完成后使用返回按钮回到上一页
说明 — 隐私政策页面(/privacy),可滚动查看政策内容。

20. 会员等级
当租户启用了会员等级功能时,会员等级页面(/membership)即可访问。页面展示你的专属会员卡 — 显示当前等级名称、主题色、已积累的成长值与成长倍率,以及一条显示晋升下一等级还需多少成长值的进度条。
卡片下方的三个标签页提供更多详情:
- 权益 — 列出你当前等级的专属福利与特权
- 成长记录 — 分页展示每条成长值记录(活动类型、所得积分、时间)
- 所有等级 — 展示计划中所有等级的概览,方便了解各等级的晋升门槛与对应权益
如果你近期发生了等级变动,下次打开此页面时会自动弹出等级变动通知;点击关闭按钮即可关闭。
如何使用
- 点击底部导航中的会员等级,或前往账号 → 会员等级
- 在渐变风格的会员卡上查看当前等级 — 显示等级名称、成长值与倍率
- 查看卡片下方进度条,了解距下一等级还差多少成长值
- 点击权益标签页,查看当前等级的权益内容
- 点击成长记录标签页,按时间顺序浏览成长值的获取历史
- 点击所有等级标签页,对比各等级并规划晋升路径
- 如出现等级变动弹窗(升级或降级),阅读提示内容后点击关闭按钮关闭
21. 商品详情
商品详情页位于 /product/:id,从探索页的商品标签进入。仅当租户启用电商模块时相关。包含图片轮播、价格(法币和/或固定积分价格)、规格选择器、数量步进器、可用优惠券提示,以及描述/条款标签页,底部有固定的立即购买操作栏。
如何使用
- 滑动图片轮播;显示的价格会反映当前选中的规格(法币价格、积分价格,或以“+”连接的两者)
- 若商品含有规格组(例如颜色、尺码 —— 最多 3 组),点击每组的选项标签来选择规格;不可用的组合会显示删除线并禁用
- 使用数量步进器(上限为剩余库存,不限库存商品上限为 99);步进器附近会显示库存紧张 / 已售罄提示
- 若商品含有多个规格,可点击加入订单将多个规格累加到同一订单中(每个规格显示为可编辑的一行,各自带有数量与删除按钮),再一并购买
- 若已登录,且你已兑换的优惠券中有适用于该商品的,会显示一条可用优惠券横幅,展开后可看到每张优惠券的名称与法币抵扣金额
- 阅读描述 / 条款标签页;若商品设置了配送范围限制,会显示一行配送至列出可配送的国家/地区
- 点击底部的立即购买(显示当前小计)前往结算页并携带已选规格;未登录会先提示登录
22. 结算与支付
结算页位于 /checkout(仅从商品详情页的“立即购买”进入 —— 直接访问且无携带状态时会跳转回商城),支付页位于 /payment/:orderId。包含收货地址选择、积分/优惠券抵扣(配合服务端实时计算的价格预览)、下单,以及 Stripe Elements 收银台支付。
如何使用
- 点击地址区块打开地址选择器 —— 选择已保存的地址,或点击**+ 新增地址**;超出商品配送范围的地址会被禁用,并显示“该地区暂不支持配送”的提示
- 调整订单行:修改数量、切换某一行的规格(当商品含多个规格时),或删除某一行(至少需保留一行);每次修改后会触发防抖的服务端价格预览重新计算金额明细
- 若商品支持积分抵扣,使用积分滑块(或直接输入金额)以积分抵扣部分法币价格,上限取服务端上限与你的积分余额中的较小值;点击用满可一次性抵扣至上限
- 若你持有适用于该商品的优惠券,可在优惠券区域中选择(单选列表,默认“不使用优惠券”)—— 每个选项旁会显示其法币抵扣金额
- 查看金额明细 —— 商品价格、固定积分总额、积分抵扣、优惠券抵扣,以及最终应付法币金额加应付代币数量 —— 所有数值均来自最新的服务端预览,而非前端本地计算
- 点击确认支付
<金额>—— 该操作会调用下单接口;若订单已被积分/优惠券完全覆盖(应付法币为零),将立即结算并进入订单详情;否则会跳转到支付页并携带 Stripe 的clientSecret - 在支付页,倒计时会显示剩余支付时间(来自服务端返回的
paymentExpiresAt);在 Stripe 支付组件中填写卡信息并点击支付<金额>,或点击取消订单释放已锁定的库存/积分/优惠券 - Stripe 确认支付后,应用会短暂轮询订单状态,直到订单状态离开“待支付”后再显示支付成功并跳转到订单详情 —— 用于覆盖支付 Webhook 尚未到达的时间窗口
- 若自上次预览后价格发生变化(返回 HTTP 409),应用会重新预览并要求你确认新的金额后再重试支付
提示: 订单的金额明细(法币小计、固定积分、积分抵扣、优惠券抵扣、应付法币)始终以服务端预览结果为准 —— 前端界面不会在本地计算总价,因此显示的金额与接口实际扣款金额始终一致。
23. 我的订单
订单历史页位于 /orders,订单详情页位于 /order/:id。列表页按状态标签筛选并支持无限滚动,详情页展示商品项、收货地址、支付明细、时间线,以及买家可执行的操作(取消、确认收货、申请退款)。
如何使用
- 使用状态标签(全部、待支付、待发货、已发货、已完成)筛选订单列表;向下滚动加载更多
- 每张订单卡片展示订单号、下单时间、状态标签、商品缩略图(名称、规格、数量),以及订单总额(法币和/或积分)
- 对待支付订单,点击取消释放已锁定的库存/积分/优惠券,或点击立即支付继续完成支付
- 对已发货订单,收到商品后点击确认收货 —— 订单将变为已完成
- 点击卡片打开订单详情 —— 完整商品列表、收货地址、支付明细、物流公司/运单号(发货后可见),以及按时间顺序排列的订单时间线(下单、支付、发货、申请退款/拒绝退款、已退款、已取消、已完成)
- 对已发货或已完成订单,点击申请退款,可选填写理由后提交 —— 订单将变为退款中,等待商家审批或拒绝;若被拒绝,订单会恢复为此前状态
需要帮助?
如果你在使用过程中遇到问题,或有任何疑问,请前往应用中的帮助与支持区块,或联系你的管理员。
本指南对应 npm run generate:member 于 2026-04-13 生成的内容。若需要额外抓取 forgot-password-2-otp.png,可在 scripts/config.js 中设置 MEMBER_CAPTURE_FORGOT_PASSWORD_OTP(会发送真实重置验证码)。如果某个优惠券标签页为空但仍需要详情截图,可设置 MEMBER_VOUCHER_CAPTURE_IDS。