支付流程重新设计枚举值更新传参方式

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

@@ -7,44 +7,32 @@ 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'
+import {TradeMethod} from '@/lib/models/trade'
+import {PaymentModalProps} from './payment-modal'
 
-interface Trade {
-  inner_no: string
-  method: number
-  pay_url: string
-  amount?: number
-  status?: number
-}
-export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => void}) {
+export function DesktopPayment(props: PaymentModalProps) {
+  console.log(props, 'props')
   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})
+    if (!canvasRef.current || props.method === TradeMethod.Alipay) return
+    qrcode.toCanvas(canvasRef.current, props.pay_url, {width: 200})
       .catch((err) => {
         console.error('生成二维码失败:', err)
         toast.error('生成支付二维码失败')
       })
-  }, [trade.method, trade.pay_url])
+  }, [props.method, props.pay_url])
 
   const handleComplete = async () => {
     setLoading(true)
     try {
-      const resp = await completeResource({trade_no: trade.inner_no})
+      const resp = await completeResource({trade_no: props.inner_no})
       if (!resp.success) throw new Error(resp.message)
       toast.success('支付成功')
       setPaymentVerified(true)
-      setTimeout(onClose, 2000)
+      setTimeout(() => props.onSuccess?.(), 2000)
     }
     catch (e) {
       toast.error('支付验证失败', {description: (e as Error).message})
@@ -53,13 +41,24 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
       setLoading(false)
     }
   }
+  console.log(props.decoration.text, 'props.decoration.text')
 
   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>
+          {props.decoration.icon ? (
+            <Image
+              src={props.decoration.icon}
+              alt={props.decoration.text}
+              width={24}
+              height={24}
+              className="rounded-md"
+            />
+          ) : (
+            <div className="w-6 h-6 bg-gray-200 rounded-full"/>
+          )}
+          <span>{props.decoration.text}</span>
         </DialogTitle>
       </DialogHeader>
 
@@ -71,15 +70,15 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
       ) : (
         <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"/>
+            {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">
             请使用
-            {paymentInfo.name}
+            {props.decoration.text}
             扫码支付
           </p>
 
@@ -89,12 +88,12 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
               {' '}
               <span className="text-accent">
                 ¥
-                {trade.amount?.toFixed(2) || '0.00'}
+                {props.amount?.toFixed(2) || '0.00'}
               </span>
             </p>
             <p className="text-xs text-gray-500">
               订单号:
-              {trade.inner_no}
+              {props.inner_no}
             </p>
           </div>
 
@@ -103,7 +102,7 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
               {loading && <Loader className="animate-spin mr-2"/>}
               已完成支付
             </Button>
-            <Button theme="outline" onClick={onClose}>
+            <Button theme="outline" onClick={() => props.onClose?.()}>
               关闭
             </Button>
           </div>