78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { Mask, Image,Button } from "antd-mobile";
|
|
import {getStreamer} from "@/api/streamer";
|
|
import { useRouter } from "next/navigation";
|
|
import {remove} from "@/utils/storeInfo"
|
|
export default function StreamerNavigator({
|
|
visible,
|
|
userId,
|
|
setVisible
|
|
}) {
|
|
const [streamerInfo,setStreamerInfo] = useState(null);
|
|
const router = useRouter();
|
|
|
|
useEffect(()=>{
|
|
getStreamer(userId).then(res=>{
|
|
setStreamerInfo(res);
|
|
})
|
|
},[])
|
|
const handleCloseMask = ()=>{
|
|
remove("inviter")
|
|
setVisible(false)
|
|
}
|
|
return (
|
|
<Mask visible={visible} onMaskClick={handleCloseMask}>
|
|
<div
|
|
className="fixed top-[12.5%] left-[12.5%] w-3/4 flex-1 justify-center items-center bg-[#00000080]"
|
|
|
|
>
|
|
<div
|
|
className="rounded-2xl bg-[#1E1C29] items-center overflow-hidden"
|
|
>
|
|
<div className="flex flex-col w-full">
|
|
<Image
|
|
src={streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0]}
|
|
fit="cover"
|
|
style={{ aspectRatio: 1}}
|
|
className="w-full"
|
|
/>
|
|
<div className="p-4">
|
|
<div className="flex flex-row items-center">
|
|
<p
|
|
className="text-xl text-white font-medium mr-1"
|
|
>
|
|
{streamerInfo?.streamer_ext?.name}
|
|
</p>
|
|
<div className="w-5 h-5">
|
|
<Image src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/verification.png"} />
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-[#FFFFFFB2] mt-1 truncate ">
|
|
{streamerInfo?.streamer_ext?.bio}
|
|
</p>
|
|
<div
|
|
onClick={
|
|
streamerInfo?.streamer_ext?.zones?.length === 0
|
|
? () => {
|
|
handleCloseMask();
|
|
router.push("/profile/"+streamerInfo?.mid);
|
|
}
|
|
: () => {
|
|
handleCloseMask();
|
|
router.push("/space/person_space_introduce/"+streamerInfo?.mid);
|
|
}
|
|
}
|
|
className="w-full p-2 mt-4 text-base rounded-full bg-[#FF669E] text-center"
|
|
>
|
|
{streamerInfo?.streamer_ext?.zones?.length === 0 ? "查看主页" : "查看空间"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Mask>
|
|
);
|
|
}
|