Files
web/src/components/composites/payment/payment-modal.tsx

84 lines
1.9 KiB
TypeScript

'use client'
import {MobilePayment} from './mobile-payment'
import {DesktopPayment} from './desktop-payment'
import {TradePlatform} from '@/lib/models/trade'
import {Dialog} from '@/components/ui/dialog'
import {PaymentProps} from './type'
import {payClose} from '@/actions/resource'
import {useEffect} from 'react'
import {useRouter} from 'next/navigation'
export type PaymentModalProps = {
onConfirm: (showFail: boolean) => Promise<void>
onClose: () => void
} & PaymentProps
export function PaymentModal(props: PaymentModalProps) {
// 手动关闭时的处理
const handleClose = async () => {
try {
const res = await payClose({
trade_no: props.inner_no,
method: props.method,
})
if (!res.success) {
throw new Error(res.message)
}
}
catch (error) {
console.error('关闭订单失败:', error)
}
finally {
props.onClose?.()
}
}
// 轮询检查支付状态
useEffect(() => {
const pollInterval = 2000
const maxRetries = 30
let retries = 0
const interval = setInterval(async () => {
try {
await props.onConfirm(false)
return
}
catch (error) {
console.error('支付状态检查失败:', error)
}
finally {
console.log('进入轮询支付状态')
retries++
if (retries >= maxRetries) {
clearInterval(interval)
}
}
}, pollInterval)
return () => {
clearInterval(interval)
}
}, [props])
return (
<Dialog
defaultOpen={true}
onOpenChange={(open) => {
if (!open) handleClose()
}}>
{props.platform === TradePlatform.Mobile ? (
<MobilePayment
{...props}
onClose={handleClose}
/>
) : (
<DesktopPayment
{...props}
onClose={handleClose}
/>
)}
</Dialog>
)
}