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

"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";
import pinkline from "@/public/images/pinkline.png";
import ID from "@/public/images/ID.png";
import tiefen from "@/public/images/tiefen.png";
import wechat from "@/public/images/wechat.png";
import { Toast } from "antd-mobile";
import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto";
import copy from "@/utils/copy";
import { setCookie } from "cookies-next";
import Link from "next/link";

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

  //将主播链接复制到剪贴板，并存cookie
  const copyAndSetCookieInviter = () => {
    setCookie("inviter", data?.streamer_ext?.user_id);
    copy(
      `【${data?.streamer_ext?.name}】『ID：${data?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/zone/${data?.streamer_ext?.user_id}`
    );
  };

  return (
    <section className="flex flex-col flex-1 container">
      <div className="flex absolute top-0 left-0 w-full h-64 overflow-hidden">
        <img
          src={data?.streamer_ext?.cover?.images[0]?.urls[0]}
          alt=""
          className="w-full object-cover opacity-30"
        />
      </div>
      <div className="flex flex-row items-center gap-3 px-6 pt-12 z-10">
        <div className="flex w-[4.6rem] aspect-square rounded-full border-2 border-white overflow-hidden">
          <img
            src={data?.streamer_ext?.avatar?.images[0]?.urls[0]}
            alt=""
            className="w-full object-cover"
          />
        </div>
        <div className="flex flex-col gap-1">
          <p className="text-white font-medium text-[22px] w-64 truncate">
            {data?.streamer_ext?.name}
          </p>
          <div className="flex flex-row">
            <div className="flex flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
              <Image src={ID} alt="" className="w-4" />
              <p className="text-white text-xs font-medium ml-0.5">
                {data?.streamer_ext?.user_id}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-row justify-around p-6 z-10">
        <div className="flex flex-col items-center">
          <p className="text-white text-2xl font-medium">
            {data?.zone_moment_count}
          </p>
          <p className="text-white text-sm font-medium">动态</p>
        </div>
        <div className="flex flex-col items-center">
          <p className="text-white text-2xl font-medium">{data?.image_count}</p>
          <p className="text-white text-sm font-medium">照片</p>
        </div>
        <div className="flex flex-col items-center">
          <p className="text-white text-2xl font-medium">{data?.video_count}</p>
          <p className="text-white text-sm font-medium">视频</p>
        </div>
      </div>
      <div className="flex flex-col w-full rounded-t-3xl bg-[#07050A] p-6 pb-0 z-10">
        <div className="flex">
          <div className="relative">
            <p className="text-lg text-white font-medium">空间介绍</p>
            <Image
              src={pinkline}
              alt=""
              className="absolute w-9 bottom-0 -right-2"
            />
          </div>
        </div>
      </div>
      <div className="flex flex-col w-full bg-[#07050A] px-6 pt-3 z-10">
        <p className="text-white text-base">{data?.profile}</p>
        <div className="flex flex-row flex-wrap mt-2 justify-between gap-1">
          {data?.streamer_ext?.album?.images?.map((item, index) => {
            if (index > 2) return;
            return (
              <div
                key={index}
                className="flex flex-1 aspect-square overflow-hidden rounded"
              >
                <img
                  src={item?.urls[0]}
                  alt=""
                  className="w-full object-cover"
                />
              </div>
            );
          })}
        </div>
      </div>
      <div className="flex flex-row justify-around px-6 pt-6 z-10">
        <div
          className="flex flex-row items-center gap-1 cursor-pointer"
          onClick={() => document.getElementById("comfirm_modal").showModal()}
        >
          <Image src={tiefen} alt="" className="w-5" />
          <p className="text-white text-sm font-meidum">查看更多内容</p>
        </div>
        <div
          className="flex flex-row items-center gap-1 cursor-pointer"
          onClick={() => document.getElementById("comfirm_modal").showModal()}
        >
          <Image src={wechat} alt="" className="w-5" />
          <p className="text-white text-sm font-meidum">解锁Ta的微信</p>
        </div>
      </div>
      <div className="px-6 pt-6">
        <div
          className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-full"
          onClick={() => {
            copyAndSetCookieInviter();
            document.getElementById("comfirm_modal").showModal();
          }}
        >
          立即加入
        </div>
      </div>
      <div className="flex flex-col w-full bg-[#07050A] p-6 pb-0 z-10">
        <div className="flex">
          <div className="relative">
            <p className="text-lg text-white font-medium">加入须知</p>
            <Image
              src={pinkline}
              alt=""
              className="absolute w-9 bottom-0 -right-2"
            />
          </div>
        </div>
      </div>
      <div className="flex flex-col w-full bg-[#07050A] px-6 pt-3 z-10 gap-1">
        <p className="text-white text-base">
          1、加入后，您可以查看空间内相关内容；
        </p>
        <p className="text-white text-base">
          2、本空间由空间主人自行创建，加入空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗；
        </p>
        <p className="text-white text-base">
          3、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。
        </p>
      </div>
      <dialog id="comfirm_modal" className="modal">
        <div className="modal-box bg-[#17161A]">
          <p className="text-white text-base font-medium">
            {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
          </p>
          <div className="flex flex-row mt-4">
            <Link
              className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2"
              href="/"
            >
              <p className="text-white text-base ml-1">确认</p>
            </Link>
            <form method="dialog" className="flex flex-row flex-1 mx-2">
              <button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
                <p className="text-secondary text-base ml-1">取消</p>
              </button>
            </form>
          </div>
        </div>
      </dialog>
    </section>
  );
}