首页接口更新&&支付页面调试

src/components/composites/payment/desktop-payment.tsx

@@ -3,45 +3,19 @@ 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 {Loader} from 'lucide-react'
 import {useState, useEffect, useRef} from 'react'
-import * as qrcode from 'qrcode'
 import Image from 'next/image'
-import {TradeMethod} from '@/lib/models/trade'
 import {PaymentModalProps} from './payment-modal'
 
 export function DesktopPayment(props: PaymentModalProps) {
-  console.log(props, 'props')
-  const [paymentVerified, setPaymentVerified] = useState(false)
   const [loading, setLoading] = useState(false)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
 
-  useEffect(() => {
-    if (!canvasRef.current || props.method === TradeMethod.Alipay) return
-    qrcode.toCanvas(canvasRef.current, props.pay_url, {width: 200})
-      .catch((err) => {
-        console.error('生成二维码失败:', err)
-        toast.error('生成支付二维码失败')
-      })
-  }, [props.method, props.pay_url])
-
-  const handleComplete = async () => {
+  const onSubmit = async () => {
     setLoading(true)
-    try {
-      const resp = await completeResource({trade_no: props.inner_no})
-      if (!resp.success) throw new Error(resp.message)
-      toast.success('支付成功')
-      setPaymentVerified(true)
-      setTimeout(() => props.onSuccess?.(), 2000)
-    }
-    catch (e) {
-      toast.error('支付验证失败', {description: (e as Error).message})
-    }
-    finally {
-      setLoading(false)
-    }
+    await props.onConfirm?.()
+    setLoading(false)
   }
-  console.log(props.decoration.text, 'props.decoration.text')
 
   return (
     <DialogContent>
@@ -62,52 +36,44 @@ export function DesktopPayment(props: PaymentModalProps) {
         </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">
-            {props.method === TradeMethod.Alipay ? (
-              <iframe src={props.pay_url} className="w-full h-full"/>
-            ) : (
-              <canvas ref={canvasRef} className="w-full h-full"/>
-            )}
-          </div>
-          <p className="text-sm text-gray-600">
-            请使用
-            {props.decoration.text}
-            扫码支付
+      <div className="flex flex-col items-center gap-4">
+        <Image
+          src={props.pay_url}
+          width={208}
+          height={208}
+          alt="二维码"
+        />
+        <p className="text-sm text-gray-600">
+          请使用
+          {props.decoration.text}
+          扫码支付
+        </p>
+
+        <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 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={handleComplete} >
-              {loading && <Loader className="animate-spin mr-2"/>}
-              已完成支付
-            </Button>
-            <Button theme="outline" onClick={() => props.onClose?.()}>
-              关闭
-            </Button>
-          </div>
         </div>
-      )}
+
+        <div className="flex gap-4 w-full justify-center">
+          <Button onClick={onSubmit}>
+            {loading && <Loader className="animate-spin mr-2"/>}
+            已完成支付
+          </Button>
+          <Button theme="outline" onClick={() => props.onClose?.()}>
+            关闭
+          </Button>
+        </div>
+      </div>
     </DialogContent>
   )
 }