重构项目结构，将数据层集中在 lib 包中；resource 类型更新，支持多个子套餐类型分别表示；新增长效套餐的购买流程，以及已购查询功能
This commit is contained in:
218
src/components/composites/purchase/pay.tsx
Normal file
218
src/components/composites/purchase/pay.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
'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 {useEffect, useRef, useState} from 'react'
|
||||
import {useProfileStore} from '@/components/providers/StoreProvider'
|
||||
import {Alert, AlertDescription} from '@/components/ui/alert'
|
||||
import {ApiResponse, ExtraResp, ExtraReq} from '@/lib/api'
|
||||
import {toast} from 'sonner'
|
||||
import {Loader} from 'lucide-react'
|
||||
import {useRouter} from 'next/navigation'
|
||||
import * as qrcode from 'qrcode'
|
||||
import {completeResource, createResource, prepareResource} from '@/actions/resource'
|
||||
|
||||
export type PayProps = {
|
||||
method: 'alipay' | 'wechat' | 'balance'
|
||||
amount: string
|
||||
resource: ExtraReq<typeof createResource>
|
||||
}
|
||||
|
||||
export default function Pay(props: PayProps) {
|
||||
|
||||
const profile = useProfileStore(store => store.profile)
|
||||
const refreshProfile = useProfileStore(store => store.refreshProfile)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [payInfo, setPayInfo] = useState<ExtraResp<typeof prepareResource> | undefined>()
|
||||
const canvas = useRef<HTMLCanvasElement>(null)
|
||||
useEffect(() => {
|
||||
if (canvas.current && payInfo) {
|
||||
qrcode.toCanvas(canvas.current, payInfo.pay_url, {
|
||||
width: 200,
|
||||
margin: 0,
|
||||
}).then()
|
||||
}
|
||||
}, [payInfo])
|
||||
|
||||
const onOpen = async () => {
|
||||
setOpen(true)
|
||||
|
||||
if (props.method === 'balance') {
|
||||
return
|
||||
}
|
||||
|
||||
const method = {
|
||||
alipay: 1,
|
||||
wechat: 2,
|
||||
}[props.method]
|
||||
|
||||
const resp = await prepareResource({
|
||||
...props.resource,
|
||||
method,
|
||||
})
|
||||
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':
|
||||
case 'wechat':
|
||||
if (!payInfo) {
|
||||
toast.error('无法读取支付信息', {
|
||||
description: `请联系客服确认支付状态`,
|
||||
})
|
||||
return
|
||||
}
|
||||
resp = await completeResource({
|
||||
trade_no: payInfo.trade_no,
|
||||
})
|
||||
break
|
||||
|
||||
case 'balance':
|
||||
resp = await createResource(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 refreshProfile()
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e)
|
||||
toast.error('购买失败', {
|
||||
description: (e as Error).message,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const balanceEnough = profile && profile.balance >= Number(props.amount)
|
||||
|
||||
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' ? (
|
||||
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`}>{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 ${balanceEnough ? 'text-done' : `text-fail`}`}>
|
||||
{(profile.balance - Number(props.amount)).toFixed(2)}元
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{balanceEnough ? (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
检查无误后，点击确认支付按钮完成支付
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert variant="fail">
|
||||
<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 size-50 flex items-center justify-center">
|
||||
{payInfo ? (
|
||||
props.method === 'alipay'
|
||||
? <iframe src={payInfo.pay_url} className="w-full h-full"/>
|
||||
: <canvas ref={canvas} className="w-full h-full"/>
|
||||
) : (
|
||||
<Loader size={40} className={`animate-spin text-weak`}/>
|
||||
)}
|
||||
</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' && !!profile && !balanceEnough}
|
||||
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