2025.11.27.17.50

src/pages/payment/success.tsx

@@ -0,0 +1,63 @@
+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>
+    );
+}