增加支付成功页面

2025-03-17 17:59:39 +08:00 · 2025-03-17 17:59:39 +08:00 · 623999d9d9
parent fb9ec67837
commit 623999d9d9
1 changed files with 85 additions and 0 deletions
--- a/app/success/page.jsx
+++ b/app/success/page.jsx
@ -0,0 +1,85 @@
+"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>
+  );
+}