From 39c6eacb586fd5380ae6320cd313e94fa9fea654 Mon Sep 17 00:00:00 2001 From: zzlgreat Date: Fri, 12 Dec 2025 14:04:11 +0800 Subject: [PATCH] update pay ui --- .../Subscription/SubscriptionContentNew.tsx | 293 ++++++++++++++---- 1 file changed, 230 insertions(+), 63 deletions(-) diff --git a/src/components/Subscription/SubscriptionContentNew.tsx b/src/components/Subscription/SubscriptionContentNew.tsx index ed7c4826..888ca818 100644 --- a/src/components/Subscription/SubscriptionContentNew.tsx +++ b/src/components/Subscription/SubscriptionContentNew.tsx @@ -36,7 +36,9 @@ import { FaTimes, FaChevronDown, FaChevronUp, + FaExternalLinkAlt, } from 'react-icons/fa'; +import { AlipayCircleOutlined } from '@ant-design/icons'; import { logger } from '../../utils/logger'; import { useAuth } from '../../contexts/AuthContext'; @@ -147,6 +149,7 @@ export default function SubscriptionContentNew() { const [paymentCountdown, setPaymentCountdown] = useState(300); const [autoCheckInterval, setAutoCheckInterval] = useState(null); const [forceUpdating, setForceUpdating] = useState(false); + const [paymentMethod, setPaymentMethod] = useState<'wechat' | 'alipay'>('wechat'); // 支付方式 const [openFaqIndex, setOpenFaqIndex] = useState(null); @@ -392,14 +395,21 @@ export default function SubscriptionContentNew() { } } + const paymentMethodName = paymentMethod === 'alipay' ? 'alipay' : 'wechat_pay'; + subscriptionEvents.trackPaymentInitiated({ planName: selectedPlan.name, - paymentMethod: 'wechat_pay', + paymentMethod: paymentMethodName, amount: price, billingCycle: selectedCycle, }); - const response = await fetch('/api/payment/create-order', { + // 根据支付方式选择不同的 API + const apiUrl = paymentMethod === 'alipay' + ? '/api/payment/alipay/create-order' + : '/api/payment/create-order'; + + const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -415,28 +425,54 @@ export default function SubscriptionContentNew() { if (response.ok) { const data = await response.json(); if (data.success) { - setPaymentOrder(data.data); - setPaymentCountdown(30 * 60); // 30分钟 - startAutoPaymentCheck(data.data.id); + if (paymentMethod === 'alipay') { + // 支付宝：跳转到支付页面 + if (data.data.pay_url) { + setPaymentOrder(data.data); + setPaymentCountdown(30 * 60); + startAutoPaymentCheck(data.data.id, 'alipay'); - toast({ - title: '订单创建成功', - description: '请使用微信扫描二维码完成支付', - status: 'success', - duration: 3000, - isClosable: true, - }); + toast({ + title: '订单创建成功', + description: '正在跳转到支付宝支付页面...', + status: 'success', + duration: 3000, + isClosable: true, + }); + + // 延迟跳转，让用户看到提示 + setTimeout(() => { + window.open(data.data.pay_url, '_blank'); + }, 500); + } else { + throw new Error('支付链接获取失败'); + } + } else { + // 微信：显示二维码 + setPaymentOrder(data.data); + setPaymentCountdown(30 * 60); + startAutoPaymentCheck(data.data.id, 'wechat'); + + toast({ + title: '订单创建成功', + description: '请使用微信扫描二维码完成支付', + status: 'success', + duration: 3000, + isClosable: true, + }); + } } else { - throw new Error(data.message || '创建订单失败'); + throw new Error(data.error || data.message || '创建订单失败'); } } else { - throw new Error('网络请求失败'); + const errorData = await response.json().catch(() => ({})); + throw new Error(errorData.error || '网络请求失败'); } } catch (error: any) { subscriptionEvents.trackPaymentFailed( { planName: selectedPlan.name, - paymentMethod: 'wechat_pay', + paymentMethod: paymentMethod === 'alipay' ? 'alipay' : 'wechat_pay', amount: getCurrentPrice(selectedPlan), }, error.message @@ -454,25 +490,30 @@ export default function SubscriptionContentNew() { } }; - const startAutoPaymentCheck = (orderId: string) => { + const startAutoPaymentCheck = (orderId: string, method: 'wechat' | 'alipay' = 'wechat') => { + // 根据支付方式选择不同的状态查询 API + const statusApiUrl = method === 'alipay' + ? `/api/payment/alipay/order/${orderId}/status` + : `/api/payment/order/${orderId}/status`; + const checkInterval = setInterval(async () => { try { - const response = await fetch(`/api/payment/order/${orderId}/status`, { + const response = await fetch(statusApiUrl, { credentials: 'include', }); if (response.ok) { const data = await response.json(); - if (data.success && data.data.status === 'paid') { + if (data.success && (data.data.status === 'paid' || data.payment_success)) { clearInterval(checkInterval); setAutoCheckInterval(null); subscriptionEvents.trackPaymentSuccessful({ planName: selectedPlan?.name, - paymentMethod: 'wechat_pay', + paymentMethod: method === 'alipay' ? 'alipay' : 'wechat_pay', amount: paymentOrder?.amount, orderId: orderId, - transactionId: data.data.transaction_id, + transactionId: data.data.transaction_id || data.data.alipay_trade_no, }); toast({ @@ -500,13 +541,19 @@ export default function SubscriptionContentNew() { setForceUpdating(true); try { - const response = await fetch(`/api/payment/order/${paymentOrder.order_id}/status`, { + // 根据订单的支付方式选择不同的查询 API + const orderPaymentMethod = (paymentOrder as any).payment_method || paymentMethod; + const statusApiUrl = orderPaymentMethod === 'alipay' + ? `/api/payment/alipay/order/${(paymentOrder as any).id}/status` + : `/api/payment/order/${(paymentOrder as any).id}/status`; + + const response = await fetch(statusApiUrl, { credentials: 'include', }); if (response.ok) { const data = await response.json(); - if (data.success && data.data.status === 'paid') { + if (data.success && (data.data.status === 'paid' || data.payment_success)) { toast({ title: '支付成功！', description: '您的订阅已激活', @@ -540,6 +587,13 @@ export default function SubscriptionContentNew() { } }; + // 重新打开支付宝支付页面 + const handleReopenAlipay = () => { + if (paymentOrder && (paymentOrder as any).pay_url) { + window.open((paymentOrder as any).pay_url, '_blank'); + } + }; + // 合并数据库数据和前端配置 const getMergedPlans = () => { // 如果数据库还没有加载数据，使用静态配置 @@ -1176,11 +1230,60 @@ export default function SubscriptionContentNew() { - 微信支付 + + {paymentMethod === 'alipay' ? '支付宝支付' : '微信支付'} + {!paymentOrder ? ( + {/* 支付方式选择 */} + + + 选择支付方式 + + + + + + + {/* 订阅类型提示 */} {selectedPlan && priceInfo && ( <> @@ -1357,26 +1460,67 @@ export default function SubscriptionContentNew() { ) : ( - - 请使用微信扫描二维码完成支付 - + {/* 根据支付方式显示不同提示 */} + {(paymentOrder as any).payment_method === 'alipay' ? ( + <> + + + + + 支付宝支付 + + + + 请在新打开的页面中完成支付 + + + 支付完成后点击下方按钮确认 + + + + ) : ( + + 请使用微信扫描二维码完成支付 + + )} {/* 倒计时 */} - 二维码有效时间: {formatTime(paymentCountdown)} + 订单有效时间: {formatTime(paymentCountdown)} - {/* 二维码 */} - - {paymentOrder.qr_code_url ? ( - 微信支付二维码 - ) : ( - - - - )} - + {/* 微信二维码（仅微信支付显示） */} + {(paymentOrder as any).payment_method !== 'alipay' && ( + + {(paymentOrder as any).qr_code_url ? ( + 微信支付二维码 + ) : ( + + + + )} + + )} {/* 订单信息 */} - 订单号: {paymentOrder.order_no} + 订单号: {(paymentOrder as any).order_no} 支付金额: - ¥{paymentOrder.amount} + ¥{(paymentOrder as any).amount} {/* 操作按钮 */} + {/* 支付宝：重新打开支付页面按钮 */} + {(paymentOrder as any).payment_method === 'alipay' && (paymentOrder as any).pay_url && ( + + )} +