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

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>
+  )
+}