1

src/main_pages/index.tsx

@@ -0,0 +1,203 @@
+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);
+