ios安装时进行弹窗教学
This commit is contained in:
parent
c12c77e235
commit
3f22fb1530
|
|
@ -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" && (
|
||||
<>
|
||||
<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
|
||||
|
|
|
|||
14
app/page.jsx
14
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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue