ios安装时进行弹窗教学

This commit is contained in:
yezian 2024-07-18 19:20:16 +08:00
parent c12c77e235
commit 3f22fb1530
3 changed files with 148 additions and 10 deletions

View File

@ -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();
}, []);
//iosModal
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" && (
<>
<a
onClick={copyInviter}
className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
href={
<div
className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
onClick={() => {
copyInviter();
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

View File

@ -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");
}
}, []);
//iosModal
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>
);

View File

@ -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>
);
}