This commit is contained in:
eric
2026-03-10 07:23:18 -05:00
parent a1696c2d0b
commit e9c6ec4d84
4 changed files with 100 additions and 34 deletions

View File

@@ -2,13 +2,41 @@
import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { usePayStatusPoll } from "@/app/lib/usePayStatusPoll";
function SuccessWithRedirect() {
const router = useRouter();
useEffect(() => {
const t = setTimeout(() => router.replace("/"), 2000);
return () => clearTimeout(t);
}, [router]);
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>
<p className="mt-2 text-xs text-slate-400">2 秒后自动返回首页</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>
);
}
export default function PaidPage() {
const [status, setStatus] = useState<"pending" | "success" | "fail">("pending");
const [fromUrl, setFromUrl] = useState<string | null>(null);
usePayStatusPoll(() => setStatus("success"));
const router = useRouter();
usePayStatusPoll(() => setStatus("success"), () => router.replace("/"));
useEffect(() => {
const params = new URLSearchParams(window.location.search);
@@ -29,7 +57,7 @@ export default function PaidPage() {
<p className="mt-3 text-sm text-slate-500">
正在查询支付状态,请稍候…
<br />
(支付完成后将自动跳转)
(支付完成后将自动跳转,1 分钟内未支付将返回首页)
</p>
</div>
</div>
@@ -38,21 +66,7 @@ export default function PaidPage() {
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>
<SuccessWithRedirect />
);
}