116 lines
3.8 KiB
TypeScript
116 lines
3.8 KiB
TypeScript
'use client'
|
|
import {DialogClose, DialogContent} from '@/components/ui/dialog'
|
|
import {Button} from '@/components/ui/button'
|
|
import {toast} from 'sonner'
|
|
import {CreditCard, 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 MobilePayment(props: PaymentModalProps) {
|
|
const decoration = getTradeMethodDecoration(props.method)
|
|
const [loading, setLoading] = useState(false) // 加载状态
|
|
const [paymentInitiated, setPaymentInitiated] = useState(false) // 是否已发起支付
|
|
|
|
// 处理确认支付
|
|
const handleConfirmPayment = () => {
|
|
try {
|
|
const newWindow = window.open(props.pay_url, '_blank')
|
|
if (!newWindow) {
|
|
toast.error('请允许弹出窗口以完成支付')
|
|
return
|
|
}
|
|
setPaymentInitiated(true)
|
|
}
|
|
catch (error) {
|
|
toast.error('无法打开支付页面')
|
|
}
|
|
}
|
|
|
|
// 处理支付完成确认
|
|
const handlePaymentComplete = async () => {
|
|
setLoading(true)
|
|
await props.onConfirm(true) // 调用父组件传入的确认方法
|
|
setLoading(false)
|
|
}
|
|
|
|
return (
|
|
<DialogContent className="max-w-[95vw] rounded-lg">
|
|
<div className="flex flex-col gap-6">
|
|
{/* 支付确认信息 */}
|
|
<div className="text-center">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 text-blue-500">
|
|
<CreditCard className="h-8 w-8"/>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-800">确认支付</h3>
|
|
<p className="text-gray-500">请确认以下支付信息</p>
|
|
</div>
|
|
|
|
{/* 支付详情 */}
|
|
<div className="space-y-4 rounded-lg bg-gray-50 p-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">订单号</span>
|
|
<span className="font-medium">{props.inner_no}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">支付方式</span>
|
|
<div className="flex items-center gap-2">
|
|
{decoration.icon && (
|
|
<Image
|
|
src={decoration.icon}
|
|
alt={decoration.text}
|
|
width={28}
|
|
height={28}
|
|
className="rounded-md"
|
|
/>
|
|
)}
|
|
<span>{decoration.text}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">支付金额</span>
|
|
<span className="text-lg font-bold text-blue-600">
|
|
¥
|
|
{' '}
|
|
{props.amount.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 操作按钮 */}
|
|
<div className="flex gap-3">
|
|
{!paymentInitiated ? ( // 未发起支付时显示
|
|
<>
|
|
<DialogClose asChild>
|
|
<Button
|
|
theme="outline"
|
|
className="flex-1 py-3 text-base"
|
|
onClick={props.onClose}
|
|
>
|
|
取消
|
|
</Button>
|
|
</DialogClose>
|
|
<Button
|
|
className="flex-1 py-3 text-base"
|
|
onClick={handleConfirmPayment}
|
|
>
|
|
确认支付
|
|
</Button>
|
|
</>
|
|
) : ( // 已发起支付时显示
|
|
<Button
|
|
className="flex-1 py-3 text-base"
|
|
onClick={handlePaymentComplete}
|
|
disabled={loading}
|
|
>
|
|
{loading && <Loader className="animate-spin mr-2" size={18}/>}
|
|
已完成支付
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
)
|
|
}
|