267 lines
9.1 KiB
JavaScript
267 lines
9.1 KiB
JavaScript
"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>
|
||
);
|
||
}
|