From 1a89fc7d6e3b22d9e54cb889355d55fe3f881631 Mon Sep 17 00:00:00 2001
From: yezian <jueweijue@gmail.com>
Date: Thu, 25 Jan 2024 02:47:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=BB=E6=92=AD=E4=B8=93?=
 =?UTF-8?q?=E5=B1=9E=E7=9A=84=E4=B8=8B=E8=BD=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/download/[user_id]/page.jsx | 148 ++++++++++++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 app/download/[user_id]/page.jsx

diff --git a/app/download/[user_id]/page.jsx b/app/download/[user_id]/page.jsx
new file mode 100644
index 0000000..99cf95d
--- /dev/null
+++ b/app/download/[user_id]/page.jsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import React, { useState, useEffect } from "react";
+import InOtherApp from "@/components/InOtherApp";
+import Image from "next/image";
+import download_lefttop from "@/public/images/download_lefttop.png";
+import download_righttop from "@/public/images/download_righttop.png";
+import download_rightmedium from "@/public/images/download_rightmedium.png";
+import download_leftbottom from "@/public/images/download_leftbottom.png";
+import download_rightbottom from "@/public/images/download_rightbottom.png";
+import slogan from "@/public/images/slogan.png";
+import qrcode from "@/public/images/qrcode.png";
+
+export default function Download({ params }) {
+  const [deviceType, setDeviceType] = useState("");
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    //区分设备类型
+    if (/Android/i.test(userAgent)) {
+      setDeviceType("Android");
+    } else if (/iPhone|iPad|iPod/i.test(userAgent)) {
+      setDeviceType("ios");
+    } else {
+      setDeviceType("pc");
+    }
+  }, []);
+
+  //点下载在剪贴板写入主播邀请信息
+  const copyInviter = async () => {
+    try {
+      await navigator.clipboard.writeText(
+        `复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/${params.user_id}`
+      );
+    } catch (error) {
+      console.error("复制到剪贴板时出现错误:", error);
+    }
+  };
+
+  return (
+    <section className="flex flex-col container">
+      <InOtherApp />
+      <div className="absolute top-0 left-0 w-full h-full z-0">
+        <Image
+          className="absolute top-0 left-0 w-36"
+          src={download_lefttop}
+          alt=""
+        />
+        <Image
+          className="absolute top-10 right-0 w-28"
+          src={download_righttop}
+          alt=""
+        />
+        <Image
+          className="absolute top-64 right-0 w-24"
+          src={download_rightmedium}
+          alt=""
+        />
+        <Image
+          className="absolute bottom-[17rem] left-0 w-32"
+          src={download_leftbottom}
+          alt=""
+        />
+        <Image
+          className="absolute bottom-0 right-0 w-[21rem]"
+          src={download_rightbottom}
+          alt=""
+        />
+      </div>
+      <div className="flex flex-col flex-1 py-16 items-center justify-around z-10">
+        <Image className="w-96" src={slogan} priority alt="" />
+        {deviceType === "pc" && (
+          <div className="flex flex-row gap-20">
+            <a
+              href="https://file.tiefen.fun/appdownload/ironfans1.1.3.apk"
+              className="group relative cursor-pointer w-20 h-20 rounded-full bg-[#FFFFFF1A]"
+            >
+              <p className="group-hover:opacity-100 opacity-0 transition-all duration-300 absolute flex w-full h-full items-center justify-center text-white text-xs">
+                立即下载
+              </p>
+              <div className="group-hover:opacity-0 opacity-100 transition-all duration-300 flex flex-col w-full h-full items-center justify-center">
+                <svg viewBox="0 0 1024 1024" width="32" height="32">
+                  <path
+                    d="M192.128 240.298667a42.666667 42.666667 0 0 1 58.24 15.872l71.552 125.226666A467.712 467.712 0 0 1 511.957333 341.333333c61.056 0 119.381333 11.648 172.885334 32.853334l67.413333-118.016a42.666667 42.666667 0 0 1 74.112 42.325333l-65.322667 114.304a469.333333 469.333333 0 0 1 217.941334 350.976A42.666667 42.666667 0 0 1 936.533333 810.666667H87.466667a42.666667 42.666667 0 0 1-42.453334-46.890667 469.12 469.12 0 0 1 202.410667-340.821333L176.256 298.496a42.666667 42.666667 0 0 1 15.872-58.197333zM320 661.333333a42.666667 42.666667 0 1 0 0-85.333333 42.666667 42.666667 0 0 0 0 85.333333z m426.666667-42.666666a42.666667 42.666667 0 1 0-85.333334 0 42.666667 42.666667 0 0 0 85.333334 0z"
+                    fill="#ffffff"
+                  ></path>
+                </svg>
+                <p className="text-white text-xs ">Android</p>
+              </div>
+            </a>
+            <div className="group relative cursor-pointer w-20 h-20 rounded-full bg-[#FFFFFF1A]">
+              <p className="group-hover:opacity-100 opacity-0 transition-all duration-300 text-center p-3 absolute flex w-full h-full items-center justify-center text-white text-xs">
+                扫描下方二维码
+              </p>
+              <div className="group-hover:opacity-0 opacity-100 transition-all duration-300 flex flex-col w-full h-full items-center justify-center">
+                <svg viewBox="0 0 1024 1024" width="32" height="32">
+                  <path
+                    d="M549.973333 117.077333c-24.704 34.944-38.101333 76.757333-39.850666 124.373334 8.021333-0.896 16-1.962667 23.893333-3.2 8.96-1.408 16.341333-2.986667 21.76-4.608 16.341333-5.632 34.816-18.048 54.784-36.778667 21.333333-21.290667 37.461333-44.842667 47.744-69.888 9.813333-25.898667 14.762667-49.408 14.762667-69.930667v-9.045333l-1.152-5.162667c-56.149333 14.122667-97.152 39.082667-121.941334 74.24z"
+                    fill="#ffffff"
+                  ></path>
+                  <path
+                    d="M200.533333 279.04C248.490667 232.064 307.114667 213.333333 349.482667 213.333333c41.813333 0 76.629333 18.261333 101.546666 31.402667l2.944 1.536c28.16 14.762667 45.909333 23.125333 65.493334 23.125333 20.224 0 39.509333-8.789333 71.082666-23.850666l0.597334-0.298667C619.733333 231.594667 657.92 213.333333 704 213.333333c63.701333 0 116.693333 32.256 158.421333 86.528a42.666667 42.666667 0 0 1-5.205333 57.642667c-45.482667 41.173333-67.84 91.690667-67.84 154.496 0 87.04 61.312 125.44 90.837333 143.018667a42.666667 42.666667 0 0 1 18.432 50.816c-10.666667 30.250667-30.208 68.181333-49.92 101.333333-19.370667 32.682667-41.728 65.493333-59.306666 83.626667l-0.896 0.981333c-12.885333 13.269333-27.648 28.501333-45.568 39.424-20.437333 12.373333-42.794667 18.133333-69.888 18.133333-15.957333 0-31.872-3.456-45.610667-7.253333-12.458667-3.413333-25.557333-7.850667-37.461333-11.861333l-4.053334-1.365334c-28.458667-9.6-49.792-16-66.474666-16-15.957333 0-33.706667 5.973333-59.605334 15.573334l-3.84 1.408c-22.016 8.234667-52.053333 19.498667-82.474666 19.498666-64.426667 0-105.6-50.005333-118.357334-65.450666a221.952 221.952 0 0 0-2.304-2.773334l-1.152-1.322666c-18.346667-21.333333-136.362667-157.952-136.362666-367.786667 0-109.184 35.797333-184.704 85.077333-232.96z"
+                    fill="#ffffff"
+                  ></path>
+                </svg>
+                <p className="text-white text-xs ">ios</p>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="flex flex-col justify-center items-center">
+          <Image className="w-28 rounded-2xl" src={qrcode} priority alt="" />
+          {deviceType === "pc" && (
+            <p className="mt-3 text-white text-sm font-normal">手机扫码下载</p>
+          )}
+        </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={
+                  deviceType === "ios"
+                    ? "itms-services://?action=download-manifest&url=https%3A%2F%2Fsapi.dbqapp.com%2Fshow%2Fplist%2F991989474491629568%3F1704878022"
+                    : "https://file.tiefen.fun/appdownload/ironfans1.1.3.apk"
+                }
+              >
+                安装
+              </a>
+            </>
+          )}
+          {deviceType !== "Android" && (
+            <p className="mt-3 text-white text-sm font-normal">
+              安装遇到困难，请
+              <Link
+                className="link text-primary cursor-pointer"
+                href="/doc/ioshowtoinstall"
+              >
+                查看帮助
+              </Link>
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}