1

src/main_pages/components/ListPageContent.tsx

@@ -0,0 +1,412 @@
+import SearchBar from "@/components/SearchBar";
+import FilterPopup from "@/components/FilterPopup";
+import styles from "@/game_pages/list/index.module.scss";
+import { useEffect, useRef, useCallback, useState } from "react";
+import Taro from "@tarojs/taro";
+import { useListStore } from "@/store/listStore";
+import { useGlobalState } from "@/store/global";
+import { View, Image, Text, ScrollView } from "@tarojs/components";
+import ListContainer from "@/container/listContainer";
+import DistanceQuickFilter from "@/components/DistanceQuickFilter";
+import { updateUserLocation } from "@/services/userService";
+import { useUserActions } from "@/store/userStore";
+import { useDictionaryStore } from "@/store/dictionaryStore";
+import { saveImage, navigateTo } from "@/utils";
+
+export interface ListPageContentProps {
+  onNavStateChange?: (state: {
+    isShowInputCustomerNavBar?: boolean;
+    isDistanceFilterVisible?: boolean;
+    isCityPickerVisible?: boolean;
+  }) => void;
+  onScrollToTop?: () => void; // 外部滚动到顶部方法（由主容器提供）
+  scrollToTopTrigger?: number; // 触发滚动的计数器
+  onDistanceFilterVisibleChange?: (visible: boolean) => void;
+  onCityPickerVisibleChange?: (visible: boolean) => void; // 保留接口，但由主容器直接处理
+  onFilterPopupVisibleChange?: (visible: boolean) => void; // 筛选弹窗显示/隐藏回调
+}
+
+const ListPageContent: React.FC<ListPageContentProps> = ({
+  onNavStateChange,
+  onScrollToTop: _onScrollToTop,
+  scrollToTopTrigger,
+  onDistanceFilterVisibleChange,
+  onCityPickerVisibleChange: _onCityPickerVisibleChange,
+  onFilterPopupVisibleChange,
+}) => {
+  const store = useListStore() || {};
+  const { fetchUserInfo } = useUserActions();
+  const { statusNavbarHeightInfo, getCurrentLocationInfo } = useGlobalState() || {};
+  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
+  
+  const {
+    listPageState,
+    loading,
+    error,
+    searchValue,
+    distanceData,
+    quickFilterData,
+    getMatchesData,
+    updateState,
+    updateListPageState,
+    updateFilterOptions,
+    clearFilterOptions,
+    initialFilterSearch,
+    loadMoreMatches,
+    fetchGetGamesCount,
+    updateDistanceQuickFilter,
+    getCities,
+    getCityQrCode,
+    area,
+    cityQrCode,
+  } = store;
+
+  const {
+    isShowFilterPopup,
+    data: matches,
+    recommendList,
+    filterCount,
+    filterOptions,
+    distanceQuickFilter,
+    isShowInputCustomerNavBar,
+    pageOption,
+    isShowNoData,
+  } = listPageState || {};
+
+  const scrollContextRef = useRef(null);
+  const scrollViewRef = useRef(null);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastScrollTopRef = useRef(0);
+  const scrollDirectionRef = useRef<'up' | 'down' | null>(null);
+  const lastScrollTimeRef = useRef(Date.now());
+  const loadingMoreRef = useRef(false);
+  const scrollStartPositionRef = useRef(0);
+  const [showSearchBar, setShowSearchBar] = useState(true);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // 处理距离筛选显示/隐藏
+  const handleDistanceFilterVisibleChange = useCallback((visible: boolean) => {
+    onDistanceFilterVisibleChange?.(visible);
+    onNavStateChange?.({ isDistanceFilterVisible: visible });
+  }, [onDistanceFilterVisibleChange, onNavStateChange]);
+
+  // 处理城市选择器显示/隐藏（由主容器统一管理，通过 onNavStateChange 通知）
+  // 注意：CustomerNavBar 的 onCityPickerVisibleChange 由主容器直接处理
+
+  // 滚动到顶部（用于 ScrollView 内部滚动）
+  const scrollToTopInternal = useCallback(() => {
+    setScrollTop(prev => prev === 0 ? 0.1 : 0);
+  }, []);
+
+  // 监听外部滚动触发
+  useEffect(() => {
+    if (scrollToTopTrigger && scrollToTopTrigger > 0) {
+      scrollToTopInternal();
+    }
+  }, [scrollToTopTrigger, scrollToTopInternal]);
+
+  // ScrollView 滚动处理
+  const handleScrollViewScroll = useCallback(
+    (e: any) => {
+      const currentScrollTop = e?.detail?.scrollTop || 0;
+      const lastScrollTop = lastScrollTopRef.current;
+      const currentTime = Date.now();
+      const timeDiff = currentTime - lastScrollTimeRef.current;
+
+      if (timeDiff < 100) return;
+
+      const scrollDiff = currentScrollTop - lastScrollTop;
+      let newDirection = scrollDirectionRef.current;
+      if (Math.abs(scrollDiff) > 15) {
+        if (scrollDiff > 0) {
+          if (newDirection !== 'up') {
+            scrollStartPositionRef.current = lastScrollTop;
+          }
+          newDirection = 'up';
+        } else {
+          if (newDirection !== 'down') {
+            scrollStartPositionRef.current = lastScrollTop;
+          }
+          newDirection = 'down';
+        }
+        scrollDirectionRef.current = newDirection;
+      }
+
+      const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPositionRef.current);
+      const positionThreshold = 120;
+      const distanceThreshold = 80;
+
+      if (newDirection === 'up' && currentScrollTop > positionThreshold && totalScrollDistance > distanceThreshold) {
+        if (showSearchBar || !isShowInputCustomerNavBar) {
+          setShowSearchBar(false);
+          updateListPageState({
+            isShowInputCustomerNavBar: true,
+          });
+          onNavStateChange?.({ isShowInputCustomerNavBar: true });
+          scrollStartPositionRef.current = currentScrollTop;
+        }
+      } else if ((newDirection === 'down' && totalScrollDistance > distanceThreshold) || currentScrollTop <= positionThreshold) {
+        if (!showSearchBar || isShowInputCustomerNavBar) {
+          setShowSearchBar(true);
+          updateListPageState({
+            isShowInputCustomerNavBar: false,
+          });
+          onNavStateChange?.({ isShowInputCustomerNavBar: false });
+          scrollStartPositionRef.current = currentScrollTop;
+        }
+      }
+
+      lastScrollTopRef.current = currentScrollTop;
+      lastScrollTimeRef.current = currentTime;
+    },
+    [showSearchBar, isShowInputCustomerNavBar, updateListPageState, onNavStateChange]
+  );
+
+  useEffect(() => {
+    getLocation();
+    fetchUserInfo();
+    getCities();
+    getCityQrCode();
+  }, []);
+
+  useEffect(() => {
+    if (pageOption?.page === 1 && matches?.length > 0) {
+      setShowSearchBar(true);
+      updateListPageState({
+        isShowInputCustomerNavBar: false,
+      });
+      onNavStateChange?.({ isShowInputCustomerNavBar: false });
+    }
+  }, [matches, pageOption?.page, updateListPageState, onNavStateChange]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const getLocation = async () => {
+    const location = await getCurrentLocationInfo();
+    updateState({ location });
+    if (location && location.latitude && location.longitude) {
+      try {
+        await updateUserLocation(location.latitude, location.longitude);
+      } catch (error) {
+        console.error("更新用户位置失败:", error);
+      }
+    }
+    fetchGetGamesCount();
+    getMatchesData();
+    return location;
+  };
+
+  const refreshMatches = async () => {
+    await initialFilterSearch(true);
+  };
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await refreshMatches();
+    } catch (error) {
+      (Taro as any).showToast({
+        title: "刷新失败，请重试",
+        icon: "error",
+        duration: 1000,
+      });
+    } finally {
+      setTimeout(() => {
+        setRefreshing(false);
+      }, 0);
+    }
+  };
+
+  const handleFilterConfirm = () => {
+    toggleShowPopup();
+    getMatchesData();
+  };
+
+  const toggleShowPopup = () => {
+    const newVisible = !isShowFilterPopup;
+    // 先通知父组件筛选弹窗状态变化（设置 z-index）
+    onFilterPopupVisibleChange?.(newVisible);
+    // 然后更新本地状态显示/隐藏弹窗
+    // 使用 setTimeout 确保 z-index 先设置，再显示弹窗
+    if (newVisible) {
+      setTimeout(() => {
+        updateListPageState({
+          isShowFilterPopup: newVisible,
+        });
+      }, 50);
+    } else {
+      // 关闭时直接更新状态
+      updateListPageState({
+        isShowFilterPopup: newVisible,
+      });
+    }
+  };
+
+  const handleUpdateFilterOptions = (params: Record<string, any>) => {
+    updateFilterOptions(params);
+  };
+
+  const handleSearchChange = () => { };
+
+  const handleDistanceOrQuickChange = (name, value) => {
+    updateDistanceQuickFilter({
+      [name]: value,
+    });
+  };
+
+  const handleSearchClick = () => {
+    navigateTo({
+      url: "/game_pages/search/index",
+    });
+  };
+
+  const initDictionaryData = async () => {
+    try {
+      const { fetchDictionary } = useDictionaryStore.getState();
+      await fetchDictionary();
+    } catch (error) {
+      console.error("初始化字典数据失败:", error);
+    }
+  };
+
+  useEffect(() => {
+    initDictionaryData();
+  }, []);
+
+  const area_city = area?.at(-2) || "上海";
+
+  function renderCityQrcode() {
+    let item = cityQrCode.find((item) => item.city_name === area_city);
+    if (!item) item = cityQrCode.find((item) => item.city_name === "其他");
+    return (
+      <View className={styles.cqContainer}>
+        {item ? (
+          <View className={styles.wrapper}>
+            <View className={styles.tips}>
+              <Text className={styles.tip1}>当前城市暂无球局</Text>
+              <Text className={styles.tip2}>
+                加入城市球友群，获得最新球局消息
+              </Text>
+            </View>
+            <View className={styles.qrcodeWrappper}>
+              <Image
+                className={styles.qrcode}
+                src={item.qr_code_url}
+                mode="widthFix"
+                onClick={() => {
+                  saveImage(item.qr_code_url);
+                }}
+              />
+              <Text className={styles.qrcodeTip}>
+                点击图片保存，使用微信扫码加入群聊
+              </Text>
+            </View>
+          </View>
+        ) : (
+          <View>
+            <Text>当前城市暂无球局, 敬请期待</Text>
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <>
+      {area_city !== "上海" ? (
+        renderCityQrcode()
+      ) : (
+        <View ref={scrollContextRef}>
+          <View className={styles.listPage} style={{ paddingTop: totalHeight }}>
+            {isShowFilterPopup && (
+              <View>
+                <FilterPopup
+                  loading={loading}
+                  onCancel={toggleShowPopup}
+                  onConfirm={handleFilterConfirm}
+                  onChange={handleUpdateFilterOptions}
+                  filterOptions={filterOptions}
+                  onClear={clearFilterOptions}
+                  visible={isShowFilterPopup}
+                  onClose={toggleShowPopup}
+                  statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+                />
+              </View>
+            )}
+            <View className={styles.fixedHeader}>
+              <View className={`${styles.listTopSearchWrapper} ${showSearchBar ? styles.show : styles.hide}`}>
+                <SearchBar
+                  handleFilterIcon={toggleShowPopup}
+                  isSelect={filterCount > 0}
+                  filterCount={filterCount}
+                  onChange={handleSearchChange}
+                  value={searchValue}
+                  onInputClick={handleSearchClick}
+                />
+              </View>
+              <View className={styles.listTopFilterWrapper}>
+                <DistanceQuickFilter
+                  cityOptions={distanceData}
+                  quickOptions={quickFilterData}
+                  onChange={handleDistanceOrQuickChange}
+                  cityName="distanceFilter"
+                  quickName="order"
+                  cityValue={distanceQuickFilter?.distanceFilter}
+                  quickValue={distanceQuickFilter?.order}
+                  onMenuVisibleChange={handleDistanceFilterVisibleChange}
+                />
+              </View>
+            </View>
+
+            <ScrollView
+              ref={scrollViewRef}
+              scrollY
+              scrollTop={scrollTop}
+              className={styles.listScrollView}
+              scrollWithAnimation
+              enhanced
+              showScrollbar={false}
+              refresherEnabled={true}
+              refresherTriggered={refreshing}
+              onRefresherRefresh={handleRefresh}
+              lowerThreshold={100}
+              onScrollToLower={async () => {
+                if (!loading && !loadingMoreRef.current && listPageState?.isHasMoreData) {
+                  loadingMoreRef.current = true;
+                  try {
+                    await loadMoreMatches();
+                  } catch (error) {
+                    console.error("加载更多失败:", error);
+                  } finally {
+                    loadingMoreRef.current = false;
+                  }
+                }
+              }}
+              onScroll={handleScrollViewScroll}
+            >
+              <ListContainer
+                data={matches}
+                recommendList={recommendList}
+                loading={loading}
+                isShowNoData={isShowNoData}
+                error={error}
+                reload={refreshMatches}
+                loadMoreMatches={loadMoreMatches}
+              />
+            </ScrollView>
+          </View>
+        </View>
+      )}
+    </>
+  );
+};
+
+export default ListPageContent;
+

src/main_pages/components/MessagePageContent.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect } from "react";
+import { View, Text, Image, ScrollView } from "@tarojs/components";
+import { EmptyState } from "@/components";
+import noticeService from "@/services/noticeService";
+import { formatRelativeTime } from "@/utils/timeUtils";
+import Taro from "@tarojs/taro";
+import { useGlobalState } from "@/store/global";
+import { navigateTo } from "@/utils/navigation";
+import "@/other_pages/message/index.scss";
+
+interface MessageItem {
+  id: string;
+  notification_type: string;
+  title: string;
+  content: string;
+  create_time: string;
+  is_read: number;
+  related_user_avatar?: string;
+  related_user_nickname?: string;
+  activity_image?: string;
+  jump_url?: string;
+}
+
+type MessageCategory = "comment" | "follow";
+
+const MessagePageContent = () => {
+  const { statusNavbarHeightInfo } = useGlobalState() || {};
+  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
+  
+  const [activeTab, setActiveTab] = useState<MessageCategory | null>(null);
+  const [messageList, setMessageList] = useState<MessageItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [reachedBottom, setReachedBottom] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const getNoticeList = async () => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const res = await noticeService.getNotificationList({});
+      if (res.code === 0) {
+        setMessageList(res.data.list || []);
+      }
+    } catch (e) {
+      (Taro as any).showToast({
+        title: "获取列表失败，请重试",
+        icon: "none",
+        duration: 2000,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getNoticeList();
+  }, []);
+
+  const filteredMessages = messageList;
+
+  const handleTabClick = (tab: MessageCategory) => {
+    if (tab === "comment") {
+      navigateTo({
+        url: "/other_pages/comment_reply/index",
+      });
+      return;
+    }
+
+    if (tab === "follow") {
+      navigateTo({
+        url: "/other_pages/new_follow/index",
+      });
+      return;
+    }
+
+    setActiveTab(activeTab === tab ? null : tab);
+  };
+
+  const handleViewDetail = (message: MessageItem) => {
+    if (!message.jump_url) {
+      console.log("暂无跳转链接");
+      return;
+    }
+
+    navigateTo({
+      url: message.jump_url,
+    }).catch(() => {
+      (Taro as any).showToast({
+        title: "页面不存在",
+        icon: "none",
+        duration: 2000,
+      });
+    });
+  };
+
+  const handleScrollToLower = () => {
+    if (!reachedBottom && filteredMessages.length > 0) {
+      setReachedBottom(true);
+      setTimeout(() => {
+        setReachedBottom(false);
+      }, 2000);
+    }
+  };
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      const res = await noticeService.getNotificationList({});
+      if (res.code === 0) {
+        setMessageList(res.data.list || []);
+      }
+    } catch (e) {
+      (Taro as any).showToast({
+        title: "刷新失败",
+        icon: "none",
+        duration: 2000,
+      });
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  return (
+    <View className="message-container" style={{ paddingTop: `${totalHeight}px` }}>
+      <View className="category-tabs">
+        <View
+          className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
+          onClick={() => handleTabClick("comment")}
+        >
+          <Image
+            className="tab-icon"
+            src={require('@/static/message/comment-icon.svg')}
+            mode="aspectFit"
+          />
+          <Text className="tab-text">评论和回复</Text>
+        </View>
+        <View
+          className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
+          onClick={() => handleTabClick("follow")}
+        >
+          <Image
+            className="tab-icon"
+            src={require('@/static/message/follow-icon.svg')}
+            mode="aspectFit"
+          />
+          <Text className="tab-text">新增关注</Text>
+        </View>
+      </View>
+
+      <ScrollView
+        scrollY
+        className="message-scroll"
+        scrollWithAnimation
+        enhanced
+        showScrollbar={false}
+        lowerThreshold={50}
+        onScrollToLower={handleScrollToLower}
+        refresherEnabled={true}
+        refresherTriggered={refreshing}
+        onRefresherRefresh={handleRefresh}
+      >
+        {filteredMessages.length > 0 ? (
+          <View className="message-cards">
+            {filteredMessages.map((message) => (
+              <View className="message-card" key={message.id} onClick={() => handleViewDetail(message)}>
+                <View className="card-title-row">
+                  <Text className="card-title">{message.title}</Text>
+                </View>
+                <View className="card-time-row">
+                  <Text className="card-time">{formatRelativeTime(message.create_time)}</Text>
+                </View>
+                <View className="card-content-row">
+                  <Text className="card-content">{message.content}</Text>
+                </View>
+                <View className="card-footer">
+                  <View className="footer-divider"></View>
+                  <View className="footer-action">
+                    <Text className="action-text">查看详情</Text>
+                    <View className="action-arrow">
+                      <Image className="img" src={require('@/static/message/ar-right.svg')} ></Image>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            ))}
+            {filteredMessages.length > 0 && (
+              <View className="bottom-tip">
+                <Text className="tip-text">到底了</Text>
+              </View>
+            )}
+          </View>
+        ) : (
+          <EmptyState text="暂无消息" />
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default MessagePageContent;
+

src/main_pages/components/MyselfPageContent.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useEffect } from "react";
+import { View, Text, Image, ScrollView } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import "@/user_pages/myself/index.scss";
+import { UserInfoCard } from "@/components/UserInfo/index";
+import { UserService } from "@/services/userService";
+import ListContainer from "@/container/listContainer";
+import { TennisMatch } from "@/../types/list/types";
+import { NTRPTestEntryCard } from "@/components";
+import { EvaluateScene } from "@/store/evaluateStore";
+import { useUserInfo } from "@/store/userStore";
+import { usePickerOption } from "@/store/pickerOptionsStore";
+import { useGlobalState } from "@/store/global";
+
+const MyselfPageContent: React.FC = () => {
+  const pickerOption = usePickerOption();
+  const { statusNavbarHeightInfo } = useGlobalState() || {};
+  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
+  
+  const instance = (Taro as any).getCurrentInstance();
+  const user_id = instance.router?.params?.userid || "";
+  const is_current_user = !user_id;
+  const user_info = useUserInfo();
+
+  const [game_records, set_game_records] = useState<TennisMatch[]>([]);
+  const [ended_game_records, setEndedGameRecords] = useState<TennisMatch[]>([]);
+  const [loading] = useState(false);
+  const [is_following, setIsFollowing] = useState(false);
+  const [active_tab, setActiveTab] = useState<"hosted" | "participated">("hosted");
+
+  useEffect(() => {
+    pickerOption.getCities();
+    pickerOption.getProfessions();
+  }, []);
+
+  const { useDidShow } = Taro as any;
+  useDidShow(() => {
+    // 确保从编辑页面返回时刷新数据
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      load_game_data();
+    }
+  }, [active_tab]);
+
+  const classifyGameRecords = (
+    game_records: TennisMatch[]
+  ): { notEndGames: TennisMatch[]; finishedGames: TennisMatch[] } => {
+    const now = new Date().getTime();
+    return game_records.reduce(
+      (result, cur) => {
+        let { end_time } = cur;
+        end_time = end_time.replace(/\s/, "T");
+        new Date(end_time).getTime() > now
+          ? result.notEndGames.push(cur)
+          : result.finishedGames.push(cur);
+        return result;
+      },
+      {
+        notEndGames: [] as TennisMatch[],
+        finishedGames: [] as TennisMatch[],
+      }
+    );
+  };
+
+  const load_game_data = async () => {
+    try {
+      if (!user_info || !('id' in user_info)) {
+        return;
+      }
+      let games_data;
+      if (active_tab === "hosted") {
+        games_data = await UserService.get_hosted_games(user_info.id);
+      } else {
+        games_data = await UserService.get_participated_games(user_info.id);
+      }
+      const sorted_games = games_data.sort((a, b) => {
+        return (
+          new Date(a.original_start_time.replace(/\s/, "T")).getTime() -
+          new Date(b.original_start_time.replace(/\s/, "T")).getTime()
+        );
+      });
+      const { notEndGames, finishedGames } = classifyGameRecords(sorted_games);
+      set_game_records(notEndGames);
+      setEndedGameRecords(finishedGames);
+    } catch (error) {
+      console.error("加载球局数据失败:", error);
+    }
+  };
+
+  const handle_follow = async () => {
+    try {
+      const new_following_state = await UserService.toggle_follow(
+        user_id,
+        is_following
+      );
+      setIsFollowing(new_following_state);
+
+      (Taro as any).showToast({
+        title: new_following_state ? "关注成功" : "已取消关注",
+        icon: "success",
+        duration: 1500,
+      });
+    } catch (error) {
+      console.error("关注操作失败:", error);
+      (Taro as any).showToast({
+        title: "操作失败，请重试",
+        icon: "error",
+        duration: 2000,
+      });
+    }
+  };
+
+  const goPublish = () => {
+    (Taro as any).navigateTo({
+      url: "/publish_pages/publishBall/index",
+    });
+  };
+
+  const handle_game_orders = () => {
+    (Taro as any).navigateTo({
+      url: "/order_pages/orderList/index",
+    });
+  };
+
+  const handle_wallet = () => {
+    (Taro as any).navigateTo({
+      url: "/user_pages/wallet/index",
+    });
+  };
+
+  const handleOnTab = (tab) => {
+    setActiveTab(tab);
+  };
+
+  return (
+    <View className="myself_page">
+      <View className="myself_page_content_main" style={{ paddingTop: `${totalHeight}px` }}>
+        <View className="user_info_section">
+          <UserInfoCard
+            editable={is_current_user}
+            user_info={user_info}
+            is_current_user={is_current_user}
+            is_following={is_following}
+            on_follow={handle_follow}
+            onTab={handleOnTab}
+          />
+          <View className="quick_actions_section">
+            <View className="action_card">
+              <View className="action_content" onClick={handle_game_orders}>
+                <Image
+                  className="action_icon"
+                  src={require("@/static/userInfo/order_btn.svg")}
+                />
+                <Text className="action_text">球局订单</Text>
+              </View>
+              <View className="action_divider"></View>
+              <View className="action_content" onClick={handle_wallet}>
+                <Image
+                  className="action_icon"
+                  src={require("@/static/userInfo/wallet.svg")}
+                />
+                <Text className="action_text">钱包</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        <View className="test-entry-card-box">
+          <NTRPTestEntryCard type={EvaluateScene.user} />
+        </View>
+
+        <View className="game_tabs_section">
+          <View className="tab_container">
+            <View
+              className={`tab_item ${active_tab === "hosted" ? "active" : ""}`}
+              onClick={() => setActiveTab("hosted")}
+            >
+              <Text className="tab_text">我主办的</Text>
+            </View>
+            <View
+              className={`tab_item ${
+                active_tab === "participated" ? "active" : ""
+              }`}
+              onClick={() => setActiveTab("participated")}
+            >
+              <Text className="tab_text">我参与的</Text>
+            </View>
+          </View>
+        </View>
+
+        <View className="game_list_section">
+          <ScrollView scrollY>
+            <ListContainer
+              data={game_records}
+              recommendList={[]}
+              loading={loading}
+              error={null}
+              errorImg="ICON_LIST_EMPTY"
+              emptyText="暂未发布球局"
+              btnText="去发布"
+              btnImg="ICON_ADD"
+              reload={goPublish}
+              isShowNoData={game_records.length === 0}
+              loadMoreMatches={() => {}}
+              collapse={true}
+              style={{ paddingBottom: 0, overflow: "hidden" }}
+              defaultShowNum={3}
+            />
+          </ScrollView>
+        </View>
+
+        <View className="ended_game_text">往期球局</View>
+        <View className="game_list_section">
+          <ScrollView scrollY>
+            <ListContainer
+              data={ended_game_records}
+              recommendList={[]}
+              loading={loading}
+              error={null}
+              errorImg="ICON_LIST_EMPTY"
+              isShowNoData={ended_game_records.length === 0}
+              loadMoreMatches={() => {}}
+              collapse={true}
+              style={{ paddingBottom: "90px", overflow: "hidden" }}
+              defaultShowNum={3}
+            />
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default MyselfPageContent;
+

src/main_pages/index.config.ts

@@ -0,0 +1,6 @@
+export default definePageConfig({
+    navigationBarTitleText: '首页',
+    navigationStyle: 'custom',
+    navigationBarBackgroundColor: '#FAFAFA'
+  })
+

src/main_pages/index.scss

@@ -0,0 +1,56 @@
+.main-page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #FAFAFA;
+  display: flex;
+  flex-direction: column;
+
+  .tab-container {
+    width: 100%;
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tab-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transform: scale(0.98);
+    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
+                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    pointer-events: none;
+    will-change: opacity, transform;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    &.active {
+      opacity: 1;
+      transform: scale(1);
+      z-index: 1;
+      pointer-events: auto;
+    }
+  }
+
+  // 隐藏所有子页面中的GuideBar（使用全局样式）
+  .tab-content .guide-bar-container {
+    display: none !important;
+  }
+}
+
+// GuideBar z-index 控制
+.guide-bar-low-z-index {
+  z-index: 0 !important;
+}
+
+.guide-bar-high-z-index {
+  z-index: 900 !important;
+}
+

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);
+