加入空间防ban网址

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

@@ -0,0 +1,266 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Toast, Modal } from "antd-mobile";
+import baseRequest from "@/utils/baseRequest";
+import { generateSignature } from "@/utils/crypto";
+import copy from "@/utils/copy";
+import { setCookie } from "cookies-next";
+import InOtherApp from "@/components/InOtherApp";
+import { useRouter } from "next/navigation";
+
+export default function Zone({ params }) {
+  const router = useRouter();
+
+  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 [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，并打开modal
+  const showModal = () => {
+    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}`
+    );
+    Modal.show(
+      deviceType === "ios"
+        ? {
+            showCloseButton: true,
+            closeOnAction: true,
+            actions: [
+              {
+                key: "download",
+                text: "前往下载",
+                primary: true,
+                onClick: () => router.push("/"),
+              },
+              {
+                key: "web",
+                text: "手机网页版",
+                onClick: () =>
+                  router.push(
+                    `https://app.tiefen.fun?inviter=${data?.streamer_ext?.user_id}`
+                  ),
+              },
+            ],
+            content: (
+              <div className="p-2">
+                <p className="text-white text-base font-medium">
+                  {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
+                </p>
+              </div>
+            ),
+          }
+        : {
+            showCloseButton: true,
+            closeOnAction: true,
+            actions: [
+              {
+                key: "download",
+                text: "前往下载",
+                primary: true,
+                onClick: () => router.push("/"),
+              },
+            ],
+            content: (
+              <div className="p-2">
+                <p className="text-white text-base font-medium">
+                  {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
+                </p>
+              </div>
+            ),
+          }
+    );
+  };
+
+  return (
+    <section className="flex flex-col flex-1 container">
+      <InOtherApp />
+      <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">
+              <img
+                src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/ID.png"}
+                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>
+            <img
+              src={
+                process.env.NEXT_PUBLIC_CDN_URL + "/public/images/pinkline.png"
+              }
+              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={showModal}
+        >
+          <img
+            src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/tiefen.png"}
+            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={showModal}
+        >
+          <img
+            src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/wechat.png"}
+            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={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>
+            <img
+              src={
+                process.env.NEXT_PUBLIC_CDN_URL + "/public/images/pinkline.png"
+              }
+              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 pb-12 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>
+    </section>
+  );
+}