tiefen_space_h5/app/search/page.js

"use client";

import React, { useEffect, useRef, useState } from "react";
import { Input, List, DotLoading, Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import require from "@/utils/require";
import { debounce } from "@/utils/tools";
import Empty from "@/components/Empty";
const newDebounce = debounce(function (fn) {
  fn && fn();
}, 500);
export default function Search() {
  const router = useRouter();
  // 获取屏幕高度
  // const scrollHeight = 600;
  const [searchValue, setSearchValue] = useState("");
  const [loading, setLoading] = useState(false);
  const [streamers, setStreamers] = useState([]);
  // const [zones, setZones] = useState([]);
  useEffect(() => {}, []);

  const isNumeric = (str) => {
    return /^\d+$/.test(str);
  };
  const getResult = async (value) => {
    console.log("searchValue", value);
    const isSearchInt = isNumeric(value);
    let api = "";
    let querryParams = "";
    if (isSearchInt) {
      api = "/api/streamer/list_ext_fuzzily_by_user_id";
      querryParams = { user_id: parseInt(value, 10) };
    } else {
      api = "/api/streamer/list_ext_fuzzily_by_name";
      querryParams = { name: value };
    }
    try {
      setLoading(true);
      const data = await require("POST", api, {
        body: {
          ...querryParams,
          offset: 0,
          limit: 20,
        },
      });
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      // if (!ignore) {
      // const zonesData = data.data.list.filter((item) => item.zones.length > 0);
      setStreamers(data.data.list);
      // setZones(zonesData);
      // }
      setLoading(false);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <div className="">
      <div className="flex items-center p-4 sticky top-0 bg-black z-10">
        <FontAwesomeIcon
          icon={faAngleLeft}
          size="xl"
          className="mr-3"
          onClick={() => {
            router.back();
          }}
        />
        <div className="flex items-center w-full">
          <div className="relative bg-[#FFFFFF1A] rounded-lg px-4 py-1  w-full">
            <Input
              placeholder="搜索Ta的昵称或id"
              value={searchValue}
              onChange={(val) => {
                setSearchValue((old) => {
                  let test = (e) => {
                    if (val == "") {
                      setStreamers([]);
                      // setZones([]);
                      return;
                    }
                    getResult(val);
                  };
                  newDebounce(test);
                  return val;
                });
              }}
            />
            <div className="absolute top-1/2 -translate-y-1/2 right-2">
              {loading && <DotLoading />}
            </div>
          </div>
          {searchValue && (
            <p
              className="text-base whitespace-no-wrap ml-2 text-primary font-bold"
              onClick={() => {
                setSearchValue("");
              }}
            >
              清空
            </p>
          )}
        </div>
      </div>
      <List className="px-4 overflow-y-auto scrollbarBox_hidden">
        {!streamers.length && (
          <div
            className={`h-screen -mt-[57px] flex flex-col items-center justify-center`}
          >
            <Empty type="nodata" />
          </div>
        )}
        <div>
          {streamers?.filter(
            (streamer) => streamer.zones.length > 0
          ).length > 0 && (
            <div>
              <p className="mt-2 mb-1 text-white text-xl font-medium">
                空间
              </p>
              {streamers?.filter(
            (streamer) => streamer.zones.length > 0
          )?.map((item) => (
                <ZoneItem data={item} key={item.id}/>
              ))}
            </div>
          )}
          {streamers.length > 0 && (
            <div>
              <p className="mt-2 mb-1 text-white text-xl font-medium">
                个人
              </p>
              {streamers.map((item) => (
                <ZoneItem data={item}  key={item.id}/>
              ))}
            </div>
          )}
        </div>
      </List>
    </div>
  );
}

const ZoneItem = ({data}) => {
  const router = useRouter();
  return (
    <List.Item
      className="!p-0"
      onClick={() => router.push(`/space/${data.mid}`)}
      key={data.id}
      arrow={false}
    >
      <div className="grid grid-cols-[2.5rem_100%] gap-2 items-center" style={{maxWidth:"calc(100vw - 2rem)"}}>
        <img
          className="flex-none w-10 h-10 rounded-full mr-2"
          src={data?.avatar?.images[0]?.urls[0]}
          alt=""
        />
        <div className="flex-1">
          <div className="flex items-center">
            <span className="text-md mr-2 text-base text-white font-medium">
              {data?.name}
            </span>
            <span className="py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full text-white text-xs font-medium">
              ID {data.user_id}
            </span>
          </div>
          <p className="text-sm text-[#FFFFFF80] pr-16 overflow-hidden whitespace-nowrap text-ellipsis">{data?.bio}</p>
        </div>
      </div>
    </List.Item>
  );
};