购买套餐里去充值桌面端和移动端支付流程封装

2025-06-22 14:42:21 +08:00
parent 483a33296a
commit 50cd4c5760
13 changed files with 713 additions and 464 deletions
--- a/src/components/composites/payment/mobile-payment.tsx
+++ b/src/components/composites/payment/mobile-payment.tsx
@@ -0,0 +1,117 @@
+'use client'
+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, 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'
+
+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})
+      if (!resp.success) throw new Error(resp.message)
+      toast.success('支付成功')
+      setPaymentVerified(true)
+      setTimeout(onClose, 2000)
+    }
+    catch (e) {
+      toast.error('支付验证失败', {description: (e as Error).message})
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <DialogContent className="max-w-[95vw] rounded-lg">
+      {paymentVerified ? (
+        <div className="py-6 text-center">
+          <CheckCircle className="mx-auto h-14 w-14 text-green-500"/>
+          <p className="mt-4 text-lg font-medium">支付验证成功</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-6">
+          {/* 支付确认信息 */}
+          <div className="text-center">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 text-blue-500">
+              <CreditCard className="h-8 w-8"/>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-800">确认支付</h3>
+            <p className="text-gray-500">请确认以下支付信息</p>
+          </div>
+
+          {/* 支付详情 */}
+          <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>
+            </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>
+              </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'}
+              </span>
+            </div>
+          </div>
+
+          {/* 操作按钮 */}
+          <div className="flex gap-3">
+            <Button
+              theme="outline"
+              className="flex-1 py-3 text-base"
+              onClick={onClose} >
+              取消
+            </Button>
+            <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = trade.pay_url} >
+              确认支付
+            </Button>
+          </div>
+        </div>
+      )}
+    </DialogContent>
+  )
+}