tiefen_space_h5/app/page.js

"use client";

import React, {
  useEffect,
  useRef,
  useState,
  useImperativeHandle,
  forwardRef,
} from "react";
import {
  Tabs,
  Swiper,
  PullToRefresh,
  Toast,
  InfiniteScroll,
  List,
  Image,
} from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRefresh } from "@fortawesome/free-solid-svg-icons";
import PostItem from "../components/PostItem";
import { sleep } from "antd-mobile/es/utils/sleep";
import "./index.css";
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
import Link from "next/link";
import require from "@/utils/require";
import Empty from "@/components/Empty";
const variables = {
  "@active-line-color": "#f00", // 将主题色改为红色
};
const tabItems = [
  { key: "commend", title: "推荐" },
  { key: "follow", title: "关注" },
];

// const scrollHeight = 700;
// const scrollHeight = window.innerHeight-126
export default function Home() {
  const recommPostRef = useRef();
  const followPostRef = useRef();
  const swiperRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [data, setData] = useState([]);

  const [scrollHeight, setScrollHeight] = useState(0);
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    setScrollHeight(window.innerHeight - 57);
    // getData(0)
  }, []);
  const childrenFunc = () => {
    if (!activeIndex) {
      recommPostRef.current?.doRefresh();
    } else {
      followPostRef.current?.doRefresh();
    }
  };
  return (
    <div
      className="overflow-x-hidden"
      style={{ maxHeight: `${scrollHeight}px` }}
    >
      <div className="flex justify-between items-center px-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
              destroyOnClose={true}
              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
        direction="horizontal"
        loop={false}
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          {!activeIndex && (
            <RecommPostList scrollHeight={scrollHeight} ref={recommPostRef} />
          )}
        </Swiper.Item>
        <Swiper.Item>
          {activeIndex && (
            <FollowPostList scrollHeight={scrollHeight} ref={followPostRef} />
          )}
        </Swiper.Item>
      </Swiper>
      <div
        id="rightddd"
        className={`fixed bottom-[96px] right-4 z-[999] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
        }`}
        onClick={childrenFunc}
      >
        <FontAwesomeIcon icon={faRefresh} size="xl" />
      </div>
    </div>
  );
}
const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
  const [loading, setLoading] = useState(true);
  const [hasMore, setHasMore] = useState(true);
  const [commenPostList, setCommenPostList] = useState([]);
  useEffect(() => {
    getRecommPostList(2).then((res) => {
      setCommenPostList(res);
    });
  }, []);
  useImperativeHandle(
    ref,
    () => {
      return { doRefresh };
    },
    []
  );
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    const list = await getRecommPostList(1);
    setCommenPostList(list);
    setHasMore(true)
  }
  async function loadMore() {
    const list = await getRecommPostList(0);
    if (list.length == 0) {
      setHasMore(false);
    }
    setCommenPostList([...commenPostList, ...list]);
  }
  const getRecommPostList = async (type = 2) => {
    setLoading(true);
    const data = await require("POST", "/api/moment/recomm_list", {
      body: { op_type: type },
    });
    setLoading(false);
    if (data.ret == -1) {
      Toast.show({
        icon: "fail",
        content: data.msg,
        position: "top",
      });
    } else {
      return data.data.recomm_list;
    }
  };
  return (
    <div className="px-4 pb-8">
      <List>
        {loading && (
          <div>
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
          </div>
        )}
        {commenPostList.map((item) => (
          <List.Item key={item.id} className="!p-0">
            <PostItem type="post" data={item} />
          </List.Item>
        ))}
        {commenPostList.length == 0 && (
          <div
            className={`flex flex-col items-center justify-center`}
            style={{ height: `${scrollHeight}px` }}
          >
            <Empty type="nodata" />
          </div>
        )}
      </List>
      {!!commenPostList.length && (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      )}
    </div>
  );
});
const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(false);
  const [followPostList, setFollowPostList] = useState([]);
  const [currentTime, setCurrentTime] = useState();
  const [offset, setOffset] = useState(0);
  useEffect(() => {
    getFollowPostList().then((res) => {
      setFollowPostList(res);
    });
  }, []);
  useImperativeHandle(
    ref,
    () => {
      return { doRefresh };
    },
    []
  );
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    // getRecommPostList(1);
    const list = await getFollowPostList(1);
    setFollowPostList(list);
  }
  async function loadMore() {
    const list = await getFollowPostList();
    const newList = [...followPostList, ...list];
    setOffset(newList.length / 4);
    setFollowPostList(newList);
  }
  const getFollowPostList = async () => {
    setLoading(true);
    setCurrentTime(Math.floor(new Date().getTime() / 1000));
    const data = await require("POST", "/api/account_relation/list_follow", {
      body: { offset, limit: 4 },
    }, true);
    setHasMore(data.data.list.length > 0);
    if (data.data.list.length > 0) {
      //查关注主播展示资料
      const followsResponse =
        await require("POST", "/api/moment/list_by_mids", {
          body: {
            offset,
            limit: 4,
            ct_upper_bound: currentTime,
            mids: data.data.list.map((item) => item.obj_mid),
          },
        });
      setLoading(false);
      if (data.ret == -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
      } else {
        return followsResponse.data.list;
      }
    } else {
      setLoading(false);
    }
  };
  return (
    <div className="px-4 pb-8">
      {/* <PullToRefresh onRefresh={doRefresh}> */}
      <List>
        {loading && (
          <div className="my-[31px]">
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
          </div>
        )}
        {followPostList.map((item, index) => (
          <List.Item key={item.id + "_" + index} className="!p-0">
            <PostItem type="post" data={item} />
          </List.Item>
        ))}
        {followPostList.length == 0 && (
          <div
            className={`flex flex-col items-center justify-center`}
            style={{ height: `${scrollHeight}px` }}
          >
            <Empty type="nodata" />
          </div>
        )}
      </List>
      {!!followPostList.length && (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      )}
      {/* </PullToRefresh> */}
    </div>
  );
});