44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
import Link from "next/link";
|
||
import { createCheckoutOrder } from "@/services/order.service";
|
||
|
||
export default async function CheckoutPage({
|
||
searchParams,
|
||
}: {
|
||
searchParams: Promise<{ plan?: string; slug?: string }>;
|
||
}) {
|
||
const { plan: rawPlan = "pro", slug = "unknown-app" } = await searchParams;
|
||
const plan = rawPlan === "free" || rawPlan === "pro" || rawPlan === "ultra" ? rawPlan : "pro";
|
||
const order = await createCheckoutOrder(plan, slug);
|
||
|
||
return (
|
||
<div className="space-y-6 py-8">
|
||
<section className="card-glass">
|
||
<p className="text-xs text-cyan-300">支付确认（占位）</p>
|
||
<h1 className="mt-1 text-3xl font-bold">订单确认</h1>
|
||
<p className="mt-2 text-sm text-slate-300">计划：{order.plan.toUpperCase()} · 资源：{order.slug}</p>
|
||
</section>
|
||
|
||
<section className="grid gap-4 md:grid-cols-2">
|
||
<div className="card-glass space-y-2 text-sm">
|
||
<p>订单号：{order.id}</p>
|
||
<p>支付金额：¥{order.amount}</p>
|
||
<p>支付方式：PayJS（预留）</p>
|
||
<p className="text-slate-400">后续可接支付二维码、轮询支付状态与回调签名校验。</p>
|
||
</div>
|
||
<div className="card-glass grid place-items-center">
|
||
<div className="grid h-44 w-44 place-items-center rounded-2xl border border-dashed border-cyan-300/40 text-xs text-slate-400">
|
||
支付二维码占位
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card-glass flex flex-wrap gap-2">
|
||
<Link href={`/orders/${order.id}?status=pending&plan=${order.plan}&slug=${order.slug}`} className="cta-main">
|
||
我已支付，查看订单状态
|
||
</Link>
|
||
<Link href="/pricing" className="cta-sub">返回套餐页</Link>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|