购买套餐里去充值桌面端和移动端支付流程封装

2025-06-22 14:42:21 +08:00
parent 483a33296a
commit 50cd4c5760
13 changed files with 713 additions and 464 deletions
--- a/src/components/composites/payment/desktop-payment.tsx
+++ b/src/components/composites/payment/desktop-payment.tsx
@@ -0,0 +1,114 @@
+'use client'
+import {DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
+import {Button} from '@/components/ui/button'
+import {completeResource} from '@/actions/resource'
+import {toast} from 'sonner'
+import {CheckCircle, Loader} from 'lucide-react'
+import {useState, useEffect, useRef} from 'react'
+import * as qrcode from 'qrcode'
+import Image from 'next/image'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
+import {PaymentMethod} from './types'
+
+interface Trade {
+  inner_no: string
+  method: number
+  pay_url: string
+  amount?: number
+  status?: number
+}
+export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => void}) {
+  const [paymentVerified, setPaymentVerified] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  const paymentInfo = {
+    icon: trade.method === PaymentMethod.Alipay ? alipay : wechat,
+    name: trade.method === PaymentMethod.Alipay ? '支付宝' : '微信支付',
+  }
+
+  useEffect(() => {
+    if (!canvasRef.current || trade.method === 1) return
+    qrcode.toCanvas(canvasRef.current, trade.pay_url, {width: 200})
+      .catch((err) => {
+        console.error('生成二维码失败:', err)
+        toast.error('生成支付二维码失败')
+      })
+  }, [trade.method, trade.pay_url])
+
+  const handleComplete = async () => {
+    setLoading(true)
+    try {
+      const resp = await completeResource({trade_no: trade.inner_no})
+      if (!resp.success) throw new Error(resp.message)
+      toast.success('支付成功')
+      setPaymentVerified(true)
+      setTimeout(onClose, 2000)
+    }
+    catch (e) {
+      toast.error('支付验证失败', {description: (e as Error).message})
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle className="flex gap-2 items-center">
+          <Image src={paymentInfo.icon} alt={paymentInfo.name} width={24} height={24}/>
+          <span>{paymentInfo.name}</span>
+        </DialogTitle>
+      </DialogHeader>
+
+      {paymentVerified ? (
+        <div className="text-center py-8">
+          <CheckCircle className="mx-auto text-green-500 w-12 h-12"/>
+          <p className="mt-4 text-lg font-medium">支付验证成功</p>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center gap-4">
+          <div className="bg-gray-100 w-52 h-52 flex items-center justify-center">
+            {trade.method === 1 ? (
+              <iframe src={trade.pay_url} className="w-full h-full"/>
+            ) : (
+              <canvas ref={canvasRef} className="w-full h-full"/>
+            )}
+          </div>
+          <p className="text-sm text-gray-600">
+            请使用
+            {paymentInfo.name}
+            扫码支付
+          </p>
+
+          <div className="w-full text-center space-y-2">
+            <p className="text-sm font-medium">
+              支付金额:
+              {' '}
+              <span className="text-accent">
+                ¥
+                {trade.amount?.toFixed(2) || '0.00'}
+              </span>
+            </p>
+            <p className="text-xs text-gray-500">
+              订单号:
+              {trade.inner_no}
+            </p>
+          </div>
+
+          <div className="flex gap-4 w-full justify-center">
+            <Button onClick={handleComplete} >
+              {loading && <Loader className="animate-spin mr-2"/>}
+              已完成支付
+            </Button>
+            <Button theme="outline" onClick={onClose}>
+              关闭
+            </Button>
+          </div>
+        </div>
+      )}
+    </DialogContent>
+  )
+}