64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import MainLayout from '@/components/layouts/MainLayout';
|
||
import { CheckCircle, Loader2 } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
export default function PaymentSuccess() {
|
||
const router = useRouter();
|
||
const [countdown, setCountdown] = useState(5);
|
||
|
||
useEffect(() => {
|
||
// 倒计时自动跳转
|
||
if (countdown > 0) {
|
||
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
||
return () => clearTimeout(timer);
|
||
} else {
|
||
router.push('/membership');
|
||
}
|
||
}, [countdown, router]);
|
||
|
||
return (
|
||
<MainLayout>
|
||
<div className="min-h-[60vh] flex items-center justify-center px-4">
|
||
<div className="max-w-md w-full text-center">
|
||
<div className="mb-6 flex justify-center">
|
||
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
|
||
<CheckCircle className="w-12 h-12 text-green-600" />
|
||
</div>
|
||
</div>
|
||
|
||
<h1 className="text-3xl font-bold text-gray-900 mb-4">
|
||
支付成功！
|
||
</h1>
|
||
|
||
<p className="text-gray-600 mb-8">
|
||
恭喜您成功开通会员，现在可以享受所有会员特权了！
|
||
</p>
|
||
|
||
<div className="bg-gray-50 rounded-lg p-6 mb-8">
|
||
<div className="flex items-center justify-center gap-2 text-gray-500 text-sm">
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
<span>{countdown} 秒后自动跳转到会员中心...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4 justify-center">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => router.push('/')}
|
||
>
|
||
返回首页
|
||
</Button>
|
||
<Button
|
||
onClick={() => router.push('/membership')}
|
||
>
|
||
查看会员权益
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</MainLayout>
|
||
);
|
||
}
|