93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { Mask, Image } from "antd-mobile";
|
|
import { getStreamer } from "@/api/streamer";
|
|
import { useRouter } from "next/navigation";
|
|
import { connect } from "react-redux";
|
|
import { changeInviter } from "@/store/actions";
|
|
function StreamerNavigator({ userId, changeInviter }) {
|
|
const [streamerInfo, setStreamerInfo] = useState(null);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
userId &&
|
|
getStreamer(userId).then((res) => {
|
|
setStreamerInfo(res);
|
|
});
|
|
}, []);
|
|
const handleCloseMask = () => {
|
|
changeInviter(null);
|
|
setStreamerInfo(null);
|
|
};
|
|
return (
|
|
<Mask visible={!!streamerInfo} onMaskClick={handleCloseMask}>
|
|
<div className="fixed top-[20%] left-[12.5%] w-3/4 flex-1 justify-center items-center ">
|
|
<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?.zones?.length
|
|
? streamerInfo?.streamer_ext?.bio
|
|
: streamerInfo?.streamer_ext?.zones[0]?.profile}
|
|
</p>
|
|
<div
|
|
onClick={
|
|
streamerInfo?.streamer_ext?.zones?.length === 0
|
|
? () => {
|
|
handleCloseMask();
|
|
router.replace(
|
|
"/profile/" + streamerInfo?.streamer_ext?.mid
|
|
);
|
|
}
|
|
: () => {
|
|
handleCloseMask();
|
|
router.replace(
|
|
"/space/person_space_introduce/" +
|
|
streamerInfo?.streamer_ext?.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>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = ({ reducer }) => {
|
|
return {
|
|
userId: parseInt(reducer.inviter, 10),
|
|
};
|
|
};
|
|
const mapDispatchToProps = {
|
|
changeInviter,
|
|
};
|
|
export default connect(mapStateToProps, mapDispatchToProps)(StreamerNavigator);
|