104 lines
3.6 KiB
React
104 lines
3.6 KiB
React
|
"use client";
|
||
|
|
import React, { useState, useRef, useMemo } from "react";
|
||
|
|
import { Tabs, Swiper } from "antd-mobile";
|
||
|
|
import AllSpaceMember from "./components/AllSpaceMember";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { faAngleLeft, faSearch } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
||
|
|
import styles from "./index.module.scss";
|
||
|
|
import IronfanSpaceMember from "./components/IronfanSpaceMember";
|
||
|
|
import SuperFanSpaceMember from "./components/SuperFanSpaceMember";
|
||
|
|
const tabItems = [
|
||
|
|
{ key: "all", title: "全部成员" },
|
||
|
|
{ key: "ironFan", title: "空间铁粉" },
|
||
|
|
{ key: "superFan", title: "空间超粉" },
|
||
|
|
];
|
||
|
|
export default function SpaceMember() {
|
||
|
|
const swiperRef = useRef(null);
|
||
|
|
const router = useRouter();
|
||
|
|
const params = useSearchParams();
|
||
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
||
|
|
const zid = Number(params.get("zid"));
|
||
|
|
const allSpaceMember = useMemo(
|
||
|
|
() => <AllSpaceMember zid={zid} currentIndex={activeIndex} />,
|
||
|
|
[activeIndex]
|
||
|
|
);
|
||
|
|
const ironfanSpaceMember = useMemo(
|
||
|
|
() => <IronfanSpaceMember zid={zid} currentIndex={activeIndex} />,
|
||
|
|
[activeIndex]
|
||
|
|
);
|
||
|
|
const superFanSpaceMember = useMemo(
|
||
|
|
() => <SuperFanSpaceMember zid={zid} currentIndex={activeIndex} />,
|
||
|
|
[activeIndex]
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="p-4 fixed top-0 z-10 w-full flex justify-between items-center bg-black">
|
||
|
|
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faAngleLeft}
|
||
|
|
style={{ maxWidth: "12px" }}
|
||
|
|
size="xl"
|
||
|
|
onClick={() => {
|
||
|
|
router.back();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<p className="text-base text-center leading-9">空间成员</p>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faSearch}
|
||
|
|
style={{ maxWidth: "17px" }}
|
||
|
|
size="lg"
|
||
|
|
onClick={() => router.push("spaceSearch")}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Tabs
|
||
|
|
style={{ "--active-title-color": "#fff", position: "sticky" }}
|
||
|
|
className={`w-full bg-black text-[#ffffff40] sticky top-14 z-40 ${styles.customTabs} `}
|
||
|
|
activeKey={tabItems[activeIndex].key}
|
||
|
|
onChange={(key) => {
|
||
|
|
const index = tabItems.findIndex((item) => item.key === key);
|
||
|
|
setActiveIndex(index);
|
||
|
|
swiperRef.current?.swipeTo(index);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{tabItems.map((item) => (
|
||
|
|
<Tabs.Tab destroyOnClose={true} title={item.title} key={item.key} />
|
||
|
|
))}
|
||
|
|
</Tabs>
|
||
|
|
<div className="pt-16 p-4 flex flex-col justify-center items-center">
|
||
|
|
<Swiper
|
||
|
|
direction="horizontal"
|
||
|
|
loop
|
||
|
|
indicator={() => null}
|
||
|
|
ref={swiperRef}
|
||
|
|
defaultIndex={activeIndex}
|
||
|
|
onIndexChange={(index) => {
|
||
|
|
setActiveIndex(index);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Swiper.Item
|
||
|
|
className={`${activeIndex == 0 ? "" : "absolute"} min-h-screen`}
|
||
|
|
>
|
||
|
|
{allSpaceMember}
|
||
|
|
</Swiper.Item>
|
||
|
|
<Swiper.Item
|
||
|
|
className={`${activeIndex == 1 ? "" : "absolute"} min-h-screen`}
|
||
|
|
>
|
||
|
|
{ironfanSpaceMember}
|
||
|
|
</Swiper.Item>
|
||
|
|
<Swiper.Item
|
||
|
|
className={`${activeIndex == 2 ? "" : "absolute"} min-h-screen`}
|
||
|
|
>
|
||
|
|
{superFanSpaceMember}
|
||
|
|
</Swiper.Item>
|
||
|
|
|
||
|
|
{/* <Swiper.Item>{activeIndex == 0 && allSpaceMember}</Swiper.Item>
|
||
|
|
<Swiper.Item>{activeIndex == 1 && ironfanSpaceMember}</Swiper.Item>
|
||
|
|
<Swiper.Item>{activeIndex == 2 && superFanSpaceMember}</Swiper.Item> */}
|
||
|
|
</Swiper>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|