ios安装时进行弹窗教学

app/download/[user_id]/page.jsx

@@ -6,6 +6,7 @@ import baseRequest from "@/utils/baseRequest";
 import { generateSignature } from "@/utils/crypto";
 import { Toast } from "antd-mobile";
 import copy from "@/utils/copy";
+import IosInstallStepModal from "@/components/IosInstallStepModal/page";
 
 export default function Download({ params }) {
   const [deviceType, setDeviceType] = useState("");
@@ -66,6 +67,10 @@ export default function Download({ params }) {
     getData();
   }, []);
 
+  //ios安装教程Modal是否展示
+  const [isIosInstallStepModalVisible, setIsIosInstallStepModalVisible] =
+    useState(false);
+
   return (
     <section className="flex flex-col container">
       <InOtherApp />
@@ -168,21 +173,29 @@ export default function Download({ params }) {
         </div>
         <div className="flex flex-col items-center">
           {deviceType !== "pc" && (
-            <>
+            <div
-              <a
+              className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
-                onClick={copyInviter}
+              onClick={() => {
-                className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
+                copyInviter();
-                href={
+                if (deviceType === "ios") setIsIosInstallStepModalVisible(true);
+                const url =
                   deviceType === "ios"
                     ? "itms-services://?action=download-manifest&url=https://filecdn01.tiefen.fun/appdownload/ironfans.plist"
-                    : "https://filecdn01.tiefen.fun/appdownload/ironfans1.4.6.apk"
+                    : "https://filecdn01.tiefen.fun/appdownload/ironfans1.4.6.apk";
+                window.location.href = url;
+                if (deviceType === "ios") {
+                  setIsIosInstallStepModalVisible(true);
                 }
-              >
+              }}
-                安装
+            >
-              </a>
+              安装
-            </>
+            </div>
           )}
         </div>
+        <IosInstallStepModal
+          isVisible={isIosInstallStepModalVisible}
+          setIsVisible={setIsIosInstallStepModalVisible}
+        />
         <div className="flex flex-row items-center bg-[#13121F] w-full fixed bottom-0 left-0 rounded-t-2xl p-4">
           <div className="w-12 h-12 rounded-full overflow-hidden">
             <img

app/page.jsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import InOtherApp from "@/components/InOtherApp";
 import Footer from "@/components/Footer";
 import Link from "next/link";
+import IosInstallStepModal from "@/components/IosInstallStepModal/page";
 
 export default function Home() {
   const [deviceType, setDeviceType] = useState("");
@@ -18,6 +19,11 @@ export default function Home() {
       setDeviceType("pc");
     }
   }, []);
+
+  //ios安装教程Modal是否展示
+  const [isIosInstallStepModalVisible, setIsIosInstallStepModalVisible] =
+    useState(false);
+
   return (
     <section className="flex flex-col container">
       <InOtherApp />
@@ -153,11 +159,15 @@ export default function Home() {
             <div
               className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
               onClick={() => {
+                if (deviceType === "ios") setIsIosInstallStepModalVisible(true);
                 const url =
                   deviceType === "ios"
                     ? "itms-services://?action=download-manifest&url=https://filecdn01.tiefen.fun/appdownload/ironfans.plist"
                     : "https://filecdn01.tiefen.fun/appdownload/ironfans1.4.6.apk";
                 window.location.href = url;
+                if (deviceType === "ios") {
+                  setIsIosInstallStepModalVisible(true);
+                }
               }}
             >
               安装
@@ -176,6 +186,10 @@ export default function Home() {
           )}
         </div>
       </div>
+      <IosInstallStepModal
+        isVisible={isIosInstallStepModalVisible}
+        setIsVisible={setIsIosInstallStepModalVisible}
+      />
       <Footer />
     </section>
   );

components/IosInstallStepModal/page.jsx

@@ -0,0 +1,111 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Mask } from "antd-mobile";
+import Link from "next/link";
+
+export default function IosInstallStepModal({ isVisible, setIsVisible }) {
+  const [stepIndex, setStepIndex] = useState(1);
+  useEffect(() => {
+    if (!isVisible) {
+      setStepIndex(1);
+      return;
+    }
+    const timeoutId = setTimeout(
+      () =>
+        setStepIndex((prev) => {
+          if (prev === 6) return 1;
+          return prev + 1;
+        }),
+      3000
+    );
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [isVisible, stepIndex]);
+
+  return (
+    <Mask
+      visible={isVisible}
+      onMaskClick={() => setIsVisible(false)}
+      opacity="thick"
+    >
+      <div className="w-full h-screen flex justify-center items-center">
+        <div className="flex flex-col relative items-center py-8 px-4 bg-[#17161A] rounded-2xl w-4/5">
+          <svg
+            onClick={() => setIsVisible(!isVisible)}
+            className="absolute right-4 top-4"
+            viewBox="0 0 1024 1024"
+            width="20"
+            height="20"
+          >
+            <path
+              d="M155.00305177 868.99694823c-21.96904297-21.96904297-21.96904297-60.41486817 0-82.38391112l631.60998534-631.60998534c21.96904297-21.96904297 60.41486817-21.96904297 82.38391112 0s21.96904297 60.41486817 0 82.38391112l-631.60998534 631.60998534c-21.96904297 21.96904297-60.41486817 21.96904297-82.38391112 0z"
+              fill="#ffffff"
+            ></path>
+            <path
+              d="M155.00305177 155.00305177c21.96904297-21.96904297 60.41486817-21.96904297 82.38391112 0l631.60998534 631.60998534c21.96904297 21.96904297 21.96904297 60.41486817 0 82.38391112s-60.41486817 21.96904297-82.38391112 0l-631.60998534-631.60998534c-21.96904297-21.96904297-21.96904297-60.41486817 0-82.38391112z"
+              fill="#ffffff"
+            ></path>
+          </svg>
+          <div className="flex flex-col gap-1 mb-4">
+            <p className="text-white text-center font-medium text-sm">
+              请等待安装完成，然后开始设置
+            </p>
+            <p className="text-white text-center font-medium text-sm">
+              若安装后无法正常使用，请删除旧版APP
+            </p>
+            <p className="text-white text-center font-medium text-sm">
+              请务必按以下步骤进行设置，详细
+              <Link
+                className="link text-primary cursor-pointer"
+                href="/doc/ioshowtoinstall"
+              >
+                安装教程
+              </Link>
+            </p>
+          </div>
+          <img
+            src={
+              process.env.NEXT_PUBLIC_CDN_URL +
+              `/public/images/iosinstall_${stepIndex}.png`
+            }
+            alt=""
+          />
+          <div className="mt-4 flex w-full h-12 rounded-full items-center justify-center bg-primary">
+            {stepIndex === 1 && (
+              <p className="text-base font-medium text-white">
+                第1步：打开【设置】
+              </p>
+            )}
+            {stepIndex === 2 && (
+              <p className="text-base font-medium text-white">
+                第2步：点击【通用】
+              </p>
+            )}
+            {stepIndex === 3 && (
+              <p className="text-base font-medium text-white">
+                第3步：点击【VPN与设备管理】
+              </p>
+            )}
+            {stepIndex === 4 && (
+              <p className="text-base font-medium text-white">
+                第4步：点击【证书】
+              </p>
+            )}
+            {stepIndex === 5 && (
+              <p className="text-base font-medium text-white">
+                第5步：点击【信任证书】
+              </p>
+            )}
+            {stepIndex === 6 && (
+              <p className="text-base font-medium text-white">
+                第6步：在弹出页点击【信任】
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </Mask>
+  );
+}