160 lines
5.0 KiB
JavaScript
160 lines
5.0 KiB
JavaScript
"use client";
|
||
|
||
import React, { useEffect, useState, useRef } from "react";
|
||
import { Image, Avatar, Divider, Dialog, Toast } from "antd-mobile";
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import {
|
||
faAngleLeft,
|
||
faAngleRight,
|
||
faCalendar,
|
||
} from "@fortawesome/free-solid-svg-icons";
|
||
export default function Setting() {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const [streamerInfo, setStreamerInfo] = useState(null);
|
||
const [showModal, setShowModal] = useState(false);
|
||
useEffect(() => {
|
||
let data = JSON.parse(decodeURIComponent(searchParams.get("data")));
|
||
setStreamerInfo(data);
|
||
}, []);
|
||
const handleShowVideo = () => {
|
||
Dialog.className = "videoMask";
|
||
Dialog.show({
|
||
title: "是否确认退出空间?",
|
||
content: (
|
||
<div className="flex flex-col gap-2">
|
||
一旦退出,您的空间成员身份将会被取消,若当前空间为付费空间,下次加入时,需要再次付费。请确保知晓以上内容后谨慎选择退出。
|
||
</div>
|
||
),
|
||
bodyStyle: {
|
||
// background: "none",
|
||
maxHeight: "none",
|
||
width: "80vw",
|
||
position: "absolute",
|
||
top: "calc(50% - 50px)",
|
||
left: "10vw",
|
||
},
|
||
actions: [
|
||
{
|
||
key: "submit",
|
||
text: "确定",
|
||
onClick: () => {
|
||
i;
|
||
},
|
||
},
|
||
{
|
||
key: "cancel",
|
||
text: "取消",
|
||
onClick: () => {},
|
||
},
|
||
],
|
||
});
|
||
};
|
||
return (
|
||
<div className="">
|
||
<div className="p-4 fixed top-0 z-10 w-full">
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
||
<FontAwesomeIcon
|
||
icon={faAngleLeft}
|
||
size="xl"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
</div>
|
||
<p className="text-base text-center leading-9">空间设置</p>
|
||
</div>
|
||
{/* 内容 */}
|
||
|
||
<div className="p-4 pt-20">
|
||
<div className="flex items-center">
|
||
<Avatar
|
||
rounded-full
|
||
mr-4
|
||
src={streamerInfo?.cover?.images[0]?.urls[0]}
|
||
className="mr-4"
|
||
style={{ "--size": "52px", "--border-radius": "50%" }}
|
||
/>
|
||
<div>
|
||
<p className="text-xl font-bold">{streamerInfo?.name}</p>
|
||
<ul className="flex">
|
||
<li className="h-4 mr-1 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
|
||
<Image
|
||
src="/icons/info/ID.png"
|
||
width={14}
|
||
height={14}
|
||
className="w-4 h-full mr-1"
|
||
placeholder=""
|
||
/>
|
||
<span>{streamerInfo?.user_id}</span>
|
||
</li>
|
||
<li className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
|
||
<FontAwesomeIcon
|
||
icon={faCalendar}
|
||
size="sm"
|
||
className="mr-1"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
<span>{streamerInfo?.user_id}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<ul className="mt-6">
|
||
<li>
|
||
<div
|
||
onClick={() => router.push("/share/" + streamerInfo.mid)}
|
||
className="flex justify-between"
|
||
>
|
||
<span className="text-base text-white">分享空间</span>
|
||
<FontAwesomeIcon
|
||
icon={faAngleRight}
|
||
size="xl"
|
||
className="mr-1"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
</div>
|
||
<Divider />
|
||
</li>
|
||
<li
|
||
onClick={async () => {
|
||
const result = await Dialog.confirm({
|
||
title: "是否确认退出空间?",
|
||
content: "一旦退出,您的空间成员身份将会被取消,若当前空间为付费空间,下次加入时,需要再次付费。请确保知晓以上内容后谨慎选择退出。",
|
||
bodyStyle: {
|
||
maxHeight: "none",
|
||
width: "80vw",
|
||
position: "fixed",
|
||
top: "200px",
|
||
left: "10vw",
|
||
},
|
||
});
|
||
if (result) {
|
||
Toast.show({ content: "点击了确认", position: "bottom" });
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex justify-between">
|
||
<span className="text-base text-white">退出空间</span>
|
||
<FontAwesomeIcon
|
||
icon={faAngleRight}
|
||
size="xl"
|
||
className="mr-1"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
</div>
|
||
<Divider />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|