feat(pay-bak): 新增小程序支付页面及相关配置

- 新增确认支付页面配置,设置导航栏标题和样式
- 实现小程序支付页完整组件逻辑,包括加载订单、发起JSAPI支付等
- 支持通过 scene 或 subscriptionNo 获取订单参数
- 完善支付流程接口请求及错误处理,支持自动登录和支付确认
- 增加支付成功、支付中、支付失败、取消等状态页面展示
- 支持支付成功后跳转已购产品页或用户页
- 提供取消支付返回逻辑和界面展示
- 细化支付金额显示和提示用户支付后可使用应用功能
This commit is contained in:
2026-07-16 00:06:03 +08:00
parent 511e4b8ff3
commit 1b21f5e5b1
4 changed files with 416 additions and 2 deletions

View File

@@ -11,6 +11,11 @@ import { TenantId } from '@/config/app'
/**
* 小程序支付页面
* 接收参数 subscriptionNo完成 JSAPI 支付
*
* 重要:判断订单是否已支付,必须用 payStatus0=未支付 1=已支付),
* 不能用 status订阅生命周期active/pending/expired/cancelled
* 续费场景下后端 renewPay 会保留原 status=active、仅设 payStatus=0
* 若用 status 判支付会直接误判为"已支付"。
*/
interface SubscriptionDetail {
id: number
@@ -20,6 +25,10 @@ interface SubscriptionDetail {
productLogo?: string
productIcon?: string
status: string
// 支付状态: 0-未支付 1-已支付
payStatus?: number
payTime?: string
transactionId?: string
priceType: string
payPrice: number
subscriptionPeriod?: string
@@ -90,9 +99,21 @@ const PayPage: React.FC = () => {
if (data?.code === 0 || data?.code === 200) {
const subscription = data.data || data
console.log('[PayPage] 订阅对象:', JSON.stringify(subscription))
console.log('[PayPage] 订阅状态:', subscription?.status)
console.log('[PayPage] 订阅状态 status:', subscription?.status)
console.log('[PayPage] 支付状态 payStatus:', subscription?.payStatus)
console.log('[PayPage] 支付时间 payTime:', subscription?.payTime)
if (subscription?.status === 'active') {
// 关键修复:判断是否已支付,必须用 payStatus 而非 status
// 续费场景下后端 renewPay 会保留原 status=active、仅设 payStatus=0
const isPaid = subscription?.payStatus === 1
const isCancelled = subscription?.status === 'cancelled'
const isExpired = subscription?.status === 'expired'
if (isCancelled) {
setErrorMsg('订单已取消,无法继续支付')
} else if (isExpired) {
setErrorMsg('订单已过期,请重新下单')
} else if (isPaid) {
setPaid(true)
setDetail(subscription)
} else {