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

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

@@ -1,46 +1,27 @@
 'use client'
-import {DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
+import {DialogContent} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
 import {completeResource} from '@/actions/resource'
 import {toast} from 'sonner'
 import {CheckCircle, CreditCard} from 'lucide-react'
 import {useState} from 'react'
 import Image from 'next/image'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import {Trade, PaymentMethod} from './types'
+import {PaymentModalProps} from './payment-modal'
+
+export function MobilePayment(props: PaymentModalProps) {
+  console.log(props, 'props')
 
-export function MobilePayment({
-  trade,
-  onClose,
-}: {
-  trade: Trade
-  onClose: () => void
-}) {
   const [paymentVerified, setPaymentVerified] = useState(false)
   const [loading, setLoading] = useState(false)
-  const paymentInfo = (() => {
-    switch (trade.method) {
-    case PaymentMethod.Alipay:
-    case PaymentMethod.SftAlipay:
-      return {icon: alipay, name: '支付宝'}
-    case PaymentMethod.WeChat:
-    case PaymentMethod.SftWeChat:
-      return {icon: wechat, name: '微信支付'}
-    default:
-      console.warn('Unknown payment method:', trade.method)
-      return {icon: wechat, name: '微信支付'} // 默认返回微信支付
-    }
-  })()
 
   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)
+      props.onClose?.()
     }
     catch (e) {
       toast.error('支付验证失败', {description: (e as Error).message})
@@ -72,28 +53,29 @@ export function MobilePayment({
           <div className="space-y-4 rounded-lg bg-gray-50 p-4">
             <div className="flex justify-between">
               <span className="text-gray-600">订单号</span>
-              <span className="font-medium">{trade.inner_no}</span>
+              <span className="font-medium">{props.inner_no}</span>
             </div>
             <div className="flex justify-between">
               <span className="text-gray-600">支付方式</span>
               <div className="flex items-center gap-2">
-                <Image
-                  src={paymentInfo.icon}
-                  alt={paymentInfo.name}
-                  width={28}
-                  height={28}
-                  className="rounded-md"
-                />
-                <span>{paymentInfo.name}</span>
+                {props.decoration.icon && (
+                  <Image
+                    src={props.decoration.icon}
+                    alt={props.decoration.text}
+                    width={28}
+                    height={28}
+                    className="rounded-md"
+                  />
+                )}
+                <span>{props.decoration.text}</span>
               </div>
             </div>
             <div className="flex justify-between">
               <span className="text-gray-600">支付金额</span>
               <span className="text-lg font-bold text-blue-600">
                 ¥
-                {typeof trade.amount === 'number'
-                  ? trade.amount.toFixed(2)
-                  : '0.00'}
+                {' '}
+                {props.amount.toFixed(2)}
               </span>
             </div>
           </div>
@@ -103,10 +85,10 @@ export function MobilePayment({
             <Button
               theme="outline"
               className="flex-1 py-3 text-base"
-              onClick={onClose} >
+              onClick={props.onClose} >
               取消
             </Button>
-            <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = trade.pay_url} >
+            <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = props.pay_url} >
               确认支付
             </Button>
           </div>