Skip to content

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 未显式 import IconWechatpay / IconAlipayCircle,Arco 的 SVG 图标不会像组件库那样全局注册,导致 icon-wechatpay / icon-alipay-circle 渲染为空白;现已显式导入。
  • 修复支付方式勾选符号位于右上角:将勾选符号从 position: absolute 角落定位改为 flex 垂直居中,与按钮内图标、名称对齐。
  • 修复「无支付通道」时错误生成订单并跳转订单页:此前即使未配置任何支付通道也会创建订单并跳转,现改为后端拒绝创建、前端仅弹错误提示。

📚 文档 ​

  • 为多语言 README 补充在线 Demo 链接(英 / 繁中 / 日 / 俄 / 韩 / 阿 / 德)。

⚠️ 升级注意事项 ​

  • 本次为代码 / 前端改动,无数据库迁移,可直接升级。
  • 前端已新增依赖(@arco-design/web-vue/es/icon 品牌图标),建议重新执行 npm install && npm run build 后发布。
  • 若希望用户可自助「选择支付方式 + 重新支付已有订单」,请确保后台「系统设置 - 支付」中至少启用一个在线支付通道(微信 / 支付宝);否则套餐页会直接提示需先开通支付。