115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
|
'use client'
|
||
|
|
import {DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
|
||
|
|
import {Button} from '@/components/ui/button'
|
||
|
|
import {completeResource} from '@/actions/resource'
|
||
|
|
import {toast} from 'sonner'
|
||
|
|
import {CheckCircle, Loader} from 'lucide-react'
|
||
|
|
import {useState, useEffect, useRef} from 'react'
|
||
|
|
import * as qrcode from 'qrcode'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
|
||
|
|
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
|
||
|
|
import {PaymentMethod} from './types'
|
||
|
|
|
||
|
|
interface Trade {
|
||
|
|
inner_no: string
|
||
|
|
method: number
|
||
|
|
pay_url: string
|
||
|
|
amount?: number
|
||
|
|
status?: number
|
||
|
|
}
|
||
|
|
export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => void}) {
|
||
|
|
const [paymentVerified, setPaymentVerified] = useState(false)
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||
|
|
|
||
|
|
const paymentInfo = {
|
||
|
|
icon: trade.method === PaymentMethod.Alipay ? alipay : wechat,
|
||
|
|
name: trade.method === PaymentMethod.Alipay ? '支付宝' : '微信支付',
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!canvasRef.current || trade.method === 1) return
|
||
|
|
qrcode.toCanvas(canvasRef.current, trade.pay_url, {width: 200})
|
||
|
|
.catch((err) => {
|
||
|
|
console.error('生成二维码失败:', err)
|
||
|
|
toast.error('生成支付二维码失败')
|
||
|
|
})
|
||
|
|
}, [trade.method, trade.pay_url])
|
||
|
|
|
||
|
|
const handleComplete = async () => {
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
const resp = await completeResource({trade_no: trade.inner_no})
|
||
|
|
if (!resp.success) throw new Error(resp.message)
|
||
|
|
toast.success('支付成功')
|
||
|
|
setPaymentVerified(true)
|
||
|
|
setTimeout(onClose, 2000)
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
toast.error('支付验证失败', {description: (e as Error).message})
|
||
|
|
}
|
||
|
|
finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="flex gap-2 items-center">
|
||
|
|
<Image src={paymentInfo.icon} alt={paymentInfo.name} width={24} height={24}/>
|
||
|
|
<span>{paymentInfo.name}</span>
|
||
|
|
</DialogTitle>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
{paymentVerified ? (
|
||
|
|
<div className="text-center py-8">
|
||
|
|
<CheckCircle className="mx-auto text-green-500 w-12 h-12"/>
|
||
|
|
<p className="mt-4 text-lg font-medium">支付验证成功</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex flex-col items-center gap-4">
|
||
|
|
<div className="bg-gray-100 w-52 h-52 flex items-center justify-center">
|
||
|
|
{trade.method === 1 ? (
|
||
|
|
<iframe src={trade.pay_url} className="w-full h-full"/>
|
||
|
|
) : (
|
||
|
|
<canvas ref={canvasRef} className="w-full h-full"/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-gray-600">
|
||
|
|
请使用
|
||
|
|
{paymentInfo.name}
|
||
|
|
扫码支付
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="w-full text-center space-y-2">
|
||
|
|
<p className="text-sm font-medium">
|
||
|
|
支付金额:
|
||
|
|
{' '}
|
||
|
|
<span className="text-accent">
|
||
|
|
¥
|
||
|
|
{trade.amount?.toFixed(2) || '0.00'}
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-gray-500">
|
||
|
|
订单号:
|
||
|
|
{trade.inner_no}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-4 w-full justify-center">
|
||
|
|
<Button onClick={handleComplete} >
|
||
|
|
{loading && <Loader className="animate-spin mr-2"/>}
|
||
|
|
已完成支付
|
||
|
|
</Button>
|
||
|
|
<Button theme="outline" onClick={onClose}>
|
||
|
|
关闭
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</DialogContent>
|
||
|
|
)
|
||
|
|
}
|