tiefen_space_h5/app/space/setting/page.js

160 lines
5.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"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>
);
}