'c1

app/lib/payment/usePayStatusPoll.ts

@@ -1,11 +1,9 @@
-/**
- * 微信 H5 支付完成后可能不跳转，通过 cookie 中的订单号轮询检测支付状态
- */
 import { useEffect, useRef, useState } from "react";
 
 const COOKIE_NAME = "join_pay_order";
-const POLL_INTERVAL = 2000;
-const MAX_POLLS = 150;
+const STORAGE_NAME = "join_pay_order";
+const POLL_INTERVAL_MS = 1200;
+const MAX_POLLS = 60;
 const MAX_AGE_MS = 15 * 60 * 1000;
 
 function getCookie(name: string): string | null {
@@ -19,7 +17,33 @@ function clearCookie(name: string): void {
   document.cookie = `${name}=; path=/; max-age=0`;
 }
 
-function parsePayOrderCookie(raw: string | null): [string | null, boolean] {
+function getStorage(name: string): string | null {
+  if (typeof window === "undefined") return null;
+  return window.localStorage.getItem(name);
+}
+
+function removeStorage(name: string): void {
+  if (typeof window === "undefined") return;
+  window.localStorage.removeItem(name);
+}
+
+function clearPendingOrder(): void {
+  clearCookie(COOKIE_NAME);
+  removeStorage(STORAGE_NAME);
+}
+
+function persistPendingOrder(raw: string): void {
+  if (typeof document !== "undefined") {
+    document.cookie = `${COOKIE_NAME}=${encodeURIComponent(raw)}; path=/; max-age=900`;
+  }
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(STORAGE_NAME, raw);
+    } catch {}
+  }
+}
+
+function parsePendingOrder(raw: string | null): [string | null, boolean] {
   if (!raw?.trim()) return [null, false];
   const parts = raw.split("|");
   const orderId = parts[0]?.trim() || raw.trim();
@@ -36,37 +60,96 @@ export function usePayStatusPoll(onPaid: () => void): boolean {
   onPaidRef.current = onPaid;
 
   useEffect(() => {
-    const raw = getCookie(COOKIE_NAME);
-    const [orderId, isValid] = parsePayOrderCookie(raw);
-    if (!orderId || !isValid) {
-      if (raw) clearCookie(COOKIE_NAME);
+    const cookieRaw = getCookie(COOKIE_NAME);
+    const [cookieOrderId, cookieValid] = parsePendingOrder(cookieRaw);
+    const storageRaw = getStorage(STORAGE_NAME);
+    const [storageOrderId, storageValid] = parsePendingOrder(storageRaw);
+    const orderId = cookieValid ? cookieOrderId : storageValid ? storageOrderId : null;
+    const activeRaw = cookieValid ? cookieRaw : storageValid ? storageRaw : null;
+
+    if (!orderId) {
+      if (cookieRaw || storageRaw) {
+        clearPendingOrder();
+      }
       return;
     }
 
+    if (activeRaw) {
+      persistPendingOrder(activeRaw);
+    }
+
     setPolling(true);
-    let count = 0;
-    const timer = setInterval(async () => {
-      count++;
-      if (count > MAX_POLLS) {
-        clearInterval(timer);
-        clearCookie(COOKIE_NAME);
+    let attempts = 0;
+    let stopped = false;
+    let timer: number | undefined;
+    let inFlight = false;
+
+    const stop = () => {
+      stopped = true;
+      if (timer) window.clearTimeout(timer);
+    };
+
+    const scheduleNext = () => {
+      if (stopped) return;
+      timer = window.setTimeout(tick, POLL_INTERVAL_MS);
+    };
+
+    const tick = async () => {
+      if (stopped) return;
+      if (inFlight) {
+        scheduleNext();
+        return;
+      }
+
+      attempts += 1;
+      if (attempts > MAX_POLLS) {
+        stop();
+        clearPendingOrder();
         setPolling(false);
         return;
       }
+
+      inFlight = true;
       try {
-        const res = await fetch(`/api/pay/status?order_id=${encodeURIComponent(orderId)}`);
-        const data = await res.json();
+        const res = await fetch(
+          `/api/pay/status?order_id=${encodeURIComponent(orderId)}`,
+          { cache: "no-store" }
+        );
+        const data = await res.json().catch(() => ({}));
         if (data?.ok && data?.paid) {
-          clearInterval(timer);
+          stop();
+          clearPendingOrder();
           setPolling(false);
           onPaidRef.current();
+          return;
         }
       } catch {
-        // 继续轮询
+        // keep polling
+      } finally {
+        inFlight = false;
       }
-    }, POLL_INTERVAL);
 
-    return () => clearInterval(timer);
+      scheduleNext();
+    };
+
+    const handleResume = () => {
+      if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+        return;
+      }
+      void tick();
+    };
+
+    document.addEventListener("visibilitychange", handleResume);
+    window.addEventListener("pageshow", handleResume);
+    window.addEventListener("focus", handleResume);
+    void tick();
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleResume);
+      window.removeEventListener("pageshow", handleResume);
+      window.removeEventListener("focus", handleResume);
+      stop();
+    };
   }, []);
 
   return polling;