tiefen_space_h5/app/space/page.js

"use client";

import React, { useEffect, useRef, useState } from "react";
import { Tabs, Swiper, Toast, Image, List, InfiniteScroll } from "antd-mobile";
import PostItem from "@/components/PostItem";
import { sleep } from "antd-mobile/es/utils/sleep";
import "./index.css";
import Link from "next/link";
import BottomNav from "@/components/BottomNav";
import Empty from "@/components/Empty";
import { useRouter } from "next/navigation";
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
const variables = {
  "@active-line-color": "#f00", // 将主题色改为红色
};
const tabItems = [
  { key: "space", title: "空间" },
  { key: "post", title: "动态" },
];
let count = 0;
// const scrollHeight = 700;
// const scrollHeight = window.innerHeight-126
export default function Space() {
  const swiperRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [scrollHeight, setScrollHeight] = useState(0);

  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    setScrollHeight(window.innerHeight - 126);
    // const handleResize = () => {
    //   setScrollHeight(window.innerHeight - 126);
    // };
    // window.addEventListener("resize", handleResize);
    // return () => {
    //   // window.removeEventListener("resize", handleResize);
    // };
  }, []);
  async function mockRequest() {
    if (count >= 5) {
      return [];
    }
    await sleep(2000);
    count++;
    return [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
    ];
  }
  async function doRefresh() {
    await sleep(1000);
    Toast.show({
      icon: "fail",
      content: "刷新失败",
    });
    throw new Error("刷新失败");
  }
  async function loadMore() {
    const append = await mockRequest();
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }
  return (
    <main className="h-screen">
      <div className="flex justify-between items-center p-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
        <Tabs
          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
              forceRender={false}
              title={item.title}
              key={item.key}
              className="text-left"
            />
          ))}
        </Tabs>
        <Link
          href="search"
          className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
        >
          <Image src="/icons/search.png" />
        </Link>
      </div>
      <Swiper
        className="overflow-visible"
        direction="horizontal"
        loop
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          <ul className="grid grid-cols-2 gap-2 py-2 px-4">
            <li>
              <VisitingCard />
            </li>
            <li>
              <VisitingCard />
            </li>
            <li>
              <VisitingCard />
            </li>
          </ul>
          <div
            className={`flex flex-col items-center justify-center`}
            style={{ height: `${scrollHeight}px` }}
          >
            <Empty type="nospace" />
            <div className="flex flex-col mt-6">
              <Link
                href="/search"
                className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white"
              >
                搜索空间
              </Link>
              <Link
                href="/search"
                className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white mt-2"
              >
                查看推荐
              </Link>
            </div>
          </div>
        </Swiper.Item>
        <Swiper.Item>
          <div className=" py-2 px-4">
            <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",
                    },
                  ]}
                />
              </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>
            <div
              className={`flex flex-col items-center justify-center`}
              style={{ height: `${scrollHeight}px` }}
            >
              <Empty type="nodata" />
            </div>
          </div>
        </Swiper.Item>
      </Swiper>
    </main>
  );
}

const VisitingCard = () => {
  const router = useRouter();
  return (
    <div
      className="relative h-60"
      onClick={() => router.push("/space/person_space")}
    >
      <Image
        src="/images/space_new.png"
        width={78}
        fit="contain"
        className="absolute top-2 right-2"
      />
      <Image
        width={"100%"}
        height={"100%"}
        src="https://picsum.photos/seed/picsum/200/300"
        className="rounded-lg"
      />
      <div className="absolute bottom-0 left-0 w-full px-2 py-3 bg-[#1b1b1b] flex items-center rounded-b-lg">
        <span className="font-bold">洋洋不是洋妞</span>
        <ul className="ml-2">
          <li className="text-[10px] bg-primary rounded px-1 mr-1">付费</li>
        </ul>
      </div>
    </div>
  );
};