61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import { Suspense, useEffect } from "react";
|
||
import { useSearchParams } from "next/navigation";
|
||
import Link from "next/link";
|
||
import { Header } from "@/app/components";
|
||
import { PayButton } from "@/app/components/PayButton";
|
||
|
||
function PayContent() {
|
||
const searchParams = useSearchParams();
|
||
|
||
useEffect(() => {
|
||
if (typeof window !== "undefined" && searchParams.get("test") === "ok") {
|
||
localStorage.setItem("pay", "ok");
|
||
window.location.href = "/pay/paid";
|
||
}
|
||
}, [searchParams]);
|
||
|
||
if (searchParams.get("test") === "ok") {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center">
|
||
<p className="text-[var(--muted-foreground)]">正在跳转...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
|
||
<Header />
|
||
<main className="flex min-h-[80vh] flex-col items-center justify-center px-4">
|
||
<h1 className="mb-2 text-2xl font-bold">报名数字游民实战课</h1>
|
||
<p className="mb-6 text-[var(--muted-foreground)]">
|
||
¥0.80 加入课程，解锁全部 21 节视频
|
||
</p>
|
||
<div className="mb-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
|
||
<PayButton size="lg" channel="alipay">支付宝支付</PayButton>
|
||
<PayButton size="lg" channel="wxpay">微信支付</PayButton>
|
||
</div>
|
||
<p className="mb-4 text-xs text-[var(--muted-foreground)]">
|
||
测试：<Link href="/pay?test=ok" className="text-[var(--accent)] underline">点击模拟支付成功</Link>
|
||
</p>
|
||
<Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
|
||
返回首页
|
||
</Link>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function PayPage() {
|
||
return (
|
||
<Suspense fallback={
|
||
<div className="flex min-h-screen items-center justify-center bg-[var(--background)]">
|
||
<p className="text-[var(--muted-foreground)]">加载中...</p>
|
||
</div>
|
||
}>
|
||
<PayContent />
|
||
</Suspense>
|
||
);
|
||
}
|