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

src/components/composites/purchase/_client/pay.tsx

@@ -5,7 +5,7 @@ import alipay from '../_assets/alipay.svg'
 import wechat from '../_assets/wechat.svg'
 import balance from '../_assets/balance.svg'
 import Image from 'next/image'
-import {useContext, useRef, useState} from 'react'
+import {useContext, useEffect, useRef, useState} from 'react'
 import {StoreContext, useProfileStore} from '@/components/providers/StoreProvider'
 import {Alert, AlertDescription} from '@/components/ui/alert'
 import {
@@ -38,6 +38,14 @@ export default function Pay(props: PayProps) {
   const [open, setOpen] = useState(false)
   const [payInfo, setPayInfo] = useState<CreateResourceResp | undefined>()
   const canvas = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    if (canvas.current && payInfo) {
+      qrcode.toCanvas(canvas.current, payInfo.pay_url, {
+        width: 200,
+        margin: 0,
+      })
+    }
+  }, [payInfo])
 
   const onOpen = async () => {
     setOpen(true)
@@ -48,12 +56,12 @@ export default function Pay(props: PayProps) {
 
     let resp: ApiResponse<CreateResourceResp>
     switch (props.method) {
-      case 'alipay':
-        resp = await prepareResourceByAlipay(props.resource)
-        break
-      case 'wechat':
-        resp = await prepareResourceByWechat(props.resource)
-        break
+    case 'alipay':
+      resp = await prepareResourceByAlipay(props.resource)
+      break
+    case 'wechat':
+      resp = await prepareResourceByWechat(props.resource)
+      break
     }
     if (!resp.success) {
       toast.error(`创建订单失败: ${resp.message}`)
@@ -62,7 +70,6 @@ export default function Pay(props: PayProps) {
     }
 
     setPayInfo(resp.data)
-    await qrcode.toCanvas(canvas.current, resp.data.pay_url)
   }
 
   const router = useRouter()
@@ -70,19 +77,19 @@ export default function Pay(props: PayProps) {
     let resp: ApiResponse
     try {
       switch (props.method) {
-        case 'alipay':
-          resp = await createResourceByAlipay({
-            trade_no: payInfo!.trade_no,
-          })
-          break
-        case 'wechat':
-          resp = await createResourceByWechat({
-            trade_no: payInfo!.trade_no,
-          })
-          break
-        case 'balance':
-          resp = await createResourceByBalance(props.resource)
-          break
+      case 'alipay':
+        resp = await createResourceByAlipay({
+          trade_no: payInfo!.trade_no,
+        })
+        break
+      case 'wechat':
+        resp = await createResourceByWechat({
+          trade_no: payInfo!.trade_no,
+        })
+        break
+      case 'balance':
+        resp = await createResourceByBalance(props.resource)
+        break
       }
 
       if (!resp.success) {
@@ -175,14 +182,10 @@ export default function Pay(props: PayProps) {
         ) : (
           <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 ? (
                   props.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`}/>