更新支付传参&首页接口&菜单栏导航后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>