83 lines
2.8 KiB
React
83 lines
2.8 KiB
React
|
"use client";
|
||
|
|
import React, { useState, useRef, useMemo } from "react";
|
||
|
|
import { Tabs, Swiper } from "antd-mobile";
|
||
|
|
import AlreadyAddWechat from "./components/AlreadyAddWechat";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
||
|
|
import styles from "./index.module.scss";
|
||
|
|
import HaveNotAddWechat from "./components/HaveNotAddWechat";
|
||
|
|
const tabItems = [
|
||
|
|
{ key: "havenot", title: "待添加" },
|
||
|
|
{ key: "already", title: "已完成" },
|
||
|
|
];
|
||
|
|
export default function WechatWaitingToAdd() {
|
||
|
|
const swiperRef = useRef(null);
|
||
|
|
const router = useRouter();
|
||
|
|
const params = useSearchParams();
|
||
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
||
|
|
const zid = Number(params.get("zid"));
|
||
|
|
const already = useMemo(
|
||
|
|
() => <AlreadyAddWechat zid={zid} currentIndex={activeIndex} />,
|
||
|
|
[activeIndex]
|
||
|
|
);
|
||
|
|
const havenot = useMemo(
|
||
|
|
() => <HaveNotAddWechat zid={zid} currentIndex={activeIndex} />,
|
||
|
|
[activeIndex]
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="p-4 fixed top-0 z-10 w-full bg-black">
|
||
|
|
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faAngleLeft}
|
||
|
|
style={{ maxWidth: "12px" }}
|
||
|
|
size="xl"
|
||
|
|
onClick={() => {
|
||
|
|
router.back();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<p className="text-base text-center leading-9">待添加微信</p>
|
||
|
|
</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`}
|
||
|
|
>
|
||
|
|
{havenot}
|
||
|
|
</Swiper.Item>
|
||
|
|
<Swiper.Item
|
||
|
|
className={`${activeIndex == 1 ? "" : "absolute"} min-h-screen`}
|
||
|
|
>
|
||
|
|
{already}
|
||
|
|
</Swiper.Item>
|
||
|
|
</Swiper>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|