's'

app/paid/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePayStatusPoll } from "@/app/lib/usePayStatusPoll";
+
+export default function PaidPage() {
+  const [status, setStatus] = useState<"pending" | "success" | "fail">("pending");
+  const [fromUrl, setFromUrl] = useState<string | null>(null);
+
+  usePayStatusPoll(() => setStatus("success"));
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const paid = params.get("paid");
+    const fail = params.get("fail");
+    const from = params.get("from");
+    if (paid === "1") setStatus("success");
+    else if (fail === "1") setStatus("fail");
+    if (from) setFromUrl(decodeURIComponent(from));
+  }, []);
+
+  if (status === "pending") {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f4f8] px-4">
+        <div className="w-full max-w-md rounded-2xl bg-white p-10 text-center shadow-lg">
+          <div className="mx-auto mb-5 flex h-16 w-16 animate-spin items-center justify-center rounded-full border-4 border-sky-200 border-t-sky-500" />
+          <h2 className="text-xl font-bold text-slate-800">支付结果确认中</h2>
+          <p className="mt-3 text-sm text-slate-500">
+            正在查询支付状态，请稍候…
+            <br />
+            （支付完成后将自动跳转）
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "success") {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f4f8] px-4">
+        <div className="w-full max-w-md rounded-2xl bg-white p-10 text-center shadow-lg">
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 text-5xl">
+            ✅
+          </div>
+          <h2 className="text-2xl font-bold text-slate-800">支付成功</h2>
+          <p className="mt-3 text-slate-500">感谢您的支持，VIP 权益已开通</p>
+          <Link
+            href="/"
+            className="mt-8 inline-flex items-center gap-2 rounded-full bg-sky-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-sky-600"
+          >
+            ← 返回首页
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f4f8] px-4">
+      <div className="w-full max-w-md rounded-2xl bg-white p-10 text-center shadow-lg">
+        <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-amber-50 text-5xl">
+          ⚠️
+        </div>
+        <h2 className="text-2xl font-bold text-slate-800">支付未完成</h2>
+        <p className="mt-3 text-slate-500">支付已取消或未成功，请重试</p>
+        <Link
+          href="/"
+          className="mt-8 inline-flex items-center gap-2 rounded-full border-2 border-slate-300 px-8 py-3 font-semibold text-slate-700 transition-colors hover:border-slate-400 hover:bg-slate-50"
+        >
+          ← 返回首页
+        </Link>
+      </div>
+    </div>
+  );
+}