tiefen_space_web/app/download/[user_id]/page.jsx

"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";
import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto";
import { Toast } from "antd-mobile";
import copy from "@/utils/copy";

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 = () => {
    copy(
      `【${data?.name}】『ID：${data?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/${data?.user_id}`
    );
  };

  //页面数据
  const [data, setData] = useState({});
  useEffect(() => {
    const getData = async () => {
      try {
        const base = baseRequest();
        const signature = generateSignature({
          user_id: parseInt(params.user_id, 10),
          ...base,
        });
        const detailResponse = await fetch(
          `/api/streamer/list_ext_by_user_id?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              user_id: parseInt(params.user_id, 10),
              ...base,
            }),
          }
        );
        const detailData = await detailResponse.json();
        if (detailData.ret === -1) {
          Toast.show({
            content: detailData.msg,
          });
          return;
        }
        setData(detailData.data.streamer_ext);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

  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 items-center mt-48 gap-10 z-10">
        <Image className="w-96" src={slogan} priority alt="" />
        <p className="text-white text-xl font-medium">
          系统维护升级中，请耐心等待。
        </p>
      </div>
    </section>
  );
}