tiefen_space_h5/app/my/relationship/page.js

"use client";

import React, { useEffect, useState } from "react";
import {
  JumboTabs,
  List,
  InfiniteScroll,
  Avatar,
  Toast,
  DotLoading,
} from "antd-mobile";
// import { useRouter } from "next/navigation";
import { useRouter } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import styles from "./index.module.scss";
import { handleFollow } from "@/api/public";
import requireAPI from "@/utils/requireAPI";
import InfiniteScrollContent from "@/components/InfiniteScrollContent";
export default function Relationship() {
  const [currentKey, setCurrentKey] = useState("");
  const [hasMore, setHasMore] = useState(1);
  // const router = useRouter();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  // 获取屏幕高度
  const scrollHeight = 600;
  useEffect(() => {
    if (currentKey) {
      setOffset(0);
      setData([]);
      getData(currentKey, 0).then((res) => {
        setData(res);
      });
    }
  }, [currentKey]);
  useEffect(() => {
    const key = searchParams.get("key");
    key && setCurrentKey(key);
  }, [searchParams]);
  async function loadMore(key) {
    const append = await getData(key, offset);
    setData((val) => [...val, ...append]);
    // setHasMore(append.length > 0);
  }
  const getData = async (key, currentOffset) => {
    // api/account_relation/list_is_followed
    const followIds = await requireAPI(
      "POST",
      `/api/account_relation/${
        key == "follow" ? "list_follow" : "list_is_followed"
      }`,
      {
        body: { offset: currentOffset, limit: 12 },
      },
      true
    );
    if (followIds.ret === -1) {
      Toast.show({
        icon: "fail",
        content: data.msg,
        position: "top",
      });
      return;
    }
    setOffset(followIds.data.offset);
    setHasMore(followIds.data.more);
    if (!followIds.data.list.length) return [];
    const followsMids = followIds.data.list.map((item) => item.obj_mid);
    const streamers = await requireAPI(
      "POST",
      `/api${
        key == "follow"
          ? "/streamer/list_ext_by_mids"
          : "/account/list_others_by_mids"
      }`,
      {
        body: { mids: followsMids, offset: 0, limit: 12 },
      },
      true
    );
    if (streamers.ret === -1) {
      Toast.show({
        icon: "fail",
        content: data.msg,
        position: "top",
      });
      return;
    }
    const followsDataList = streamers.data.list.map((item) => ({
      ...item,
      isFollowed: true,
    }));
    return [...followsDataList];
    // setMore(temData.data.more);
  };
  const cancleFollow = async (item, index) => {
    await handleFollow(item.isFollowed, item.mid);
    const newData = [...data];
    newData[index].isFollowed = !item.isFollowed;
    setData(newData);
  };
  return (
    <div className={styles.relationshipBox}>
      <div className="px-4 pt-4 sticky top-0 z-10 w-full bg-[#08050b]">
        <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>
      {/* 内容 */}
      <div className="px-4">
        <JumboTabs
          onChange={(key) => setCurrentKey(key)}
          activeKey={currentKey}
          className={`bg-deepBg ${styles.jumboTabs}`}
        >
          <JumboTabs.Tab
            title="关注"
            key="follow"
            description={
              currentKey == "follow" && (
                <div className="titlePinkLine relative w-full"></div>
              )
            }
            destroyOnClose={true}
          >
            <List className="overflow-y-auto scrollbarBox_hidden">
              {data.map((item, index) => (
                <List.Item
                  key={item.id + "_" + index}
                  className={`!p-0 ${styles.listTimeBox}`}
                >
                  <div
                    className="grid gap-2 items-center"
                    style={{
                      gridTemplateColumns: "calc(100% - 64px - 2rem) 64px",
                    }}
                  >
                    <div
                      className="grid"
                      onClick={() => router.push("/profile/" + item.mid)}
                      style={{
                        gridTemplateColumns: "48px calc(100% - 48px - 2rem)",
                      }}
                    >
                      <Avatar
                        src={item?.avatar?.images[0].urls[0]}
                        style={{ "--border-radius": "50px" }}
                      />
                      <div className="ml-2">
                        <p>{item.name}</p>
                        <p className="text-xs truncate">{item.bio}</p>
                      </div>
                    </div>

                    <div
                      className="text-sm leading-9 h-max bg-[#FFFFFF1A] px-2 rounded-full whitespace-nowrap flex items-center justify-center"
                      onClick={() => cancleFollow(item, index)}
                    >
                      {item.isFollowed ? "已关注" : "关注"}
                    </div>
                  </div>
                </List.Item>
              ))}
              <InfiniteScroll
                loadMore={() => loadMore("follow")}
                hasMore={hasMore}
              >
                <InfiniteScrollContent
                  hasMore={hasMore}
                  isEmpty={data.length == 0}
                  showNoMore={data.length === 0}
                />
              </InfiniteScroll>
            </List>
            {/* {!data.length && <div
              className={`flex flex-col items-center mt-20`}
              style={{ height: `${scrollHeight}px` }}
            >
              <Empty type="nodata" />
            </div>} */}
          </JumboTabs.Tab>
          <JumboTabs.Tab
            title="粉丝"
            key="fans"
            description={
              currentKey == "fans" && (
                <div className="titlePinkLine relative w-full"></div>
              )
            }
            destroyOnClose={true}
          >
            <List className="overflow-y-auto scrollbarBox_hidden">
              {data.map((item, index) => (
                <List.Item
                  key={item.id + "_" + index}
                  className={`!p-0 ${styles.listTimeBox}`}
                >
                  <div
                    className="grid gap-2 items-center"
                    style={{
                      gridTemplateColumns: "48px calc(100% - 128px) 64px",
                    }}
                  >
                    <Avatar
                      src={item?.avatar?.images[0].urls[0]}
                      style={{ "--border-radius": "50px" }}
                    />
                    <div>
                      <p>{item.name}</p>
                      <p className="text-xs truncate">{item.bio}</p>
                    </div>
                    {/* <div
                      className="text-sm leading-9 h-max bg-[#FFFFFF1A] px-2 rounded-full whitespace-nowrap flex items-center justify-center"
                      onClick={() => handleFollow(item.isFollowed, item.mid)}
                    >
                      {item.isFollowed ? "已关注" : "关注"}
                    </div> */}
                  </div>
                </List.Item>
              ))}
              <InfiniteScroll
                loadMore={() => loadMore("fans")}
                hasMore={hasMore}
              >
                <InfiniteScrollContent
                  hasMore={hasMore}
                  isEmpty={data.length == 0}
                  showNoMore={data.length === 0}
                />
              </InfiniteScroll>
            </List>
          </JumboTabs.Tab>
        </JumboTabs>
      </div>
    </div>
  );
}