86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { FiArrowLeft, FiCheckCircle } from "react-icons/fi";
|
|
import toast from "react-hot-toast";
|
|
|
|
export default function SuccessPage() {
|
|
const [closeAttempted, setCloseAttempted] = useState(false);
|
|
|
|
// 页面加载时的动画效果
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
const successIcon = document.getElementById("success-icon");
|
|
if (successIcon) {
|
|
successIcon.classList.add("scale-100");
|
|
successIcon.classList.remove("scale-0");
|
|
}
|
|
}, 100);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
// 尝试关闭页面
|
|
const handleClose = () => {
|
|
try {
|
|
window.close();
|
|
|
|
// 设置一个短暂的延迟，检查页面是否仍然打开
|
|
setTimeout(() => {
|
|
// 如果页面仍然打开，说明关闭失败
|
|
if (document.visibilityState !== "hidden") {
|
|
setCloseAttempted(true);
|
|
// 显示toast提示
|
|
toast.error("请手动关闭此页面并返回应用", {
|
|
icon: "👋",
|
|
duration: 5000,
|
|
style: {
|
|
background: "#333",
|
|
color: "#fff",
|
|
borderRadius: "8px",
|
|
},
|
|
});
|
|
}
|
|
}, 300);
|
|
} catch (error) {
|
|
console.error("关闭页面失败:", error);
|
|
setCloseAttempted(true);
|
|
toast.error("请手动关闭此页面返回应用");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col items-center justify-center min-h-screen px-4 py-12"
|
|
style={{ backgroundColor: "#07050A" }}
|
|
>
|
|
<div className="w-full max-w-md p-8 mx-auto bg-[#17161A] rounded-xl shadow-lg border border-gray-800">
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
id="success-icon"
|
|
className="p-3 bg-green-900/30 rounded-full transition-transform duration-500 ease-in-out transform scale-0"
|
|
>
|
|
<FiCheckCircle className="w-16 h-16 text-green-400" />
|
|
</div>
|
|
|
|
<h2 className="mt-6 text-2xl font-bold text-center text-white">
|
|
支付成功
|
|
</h2>
|
|
|
|
<p className="mt-4 text-lg text-center text-gray-300">
|
|
请关闭当前页面返回应用
|
|
</p>
|
|
|
|
<button
|
|
onClick={handleClose}
|
|
className="flex items-center justify-center w-full mt-8 px-4 py-3 text-white bg-[#FF669E] rounded-md hover:bg-[#FF4A8E] transition-colors"
|
|
>
|
|
<FiArrowLeft className="w-5 h-5 mr-2" />
|
|
关闭页面
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|