82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
'use client'
|
|
import {DialogClose, DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
|
|
import {Button} from '@/components/ui/button'
|
|
import {Loader} from 'lucide-react'
|
|
import {useState} from 'react'
|
|
import Image from 'next/image'
|
|
import {PaymentModalProps} from './payment-modal'
|
|
import {getTradeMethodDecoration} from '@/lib/models/trade'
|
|
|
|
export function DesktopPayment(props: PaymentModalProps) {
|
|
const decoration = getTradeMethodDecoration(props.method)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const onSubmit = async () => {
|
|
setLoading(true)
|
|
await props.onConfirm(true)
|
|
setLoading(false)
|
|
}
|
|
|
|
return (
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex gap-2 items-center">
|
|
{decoration.icon ? (
|
|
<Image
|
|
src={decoration.icon}
|
|
alt={decoration.text}
|
|
width={24}
|
|
height={24}
|
|
className="rounded-md"
|
|
/>
|
|
) : (
|
|
<div className="w-6 h-6 bg-gray-200 rounded-full"/>
|
|
)}
|
|
<span>{decoration.text}</span>
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col items-center gap-4">
|
|
<Image
|
|
src={props.pay_url}
|
|
width={208}
|
|
height={208}
|
|
alt="二维码"
|
|
/>
|
|
<p className="text-sm text-gray-600">
|
|
请使用
|
|
{decoration.text}
|
|
{/* 扫码支付 */}
|
|
</p>
|
|
|
|
<div className="w-full text-center space-y-2">
|
|
<p className="text-sm font-medium">
|
|
支付金额:
|
|
{' '}
|
|
<span className="text-accent">
|
|
¥
|
|
{props.amount?.toFixed(2) || '0.00'}
|
|
</span>
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
订单号:
|
|
{props.inner_no}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-4 w-full justify-center">
|
|
<Button onClick={onSubmit}>
|
|
{loading && <Loader className="animate-spin mr-2"/>}
|
|
已完成支付
|
|
</Button>
|
|
<DialogClose asChild>
|
|
<Button theme="outline" onClick={() => props.onClose?.()}>
|
|
关闭
|
|
</Button>
|
|
</DialogClose>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
)
|
|
}
|