538 lines
19 KiB
JavaScript
538 lines
19 KiB
JavaScript
"use client";
|
||
|
||
import React, { useEffect, useState, useRef } from "react";
|
||
import {
|
||
Image,
|
||
Mask,
|
||
FloatingPanel,
|
||
JumboTabs,
|
||
List,
|
||
InfiniteScroll,
|
||
ProgressBar,
|
||
} from "antd-mobile";
|
||
import { useRouter } from "next/navigation";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import {
|
||
faAngleLeft,
|
||
faRefresh,
|
||
} from "@fortawesome/free-solid-svg-icons";
|
||
import PostItem from "@/components/PostItem";
|
||
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
|
||
import Empty from "@/components/Empty";
|
||
const anchors = [
|
||
window.innerHeight - 280,
|
||
window.innerHeight - 280,
|
||
window.innerHeight - 60,
|
||
];
|
||
export default function PersonSpace() {
|
||
const router = useRouter();
|
||
const contentBox = useRef();
|
||
const [hasMore, setHasMore] = useState(true);
|
||
const [scrollHeight, setScrollHeight] = useState(0);
|
||
// 获取屏幕高度
|
||
// const scrollHeight = 600;
|
||
const photos = [
|
||
"https://picsum.photos/seed/picsum/200/300",
|
||
"https://picsum.photos/seed/picsum/200/300",
|
||
];
|
||
const [maskVisible, setMaskVisible] = useState({ visible: false, type: "" });
|
||
const [currentKey, setCurrentKey] = useState("all");
|
||
useEffect(() => {
|
||
setScrollHeight(window.innerHeight - 126);
|
||
if (contentBox.current) {
|
||
contentBox.current.style.transform = "translateY(-12px)";
|
||
// debugger
|
||
}
|
||
}, []);
|
||
async function loadMore() {
|
||
const append = await mockRequest();
|
||
setData((val) => [...val, ...append]);
|
||
setHasMore(append.length > 0);
|
||
}
|
||
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>
|
||
<Image width={42} height={42} src="/icons/setting.png" placeholder="" onClick={()=>router.push("setting")}/>
|
||
</div>
|
||
{/* 内容 */}
|
||
<div>
|
||
<div
|
||
className="bg-no-repeat bg-cover bg-fixed "
|
||
style={{
|
||
backgroundImage: "url('https://picsum.photos/seed/picsum/200/300')",
|
||
}}
|
||
>
|
||
<div className="px-4 pt-24 pb-8 bg-[#181818a9]">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center">
|
||
<Image
|
||
width="64px"
|
||
height="64px"
|
||
className="rounded-full mr-2 border-2 border-white"
|
||
fit="cover"
|
||
src="https://picsum.photos/seed/picsum/200/300"
|
||
/>
|
||
<div>
|
||
<p className="text-2xl mb-1 font-bold">草莓不可爱</p>
|
||
<div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1 w-max">
|
||
<Image
|
||
src="/icons/info/ID.png"
|
||
width={14}
|
||
className="w-4 h-full mr-1"
|
||
placeholder=""
|
||
/>
|
||
<span>213422</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="flex flex-col items-center"
|
||
// onClick={() => setMaskVisible(true)}
|
||
>
|
||
<p className="text-base px-3 py-1 rounded-full bg-primary">
|
||
分享
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<ul className="flex mt-8">
|
||
<li
|
||
className="flex flex-col items-center mr-6"
|
||
onClick={() =>
|
||
setMaskVisible({ visible: true, type: "weChat" })
|
||
}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/images/wechat.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">查看微信</p>
|
||
</li>
|
||
<li
|
||
className="flex flex-col items-center mr-6"
|
||
onClick={() =>
|
||
setMaskVisible({ visible: true, type: "ironFan" })
|
||
}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/icons/tiefen.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">已是铁粉</p>
|
||
<p className="text-[#ffffff54] text-[10px]">0/299</p>
|
||
</li>
|
||
<li
|
||
className="flex flex-col items-center mr-6"
|
||
onClick={() => setCurrentKey("chaofen")}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/icons/chaofen.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">尊贵超粉</p>
|
||
</li>
|
||
<li
|
||
className="flex flex-col items-center"
|
||
// onClick={() => setMaskVisible(true)}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/icons/report.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">举报</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<FloatingPanel anchors={anchors}>
|
||
<JumboTabs
|
||
onChange={(key) => setCurrentKey(key)}
|
||
activeKey={currentKey}
|
||
className="bg-deepBg"
|
||
>
|
||
<JumboTabs.Tab
|
||
title="全部"
|
||
key="all"
|
||
description={
|
||
currentKey == "all" && (
|
||
<div className="titlePinkLine relative w-full"></div>
|
||
)
|
||
}
|
||
destroyOnClose={true}
|
||
>
|
||
<List className="overflow-y-auto scrollbarBox_hidden">
|
||
<PostItemSkeleton />
|
||
<List.Item className="!p-0">
|
||
<PostItem
|
||
type="space"
|
||
photos={[
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "video",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
]}
|
||
/>
|
||
</List.Item>
|
||
<List.Item className="!p-0">
|
||
<PostItem
|
||
type="space"
|
||
photos={[
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
]}
|
||
/>
|
||
</List.Item>
|
||
<List.Item className="!p-0">
|
||
<PostItem
|
||
type="space"
|
||
photos={[
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
]}
|
||
/>
|
||
</List.Item>
|
||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||
</List>
|
||
</JumboTabs.Tab>
|
||
<JumboTabs.Tab
|
||
title="铁粉专享"
|
||
key="ironFan"
|
||
description={
|
||
currentKey == "ironFan" && (
|
||
<div className="titlePinkLine relative w-full"></div>
|
||
)
|
||
}
|
||
destroyOnClose={true}
|
||
>
|
||
<div
|
||
className={`flex flex-col items-center mt-20`}
|
||
style={{ height: `${scrollHeight}px` }}
|
||
>
|
||
<Empty type="nodata" />
|
||
</div>
|
||
</JumboTabs.Tab>
|
||
<JumboTabs.Tab
|
||
title="超粉专享"
|
||
key="chaofen"
|
||
description={
|
||
currentKey == "chaofen" && (
|
||
<div className="titlePinkLine relative w-full"></div>
|
||
)
|
||
}
|
||
destroyOnClose={true}
|
||
>
|
||
<List className="overflow-y-auto scrollbarBox_hidden">
|
||
<PostItemSkeleton />
|
||
<List.Item className="!p-0">
|
||
<PostItem
|
||
type="space"
|
||
photos={[
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "video",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "video",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "video",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
]}
|
||
/>
|
||
</List.Item>
|
||
<List.Item className="!p-0">
|
||
<PostItem
|
||
type="space"
|
||
photos={[
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
]}
|
||
/>
|
||
</List.Item>
|
||
<List.Item className="!p-0">
|
||
<PostItem
|
||
type="space"
|
||
photos={[
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
{
|
||
url: "https://picsum.photos/seed/picsum/200/300",
|
||
type: "img",
|
||
},
|
||
]}
|
||
/>
|
||
</List.Item>
|
||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||
</List>
|
||
</JumboTabs.Tab>
|
||
</JumboTabs>
|
||
</FloatingPanel>
|
||
<div className="fixed bottom-[96px] right-4 z-[999] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white animate-spin">
|
||
<FontAwesomeIcon
|
||
icon={faRefresh}
|
||
size="xl"
|
||
onClick={() => {
|
||
router.refresh();
|
||
}}
|
||
/>
|
||
</div>
|
||
<ul className="grid grid-cols-3 mt-8 px-4 py-2 fixed bottom-0 z-[999] bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
|
||
<li
|
||
className="flex flex-col items-center"
|
||
onClick={() => setMaskVisible({ visible: true, type: "weChat" })}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/images/wechat.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">查看微信</p>
|
||
</li>
|
||
<li
|
||
className="flex flex-col items-center"
|
||
onClick={() => setMaskVisible({ visible: true, type: "ironFan" })}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/icons/tiefen.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">已是铁粉</p>
|
||
{/* <p className="text-[#ffffff54] text-[10px]">0/299</p> */}
|
||
</li>
|
||
<li
|
||
className="flex flex-col items-center"
|
||
onClick={() => setCurrentKey("chaofen")}
|
||
>
|
||
<div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
|
||
<Image
|
||
src="/icons/chaofen.png"
|
||
width={22}
|
||
height={22}
|
||
className="w-4 h-full"
|
||
placeholder=""
|
||
/>
|
||
</div>
|
||
<p className="text-xs">尊贵超粉</p>
|
||
</li>
|
||
</ul>
|
||
<Mask visible={maskVisible.visible}>
|
||
<div>
|
||
<div
|
||
className="w-full h-screen flex justify-center items-center"
|
||
onClick={() => setMaskVisible({ visible: false, type: "" })}
|
||
></div>
|
||
<div className="w-full h-screen flex justify-center items-center absolute top-0 pointer-events-none">
|
||
<div className="relative w-[70vw] h-max flex flex-col justify-center items-center p-4 bg-[#261e30] rounded-2xl pointer-events-auto">
|
||
{maskVisible.type === "weChat" && <SeeWechat />}
|
||
{maskVisible.type === "ironFan" && (
|
||
<SeeTiefen
|
||
handleClick={() => {
|
||
setCurrentKey("ironFan");
|
||
setMaskVisible({ visible: false, type: "" });
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Mask>
|
||
{/* <div className="flex justify-center items-center px-4 py-4 fixed bottom-0 bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
|
||
<div className="bg-primary px-10 py-1 text-base rounded-full">
|
||
<div
|
||
className="flex items-center py-2 text-base"
|
||
onClick={() => {
|
||
router.push("/pay");
|
||
}}
|
||
>
|
||
<Image
|
||
width={18}
|
||
height={18}
|
||
placeholder=""
|
||
className="mr-2"
|
||
src="/icons/money_pink.png"
|
||
/>
|
||
<span>39.9元立即加入</span>
|
||
<FontAwesomeIcon
|
||
icon={faAngleRight}
|
||
size="xl"
|
||
className="h-4 ml-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const SeeTiefen = ({ closeMask, handleClick }) => {
|
||
return (
|
||
<div className="relative w-[70vw] h-max flex flex-col justify-center items-center p-4 bg-[#261e30] rounded-2xl pointer-events-auto">
|
||
<p className="text-base text-left w-full">
|
||
当前铁粉解锁进度：
|
||
<span className="text-2xl font-bold text-primary">50%</span>
|
||
</p>
|
||
<ProgressBar
|
||
percent={50}
|
||
style={{
|
||
"--fill-color": "#FF669E",
|
||
"--track-color": "#FF669E50",
|
||
}}
|
||
className="w-full mt-2 mb-4"
|
||
/>
|
||
<p className="text-left my-2 text-sm text-[#FFFFFF40]">
|
||
空间内累计消费达到￥1280即可成为
|
||
<span className="text-primary">铁粉</span>
|
||
，可查看所有铁粉专享内容哟，快来成为我的铁粉吧~
|
||
</p>
|
||
<div
|
||
className="px-8 py-2 rounded-full flex items-center mt-2 bg-gradient-to-r from-[#FF668B] to-[#FF66F0]"
|
||
onClick={handleClick}
|
||
>
|
||
<span className="text-base">查看铁粉专享内容</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
const SeeWechat = ({ closeMask }) => {
|
||
return (
|
||
<div className="relative w-[70vw] h-max flex flex-col justify-center items-center p-4 pt-10 bg-[#261e30] rounded-2xl pointer-events-auto">
|
||
<Image
|
||
src="https://picsum.photos/seed/picsum/200/300"
|
||
width={64}
|
||
height={64}
|
||
className="rounded-full absolute -top-8"
|
||
/>
|
||
<p className="text-2xl font-bold">草莓不可爱</p>
|
||
<div className="my-2 bg-[#FFFFFF1A] px-4 py-2 rounded-lg text-base">
|
||
解锁后展示
|
||
</div>
|
||
<p className="text-[red] text-center mb-2">
|
||
添加时请备注自己“铁粉空间”昵称
|
||
<br />
|
||
若解锁后72小时为通过好友，请联系客服
|
||
</p>
|
||
<div className="bg-primary px-4 py-2 rounded-full flex items-center">
|
||
<span className="text-[16px]">解锁微信（990金币）</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|