84 lines
2.5 KiB
TypeScript
84 lines
2.5 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, TradePlatform} from '@/lib/models/trade'
|
||
|
|
|
||
|
|
export function UniversalDesktopPayment(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="二维码"
|
||
|
|
/>
|
||
|
|
<div className="flex-none flex flex-col gap-1 items-center">
|
||
|
|
<p className="text-sm text-gray-600">
|
||
|
|
请使用 微信 或 支付宝 扫码支付
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-gray-600">
|
||
|
|
手机端长按二维码下载并识图
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
)
|
||
|
|
}
|