完善微信支付二维码生成机制

src/components/composites/recharge/index.tsx

@@ -17,7 +17,7 @@ import {zodResolver} from '@hookform/resolvers/zod'
 import {toast} from 'sonner'
 import wechat from '@/components/composites/purchase/_assets/wechat.svg'
 import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import {useRef, useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {Loader} from 'lucide-react'
 import {RechargeByAlipay, RechargeByAlipayConfirm, RechargeByWechat, RechargeByWechatConfirm} from '@/actions/user'
 import * as qrcode from 'qrcode'
@@ -52,50 +52,60 @@ export default function RechargeModal(props: RechargeModelProps) {
   const method = form.watch('method')
   const amount = form.watch('amount')
 
-  const canvas = useRef<HTMLCanvasElement>(null)
+  const [step, setStep] = useState(0)
   const [payInfo, setPayInfo] = useState<{
     trade_no: string
     pay_url: string
   }>()
 
+  const canvas = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    if (canvas.current && payInfo) {
+      qrcode.toCanvas(canvas.current, payInfo.pay_url, {
+        width: 200,
+        margin: 0,
+      })
+    }
+  }, [payInfo])
+
   const refreshProfile = useProfileStore(store => store.refreshProfile)
 
   const createRecharge = async (data: Schema) => {
     try {
       switch (data.method) {
-        case 'alipay':
-          const aliRes = await RechargeByAlipay({
-            amount: data.amount,
+      case 'alipay':
+        const aliRes = await RechargeByAlipay({
+          amount: data.amount,
+        })
+        if (aliRes.success) {
+          setStep(1)
+          setPayInfo(aliRes.data)
+        }
+        else {
+          toast.error(`创建订单失败`, {
+            description: aliRes.message,
           })
-          if (aliRes.success) {
-            setStep(1)
-            setPayInfo(aliRes.data)
-          }
-          else {
-            toast.error(`充值失败`, {
-              description: aliRes.message,
-            })
-          }
-          break
-        case 'wechat':
-          const weRes = await RechargeByWechat({
-            amount: data.amount,
+        }
+        break
+      case 'wechat':
+        const weRes = await RechargeByWechat({
+          amount: data.amount,
+        })
+        if (weRes.success) {
+          setStep(1)
+          setPayInfo(weRes.data)
+        }
+        else {
+          toast.error(`创建订单失败`, {
+            description: weRes.message,
           })
-          if (weRes.success) {
-            setStep(1)
-            setPayInfo(weRes.data)
-            await qrcode.toCanvas(canvas.current, weRes.data.pay_url)
-          }
-          else {
-            toast.error(`充值失败`, {
-              description: weRes.message,
-            })
-          }
-          break
+        }
+        break
       }
     }
     catch (e) {
-      toast.error(`充值失败`, {
+      console.error(e)
+      toast.error(`创建订单失败`, {
         description: (e as Error).message,
       })
     }
@@ -110,22 +120,22 @@ export default function RechargeModal(props: RechargeModelProps) {
     }
     try {
       switch (method) {
-        case 'alipay':
-          const aliRes = await RechargeByAlipayConfirm({
-            trade_no: payInfo.trade_no,
-          })
-          if (!aliRes.success) {
-            throw new Error(aliRes.message)
-          }
-          break
-        case 'wechat':
-          const weRes = await RechargeByWechatConfirm({
-            trade_no: payInfo.trade_no,
-          })
-          if (!weRes.success) {
-            throw new Error(weRes.message)
-          }
-          break
+      case 'alipay':
+        const aliRes = await RechargeByAlipayConfirm({
+          trade_no: payInfo.trade_no,
+        })
+        if (!aliRes.success) {
+          throw new Error(aliRes.message)
+        }
+        break
+      case 'wechat':
+        const weRes = await RechargeByWechatConfirm({
+          trade_no: payInfo.trade_no,
+        })
+        if (!weRes.success) {
+          throw new Error(weRes.message)
+        }
+        break
       }
       toast.success(`充值成功`)
       closeDialog()
@@ -144,7 +154,6 @@ export default function RechargeModal(props: RechargeModelProps) {
     setStep(0)
   }
 
-  const [step, setStep] = useState(0)
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -242,14 +251,10 @@ export default function RechargeModal(props: RechargeModelProps) {
         {step == 1 && <>
           <div className="flex flex-col items-center gap-4">
             <div className="flex flex-col items-center gap-3">
-              <div className="bg-gray-100 w-52 h-52 flex items-center justify-center">
+              <div className="bg-gray-100 size-50 flex items-center justify-center">
                 {payInfo ?
                   method === 'alipay'
-                    ? <iframe
-                      src={payInfo.pay_url}
-                      className="w-full h-full"
-                      title="支付二维码"
-                    />
+                    ? <iframe src={payInfo.pay_url} className="w-full h-full"/>
                     : <canvas ref={canvas} className="w-full h-full"/>
                   : (
                     <Loader size={40} className={`animate-spin text-weak`}/>