mini-programs/src/container/listCustomNavbar/index.tsx

import { useEffect, useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import img from "@/config/images";
import { useGlobalState } from "@/store/global";
import { useUserInfo } from "@/store/userStore";
import { useListState } from "@/store/listStore";
import CustomNavbar from "@/components/CustomNavbar";
import { Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import "./index.scss";
import { getCurrentFullPath } from "@/utils";
import { CityPicker as PopupPicker } from "@/components/Picker";

interface IProps {
  config?: {
    showInput: boolean;
    inputLeftIcon?: string;
    iconPath?: string;
    leftIconClick?: () => void;
  };
  onCityPickerVisibleChange?: (visible: boolean) => void; // 城市选择器显示/隐藏回调
}

function CityPicker(props) {
  const { visible, setVisible, cities, area, setArea, onCityChange } = props;
  console.log(cities, "cities");
  const [value, setValue] = useState(area);

  function onChange(value: any) {
    console.log(value, "value");
    setValue(value);
    setArea(value);
    // 切换城市时触发接口调用
    if (onCityChange) {
      onCityChange(value);
    }
  }
  return (
    visible && (
      <PopupPicker
        options={cities}
        visible={visible}
        setvisible={setVisible}
        value={value}
        onChange={onChange}
        style={{ zIndex: 9991 }}
      />
    )
  );
}

const ListHeader = (props: IProps) => {
  const { config, onCityPickerVisibleChange } = props;
  const { showInput = false, inputLeftIcon, leftIconClick } = config || {};
  const { getLocationLoading, statusNavbarHeightInfo } = useGlobalState();
  const { gamesNum, searchValue, cities, area, updateArea, getMatchesData, fetchGetGamesCount, refreshBothLists } = useListState();
  const { navBarHeight } = statusNavbarHeightInfo;

  const [cityPopupVisible, setCityPopupVisible] = useState(false);
  
  // 监听城市选择器状态变化，通知父组件
  useEffect(() => {
    onCityPickerVisibleChange?.(cityPopupVisible);
  }, [cityPopupVisible, onCityPickerVisibleChange]);

  const userInfo = useUserInfo();
  const province = (userInfo as any)?.province || "";
  const city = (userInfo as any)?.city || "";
  // const district = (userInfo as any)?.district || "";

  useEffect(() => {
    updateArea(["中国", province, city]);
  }, [province, city]);

  // const currentAddress = city + district;

  const handleInputClick = () => {
    const currentPagePath = getCurrentFullPath();
    if (currentPagePath === "/game_pages/searchResult/index") {
      Taro.navigateBack();
    } else {
      Taro.navigateTo({
        url: "/game_pages/search/index",
      });
    }
  };

  // 点击logo
  const handleLogoClick = () => {
    // 如果当前在列表页，点击后页面回到顶部
    if (getCurrentFullPath() === "/game_pages/list/index") {
      Taro.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    }
    Taro.redirectTo({
      url: "game_pages/list/index", // 列表页
    });
  };

  const handleInputLeftIconClick = () => {
    if (leftIconClick) {
      leftIconClick();
    } else {
      handleLogoClick();
    }
  };

  const navbarStyle = {
    height: `${navBarHeight}px`,
  };

  function handleToggleCity() {
    setCityPopupVisible(true);
  }

  const area_city = area.at(-1);

  // 处理城市切换
  const handleCityChange = async (newArea: any) => {
    // 切换城市后，同时更新两个列表接口获取数据
    if (refreshBothLists) {
      await refreshBothLists();
    }
    // 更新球局数量
    if (fetchGetGamesCount) {
      await fetchGetGamesCount();
    }
  };

  return (
    <CustomNavbar backgroundColor="#fafafa">
      <View className="listNavWrapper">
        {/* 首页logo 导航*/}
        <View
          className={`listNavContainer toggleElement firstElement hidden
            ${!showInput ? "visible" : ""}`}
          style={navbarStyle}
        >
          <View className="listNavContentWrapper">
            {/* logo */}
            <Image
              src={img.ICON_LOGO}
              className="listNavLogo"
              onClick={handleLogoClick}
            />
            <View className="listNavLine" />
            <View className="listNavContent">
              <View className="listNavCityWrapper" onClick={handleToggleCity}>
                {/* 位置 */}
                <Text className="listNavCity">{area_city}</Text>
                {!getLocationLoading && area_city && (
                  <Image src={img.ICON_CHANGE} className="listNavChange" />
                )}
              </View>
              <View className="listNavInfoWrapper">
                <Text className="listNavInfo">附近{gamesNum}场球局</Text>
              </View>
            </View>
          </View>
        </View>
        {/* 搜索导航 */}
        <View
          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${
            showInput && "visible"
          } ${showInput ? "inputCustomerNavbarShowInput" : ""}`}
          style={navbarStyle}
        >
          <View className="navContent">
            {/* logo */}
            <Image
              src={inputLeftIcon || img.ICON_LIST_INPUT_LOGO}
              className="logo"
              onClick={handleInputLeftIconClick}
            />
            {/* 搜索框 */}
            <View className="searchContainer">
              <Image
                className="searchIcon icon16"
                src={img.ICON_LIST_SEARCH_SEARCH}
              />
              <Input
                placeholder="搜索上球局和场地"
                // clearable={false}
                disabled
                value={searchValue}
                onClick={handleInputClick}
              />
            </View>
          </View>
        </View>
      </View>
      {cityPopupVisible && (
        <CityPicker
          visible={cityPopupVisible}
          setVisible={setCityPopupVisible}
          cities={cities}
          area={area}
          setArea={updateArea}
          onCityChange={handleCityChange}
        />
      )}
    </CustomNavbar>
  );
};

export default ListHeader;