tiefen_space_h5/components/AddToHome/index.jsx

"use client";

import React, { useState, useEffect } from "react";
import { Image } from "antd-mobile";
import { get,save } from "@/utils/storeInfo";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
export default function AddToHome() {
  const [firstLogin, setFirstLogin] = useState({ first: "0", second: false });
  useEffect(() => {
    if (!("standalone" in window.navigator && window.navigator.standalone)) {
      setFirstLogin((old) => ({ ...old, first: get("firstLogin") }));
    }
  }, []);
  return firstLogin.first == "1" ? (
    <div
      className="fixed z-[50]"
      style={{ bottom: !firstLogin.second ? "57px" : "0" }}
    >
      {!firstLogin.second ? (
        <div className="bg-[#13121f] p-3 w-screen flex items-center justify-between relative">
          <div className="flex items-center">
            <Image
              fit="cover"
              className="rounded-md mr-3"
              // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
              src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/icon.png"}
              placeholder=""
              width={46}
              height={46}
            />
            <div>
              <p className="font-bold text-[0.9rem]">
                建议您添加<span className="text-primary">铁粉空间</span>
                到手机桌面
              </p>
              <p className="text-[#ffffffb2] text-xs">以便随时关注圈子动态</p>
            </div>
          </div>
          <div
            className="bg-primary px-4 py-2 rounded-full font-bold"
            onClick={() => setFirstLogin((old) => ({ ...old, second: true }))}
          >
            去添加
          </div>
          <FontAwesomeIcon
            icon={faClose}
            size=""
            className="absolute left-1 top-1"
            onClick={() => {
              save("firstLogin", 0);
              setFirstLogin((old) => ({ first: "0", second: false }));
            }}
          />
        </div>
      ) : (
        <div
          className="flex flex-col justify-end items-center h-screen w-screen bg-[#00000099]"
          onClick={() => {
            save("firstLogin", 0);
            setFirstLogin((old) => ({ first: "0", second: false }));
          }}
        >
          <div className="font-bold text-xl mb-2 flex items-center">
            点击
            <Image
              fit="cover"
              // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
              src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/ios_share.png"}
              placeholder=""
              width={32}
              height={32}
            />
            添加到主屏幕
          </div>
          <Image
            fit="contain"
            // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/addToHome.png"}
            placeholder=""
            width={54}
            height={70}
          />
        </div>
      )}
    </div>
  ) : null;
}