tiefen_space_h5/app/share/[mid]/page.js

"use client";

import React, { useEffect, useState } from "react";
import { Divider, Toast } from "antd-mobile";
import { useRouter, useParams } from "next/navigation";
import clipboard from "copy-to-clipboard";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { getStreamerInfo } from "@/api/space";
import requireAPI from "@/utils/requireAPI";

export default function ShareSpace() {
  const router = useRouter();
  const { mid } = useParams();
  const webUrl = process.env.NEXT_PUBLIC_WEB_URL;
  const [streamerInfo, setStreamerInfo] = useState(null);
  const [shareWebUrl, setShareWebUrl] = useState("https://tiefen.fun");

  function generateRandomString(length = 10) {
    const characters =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let result = "";
    for (let i = 0; i < length; i++) {
      result += characters.charAt(
        Math.floor(Math.random() * characters.length)
      );
    }
    return result;
  }

  useEffect(() => {
    getStreamerInfo(Number(mid)).then((res) => {
      setStreamerInfo(res);
    });

    function getRandomUrl(urls) {
      return urls[Math.floor(Math.random() * urls.length)];
    }

    const getShareWebUrl = async () => {
      try {
        const data = await requireAPI("POST", "/api/config/cold_config", {
          body: {},
        });
        if (data.ret === -1) {
          Toast.show({
            content: data.msg,
          });
          return;
        }
        const randomUrl = getRandomUrl(data.data.share_redirect_urls);
        setShareWebUrl(randomUrl);
      } catch (error) {
        console.error(error);
      }
    };

    getShareWebUrl();
  }, []);
  //保存内容到剪贴板
  const copy = (_data) => {
    clipboard(_data);
    Toast.show({
      icon: "success",
      content: "已复制到剪贴板",
      position: "top",
    });
  };

  //复制口令
  const copyShareCode = () => {
    const shareCode = `【${streamerInfo?.streamer_ext?.name}】『ID：${streamerInfo?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情${webUrl}/zone/${streamerInfo?.streamer_ext?.user_id}`;

    copy(shareCode);
  };

  //复制邀请链接
  const copyShareUrl = () => {
    const randomStr = generateRandomString();
    const shareCode = `${shareWebUrl}/zone/${streamerInfo?.streamer_ext?.user_id}/${randomStr}`;
    copy(shareCode);
  };

  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">分享空间</p>
      </div>
      <div className="w-full flex flex-col p-4 pt-16">
        <div onClick={copyShareCode} className="flex justify-between pt-4 pb-2">
          <span className="text-base text-white">复制口令</span>
          <FontAwesomeIcon
            icon={faAngleRight}
            size="xl"
            style={{ maxWidth: "12px" }}
          />
        </div>
        <Divider />
        <div
          onClick={copyShareUrl}
          className="flex justify-between w-full pt-4 pb-2"
        >
          <span className="text-base text-white">复制邀请链接</span>
          <FontAwesomeIcon
            icon={faAngleRight}
            size="xl"
            style={{ maxWidth: "12px" }}
          />
        </div>
        <Divider />
        <div
          onClick={() => {
            router.push("/space/share/" + streamerInfo?.streamer_ext?.user_id);
          }}
          className="flex justify-between pt-4 pb-2"
        >
          <span className="text-base text-white">生成分享卡片</span>
          <FontAwesomeIcon
            icon={faAngleRight}
            size="xl"
            style={{ maxWidth: "12px" }}
          />
        </div>
        <Divider />
      </div>
    </div>
  );
}