361 lines
11 KiB
JavaScript
361 lines
11 KiB
JavaScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useEffect, useRef, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
Image,
|
|||
|
|
Swiper,
|
|||
|
|
Divider,
|
|||
|
|
ImageViewer,
|
|||
|
|
Popover,
|
|||
|
|
Toast,
|
|||
|
|
} from "antd-mobile";
|
|||
|
|
import { useRouter, useParams } from "next/navigation";
|
|||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
|
|
import {
|
|||
|
|
faAngleLeft,
|
|||
|
|
faAngleRight,
|
|||
|
|
faEllipsisVertical,
|
|||
|
|
faCopy,
|
|||
|
|
faWarning,
|
|||
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|||
|
|
import require from "@/utils/require";
|
|||
|
|
import AddWeChat from "@/components/AddWeChat";
|
|||
|
|
import { handleFollow, checkRelation } from "@/api/public";
|
|||
|
|
import { get } from "@/utils/storeInfo";
|
|||
|
|
// import * as Clipboard from "expo-clipboard";
|
|||
|
|
export default function PersonSpace() {
|
|||
|
|
const { mid } = useParams();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const [streamerInfo, setStreamerInfo] = useState(null);
|
|||
|
|
const [spaceData, setSpaceData] = useState(null);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [visible, setVisible] = useState(false);
|
|||
|
|
const [isFollow, setIsFollow] = useState(false);
|
|||
|
|
// 获取屏幕高度
|
|||
|
|
// const scrollHeight = 600;
|
|||
|
|
const photos = [
|
|||
|
|
{ url: "https://picsum.photos/seed/picsum/200/300", type: "video" },
|
|||
|
|
{ url: "https://picsum.photos/seed/picsum/200/300", type: "img" },
|
|||
|
|
];
|
|||
|
|
useEffect(() => {
|
|||
|
|
getStreamerInfo();
|
|||
|
|
getSpaceData();
|
|||
|
|
getRelationData();
|
|||
|
|
}, []);
|
|||
|
|
const showPhotos = (photos, index) => {
|
|||
|
|
ImageViewer.Multi.show({
|
|||
|
|
images: photos.map((item) => item.url),
|
|||
|
|
defaultIndex: index,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const getStreamerInfo = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const data = await require("POST", "/api/streamer/list_ext_by_mid", {
|
|||
|
|
body: {
|
|||
|
|
mid: Number(mid),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
if (data.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: data.msg,
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setStreamerInfo({
|
|||
|
|
...data.data,
|
|||
|
|
});
|
|||
|
|
setLoading(false);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const getSpaceData = async () => {
|
|||
|
|
try {
|
|||
|
|
const data = await require("POST", "/api/zone/list_by_mid", {
|
|||
|
|
body: {
|
|||
|
|
mid: Number(mid),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
if (data.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: data.msg,
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSpaceData(data.data.list[0]);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const getRelationData = async () => {
|
|||
|
|
const account = get("account");
|
|||
|
|
const subMid = account.mid;
|
|||
|
|
const objMid = Number(mid);
|
|||
|
|
const temIsFollowed = await checkRelation(subMid, objMid, 0);
|
|||
|
|
setIsFollow(temIsFollowed);
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
<div className="">
|
|||
|
|
<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}
|
|||
|
|
size="xl"
|
|||
|
|
onClick={() => {
|
|||
|
|
router.back();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<Popover
|
|||
|
|
content={
|
|||
|
|
<div
|
|||
|
|
className="text-black"
|
|||
|
|
onClick={() => {
|
|||
|
|
router.push("messageDetail");
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<FontAwesomeIcon
|
|||
|
|
icon={faWarning}
|
|||
|
|
// size="xl"
|
|||
|
|
|
|||
|
|
color="#3B69B8"
|
|||
|
|
className="mr-2"
|
|||
|
|
/>
|
|||
|
|
<span>举报</span>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
trigger="click"
|
|||
|
|
placement="left"
|
|||
|
|
>
|
|||
|
|
<FontAwesomeIcon
|
|||
|
|
icon={faEllipsisVertical}
|
|||
|
|
size="xl"
|
|||
|
|
onClick={() => {
|
|||
|
|
// router.back();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Popover>
|
|||
|
|
</div>
|
|||
|
|
{/* 内容 */}
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<Swiper
|
|||
|
|
autoplay
|
|||
|
|
loop
|
|||
|
|
indicatorProps={{
|
|||
|
|
style: {
|
|||
|
|
"--dot-color": "#FF669E30",
|
|||
|
|
"--active-dot-color": "#FF669E",
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{photos.map((photo, index) => (
|
|||
|
|
<Swiper.Item key={index}>
|
|||
|
|
<div
|
|||
|
|
className="relative min-w-max"
|
|||
|
|
key={index}
|
|||
|
|
onClick={() => {
|
|||
|
|
showPhotos(photos, index);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
className="h-12 w-full"
|
|||
|
|
fit="cover"
|
|||
|
|
height={320}
|
|||
|
|
src={photo.url}
|
|||
|
|
// onClick={() => {
|
|||
|
|
// Toast.show(`你点击了卡片 ${index + 1}`);
|
|||
|
|
// }}
|
|||
|
|
/>
|
|||
|
|
{photo.type == "video" && (
|
|||
|
|
<div className="absolute top-0 w-full h-full flex justify-center items-center bg-[#33333348]">
|
|||
|
|
<Image
|
|||
|
|
className=""
|
|||
|
|
width={98}
|
|||
|
|
height={98}
|
|||
|
|
src="/icons/play.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Swiper.Item>
|
|||
|
|
))}
|
|||
|
|
</Swiper>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 pb-24">
|
|||
|
|
<div>
|
|||
|
|
<div className="mb-2">
|
|||
|
|
<div className="flex items-center mb-2">
|
|||
|
|
<p className="text-2xl mr-2">
|
|||
|
|
{streamerInfo?.streamer_ext?.name}
|
|||
|
|
</p>
|
|||
|
|
<div className="w-5 h-5">
|
|||
|
|
<Image src="/icons/verification.png" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ul className="flex">
|
|||
|
|
{streamerInfo?.streamer_ext?.tag.map((item, index) => (
|
|||
|
|
<li
|
|||
|
|
key={index}
|
|||
|
|
className="rounded-md bg-primary mr-2 px-2 py-1 text-xs mb-1"
|
|||
|
|
>
|
|||
|
|
{item}
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<ul className="flex mb-1">
|
|||
|
|
<li className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1">
|
|||
|
|
<Image
|
|||
|
|
src="/icons/info/ID.png"
|
|||
|
|
width={14}
|
|||
|
|
height={14}
|
|||
|
|
className="w-4 h-full mr-1"
|
|||
|
|
/>
|
|||
|
|
<span>{streamerInfo?.streamer_ext?.user_id}</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>
|
|||
|
|
<span className="text-[#ffffff88]">个性签名｜</span>
|
|||
|
|
{streamerInfo?.streamer_ext?.bio}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Divider />
|
|||
|
|
<div>
|
|||
|
|
<div onClick={() => router.push("/space/"+mid)}>
|
|||
|
|
<div className="flex justify-between items-center mb-2">
|
|||
|
|
<span className="font-bold text-base">空间动态</span>
|
|||
|
|
<div className="h-4 text-xs text-[#ffffff88]">
|
|||
|
|
<span className="mr-2">
|
|||
|
|
查看{spaceData?.zone_moment_count}条
|
|||
|
|
</span>
|
|||
|
|
<FontAwesomeIcon
|
|||
|
|
icon={faAngleRight}
|
|||
|
|
size="xl"
|
|||
|
|
className="h-4"
|
|||
|
|
onClick={() => {
|
|||
|
|
router.back();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex ">
|
|||
|
|
{spaceData?.previews?.images.map((item, index) => (
|
|||
|
|
<div
|
|||
|
|
key={item.id}
|
|||
|
|
className="w-20 h-20 overflow-hidden rounded"
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
width="20vw"
|
|||
|
|
height="20vw"
|
|||
|
|
className={`rounded mr-2 ${!!index && "imageBlur"}`}
|
|||
|
|
fit="cover"
|
|||
|
|
src={item.urls[0]}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{streamerInfo?.streamer_ext?.platforms && (
|
|||
|
|
<>
|
|||
|
|
<Divider />
|
|||
|
|
<div>
|
|||
|
|
<p className="font-bold mb-2 text-base">来这找我玩</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li className="flex justify-between border-[1.5px] border-[#ffffff43] rounded-xl p-2 mb-2">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<Image
|
|||
|
|
height={32}
|
|||
|
|
width={32}
|
|||
|
|
className="mr-2"
|
|||
|
|
src="/images/platform_wechat.png"
|
|||
|
|
/>
|
|||
|
|
<div className="text-base">
|
|||
|
|
<span>微信：</span>
|
|||
|
|
<span>点击查看</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
{streamerInfo?.streamer_ext?.platforms?.map((item) => (
|
|||
|
|
<li
|
|||
|
|
key={item.id}
|
|||
|
|
className="flex justify-between border-[1.5px] border-[#ffffff43] rounded-xl p-2"
|
|||
|
|
>
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<Image
|
|||
|
|
height={32}
|
|||
|
|
width={32}
|
|||
|
|
className="mr-2"
|
|||
|
|
src="/images/platform_douyin.png"
|
|||
|
|
/>
|
|||
|
|
<div className="text-base">
|
|||
|
|
<span>{item?.link_name}：</span>
|
|||
|
|
<span>{item?.nickname}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex text-sm">
|
|||
|
|
<div
|
|||
|
|
className="flex items-center mr-6"
|
|||
|
|
// onClick={() => {
|
|||
|
|
// Clipboard.setStringAsync(item.url);
|
|||
|
|
// }}
|
|||
|
|
>
|
|||
|
|
<FontAwesomeIcon
|
|||
|
|
icon={faCopy}
|
|||
|
|
size="xl"
|
|||
|
|
className="h-3 mr-1"
|
|||
|
|
/>
|
|||
|
|
<span>复制</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<FontAwesomeIcon
|
|||
|
|
icon={faAngleRight}
|
|||
|
|
size="xl"
|
|||
|
|
className="h-3 mr-1"
|
|||
|
|
/>
|
|||
|
|
<span>前往</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between items-center px-4 py-4 fixed bottom-0 bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
|
|||
|
|
<div
|
|||
|
|
className="text-base bg-[#FFFFFF1A] py-1 px-6 rounded-full"
|
|||
|
|
onClick={() => handleFollow(isFollow, Number(mid), setIsFollow)}
|
|||
|
|
>
|
|||
|
|
{isFollow ? "已关注" : "关注"}
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className="bg-primary px-10 py-1 text-base rounded-full"
|
|||
|
|
onClick={() => setVisible(true)}
|
|||
|
|
>
|
|||
|
|
添加微信
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<AddWeChat
|
|||
|
|
visible={visible}
|
|||
|
|
closeMask={setVisible}
|
|||
|
|
price={streamerInfo?.streamer_ext?.wechat_coin_price}
|
|||
|
|
name={streamerInfo?.streamer_ext?.name}
|
|||
|
|
streamerMid={streamerInfo?.streamer_ext?.mid}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|