完善充值功能，添加支付宝和微信的充值逻辑及二维码展示

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, useState} from 'react'
+import {useContext, useRef, useState} from 'react'
 import {AuthContext} from '@/components/providers/AuthProvider'
 import {Alert, AlertDescription} from '@/components/ui/alert'
 import {
@@ -21,6 +21,7 @@ import {ApiResponse} from '@/lib/api'
 import {toast} from 'sonner'
 import {Loader} from 'lucide-react'
 import {useRouter} from 'next/navigation'
+import * as qrcode from 'qrcode'
 
 export type PayProps = {
   method: 'alipay' | 'wechat' | 'balance'
@@ -34,6 +35,7 @@ export default function Pay(props: PayProps) {
   const ctx = useContext(AuthContext)
   const [open, setOpen] = useState(false)
   const [payInfo, setPayInfo] = useState<CreateResourceResp | undefined>()
+  const canvas = useRef<HTMLCanvasElement>(null)
 
   const onOpen = async () => {
     setOpen(true)
@@ -58,6 +60,7 @@ export default function Pay(props: PayProps) {
     }
 
     setPayInfo(resp.data)
+    await qrcode.toCanvas(canvas.current, resp.data.pay_url)
   }
 
   const router = useRouter()
@@ -172,13 +175,15 @@ export default function Pay(props: PayProps) {
             <div className="flex flex-col items-center gap-3">
               <div className="bg-gray-100 w-52 h-52 flex items-center justify-center">
                 {payInfo ? (
-                  <iframe
-                    src={payInfo.pay_url}
-                    className="w-full h-full"
-                    title="支付二维码"
-                  />
+                  props.method === 'alipay'
+                    ? <iframe
+                      src={payInfo.pay_url}
+                      className="w-full h-full"
+                      title="支付二维码"
+                    />
+                    : <canvas ref={canvas} className="w-full h-full"/>
                 ) : (
-                  <Loader size={40} className={`animate-spin`}/>
+                  <Loader size={40} className={`animate-spin text-weak`}/>
                 )}
               </div>
               <p className="text-sm text-gray-600 text-center">