购买流程

本节适用场景

本节介绍会员订阅的完整购买流程，包括购买弹窗的结构、支付方式、二维码状态变化以及支付失败后的重试方法。

购买弹窗入口

以下入口均可打开购买弹窗：

首页顶部的「升级会员」按钮
「个人中心 - 我的会员」中的「购买 / 续费」
触发会员功能受限时的弹窗引导（如「批量混音需要个人会员」）
积分充值面板的「升级获得更多积分」入口
团队管理页的「升级团队会员」入口

购买弹窗结构

购买弹窗是一个集成了会员订阅、积分充值、资源扩展三大功能的统一弹窗，由以下部分组成：

顶部用户信息区：

头像与昵称（仅显示，不可点击）
会员信息：免费时显示「当前会员」，其他情况显示「xx 会员：剩 x 天」；点击「记录」弹出订阅管理弹窗
可用积分：显示剩余积分，点击「记录」弹出积分明细弹窗
存储空间：显示「剩 x/y」，点击「记录」弹出订阅管理弹窗，点击「管理」弹出存储管理弹窗
项目席位：显示可用总席位数，点击「记录」弹出席位记录弹窗

商品购买区：

标题与副标题：对当前购买商品的宣传与引导
商品面板：同一品类的不同 SKU，选中待购买的面板有选中效果
购买提示：资源扩展类商品在购买面板下方显示购买提示信息
权益对比：仅「会员订阅」Tab 页有，默认展开所有对比项

常见问题区：

三个 Tab 页面（会员订阅、积分充值、资源扩展）各有独立的常见问题
默认展开，每个问题默认只显示问题，点击后显示答案

会员订阅的 SKU 面板

会员订阅 Tab 页中展示 4 个会员 SKU（含免费）：

推荐 SKU：固定推荐「团队会员」，在面板上显示「最多人选」标签

价格信息显示：

免费：固定显示「0 元」
其他：显示价格 + 时长（/月或 /年）
勾选了无忧包时：显示会员价 + 无忧包的总价

购买按钮文字：

免费：当前是免费会员时显示「当前」，否则显示「永久免费」
其他：显示「订阅 x 个月/年」；勾选了无忧包时追加「（含无忧包）」

加购无忧包：

在团队会员和企业会员的购买按钮下方，有「加购工作室无忧包」模块
非默认勾选
勾选后，权益列表中的「项目席位」和「云存储」叠加无忧包数值

统一支付流程

所有购买（会员订阅、积分充值、资源扩展）均走统一支付流程：

点击购买按钮
    ↓
打开付款面板
    ↓
用户点击「同意并支付」生成二维码
    ↓
使用微信或支付宝扫码
    ↓
打开付款 H5 页完成支付
    ↓
刷新购买弹窗数据（Toast 提示支付结果）

付款面板详解

左侧：购买须知

会员订阅、积分充值、资源扩展各有独立的购买须知
支持上下滑动查看
支持特定文字加粗和字体颜色强调
底部固定显示「万象有声付费服务协议」链接
「积分规则」仅在会员订阅和积分充值时显示

右侧：支付二维码

默认需要用户点击「同意并支付」才显示二维码
二维码有效期 5 分钟

支付二维码的六种状态

状态	说明	用户操作
同意并支付	初始状态，等待用户点击	点击进入下一步
生成二维码中	正在获取，提示「正在获取二维码」	等待
新码待扫	已生成二维码，显示供扫描	用微信 / 支付宝扫码
已过期	5 分钟未支付，自动过期	点击重新生成
支付中	用户扫码成功，打开 H5 页面	在手机上完成支付
支付完成	支付成功	弹窗关闭，数据刷新

付款 H5 页面

扫码后在手机上打开平台的支付 H5 页面：

显示 SKU 名称（如「团队会员」「个人会员 1 个月」）
显示需要支付的金额
自动拉起微信支付或支付宝支付的原生支付面板
用户输入支付密码完成支付

H5 页面的 SKU 名称示例：

购买类型	H5 页面显示名称
个人会员 1 个月	个人会员
团队会员 1 年	团队会员
企业会员（含无忧包）1 年	企业会员（含无忧包）
充值 100 积分	积分充值
扩展席位 3 个，1 个月	资源扩展
工作室无忧包 1 年	工作室无忧包

支付失败重试

支付过程中可能遇到以下异常：

未拉起支付面板：

原因：微信 / 支付宝未安装、版本过低、网络异常
处理：点击 H5 页面上的「重新支付」按钮再次拉起支付面板

手动关闭了支付面板：

处理：同上，点击「重新支付」按钮重新拉起

二维码过期：

原因：5 分钟内未完成扫码
处理：回到付款面板，点击过期的二维码，重新生成新的二维码

支付成功但订单未到账：

原因：网络延迟、支付平台回调延迟（通常 1-5 分钟内自动到账）
处理：等待 5 分钟后刷新页面；如超过 30 分钟仍未到账，联系客服提供订单号查询

使用其他 APP 扫码：

只能使用微信和支付宝扫码，其他 APP 扫码会提示支付失败并引导使用正确 APP

支付完成后的处理

支付成功后：

手机 H5 页面提示「已支付完成」
平台网页端 Toast 提示：「支付完成，购买成功」
关闭付款二维码弹窗
刷新购买大弹窗顶部的用户信息（会员状态、积分、存储、席位）
会员权益立即生效

常见问题

问题一：只能用微信和支付宝付款吗？
目前仅支持微信支付和支付宝两种支付方式，不支持银行卡直付、Apple Pay、信用卡等其他方式。如有企业对公支付需求，可联系商务团队处理。

问题二：支付成功后会员没有生效怎么办？
正常情况下支付成功即时生效。如果支付成功但会员未生效：① 等待 3-5 分钟后刷新页面；② 退出重新登录；③ 如仍未生效，进入「个人中心 - 订阅记录」查看订单状态；④ 如订单显示「支付成功」但权益未发放，联系客服提供订单号处理。

问题三：扫码后手机没有弹出支付面板怎么办？
检查：① 微信 / 支付宝是否为最新版本；② 网络是否正常；③ 是否在微信 / 支付宝内置浏览器中打开（而非系统浏览器）。排查后点击 H5 页面上的「重新支付」按钮再次尝试。

问题四：购买须知很长，必须看完才能付款吗？
点击「同意并支付」即视为同意购买须知和相关协议。平台建议在首次购买时仔细阅读，后续熟悉后可直接点击同意。

本节小结

购买弹窗集成 会员订阅、积分充值、资源扩展 三大功能
统一支付流程：点击购买 → 同意并支付 → 扫码 → H5 完成支付
二维码有 六种状态，有效期 5 分钟
仅支持 微信支付和支付宝
支付失败可点击「重新支付」重试

下一节：第 84 节《查看订阅记录》

购买流程 ​

本节适用场景 ​

购买弹窗入口 ​

购买弹窗结构 ​

会员订阅的 SKU 面板 ​

统一支付流程 ​

付款面板详解 ​

支付二维码的六种状态 ​

付款 H5 页面 ​

支付失败重试 ​

支付完成后的处理 ​

常见问题 ​

本节小结 ​