支付弹窗不使用sse改调用后端接口返回

This commit is contained in:
Eamon-meng
2026-06-18 18:13:30 +08:00
parent c297c2330e
commit c2465ece04
3 changed files with 45 additions and 39 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "lanhu-web", "name": "lanhu-web",
"version": "1.13.1", "version": "1.14.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev -H 0.0.0.0 --turbopack", "dev": "next dev -H 0.0.0.0 --turbopack",

View File

@@ -80,12 +80,14 @@ export async function completeResource(props: {
}) { }) {
return callByUser('/api/trade/complete', props) return callByUser('/api/trade/complete', props)
} }
type PayCloseData = {
status: 0 | 1 | 2
}
export async function payClose(props: { export async function payClose(props: {
trade_no: string trade_no: string
method: number method: number
}) { }) {
return callByUser('/api/trade/cancel', props) return callByUser<PayCloseData>('/api/trade/finish', props)
} }
export async function getPrice(props: CreateResourceReq) { export async function getPrice(props: CreateResourceReq) {

View File

@@ -8,7 +8,7 @@ import {payClose} from '@/actions/resource'
import {useEffect} from 'react' import {useEffect} from 'react'
import {UniversalDesktopPayment} from './universal-desktop-payment' import {UniversalDesktopPayment} from './universal-desktop-payment'
import {useAppStore} from '@/components/stores/app' import {useAppStore} from '@/components/stores/app'
import {toast} from 'sonner'
export type PaymentModalProps = { export type PaymentModalProps = {
onConfirm: (showFail: boolean) => Promise<void> onConfirm: (showFail: boolean) => Promise<void>
onClose: () => void onClose: () => void
@@ -17,45 +17,49 @@ export type PaymentModalProps = {
export function PaymentModal(props: PaymentModalProps) { export function PaymentModal(props: PaymentModalProps) {
// 手动关闭时的处理 // 手动关闭时的处理
const handleClose = async () => { const handleClose = async () => {
// try { try {
// const res = await payClose({ const res = await payClose({
// trade_no: props.inner_no, trade_no: props.inner_no,
// method: props.method, method: props.method,
// }) })
// if (!res.success) {
// throw new Error(res.message) if (!res.success) {
// } throw new Error(res.message || '请求失败')
// } }
// catch (error) { if (res.data.status === 1) {
// console.error('关闭订单失败:', error) toast.success('已支付成功!')
// } }
// finally { }
props.onClose?.() catch (error) {
// } console.error('关闭订单失败:', error)
}
finally {
props.onClose?.()
}
} }
// SSE处理方式检查支付状态 // SSE处理方式检查支付状态
const apiUrl = useAppStore('apiUrl') // const apiUrl = useAppStore('apiUrl')
useEffect(() => { // useEffect(() => {
const eventSource = new EventSource( // const eventSource = new EventSource(
`${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`, // `${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`,
) // )
eventSource.onmessage = async (event) => { // eventSource.onmessage = async (event) => {
switch (event.data) { // switch (event.data) {
case '1': // case '1':
props.onConfirm?.(true) // props.onConfirm?.(true)
case '2': // case '2':
props.onClose?.() // props.onClose?.()
} // }
} // }
eventSource.onerror = (error) => { // eventSource.onerror = (error) => {
console.error('SSE 连接错误:', error) // console.error('SSE 连接错误:', error)
} // }
return () => { // return () => {
eventSource.close() // eventSource.close()
} // }
}, [apiUrl, props]) // }, [apiUrl, props])
return ( return (
<Dialog <Dialog