tiefen_space_h5/app/space/share/[user_id]/page.jsx

"use client";

import React, { useState, useEffect } from "react";

import QRCode from "qrcode";
import { Toast, Image } from "antd-mobile";
import { useRouter, useParams } from "next/navigation";
import requireAPI from "@/utils/requireAPI";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { saveImage } from "@/utils/tools/handleFuns";
import clipboard from "copy-to-clipboard";
export default function Share() {
  //获取页面数据、生成二维码
  const [data, setData] = useState({});
  const [qrcodeUrl, setQrcodeUrl] = useState("");
  const [isFetching, setIsFetching] = useState(true);
  const router = useRouter();
  const { user_id } = useParams();
  useEffect(() => {
    const getData = async () => {
      try {
        const data = await requireAPI(
          "POST",
          "/api/streamer/list_ext_by_user_id",
          {
            body: { user_id: parseInt(user_id, 10) },
          }
        );
        if (data.ret === -1) {
          Toast.show({
            content: data.msg,
          });
          return;
        }
        setData(data.data.streamer_ext);
        QRCode.toDataURL(
          `https://tiefen.fun/zone/${user_id}`,
          function (err, url) {
            setQrcodeUrl(url);
          }
        );
        setIsFetching(false);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

  //分享海报组件
  const Poster = () => {
    return (
      <div className="flex flex-col">
        <div id="print" className="flex flex-col overflow-hidden bg-[#07050A]">
          <div className="flex w-full justify-center items-center aspect-square overflow-hidden mb-4">
            <img
              className="w-full"
              src={data?.cover?.images[0].urls[0]}
              alt=""
            />
          </div>
          <div className="flex flex-row items-center w-full p-2 bg-[#07050A]">
            <div className="flex flex-col justify-around items-start shrink min-w-0">
              <div className="flex flex-row items-center w-full">
                <div className="flex items-center justify-center shrink-0 rounded-full overflow-hidden aspect-square w-12 border border-white">
                  <img
                    className="w-full"
                    src={data?.avatar?.images[0].urls[0]}
                    alt=""
                  />
                </div>
                <div className="flex flex-col ml-2 shrink min-w-0">
                  <p className="font-medium text-base text-white truncate">
                    {data?.name}
                  </p>
                  <div className="flex justify-start flex-1">
                    <div className="flex flex-row items-center py-0.5 px-2 bg-[#FFFFFF1A] rounded-full">
                      <p className="text-xs text-white font-medium">ID</p>
                      <p className="text-white text-xs font-medium ml-0.5">
                        {data?.user_id}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex flex-col px-2 py-1 mt-2 bg-[#FF61B030] rounded-full justify-center">
                <p className="text-xs text-[#FF669E] rounded-full text-center">
                  邀您加入我的
                  <span className="text-xs text-[#FF669E] font-semibold">
                    「铁粉空间」
                  </span>
                </p>
              </div>
              <div className="py-1 text-xs flex flex-wrap items-center ">
                <div className="flex items-center flex-nowrap">
                  <img
                    className="object-cover scale-110 w-3 mr-1"
                    src="/images/icon_without_bg.png"
                  />
                  <span className="whitespace-nowrap">铁粉空间</span>
                </div>
                <span className="text-[#ffffff80] whitespace-nowrap">
                  |官网:tiefen.fun
                </span>
              </div>
            </div>
            <div className="h-24 aspect-square ml-auto overflow-hidden rounded shrink-0">
              <img className="object-cover scale-110 w-full" src={qrcodeUrl} />
            </div>
          </div>
        </div>
        <button
          onClick={() => saveImage("print")}
          className="btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
        >
          保存图片
        </button>
        <button
          onClick={copyUrl}
          className="btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
        >
          复制链接
        </button>
      </div>
    );
  };

  //复制链接
  const copyUrl = () => {
    clipboard(`https://tiefen.fun/zone/${user_id}`);
    Toast.show({
      icon: "success",
      content: "已复制到剪贴板",
      position: "top",
    });
  };

  if (isFetching) {
    return (
      <section className="flex flex-1 justify-center container">
        <span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
      </section>
    );
  }

  return (
    <div>
      <div className="flex justify-between items-center p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
      </div>
      {/* 内容 */}
      <section className="mt-20 flex flex-1 flex-col items-center justify-center container">
        <div className="w-4/5">
          <Poster />
        </div>
      </section>
    </div>
  );
}