tiefen_space_h5/app/my/relationship/page.js

"use client";

import React, { useEffect, useRef, useState } from "react";
import { JumboTabs, List, InfiniteScroll, Avatar, Toast } from "antd-mobile";
// import { useRouter } from "next/navigation";
import { useRouter } from "next/navigation";
import { useSearchParams, usePathname, useParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import Empty from "@/components/Empty";
import styles from "./index.module.scss";
import webviewBaseRequest from "@/utils/webviewBaseRequest";
import { generateSignature } from "@/utils/crypto";
import require from "@/utils/require";
export default function Relationship() {
  const [currentKey, setCurrentKey] = useState("follow");
  const [hasMore, setHasMore] = useState(true);
  // const router = useRouter();
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const params = useParams();
  const [scrollHeight, setScrollHeight] = useState(0);
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    if(currentKey){
      setOffset(0);
      setData([]);
      getData(currentKey).then(res=>{
        setData(res);
      })
    }
  }, [currentKey]);
  useEffect(() => {
    const key = searchParams.get("key");
    // console.log('nnnnn',searchParams.get("key"))
    key && setCurrentKey(key);
  }, [searchParams]);
  async function loadMore(key) {
    const append = await getData(key);
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }
  const getData = async (key) => {
    // api/account_relation/list_is_followed
    const followIds = await require("POST", `/api/account_relation/${
      key == "follow" ? "list_follow" : "list_is_followed"
    }`, {
      body: { offset: offset, limit: 12 },
    }, true);
    if (followIds.ret === -1) {
      Toast.show({
        icon: "fail",
        content: data.msg,
        position: "top",
      });
      return;
    }
    if (!followIds.data.list.length) return [];
    const followsMids = followIds.data.list.map((item) => item.obj_mid);
    const streamers = await require("POST", `/api/streamer/${
      key == "follow" ? "list_ext_by_mids" : "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,
    }));

    setOffset(streamers.data.offset);
    return [...data, ...followsDataList];
    // setMore(temData.data.more);
  };
  return (
    <div className={styles.relationshipBox}>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">关系</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 px-4">
        <JumboTabs
          onChange={(key) => setCurrentKey(key)}
          activeKey={currentKey}
          className={`bg-deepBg ${styles.jumboTabs}`}
        >
          <JumboTabs.Tab
            title="关注"
            key="follow"
            description={
              currentKey == "all" && (
                <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">
                      {item.isFollowed ? "已关注" : "关注"}
                    </div>
                  </div>
                </List.Item>
              ))}
              <InfiniteScroll
                loadMore={() => loadMore("follow")}
                hasMore={hasMore}
              />
            </List>
          </JumboTabs.Tab>
          <JumboTabs.Tab
            title="粉丝"
            key="fans"
            description={
              currentKey == "ironFan" && (
                <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">
                      {item.isFollowed ? "已关注" : "关注"}
                    </div>
                  </div>
                </List.Item>
              ))}
              <InfiniteScroll
                loadMore={() => loadMore("fans")}
                hasMore={hasMore}
              />
            </List>
            <div
              className={`flex flex-col items-center mt-20`}
              style={{ height: `${scrollHeight}px` }}
            >
              <Empty type="nodata" />
            </div>
          </JumboTabs.Tab>
        </JumboTabs>
      </div>
    </div>
  );
}