支付组件统一使用二维码展示

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

@@ -5,8 +5,10 @@ import {Loader} from 'lucide-react'
 import {useState} from 'react'
 import Image from 'next/image'
 import {PaymentModalProps} from './payment-modal'
+import {getTradeMethodDecoration} from '@/lib/models/trade'
 
 export function DesktopPayment(props: PaymentModalProps) {
+  const decoration = getTradeMethodDecoration(props.method)
   const [loading, setLoading] = useState(false)
 
   const onSubmit = async () => {
@@ -19,10 +21,10 @@ export function DesktopPayment(props: PaymentModalProps) {
     <DialogContent>
       <DialogHeader>
         <DialogTitle className="flex gap-2 items-center">
-          {props.decoration.icon ? (
+          {decoration.icon ? (
             <Image
-              src={props.decoration.icon}
-              alt={props.decoration.text}
+              src={decoration.icon}
+              alt={decoration.text}
               width={24}
               height={24}
               className="rounded-md"
@@ -30,7 +32,7 @@ export function DesktopPayment(props: PaymentModalProps) {
           ) : (
             <div className="w-6 h-6 bg-gray-200 rounded-full"/>
           )}
-          <span>{props.decoration.text}</span>
+          <span>{decoration.text}</span>
         </DialogTitle>
       </DialogHeader>
 
@@ -43,7 +45,7 @@ export function DesktopPayment(props: PaymentModalProps) {
         />
         <p className="text-sm text-gray-600">
           请使用
-          {props.decoration.text}
+          {decoration.text}
           扫码支付
         </p>
 

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

@@ -6,8 +6,10 @@ import {CreditCard, Loader} from 'lucide-react'
 import {useState} from 'react'
 import Image from 'next/image'
 import {PaymentModalProps} from './payment-modal'
+import {getTradeMethodDecoration} from '@/lib/models/trade'
 
 export function MobilePayment(props: PaymentModalProps) {
+  const decoration = getTradeMethodDecoration(props.method)
   const [loading, setLoading] = useState(false) // 加载状态
   const [paymentInitiated, setPaymentInitiated] = useState(false) // 是否已发起支付
 
@@ -54,16 +56,16 @@ export function MobilePayment(props: PaymentModalProps) {
           <div className="flex justify-between">
             <span className="text-gray-600">支付方式</span>
             <div className="flex items-center gap-2">
-              {props.decoration.icon && (
+              {decoration.icon && (
                 <Image
-                  src={props.decoration.icon}
-                  alt={props.decoration.text}
+                  src={decoration.icon}
+                  alt={decoration.text}
                   width={28}
                   height={28}
                   className="rounded-md"
                 />
               )}
-              <span>{props.decoration.text}</span>
+              <span>{decoration.text}</span>
             </div>
           </div>
           <div className="flex justify-between">

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

@@ -6,7 +6,7 @@ import {Dialog} from '@/components/ui/dialog'
 import {PaymentProps} from './type'
 import {payClose} from '@/actions/resource'
 import {useEffect} from 'react'
-import {useRouter} from 'next/navigation'
+import {UniversalDesktopPayment} from './universal-desktop-payment'
 
 export type PaymentModalProps = {
   onConfirm: (showFail: boolean) => Promise<void>
@@ -61,17 +61,13 @@ export function PaymentModal(props: PaymentModalProps) {
       onOpenChange={(open) => {
         if (!open) handleClose()
       }}>
-      {props.platform === TradePlatform.Mobile ? (
-        <MobilePayment
-          {...props}
-          onClose={handleClose}
-        />
-      ) : (
-        <DesktopPayment
-          {...props}
-          onClose={handleClose}
-        />
-      )}
+
+      {/* {props.platform === TradePlatform.Mobile
+        ? <MobilePayment {...props} onClose={handleClose}/>
+        : <DesktopPayment {...props} onClose={handleClose}/>
+      } */}
+
+      <UniversalDesktopPayment {...props} onClose={handleClose}/>
     </Dialog>
   )
 }

src/components/composites/payment/type.ts

@@ -8,8 +8,4 @@ export type PaymentProps = {
   amount: number
   platform: TradePlatform
   method: TradeMethod
-  decoration: {
-    icon: StaticImageData
-    text: string
-  }
 }

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

@@ -0,0 +1,83 @@
+'use client'
+import {DialogClose, DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
+import {Button} from '@/components/ui/button'
+import {Loader} from 'lucide-react'
+import {useState} from 'react'
+import Image from 'next/image'
+import {PaymentModalProps} from './payment-modal'
+import {getTradeMethodDecoration, TradePlatform} from '@/lib/models/trade'
+
+export function UniversalDesktopPayment(props: PaymentModalProps) {
+  const decoration = getTradeMethodDecoration(props.method)
+  const [loading, setLoading] = useState(false)
+
+  const onSubmit = async () => {
+    setLoading(true)
+    await props.onConfirm(true)
+    setLoading(false)
+  }
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle className="flex gap-2 items-center">
+          {decoration.icon ? (
+            <Image
+              src={decoration.icon}
+              alt={decoration.text}
+              width={24}
+              height={24}
+              className="rounded-md"
+            />
+          ) : (
+            <div className="w-6 h-6 bg-gray-200 rounded-full"/>
+          )}
+          <span>{decoration.text}</span>
+        </DialogTitle>
+      </DialogHeader>
+
+      <div className="flex flex-col items-center gap-4">
+        <Image
+          src={props.pay_url}
+          width={208}
+          height={208}
+          alt="二维码"
+        />
+        <div className="flex-none flex flex-col gap-1 items-center">
+          <p className="text-sm text-gray-600">
+            请使用 微信 或 支付宝 扫码支付
+          </p>
+          <p className="text-sm text-gray-600">
+            手机端长按二维码下载并识图
+          </p>
+        </div>
+
+        <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={onSubmit}>
+            {loading && <Loader className="animate-spin mr-2"/>}
+            已完成支付
+          </Button>
+          <DialogClose asChild>
+            <Button theme="outline" onClick={() => props.onClose?.()}>
+              关闭
+            </Button>
+          </DialogClose>
+        </div>
+      </div>
+    </DialogContent>
+  )
+}