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

src/components/composites/purchase/pay.tsx

@@ -1,117 +1,87 @@
 'use client'
-import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
+import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
-import alipay from './_assets/alipay.svg'
-import wechat from './_assets/wechat.svg'
 import balance from './_assets/balance.svg'
 import Image from 'next/image'
-import {useEffect, useRef, useState} from 'react'
+import {useState} from 'react'
 import {useProfileStore} from '@/components/stores-provider'
 import {Alert, AlertTitle} from '@/components/ui/alert'
-import {ApiResponse, ExtraResp, ExtraReq} from '@/lib/api'
 import {toast} from 'sonner'
-import {Loader} from 'lucide-react'
 import {useRouter} from 'next/navigation'
-import * as qrcode from 'qrcode'
 import {completeResource, createResource, prepareResource} from '@/actions/resource'
 import {PaymentMethod, Platform, usePlatformType} from '@/lib/models/trade'
+import {PaymentModal} from '@/components/composites/payment/payment-modal'
+import type {Trade} from '@/components/composites/payment/types'
 
 export type PayProps = {
   method: 'alipay' | 'wechat' | 'balance'
   amount: string
-  resource: ExtraReq<typeof createResource>
+  resource: Parameters<typeof createResource>[0]
 }
 
 export default function Pay(props: PayProps) {
   const profile = useProfileStore(store => store.profile)
   const refreshProfile = useProfileStore(store => store.refreshProfile)
-  const platform = usePlatformType() // 获取当前平台类型
   const [open, setOpen] = useState(false)
-  const [payInfo, setPayInfo] = useState<ExtraResp<typeof prepareResource> | undefined>()
-  const canvas = useRef<HTMLCanvasElement>(null)
-  useEffect(() => {
-    if (canvas.current && payInfo) {
-      qrcode.toCanvas(canvas.current, payInfo.pay_url, {
-        width: 200,
-        margin: 0,
-      }).then()
-    }
-  }, [payInfo])
+  const [trade, setTrade] = useState<Trade | null>(null)
+  const router = useRouter()
+  const platform = usePlatformType()
 
   const onOpen = async () => {
     setOpen(true)
 
-    if (props.method === 'balance') {
-      return
-    }
+    if (props.method === 'balance') return
 
-    // 根据平台类型设置支付方法
-    let paymentMethod: PaymentMethod
-    if (platform === Platform.Desktop) {
-      paymentMethod = PaymentMethod.Sft
-    }
-    else {
-      // 移动端根据选择的支付方式设置
-      paymentMethod = props.method === 'alipay'
-        ? PaymentMethod.SftAlipay
-        : PaymentMethod.SftWeChat
-    }
-
-    const method = {
-      alipay: PaymentMethod.Alipay,
-      wechat: PaymentMethod.WeChat,
-    }[props.method]
+    // 准备支付信息
+    const paymentMethod = props.method === 'alipay'
+      ? platform === Platform.Mobile
+        ? PaymentMethod.SftAlipay // 4
+        : PaymentMethod.Alipay // 1
+      : platform === Platform.Mobile
+        ? PaymentMethod.SftWeChat // 5
+        : PaymentMethod.WeChat // 2
 
     const res = {
       ...props.resource,
       payment_method: paymentMethod,
-      payment_platform: platform, // 使用检测到的平台类型
+      payment_platform: platform,
     }
-    console.log(res, 'reresp')
-    const resp = await prepareResource(res)
-    console.log(resp, 'resp')
+    console.log(res, '请求参数')
 
+    const resp = await prepareResource(res)
     if (!resp.success) {
       toast.error(`创建订单失败: ${resp.message}`)
       setOpen(false)
       return
     }
 
-    setPayInfo(resp.data)
+    setTrade({
+      inner_no: resp.data.trade_no,
+      method: props.method === 'alipay' ? PaymentMethod.Alipay : PaymentMethod.WeChat,
+      pay_url: resp.data.pay_url,
+      amount: Number(props.amount),
+    })
   }
 
-  const router = useRouter()
   const onSubmit = async () => {
-    let resp: ApiResponse
     try {
-      switch (props.method) {
-      case 'alipay':
-      case 'wechat':
-        if (!payInfo) {
-          toast.error('无法读取支付信息', {
-            description: `请联系客服确认支付状态`,
-          })
-          return
-        }
-        resp = await completeResource({
-          trade_no: payInfo.trade_no,
-        })
-        break
+      let resp: Awaited<ReturnType<typeof completeResource>> | Awaited<ReturnType<typeof createResource>>
 
-      case 'balance':
+      if (props.method === 'balance') {
         resp = await createResource(props.resource)
-        break
+      }
+      else if (trade) {
+        resp = await completeResource({trade_no: trade.inner_no})
+      }
+      else {
+        throw new Error('支付信息不存在')
       }
 
-      if (!resp.success) {
-        throw new Error(resp.message)
-      }
+      if (!resp.success) throw new Error(resp.message)
 
       toast.success('购买成功', {
-        duration: 10 * 1000,
-        closeButton: true,
         action: {
-          label: `去提取`,
+          label: '去提取',
           onClick: () => router.push('/admin/extract'),
         },
       })
@@ -120,7 +90,6 @@ export default function Pay(props: PayProps) {
       await refreshProfile()
     }
     catch (e) {
-      console.log(e)
       toast.error('购买失败', {
         description: (e as Error).message,
       })
@@ -130,131 +99,92 @@ export default function Pay(props: PayProps) {
   const balanceEnough = profile && profile.balance >= Number(props.amount)
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button className="mt-4 h-12" onClick={onOpen}>
-          立即支付
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle className="flex gap-2 items-center">
-            {props.method === 'alipay' && (
-              <>
-                <Image src={alipay} alt="支付宝" width={20} height={20}/>
-                <span>支付宝</span>
-              </>
-            )}
-            {props.method === 'wechat' && (
-              <>
-                <Image src={wechat} alt="微信" width={20} height={20}/>
-                <span>微信</span>
-              </>
-            )}
-            {props.method === 'balance' && (
-              <>
+    <>
+      <Button className="mt-4 h-12" onClick={onOpen}>
+        立即支付
+      </Button>
+
+      {/* 余额支付对话框 */}
+      {/* 余额支付对话框 */}
+      {props.method === 'balance' && (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle className="flex gap-2 items-center">
                 <Image src={balance} alt="余额" width={20} height={20}/>
                 <span>余额支付</span>
-              </>
-            )}
-          </DialogTitle>
-        </DialogHeader>
+              </DialogTitle>
+            </DialogHeader>
 
-        {props.method === 'balance' ? (
-          profile && (
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-col gap-1">
-                <div className="flex justify-between items-center">
-                  <span className="text-weak text-sm">账户余额</span>
-                  <span className="text-lg">
-                    {profile.balance}
-                    元
-                  </span>
+            {profile && (
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-1">
+                  <div className="flex justify-between items-center">
+                    <span className="text-weak text-sm">账户余额</span>
+                    <span className="text-lg">
+                      {profile.balance}
+                      元
+                    </span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-weak text-sm">支付金额</span>
+                    <span className="text-lg text-accent">
+                      -
+                      {props.amount}
+                      元
+                    </span>
+                  </div>
+                  <hr className="my-2"/>
+                  <div className="flex justify-between items-center">
+                    <span className="text-weak text-sm">支付后余额</span>
+                    <span className={`text-lg ${balanceEnough ? 'text-done' : 'text-fail'}`}>
+                      {(profile.balance - Number(props.amount)).toFixed(2)}
+                      元
+                    </span>
+                  </div>
                 </div>
-                <div className="flex justify-between items-center">
-                  <span className="text-weak text-sm">支付金额</span>
-                  <span className="text-lg text-accent">
-                    -
-                    {props.amount}
-                    元
-                  </span>
-                </div>
-                <hr className="my-2"/>
-                <div className="flex justify-between items-center">
-                  <span className="text-weak text-sm">支付后余额</span>
-                  <span className={`text-lg ${balanceEnough ? 'text-done' : `text-fail`}`}>
-                    {(profile.balance - Number(props.amount)).toFixed(2)}
-                    元
-                  </span>
-                </div>
-              </div>
 
-              {balanceEnough ? (
-                <Alert variant="done">
-                  <AlertTitle>
-                    检查无误后，点击确认支付按钮完成支付
-                  </AlertTitle>
-                </Alert>
-              ) : (
-                <Alert variant="fail">
-                  <AlertTitle>
-                    余额不足，请先充值或选择其他支付方式
-                  </AlertTitle>
-                </Alert>
-              )}
-            </div>
-          )
-        ) : (
-          <div className="flex flex-col items-center gap-4">
-            <div className="flex flex-col items-center gap-3">
-              <div className="bg-gray-100 size-50 flex items-center justify-center">
-                {payInfo ? (
-                  props.method === 'alipay'
-                    ? <iframe src={payInfo.pay_url} className="w-full h-full"/>
-                    : <canvas ref={canvas} className="w-full h-full"/>
+                {balanceEnough ? (
+                  <Alert variant="done">
+                    <AlertTitle>
+                      检查无误后，点击确认支付按钮完成支付
+                    </AlertTitle>
+                  </Alert>
                 ) : (
-                  <Loader size={40} className="animate-spin text-weak"/>
+                  <Alert variant="fail">
+                    <AlertTitle>
+                      余额不足，请先充值或选择其他支付方式
+                    </AlertTitle>
+                  </Alert>
                 )}
               </div>
-              <p className="text-sm text-gray-600 text-center">
-                请使用
-                {props.method === 'alipay' ? '支付宝' : '微信'}
-                扫码支付
-              </p>
-            </div>
-            <div className="text-center space-y-1">
-              <p className="font-medium">
-                支付金额:
-                <span className="text-accent">
-                  {props.amount}
-                  元
-                </span>
-              </p>
-              <p className="text-xs text-gray-500">
-                订单号:
-                {payInfo?.trade_no || '创建订单中...'}
-              </p>
-            </div>
-          </div>
-        )}
+            )}
 
-        <DialogFooter>
-          <Button
-            type="button"
-            disabled={props.method === 'balance' && !!profile && !balanceEnough}
-            onClick={onSubmit}
-          >
-            {props.method === 'balance' ? '确认支付' : '已完成支付'}
-          </Button>
-          <Button
-            type="button"
-            theme="outline"
-            onClick={() => setOpen(false)}
-          >
-            取消
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            <DialogFooter>
+              <Button
+                disabled={!balanceEnough}
+                onClick={onSubmit}
+              >
+                确认支付
+              </Button>
+              <Button theme="outline" onClick={() => setOpen(false)}>
+                取消
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* 支付宝/微信支付使用公共组件 */}
+      {props.method !== 'balance' && trade && (
+        <PaymentModal
+          open={open}
+          onOpenChange={setOpen}
+          trade={trade}
+          platform={platform}
+          onSuccess={onSubmit}
+        />
+      )}
+    </>
   )
 }