完善支付功能，添加支付宝的准备与创建逻辑
This commit is contained in:
210
src/components/composites/purchase/_client/pay.tsx
Normal file
210
src/components/composites/purchase/_client/pay.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
'use client'
|
||||
import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
|
||||
import {Button} from '@/components/ui/button'
|
||||
import alipay from '../_assets/alipay.svg'
|
||||
import wechat from '../_assets/wechat.svg'
|
||||
import balance from '../_assets/balance.svg'
|
||||
import Image from 'next/image'
|
||||
import {useContext, useState} from 'react'
|
||||
import {AuthContext} from '@/components/providers/AuthProvider'
|
||||
import {Alert, AlertDescription} from '@/components/ui/alert'
|
||||
import {
|
||||
prepareResourceByAlipay,
|
||||
prepareResourceByWechat,
|
||||
CreateResourceReq,
|
||||
CreateResourceResp,
|
||||
createResourceByBalance,
|
||||
createResourceByAlipay,
|
||||
createResourceByWechat,
|
||||
} from '@/actions/resource'
|
||||
import {ApiResponse} from '@/lib/api'
|
||||
import {toast} from 'sonner'
|
||||
import {Loader} from 'lucide-react'
|
||||
import {useRouter} from 'next/navigation'
|
||||
|
||||
export type PayProps = {
|
||||
method: 'alipay' | 'wechat' | 'balance'
|
||||
amount: number
|
||||
resource: CreateResourceReq
|
||||
|
||||
}
|
||||
|
||||
export default function Pay(props: PayProps) {
|
||||
|
||||
const ctx = useContext(AuthContext)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [payInfo, setPayInfo] = useState<CreateResourceResp | undefined>()
|
||||
|
||||
const onOpen = async () => {
|
||||
setOpen(true)
|
||||
|
||||
if (props.method === 'balance') {
|
||||
return
|
||||
}
|
||||
|
||||
let resp: ApiResponse<CreateResourceResp>
|
||||
switch (props.method) {
|
||||
case 'alipay':
|
||||
resp = await prepareResourceByAlipay(props.resource)
|
||||
break
|
||||
case 'wechat':
|
||||
resp = await prepareResourceByWechat(props.resource)
|
||||
break
|
||||
}
|
||||
if (!resp.success) {
|
||||
toast.error(`创建订单失败: ${resp.message}`)
|
||||
setOpen(false)
|
||||
return
|
||||
}
|
||||
|
||||
setPayInfo(resp.data)
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const onSubmit = async () => {
|
||||
let resp: ApiResponse
|
||||
try {
|
||||
switch (props.method) {
|
||||
case 'alipay':
|
||||
resp = await createResourceByAlipay(props.resource)
|
||||
break
|
||||
case 'wechat':
|
||||
resp = await createResourceByWechat(props.resource)
|
||||
break
|
||||
case 'balance':
|
||||
resp = await createResourceByBalance(props.resource)
|
||||
break
|
||||
}
|
||||
|
||||
if (!resp.success) {
|
||||
throw new Error(resp.message)
|
||||
}
|
||||
|
||||
toast.success('购买成功', {
|
||||
duration: 10 * 1000,
|
||||
closeButton: true,
|
||||
action: {
|
||||
label: `去提取`,
|
||||
onClick: () => router.push('/admin/extract'),
|
||||
},
|
||||
})
|
||||
|
||||
setOpen(false)
|
||||
await ctx.refreshProfile()
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e)
|
||||
toast.error('购买失败', {
|
||||
description: (e as Error).message,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className={`mt-4 h-12`} onClick={onOpen}>
|
||||
立即支付
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className={`flex gap-2 items-center`}>
|
||||
{props.method === 'alipay' && (<>
|
||||
<Image src={alipay} alt={`支付宝`} width={20} height={20}/>
|
||||
<span>支付宝</span>
|
||||
</>)}
|
||||
{props.method === 'wechat' && (<>
|
||||
<Image src={wechat} alt={`微信`} width={20} height={20}/>
|
||||
<span>微信</span>
|
||||
</>)}
|
||||
{props.method === 'balance' && (<>
|
||||
<Image src={balance} alt={`余额`} width={20} height={20}/>
|
||||
<span>余额支付</span>
|
||||
</>)}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{props.method === 'balance' ? (
|
||||
ctx.profile && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-weak text-sm">账户余额</span>
|
||||
<span className={`text-lg`}>{ctx.profile.balance}元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-weak text-sm">支付金额</span>
|
||||
<span className="text-lg text-accent">- {props.amount}元</span>
|
||||
</div>
|
||||
<hr className="my-2"/>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-weak text-sm">支付后余额</span>
|
||||
<span className={`text-lg ${ctx.profile.balance > props.amount ? 'text-done' : `text-fail`}`}>
|
||||
{ctx.profile.balance - props.amount}元
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ctx.profile.balance < props.amount && (
|
||||
<Alert variant="fail">
|
||||
<AlertDescription>
|
||||
余额不足，请先充值或选择其他支付方式
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{ctx.profile.balance >= props.amount && (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
检查无误后，点击确认支付按钮完成支付
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="bg-gray-100 w-52 h-52 flex items-center justify-center">
|
||||
{payInfo ? (
|
||||
<iframe
|
||||
src={payInfo.pay_url}
|
||||
className="w-full h-full"
|
||||
title="支付二维码"
|
||||
/>
|
||||
) : (
|
||||
<Loader size={40} className={`animate-spin`}/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 text-center">
|
||||
请使用{props.method === 'alipay' ? '支付宝' : '微信'}扫码支付
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center space-y-1">
|
||||
<p className="font-medium">支付金额: <span className="text-accent">{props.amount}元</span></p>
|
||||
<p className="text-xs text-gray-500">订单号: {payInfo?.trade_no || '创建订单中...'}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={props.method === 'balance' && !!ctx.profile && ctx.profile.balance < props.amount}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{props.method === 'balance' ? '确认支付' : '已完成支付'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
theme="outline"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user