更新支付传参&首页接口&菜单栏导航后tab切换

src/components/composites/payment/mobile-payment.tsx

@@ -1,14 +1,35 @@
 'use client'
 import {DialogContent} 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 {CreditCard, Loader} from 'lucide-react'
 import {useState} from 'react'
 import Image from 'next/image'
 import {PaymentModalProps} from './payment-modal'
 
 export function MobilePayment(props: PaymentModalProps) {
+  const [loading, setLoading] = useState(false) // 加载状态
+  const [paymentInitiated, setPaymentInitiated] = useState(false) // 是否已发起支付
+
+  // 处理确认支付
+  const handleConfirmPayment = async () => {
+    try {
+      // 在新窗口打开支付链接
+      window.location.href = props.pay_url
+      setPaymentInitiated(true)
+    }
+    catch (error) {
+      toast.error('无法打开支付页面')
+    }
+  }
+
+  // 处理支付完成确认
+  const handlePaymentComplete = async () => {
+    setLoading(true)
+    await props.onConfirm?.() // 调用父组件传入的确认方法
+    setLoading(false)
+  }
+
   return (
     <DialogContent className="max-w-[95vw] rounded-lg">
       <div className="flex flex-col gap-6">
@@ -54,15 +75,32 @@ export function MobilePayment(props: PaymentModalProps) {
 
         {/* 操作按钮 */}
         <div className="flex gap-3">
-          <Button
-            theme="outline"
-            className="flex-1 py-3 text-base"
-            onClick={props.onClose} >
-            取消
-          </Button>
-          <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = props.pay_url} >
-            确认支付
-          </Button>
+          {!paymentInitiated ? ( // 未发起支付时显示
+            <>
+              <Button
+                theme="outline"
+                className="flex-1 py-3 text-base"
+                onClick={props.onClose}
+              >
+                取消
+              </Button>
+              <Button
+                className="flex-1 py-3 text-base"
+                onClick={handleConfirmPayment}
+              >
+                确认支付
+              </Button>
+            </>
+          ) : ( // 已发起支付时显示
+            <Button
+              className="flex-1 py-3 text-base"
+              onClick={handlePaymentComplete}
+              disabled={loading}
+            >
+              {loading && <Loader className="animate-spin mr-2" size={18}/>}
+              已完成支付
+            </Button>
+          )}
         </div>
       </div>
     </DialogContent>

src/components/composites/purchase/index.tsx

@@ -1,4 +1,5 @@
-import {ReactNode} from 'react'
+'use client'
+import {ReactNode, useEffect, useState} from 'react'
 import {merge} from '@/lib/utils'
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import LongForm from '@/components/composites/purchase/long/form'
@@ -10,10 +11,16 @@ type PurchaseProps = {
   defaultType: TabType
 }
 
-export default async function Purchase(props: PurchaseProps) {
+export default function Purchase(props: PurchaseProps) {
+  const [currentTab, setCurrentTab] = useState<string>(props.defaultType)
+
+  useEffect(() => {
+    setCurrentTab(props.defaultType)
+  }, [props.defaultType])
+
   return (
     <div className="flex flex-col gap-4">
-      <Tabs defaultValue={props.defaultType} className="gap-4">
+      <Tabs value={currentTab} onValueChange={setCurrentTab} className="gap-4">
         <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
           <Tab value="short">短效动态</Tab>
           <Tab value="long">长效静态</Tab>

src/components/composites/purchase/pay.tsx

@@ -10,7 +10,6 @@ import {toast} from 'sonner'
 import {useRouter} from 'next/navigation'
 import {completeResource, createResource, prepareResource} from '@/actions/resource'
 import {
-  TradePlatform,
   usePlatformType,
   TradeMethod,
   TradeMethodDecoration,
@@ -37,18 +36,14 @@ export default function Pay(props: PayProps) {
 
     if (props.method === 'balance') return
 
-    const method = platform === TradePlatform.Desktop
-      ? TradeMethod.Sft
-      : props.method === 'alipay'
-        ? TradeMethod.SftAlipay
-        : TradeMethod.SftWechat
-
+    const method = props.method === 'alipay'
+      ? TradeMethod.SftAlipay
+      : TradeMethod.SftWechat
     const res = {
       ...props.resource,
       payment_method: method,
       payment_platform: platform,
     }
-    console.log(res, '请求参数')
 
     const resp = await prepareResource(res)
     if (!resp.success) {

src/components/composites/recharge/index.tsx

@@ -58,24 +58,17 @@ export default function RechargeModal(props: RechargeModelProps) {
   const refreshProfile = useProfileStore(store => store.refreshProfile)
 
   const createRecharge = async (data: Schema) => {
-    console.log(data, 'data')
-
     try {
-      const method = platform === TradePlatform.Desktop
-        ? TradeMethod.Sft
-        : data.method === 'alipay'
-          ? TradeMethod.SftAlipay
-          : TradeMethod.SftWechat
-
+      const method = data.method === 'alipay'
+        ? TradeMethod.SftAlipay
+        : TradeMethod.SftWechat
       const req = {
         amount: data.amount.toString(),
         platform: platform,
         method: method,
       }
-      console.log(req, '请求参数')
 
       const result = await RechargePrepare(req)
-      console.log(result, 'result返回结果')
 
       if (result.success) {
         setTrade({