v0.0.9 — 套餐订阅支付流程全面优化
重构「套餐 → 下单 → 支付 → 兑换」整条链路:套餐界面支持微信/支付宝切换并展示官方品牌色图标,订单界面不再跳转而是选择支付方式直接发起支付,兑换成功后以绿色内联提示替代弹窗;同时后端新增支付通道状态查询与「重新支付已有订单」接口,并以
pay.status为前端提供明确的下单结果反馈,未开通支付通道时不再错误生成订单。
中文
✨ 新增功能
后端(/api)
- 新增公开接口
GET /api/payment/status:返回所有支付通道(微信 / 支付宝 / 银行)的启用状态与any_enabled汇总,前端据此判断是否展示购买入口或直接提示管理员先配置支付。 - 新增接口
POST /api/order/self/:id/pay:用户可对自己名下的未支付订单重新发起支付,并可通过pay_method切换支付方式;返回结构复用下单接口,前端可直接接入二维码/转账弹窗。 CreatePlanOrder/PayMyOrder返回的pay对象新增status字段:取值success(二维码 / 转账说明已就绪)或warning(通道未注册 / 未启用 / SDK 调用失败,附warning文案),供前端明确区分「可以支付」与「配置有问题」,不再靠pay_url是否为空来猜测。- 未开通任何支付通道时不再创建订单:下单 / 重新支付请求会直接返回「系统尚未开通任何支付通道,请设置后开启支付」,订单不落库,避免订单列表出现无效记录。
- 抽取
buildPayInfo()辅助函数,统一CreatePlanOrder与PayMyOrder的支付参数拼装逻辑,消除重复代码。
套餐界面(Plans)
- 点击「立即订阅 / 升级」前预检支付通道:未启用任何通道时弹出 toast 提示且不打开确认弹窗,杜绝「确认后才发现无法支付」的体验。
- 购买 / 升级确认弹窗内新增支付方式选择器:微信支付(
IconWechatpay)与支付宝支付(IconAlipayCircle),使用各自官方品牌色(微信#07C160、支付宝#1677FF),用户可点击切换,点击「确认购买 / 确认升级」时携带所选pay_method提交。 - 支付弹窗随所选方式动态切换:标题与提示文案(「微信扫码支付 / 支付宝扫码支付」)跟随用户选择变化。
- 根据
pay.status驱动行为:success时展示二维码弹窗(或银行转账说明);warning时仅弹出错误 toast,不再跳转到订单列表页。
订单界面(Orders)
- 「支付」按钮不再跳转套餐页:改为弹出「选择支付方式」弹窗,选中后调用
POST /api/order/self/:id/pay对既有未支付订单直接发起支付。 - 支付方式选择器改用 Arco 官方品牌图标:微信 / 支付宝图标以官方色渲染,选中项高亮描边并显示同色勾选。
- 根据
pay.status驱动展示:success时展示二维码或转账信息弹窗;warning时弹出错误提示,不再出现误导性的「跳转支付中」文案或强制跳转。
兑换界面(Redeem)
- 移除「兑换成功」弹窗:原弹窗含「前往套餐」按钮,现改为在输入框下方以绿色内联文本展示成功提示(与错误提示同构),兑换成功后立即重新拉取「当前额度 / 已使用」数据,额度数字动态递增并带轻微放大动效。
🐛 问题修复
- 修复套餐界面支付图标不显示:
Plans.vue未显式importIconWechatpay/IconAlipayCircle,Arco 的 SVG 图标不会像组件库那样全局注册,导致icon-wechatpay/icon-alipay-circle渲染为空白;现已显式导入。 - 修复支付方式勾选符号位于右上角:将勾选符号从
position: absolute角落定位改为 flex 垂直居中,与按钮内图标、名称对齐。 - 修复「无支付通道」时错误生成订单并跳转订单页:此前即使未配置任何支付通道也会创建订单并跳转,现改为后端拒绝创建、前端仅弹错误提示。
📚 文档
- 为多语言 README 补充在线 Demo 链接(英 / 繁中 / 日 / 俄 / 韩 / 阿 / 德)。
⚠️ 升级注意事项
- 本次为代码 / 前端改动,无数据库迁移,可直接升级。
- 前端已新增依赖(
@arco-design/web-vue/es/icon品牌图标),建议重新执行npm install && npm run build后发布。 - 若希望用户可自助「选择支付方式 + 重新支付已有订单」,请确保后台「系统设置 - 支付」中至少启用一个在线支付通道(微信 / 支付宝);否则套餐页会直接提示需先开通支付。