mini-programs/src/main_pages/index.tsx

import React, { useState, useEffect, useCallback } from "react";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { check_login_status } from "@/services/loginService";
import { useUserActions } from "@/store/userStore";
import GuideBar from "@/components/GuideBar";
import { withAuth, GeneralNavbar } from "@/components";
import HomeNavbar from "@/components/HomeNavbar";
import ListPageContent from "./components/ListPageContent";
import MessagePageContent from "./components/MessagePageContent";
import MyselfPageContent from "./components/MyselfPageContent";
import "./index.scss";

type TabType = "list" | "message" | "personal";

const MainPage: React.FC = () => {
  const [currentTab, setCurrentTab] = useState<TabType>("list");
  const [isPublishMenuVisible, setIsPublishMenuVisible] = useState(false);
  const [guideBarZIndex, setGuideBarZIndex] = useState<'low' | 'high'>('high');
  const [isDistanceFilterVisible, setIsDistanceFilterVisible] = useState(false);
  const [isCityPickerVisible, setIsCityPickerVisible] = useState(false);
  const [isFilterPopupVisible, setIsFilterPopupVisible] = useState(false);
  const [isShowInputCustomerNavBar, setIsShowInputCustomerNavBar] = useState(false);
  const [listPageScrollToTopTrigger, setListPageScrollToTopTrigger] = useState(0);

  const { fetchUserInfo } = useUserActions();

  // 初始化：检查登录状态并获取用户信息
  useEffect(() => {
    const init = async () => {
      const login_status = check_login_status();
      if (login_status) {
        try {
          await fetchUserInfo();
        } catch (error) {
          console.error('获取用户信息失败:', error);
        }
      }
    };
    init();
  }, [fetchUserInfo]);

  // 处理标签切换
  const handleTabChange = useCallback((code: string) => {
    if (code === currentTab) {
      return;
    }
    setCurrentTab(code as TabType);
    // 切换标签时滚动到顶部
    (Taro as any).pageScrollTo({
      scrollTop: 0,
      duration: 300,
    });
  }, [currentTab]);

  // 处理发布菜单显示/隐藏
  const handlePublishMenuVisibleChange = useCallback((visible: boolean) => {
    setIsPublishMenuVisible(visible);
  }, []);

  // 处理距离筛选显示/隐藏
  const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
    setIsDistanceFilterVisible(visible);
  }, []);

  // 处理城市选择器显示/隐藏
  const handleCityPickerVisibleChange = useCallback((visible: boolean) => {
    setIsCityPickerVisible(visible);
  }, []);

  // 处理筛选弹窗显示/隐藏
  const handleFilterPopupVisibleChange = useCallback((visible: boolean) => {
    setIsFilterPopupVisible(visible);
  }, []);

  // 处理列表页导航状态变化
  const handleListNavStateChange = useCallback((state: {
    isShowInputCustomerNavBar?: boolean;
    isDistanceFilterVisible?: boolean;
    isCityPickerVisible?: boolean;
  }) => {
    if (state.isShowInputCustomerNavBar !== undefined) {
      setIsShowInputCustomerNavBar(state.isShowInputCustomerNavBar);
    }
    if (state.isDistanceFilterVisible !== undefined) {
      setIsDistanceFilterVisible(state.isDistanceFilterVisible);
    }
    if (state.isCityPickerVisible !== undefined) {
      setIsCityPickerVisible(state.isCityPickerVisible);
    }
  }, []);

  // 滚动到顶部
  const scrollToTop = useCallback(() => {
    // 如果当前是列表页，触发列表页内部滚动
    if (currentTab === "list") {
      // 通过状态变化触发 ListPageContent 内部滚动
      setListPageScrollToTopTrigger(prev => prev + 1);
    } else {
      // 其他页面使用 pageScrollTo
      (Taro as any).pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    }
  }, [currentTab]);

  // 动态控制 GuideBar 的 z-index
  useEffect(() => {
    if (isPublishMenuVisible) {
      setGuideBarZIndex('high');
    } else if (isDistanceFilterVisible || isCityPickerVisible || isFilterPopupVisible) {
      setGuideBarZIndex('low');
    } else {
      setGuideBarZIndex('high');
    }
  }, [isPublishMenuVisible, isDistanceFilterVisible, isCityPickerVisible, isFilterPopupVisible]);

  // 渲染自定义导航栏（参考原始页面的实现）
  const renderCustomNavbar = () => {
    if (currentTab === "list") {
      // 列表页：使用 HomeNavbar（与原始列表页一致）
      return (
        <HomeNavbar
          config={{
            showInput: isShowInputCustomerNavBar,
          }}
          onCityPickerVisibleChange={(visible) => {
            setIsCityPickerVisible(visible);
            handleListNavStateChange({ isCityPickerVisible: visible });
          }}
          onScrollToTop={scrollToTop}
        />
      );
    } else if (currentTab === "message") {
      // 消息页：使用 GeneralNavbar（与原始消息页一致，显示用户头像和标题）
      return (
        <GeneralNavbar 
          title="消息" 
          titlePosition="left"
          showBack={false}
          showAvatar={true}
        />
      );
    } else if (currentTab === "personal") {
      // 我的页：使用 GeneralNavbar 显示标题
      return (
        <GeneralNavbar 
          title=""
          titlePosition="left"
          showBack={false}
        />
      );
    }
    return null;
  };

  return (
    <View className="main-page">
      {/* 自定义导航栏 */}
      {renderCustomNavbar()}

      {/* 列表页内容 */}
      <View
        className={`tab-content ${currentTab === "list" ? "active" : ""}`}
      >
        <ListPageContent
          onNavStateChange={handleListNavStateChange}
          onScrollToTop={scrollToTop}
          scrollToTopTrigger={listPageScrollToTopTrigger}
          onDistanceFilterVisibleChange={handleDistanceFilterVisibleChange}
          onCityPickerVisibleChange={handleCityPickerVisibleChange}
          onFilterPopupVisibleChange={handleFilterPopupVisibleChange}
        />
      </View>

      {/* 消息页内容 */}
      <View
        className={`tab-content ${currentTab === "message" ? "active" : ""}`}
      >
        <MessagePageContent />
      </View>

      {/* 我的页内容 */}
      <View
        className={`tab-content ${currentTab === "personal" ? "active" : ""}`}
      >
        <MyselfPageContent />
      </View>

      {/* 底部导航栏 */}
      <GuideBar
        currentPage={currentTab}
        guideBarClassName={guideBarZIndex === 'low' ? 'guide-bar-low-z-index' : 'guide-bar-high-z-index'}
        onTabChange={handleTabChange}
        onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
      />
    </View>
  );
};

export default withAuth(MainPage);