修复支付取消的调用和规定时间内更新订单支付状态

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

@@ -1,5 +1,5 @@
 'use client'
-import {DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
+import {DialogClose, DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
 import {Loader} from 'lucide-react'
 import {useState} from 'react'
@@ -11,7 +11,7 @@ export function DesktopPayment(props: PaymentModalProps) {
 
   const onSubmit = async () => {
     setLoading(true)
-    await props.onConfirm?.()
+    await props.onConfirm(true)
     setLoading(false)
   }
 
@@ -67,9 +67,11 @@ export function DesktopPayment(props: PaymentModalProps) {
             {loading && <Loader className="animate-spin mr-2"/>}
             已完成支付
           </Button>
-          <Button theme="outline" onClick={() => props.onClose?.()}>
-            关闭
-          </Button>
+          <DialogClose asChild>
+            <Button theme="outline" onClick={() => props.onClose?.()}>
+              关闭
+            </Button>
+          </DialogClose>
         </div>
       </div>
     </DialogContent>

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

@@ -1,5 +1,5 @@
 'use client'
-import {DialogContent} from '@/components/ui/dialog'
+import {DialogClose, DialogContent} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
 import {toast} from 'sonner'
 import {CreditCard, Loader} from 'lucide-react'
@@ -26,7 +26,7 @@ export function MobilePayment(props: PaymentModalProps) {
   // 处理支付完成确认
   const handlePaymentComplete = async () => {
     setLoading(true)
-    await props.onConfirm?.() // 调用父组件传入的确认方法
+    await props.onConfirm(true) // 调用父组件传入的确认方法
     setLoading(false)
   }
 
@@ -77,13 +77,15 @@ export function MobilePayment(props: PaymentModalProps) {
         <div className="flex gap-3">
           {!paymentInitiated ? ( // 未发起支付时显示
             <>
-              <Button
-                theme="outline"
-                className="flex-1 py-3 text-base"
-                onClick={props.onClose}
-              >
-                取消
-              </Button>
+              <DialogClose asChild>
+                <Button
+                  theme="outline"
+                  className="flex-1 py-3 text-base"
+                  onClick={props.onClose}
+                >
+                  取消
+                </Button>
+              </DialogClose>
               <Button
                 className="flex-1 py-3 text-base"
                 onClick={handleConfirmPayment}

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

@@ -1,46 +0,0 @@
-'use client'
-import {Button} from '@/components/ui/button'
-import {useState} from 'react'
-import {PaymentModal} from './payment-modal'
-import {PaymentProps} from './type'
-
-export function PaymentButton({
-  onClick,
-  disabled,
-  onSuccess,
-}: {
-  onClick: () => Promise<PaymentProps>
-  disabled?: boolean
-  onSuccess?: () => void
-}) {
-  const [loading, setLoading] = useState(false)
-  const [trade, setTrade] = useState<PaymentProps>()
-
-  const handleClick = async () => {
-    setLoading(true)
-    try {
-      setTrade(await onClick())
-    }
-    finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <>
-      <Button
-        onClick={handleClick}
-        disabled={disabled || loading}
-      >
-        {loading ? '处理中...' : '立即支付'}
-      </Button>
-
-      {trade && (
-        <PaymentModal
-          {...trade}
-          onConfirm={onSuccess}
-        />
-      )}
-    </>
-  )
-}

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

@@ -4,26 +4,75 @@ import {DesktopPayment} from './desktop-payment'
 import {TradePlatform} from '@/lib/models/trade'
 import {Dialog} from '@/components/ui/dialog'
 import {PaymentProps} from './type'
+import {payClose} from '@/actions/resource'
+import {useEffect} from 'react'
+import {useRouter} from 'next/navigation'
 
 export type PaymentModalProps = {
-  onConfirm?: () => Promise<void>
-  onClose?: () => void
+  onConfirm: (showFail: boolean) => Promise<void>
+  onClose: () => void
 } & PaymentProps
 
 export function PaymentModal(props: PaymentModalProps) {
+  // 手动关闭时的处理
+  const handleClose = async () => {
+    try {
+      const req = {
+        trade_no: props.inner_no,
+        method: props.method,
+      }
+      const res = await payClose(req)
+    }
+    catch (error) {
+      console.error('关闭订单失败:', error)
+    }
+    finally {
+      props.onClose?.()
+    }
+  }
+
+  // 轮询检查支付状态
+  useEffect(() => {
+    const pollInterval = 2000
+    const maxRetries = 30
+    let retries = 0
+
+    const interval = setInterval(async () => {
+      try {
+        await props.onConfirm(false)
+        return
+      }
+      catch (error) {
+        console.error('支付状态检查失败:', error)
+      }
+      finally {
+        retries++
+        if (retries >= maxRetries) {
+          clearInterval(interval)
+        }
+      }
+    }, pollInterval)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [props])
+
   return (
     <Dialog
       defaultOpen={true}
       onOpenChange={(open) => {
-        if (!open) props.onClose?.()
+        if (!open) handleClose()
       }}>
       {props.platform === TradePlatform.Mobile ? (
         <MobilePayment
           {...props}
+          onClose={handleClose}
         />
       ) : (
         <DesktopPayment
           {...props}
+          onClose={handleClose}
         />
       )}
     </Dialog>