diff --git a/src/app.ts b/src/app.ts
index 98ec3fe..c4bcd9a 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -5,8 +5,6 @@ import "qweather-icons/font/qweather-icons.css";
import { useDictionaryStore } from "./store/dictionaryStore";
import { useGlobalStore } from "./store/global";
-// import { getNavbarHeight } from "@/utils/getNavbarHeight";
-
interface AppProps {
children: ReactNode;
}
diff --git a/src/components/CustomNavbar/index.module.scss b/src/components/CustomNavbar/index.module.scss
index d6eaab3..b1ebd81 100644
--- a/src/components/CustomNavbar/index.module.scss
+++ b/src/components/CustomNavbar/index.module.scss
@@ -1,8 +1,10 @@
.customerNavbar {
- position: sticky;
+ position: fixed;
top: 0;
+ left: 0;
z-index: 999;
- background-color: #ffffff;
overflow: hidden;
z-index: 999;
+ width: 100%;
+ background-color: #fff;
}
\ No newline at end of file
diff --git a/src/components/CustomNavbar/index.tsx b/src/components/CustomNavbar/index.tsx
index 64a7954..650459c 100644
--- a/src/components/CustomNavbar/index.tsx
+++ b/src/components/CustomNavbar/index.tsx
@@ -9,12 +9,12 @@ interface IProps {
const CustomNavbar = (props: IProps) => {
const { children } = props;
const { statusNavbarHeightInfo } = useGlobalState();
- const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+ const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;
return (
{children}
diff --git a/src/components/CustomerNavbarBack/index.tsx b/src/components/CustomerNavbarBack/index.tsx
index 338ad51..7a712ba 100644
--- a/src/components/CustomerNavbarBack/index.tsx
+++ b/src/components/CustomerNavbarBack/index.tsx
@@ -6,7 +6,7 @@ import Taro from "@tarojs/taro";
const ListHeader = () => {
const { statusNavbarHeightInfo } = useGlobalState();
- const { statusBarHeight, navbarHeight, totalHeight } = statusNavbarHeightInfo;
+ const { statusBarHeight, navBarHeight, totalHeight } = statusNavbarHeightInfo;
const handleBack = () => {
Taro.navigateBack();
}
@@ -19,7 +19,7 @@ const ListHeader = () => {
diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss
index 493e867..0790b46 100644
--- a/src/components/SearchBar/index.module.scss
+++ b/src/components/SearchBar/index.module.scss
@@ -4,7 +4,7 @@
--nutui-searchbar-content-border-radius: 44px;
--nutui-searchbar-input-text-color: #000000;
--nutui-searchbar-input-padding: 0 0 0 10px;
- --nutui-searchbar-padding: 10px 0 0 0;
+ --nutui-searchbar-padding: 10px 0 10px 0;
background-color: unset;
:global(.nut-searchbar-content) {
diff --git a/src/container/inputCustomerNavbar/index.scss b/src/container/inputCustomerNavbar/index.scss
index a92d9cd..23006f3 100644
--- a/src/container/inputCustomerNavbar/index.scss
+++ b/src/container/inputCustomerNavbar/index.scss
@@ -1,6 +1,6 @@
.inputCustomerNavbarContainer {
- padding-left: 17px;
display: flex;
+ align-items: center;
gap: 8px;
@@ -15,6 +15,7 @@
}
.navContent {
+ padding-left: 17px;
display: flex;
align-items: center;
gap: 4px;
diff --git a/src/container/inputCustomerNavbar/index.tsx b/src/container/inputCustomerNavbar/index.tsx
index 1690be3..ecf8118 100644
--- a/src/container/inputCustomerNavbar/index.tsx
+++ b/src/container/inputCustomerNavbar/index.tsx
@@ -1,8 +1,6 @@
import { View, Image } from "@tarojs/components";
import img from "@/config/images";
-import { getCurrentLocation } from "@/utils/locationUtils";
import "./index.scss";
-import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
import CustomNavbar from "@/components/CustomNavbar";
@@ -15,25 +13,9 @@ interface IProps {
const ListHeader = (props: IProps) => {
const { icon } = props;
- const { updateState, statusNavbarHeightInfo } = useGlobalState();
+ const { statusNavbarHeightInfo } = useGlobalState();
const { searchValue } = useListState();
- const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
-
- // 获取位置信息
- // const getCurrentLocal = () => {
- // updateState({
- // getLocationLoading: true,
- // });
- // getCurrentLocation().then((res) => {
- // updateState({
- // getLocationLoading: false,
- // location: res || {},
- // });
- // });
- // };
- // useEffect(() => {
- // getCurrentLocal();
- // }, []);
+ const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;
const handleInputClick = () => {
Taro.navigateTo({
@@ -46,7 +28,7 @@ const ListHeader = (props: IProps) => {
diff --git a/src/container/listContainer/index.scss b/src/container/listContainer/index.scss
index 0a02465..af26e6f 100644
--- a/src/container/listContainer/index.scss
+++ b/src/container/listContainer/index.scss
@@ -5,6 +5,7 @@
flex-direction: column;
gap: 5px;
padding-bottom: 34px;
+ min-height: 100vh;
.recommendTextWrapper {
display: flex;
diff --git a/src/container/listCustomNavbar/index.scss b/src/container/listCustomNavbar/index.scss
index 41524a0..77fb979 100644
--- a/src/container/listCustomNavbar/index.scss
+++ b/src/container/listCustomNavbar/index.scss
@@ -3,6 +3,9 @@
}
.listNavContainer {
+ display: flex;
+ align-items: center;
+
.listNavLine {
width: 1px;
height: 25px;
@@ -51,6 +54,7 @@
.inputCustomerNavbarContainer {
padding-left: 17px;
display: flex;
+ align-items: center;
gap: 8px;
.logo {
@@ -99,6 +103,7 @@
.inputCustomerNavbarShowInput {
padding-left: 10px;
+
.logo {
width: 32px;
height: 32px;
@@ -117,27 +122,26 @@
will-change: opacity, transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-
+
/* 优化过渡动画,使用更平滑的缓动函数和更短的动画时间 */
- transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
- transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 第一个元素样式 */
-.firstElement {
-}
+.firstElement {}
/* 第二个元素样式 */
.secondElement {
/* 初始状态:透明且稍微偏移 */
opacity: 0;
- transform: translateY(5px);
+ transform: translateY(-5px);
}
/* 隐藏状态 */
.hidden {
opacity: 0;
- transform: translateY(5px);
+ transform: translateY(-5px);
}
/* 可见状态 */
diff --git a/src/container/listCustomNavbar/index.tsx b/src/container/listCustomNavbar/index.tsx
index 9448770..d99fc73 100644
--- a/src/container/listCustomNavbar/index.tsx
+++ b/src/container/listCustomNavbar/index.tsx
@@ -7,14 +7,13 @@ import CustomNavbar from "@/components/CustomNavbar";
import { Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import "./index.scss";
-import { useMemo } from "react";
interface IProps {
config?: {
showInput: boolean;
- inputLeftIcon: string;
+ inputLeftIcon?: string;
iconPath?: string;
- leftIconClick: () => void;
+ leftIconClick?: () => void;
};
}
@@ -29,10 +28,12 @@ const ListHeader = (props: IProps) => {
getLocationLoading,
statusNavbarHeightInfo,
} = useGlobalState();
- const { gamesNum, searchValue, isShowInputCustomerNavBar } = useListState();
- const { navbarHeight } = statusNavbarHeightInfo;
+ const { gamesNum, searchValue } = useListState();
+ const { navBarHeight } = statusNavbarHeightInfo;
- const { city,district } = useUserInfo()
+ const userInfo = useUserInfo()
+ const city = (userInfo as any)?.city || ''
+ const district = (userInfo as any)?.district || ''
console.log("useUserInfo",city,district )
@@ -67,23 +68,17 @@ const ListHeader = (props: IProps) => {
};
const navbarStyle = {
- height: `${navbarHeight}px`,
- paddingTop: `4px`,
+ height: `${navBarHeight}px`,
};
- const showInputNavBar = useMemo(() => {
- return isShowInputCustomerNavBar || showInput;
- }, [isShowInputCustomerNavBar, showInput]);
-
- console.log("===showInputNavBar",showInputNavBar)
return (
{/* 首页logo 导航*/}
@@ -110,8 +105,8 @@ const ListHeader = (props: IProps) => {
{/* 搜索导航 */}
@@ -128,8 +123,9 @@ const ListHeader = (props: IProps) => {
src={img.ICON_LIST_SEARCH_SEARCH}
/>
diff --git a/src/game_pages/list/index.tsx b/src/game_pages/list/index.tsx
index fec1583..ce30aaa 100644
--- a/src/game_pages/list/index.tsx
+++ b/src/game_pages/list/index.tsx
@@ -22,51 +22,59 @@ const ListPage = () => {
const { totalHeight } = statusNavbarHeightInfo || {};
const {
- isShowFilterPopup,
- error,
- matches,
- recommendList,
+ listPageState,
loading,
- getMatchesData,
- updateState,
- filterCount,
- updateFilterOptions, // 更新筛选条件
- filterOptions,
- clearFilterOptions,
+ error,
+ searchValue,
distanceData,
quickFilterData,
- distanceQuickFilter,
- isScrollTop,
- searchValue,
- isShowInputCustomerNavBar,
+ getMatchesData,
+ updateState,
+ updateListPageState,
+ updateFilterOptions, // 更新筛选条件
+ clearFilterOptions,
initialFilterSearch,
loadMoreMatches,
fetchGetGamesCount
} = store;
+ const {
+ isShowFilterPopup,
+ data: matches,
+ recommendList,
+ filterCount,
+ filterOptions,
+ distanceQuickFilter,
+ isShowInputCustomerNavBar,
+ } = listPageState || {};
+
// 防抖的滚动处理函数
const handleScroll = useCallback((res) => {
const currentScrollTop = res?.scrollTop || 0;
-
+
// 添加缓冲区,避免临界点频繁切换
const buffer = 10; // 10px 缓冲区
const shouldShowInputNav = currentScrollTop >= (totalHeight + buffer);
const shouldHideInputNav = currentScrollTop < (totalHeight - buffer);
-
+
// 清除之前的定时器
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
-
+
// 防抖处理,避免频繁更新状态
scrollTimeoutRef.current = setTimeout(() => {
// 只有在状态真正需要改变时才更新
if (shouldShowInputNav && !isShowInputCustomerNavBar) {
- updateState({ isShowInputCustomerNavBar: true });
+ updateListPageState({
+ isShowInputCustomerNavBar: true
+ });
} else if (shouldHideInputNav && isShowInputCustomerNavBar) {
- updateState({ isShowInputCustomerNavBar: false });
+ updateListPageState({
+ isShowInputCustomerNavBar: false
+ });
}
-
+
lastScrollTopRef.current = currentScrollTop;
}, 16); // 约60fps的防抖间隔
}, [totalHeight, isShowInputCustomerNavBar, updateState]);
@@ -173,7 +181,9 @@ const ListPage = () => {
* @returns
*/
const toggleShowPopup = () => {
- updateState({ isShowFilterPopup: !isShowFilterPopup });
+ updateListPageState({
+ isShowFilterPopup: !isShowFilterPopup
+ });
};
/**
@@ -188,7 +198,7 @@ const ListPage = () => {
// 距离筛选
const handleDistanceOrQuickChange = (name, value) => {
- updateState({
+ updateListPageState({
distanceQuickFilter: {
...distanceQuickFilter,
[name]: value,
@@ -203,69 +213,75 @@ const ListPage = () => {
};
return (
-
+ <>
{/* 自定义导航 */}
-
-
- {/* */}
-
-
- 0}
- filterCount={filterCount}
- onChange={handleSearchChange}
- value={searchValue}
- onInputClick={handleSearchClick}
- />
- {/* 综合筛选 */}
- {isShowFilterPopup && (
-
-
-
- )}
-
- {/* 筛选 */}
-
-
-
-
+
+
+ {/* */}
+ {/* 综合筛选 */}
+ {isShowFilterPopup && (
+
+
+
+ )}
{/* 列表内容 */}
-
+
+
+ 0}
+ filterCount={filterCount}
+ onChange={handleSearchChange}
+ value={searchValue}
+ onInputClick={handleSearchClick}
+ />
+
+
+ {/* 筛选 */}
+
+
+
+
+ {/* 列表内容 */}
+
+
-
+ >
);
};
diff --git a/src/game_pages/search/index.tsx b/src/game_pages/search/index.tsx
index c96e757..361e355 100644
--- a/src/game_pages/search/index.tsx
+++ b/src/game_pages/search/index.tsx
@@ -1,4 +1,3 @@
-// import CustomerNavbarBack from "@/components/CustomerNavbarBack";
import { View, Image, Text } from "@tarojs/components";
import { Input } from "@nutui/nutui-react-taro";
import { useEffect, useMemo, useRef } from "react";
@@ -12,13 +11,17 @@ const ListSearch = () => {
const {
searchValue,
updateState,
+ updateSearchPageState,
getSearchHistory,
- searchHistory = [],
clearHistory,
searchSuggestion,
+ } = useListState() || {};
+
+ const {
+ searchHistory = [],
suggestionList,
isShowSuggestion,
- } = useListState() || {};
+ } = useListState()?.searchPageState || {};
const ref = useRef(null);
useEffect(() => {
@@ -53,7 +56,7 @@ const ListSearch = () => {
if (value) {
searchSuggestion(value);
} else {
- updateState({
+ updateSearchPageState({
isShowSuggestion: false,
});
}
@@ -63,7 +66,10 @@ const ListSearch = () => {
* @description 点击清空输入内容
*/
const handleClear = () => {
- updateState({ searchValue: "", isShowSuggestion: false });
+ updateState({ searchValue: "" });
+ updateSearchPageState({
+ isShowSuggestion: false
+ });
};
/**
@@ -86,8 +92,8 @@ const ListSearch = () => {
* @description 点击联想词
*/
const handleSuggestionSearch = (val: string) => {
- updateState({
- searchValue: val,
+ updateState({ searchValue: val });
+ updateSearchPageState({
isShowSuggestion: false,
});
handleSearch(val);
diff --git a/src/game_pages/searchResult/index.tsx b/src/game_pages/searchResult/index.tsx
index 8abc532..b9ed085 100644
--- a/src/game_pages/searchResult/index.tsx
+++ b/src/game_pages/searchResult/index.tsx
@@ -13,22 +13,27 @@ import Taro from "@tarojs/taro";
const SearchResult = () => {
const {
- isShowFilterPopup,
- error,
- distanceQuickFilter,
- searchResultData,
- recommendList,
+ searchPageState,
loading,
- updateState,
- filterCount,
- updateFilterOptions, // 更新筛选条件
- filterOptions,
- clearFilterOptions,
+ error,
distanceData,
quickFilterData,
+ updateState,
+ updateSearchPageState,
+ updateFilterOptions, // 更新筛选条件
+ clearFilterOptions,
loadMoreMatches,
getMatchesData
} = useListStore() || {};
+
+ const {
+ isShowFilterPopup,
+ distanceQuickFilter,
+ searchResultData,
+ recommendList,
+ filterCount,
+ filterOptions,
+ } = searchPageState || {};
const { statusNavbarHeightInfo } = useGlobalState() || {};
const { totalHeight } = statusNavbarHeightInfo || {};
const isSelect = filterCount > 0;
@@ -36,11 +41,17 @@ const SearchResult = () => {
useEffect(() => {
const pages = Taro.getCurrentPages()
const currentPage = pages?.[pages.length - 1];
- updateState({currentPage, isSearchResult: true})
- getMatchesData();
+ updateState({
+ currentPage,
+ isSearchResult: true
+ })
+ getMatchesData();
return () => {
- updateState({currentPage: '', isSearchResult: false})
+ updateState({
+ currentPage: '',
+ isSearchResult: false
+ })
}
}, []);
@@ -53,12 +64,23 @@ const SearchResult = () => {
};
const toggleShowPopup = () => {
- updateState({ isShowFilterPopup: !isShowFilterPopup });
+ updateSearchPageState({
+ isShowFilterPopup: !isShowFilterPopup
+ });
};
+ /**
+ * @description 综合筛选确认
+ * @returns
+ */
+ const handleFilterConfirm = () => {
+ toggleShowPopup();
+ getMatchesData();
+ }
+
// 距离筛选
const handleDistanceOrQuickChange = (name, value) => {
- updateState({
+ updateSearchPageState({
distanceQuickFilter: {
...distanceQuickFilter,
[name]: value,
@@ -75,7 +97,7 @@ const SearchResult = () => {
}
return (
-
+ <>
{/* 自定义导航 */}
{
leftIconClick: handleLeftIconClick
}}
/>
- {/* 筛选 */}
-
-
- {/* 筛选 icon */}
+
+ {/* 筛选 */}
-
- {isSelect && {filterCount}}
-
- {/* 筛选弹框 */}
- {/* 综合筛选 */}
- {isShowFilterPopup && (
-
-
+
+ {isSelect && {filterCount}}
- )}
-
+ {/* 综合筛选 */}
+ {isShowFilterPopup && (
+
+
+
+ )}
+
- {/* 列表内容 */}
-
-
+ {/* 列表内容 */}
+
+
+ >
);
};
diff --git a/src/store/global.ts b/src/store/global.ts
index 7aa8e70..1b8dd30 100644
--- a/src/store/global.ts
+++ b/src/store/global.ts
@@ -8,7 +8,7 @@ interface GlobalState {
getLocationText: string;
statusNavbarHeightInfo: {
statusBarHeight: number;
- navbarHeight: number;
+ navBarHeight: number;
totalHeight: number;
};
}
@@ -33,18 +33,18 @@ export const useGlobalStore = create()((set, get) => ({
// 状态栏和导航栏高度信息
statusNavbarHeightInfo: {
statusBarHeight: 0,
- navbarHeight: 0,
+ navBarHeight: 0,
totalHeight: 0,
},
// 获取导航栏高度信息
getNavbarHeightInfo: () => {
- const { statusBarHeight, navbarHeight } = getNavbarHeight();
+ const { statusBarHeight, navBarHeight } = getNavbarHeight();
set({
statusNavbarHeightInfo: {
statusBarHeight,
- navbarHeight,
- totalHeight: statusBarHeight + navbarHeight,
+ navBarHeight,
+ totalHeight: statusBarHeight + navBarHeight,
},
});
},
diff --git a/src/store/listStore.ts b/src/store/listStore.ts
index e281fd7..7cf87a1 100644
--- a/src/store/listStore.ts
+++ b/src/store/listStore.ts
@@ -40,32 +40,73 @@ const defaultPageOption = {
pageSize: 20,
};
-// 创建 store
-const now = new Date();
-export const useListStore = create()((set, get) => ({
- currentPage: "",
- isSearchResult: false,
- searchResultData: [],
- dateRange: [now, new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)], // 日期区间
- // 初始状态
- matches: [],
+// 页面状态默认值
+const pageStateDefaultValue = {
+ // 列表数据
+ data: [],
// 推荐列表
recommendList: [],
- location: {
- latitude: 0,
- longitude: 0,
- }, // 位置
- // 是否加载中
- loading: true,
- error: null,
- // 搜索的value
- searchValue: "",
// 是否展示综合筛选弹窗
isShowFilterPopup: false,
// 综合筛选项
filterOptions: defaultFilterOptions,
+ // 距离筛选和快捷筛选
+ distanceQuickFilter: defaultDistanceQuickFilter,
// 综合筛选 选择的筛选数量
filterCount: 0,
+ // 分页
+ pageOption: defaultPageOption,
+ // 球局数量
+ gamesNum: 0,
+ // 是否还有更多数据
+ isHasMoreData: true,
+}
+
+// 列表页状态
+const listPageStateDefaultValue = {
+ ...pageStateDefaultValue,
+ // 列表页是否显示搜索框自定义导航
+ isShowInputCustomerNavBar: false,
+}
+
+// 搜索页状态
+const searchPageStateDefaultValue = {
+ ...pageStateDefaultValue,
+ // 搜索结果数据
+ searchResultData: [],
+ // 联想词
+ suggestionList: [],
+ // 是否显示联想词
+ isShowSuggestion: false,
+ // 搜索历史数据
+ searchHistory: [],
+ // 搜索历史数据默认 Top 15
+ searchHistoryParams: {
+ page: 1,
+ pageSize: 15,
+ },
+}
+
+// const now = new Date();
+
+// 公共属性
+const commonStateDefaultValue = {
+ // 是否是搜索结果页
+ isSearchResult: false,
+ // 是否加载中
+ loading: true,
+ // 错误信息
+ error: null,
+ // 位置
+ location: {
+ latitude: 0,
+ longitude: 0,
+ },
+ // 搜索的value
+ searchValue: "",
+ // 日期区间
+ // dateRange: [now, new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)],
+
// 距离筛选数据
distanceData: [
{ id: 0, label: "全城", value: "" },
@@ -79,8 +120,6 @@ export const useListStore = create()((set, get) => ({
{ label: "距离更近", value: "1" },
{ label: "时间更近", value: "2" },
],
- // 距离筛选和快捷筛选
- distanceQuickFilter: defaultDistanceQuickFilter,
// 气泡日期范围
dateRangeOptions: [
@@ -97,42 +136,28 @@ export const useListStore = create()((set, get) => ({
{ id: 5, label: "晚上 18:00-22:00", value: "18:00-22:00" },
{ id: 6, label: "夜间 22:00-24:00", value: "22:00-24:00" },
],
- // 球局数量
+}
+
+// 创建 store
+export const useListStore = create()((set, get) => ({
+ currentPage: "",
+ // 列表页
+ listPageState: listPageStateDefaultValue,
+ // 搜索及搜索结果页
+ searchPageState: searchPageStateDefaultValue,
+
+ ...commonStateDefaultValue,
gamesNum: 0,
- // 是否还有更多数据
- isHasMoreData: true,
- // 页面滚动距离顶部距离 是否大于0
- isScrollTop: false,
- // 搜索历史数据
- searchHistory: [],
- // 搜索历史数据默认 Top 15
- searchHistoryParams: {
- page: 1,
- pageSize: 15,
- },
- // 联想词
- suggestionList: [],
- // 是否显示联想词
- isShowSuggestion: false,
- // 列表页是否显示搜索框自定义导航
- isShowInputCustomerNavBar: false,
- // 结果页是否显示搜索框自定义导航
- isShowResultInputCustomerNavBar: false,
- // 打开距离筛选框
- isOpenDistancePopup: false,
- // 打开快捷筛选框
- isOpenQuickFilterPopup: false,
- // 分页
- pageOption: defaultPageOption,
// 组装搜索数据
getSearchParams: () => {
const state = get();
- const filterOptions = state?.filterOptions || {};
- const distanceQuickFilter = state?.distanceQuickFilter || {};
-
+ const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+ const filterOptions = currentPageState?.filterOptions || {};
+ const distanceQuickFilter = currentPageState?.distanceQuickFilter || {};
+
const params = {
- pageOption: state.pageOption,
+ pageOption: currentPageState?.pageOption,
seachOption: {
...filterOptions,
title: state.searchValue,
@@ -147,30 +172,45 @@ export const useListStore = create()((set, get) => ({
return params;
},
- // 设置搜索的列表结果
+ // 设置列表结果
setListData: (payload: IPayload & { isAppend?: boolean }) => {
- const { isSearchResult } = get();
+ const state = get();
const { error, data, loading, count, isAppend = false } = payload;
- const saveKey = isSearchResult ? "searchResultData" : "matches";
const isHasMoreData = count > 0;
-
- if (isAppend) {
- // 追加数据到现有数组
- const currentData = get()[saveKey] || [];
- const newData = [...currentData, ...(data || [])];
- const saveData = { error, loading, count, isHasMoreData, [saveKey]: newData };
- set({...saveData});
+
+ if (state.isSearchResult) {
+ // 更新搜索页状态
+ const currentData = state.searchPageState?.searchResultData || [];
+ const newData = isAppend ? [...currentData, ...(data || [])] : (data || []);
+ set({
+ searchPageState: {
+ ...state.searchPageState,
+ searchResultData: newData,
+ isHasMoreData,
+ },
+ error,
+ loading,
+ });
} else {
- // 替换整个数组
- const saveData = { error, loading, count, isHasMoreData, [saveKey]: data };
- set({...saveData});
+ // 更新列表页状态
+ const currentData = state.listPageState?.data || [];
+ const newData = isAppend ? [...currentData, ...(data || [])] : (data || []);
+ set({
+ listPageState: {
+ ...state.listPageState,
+ data: newData,
+ isHasMoreData,
+ },
+ error,
+ loading,
+ });
}
},
// 获取列表数据(常规搜索)
fetchMatches: async (params, isFirstLoad = false, isAppend = false) => {
set({ loading: true, error: null });
- const { getSearchParams, setListData, distanceQuickFilter } = get();
+ const { getSearchParams, setListData } = get();
try {
const searchParams = getSearchParams() || {};
@@ -179,6 +219,12 @@ export const useListStore = create()((set, get) => ({
...params,
};
+ // 获取当前页面的距离筛选
+ const state = get();
+ const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+ console.log("===当前页面状态:", state.isSearchResult, currentPageState);
+ const distanceQuickFilter = currentPageState?.distanceQuickFilter || {};
+
// 是否选择了智能排序
const isIntegrate = distanceQuickFilter?.quick === "0";
let fetchFn = getGamesList;
@@ -186,14 +232,14 @@ export const useListStore = create()((set, get) => ({
if (isIntegrate) {
reqParams.order = "";
fetchFn = getGamesIntegrateList;
-
+
// 第一次进入页面时传入 isRefresh 参数
if (isFirstLoad) {
reqParams.seachOption.isRefresh = true;
}
}
- console.log("===fetchMatches 获取列表数据参数:", reqParams);
+ console.log("===获取列表数据参数:", reqParams);
const resData = (await fetchFn(reqParams)) || {};
const { data = {}, code } = resData;
if (code !== 0) {
@@ -245,11 +291,15 @@ export const useListStore = create()((set, get) => ({
// 获取历史搜索数据
getSearchHistory: async () => {
try {
- const params = get()?.searchHistoryParams || {};
+ const state = get();
+ const params = state.searchPageState?.searchHistoryParams || {};
const resData = (await getSearchHistory(params)) || {};
const searchHistory = resData?.data?.records || [];
set({
- searchHistory,
+ searchPageState: {
+ ...state.searchPageState,
+ searchHistory,
+ },
});
} catch (error) { }
},
@@ -257,11 +307,15 @@ export const useListStore = create()((set, get) => ({
// 清空历史记录
clearHistory: async () => {
try {
+ const state = get();
const params = {};
const resData = (await clearHistory(params)) || {};
if (resData?.code === 0) {
set({
- searchHistory: [],
+ searchPageState: {
+ ...state.searchPageState,
+ searchHistory: [],
+ },
});
}
} catch (error) { }
@@ -270,17 +324,25 @@ export const useListStore = create()((set, get) => ({
// 获取联想
searchSuggestion: async (val: string) => {
try {
+ const state = get();
const resData = (await searchSuggestion({ val, limit: 10 })) || {};
const recommendations = resData?.data?.recommendations || [];
const total = resData?.data?.total;
set({
- suggestionList: recommendations,
- isShowSuggestion: total > 0,
+ searchPageState: {
+ ...state.searchPageState,
+ suggestionList: recommendations,
+ isShowSuggestion: total > 0,
+ },
});
} catch (error) {
+ const state = get();
set({
- suggestionList: [],
- isShowSuggestion: true,
+ searchPageState: {
+ ...state.searchPageState,
+ suggestionList: [],
+ isShowSuggestion: true,
+ },
});
}
},
@@ -292,67 +354,154 @@ export const useListStore = create()((set, get) => ({
// 更新综合筛选项
updateFilterOptions: (payload: Record) => {
- const { filterOptions: preFilterOptions, fetchGetGamesCount } = get() || {};
- const filterOptions = { ...preFilterOptions, ...payload };
+ const state = get();
+ const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+ const filterOptions = { ...currentPageState?.filterOptions, ...payload };
const filterCount = Object.values(filterOptions).filter(Boolean).length;
- console.log("===更新综合筛选项", filterOptions, filterCount);
- set({
- filterOptions,
- filterCount,
- pageOption: defaultPageOption,
- });
+
+ if (state.isSearchResult) {
+ set({
+ searchPageState: {
+ ...state.searchPageState,
+ filterOptions,
+ filterCount,
+ pageOption: defaultPageOption,
+ },
+ });
+ } else {
+ set({
+ listPageState: {
+ ...state.listPageState,
+ filterOptions,
+ filterCount,
+ pageOption: defaultPageOption,
+ },
+ });
+ }
// 获取球局数量
- fetchGetGamesCount();
+ state.fetchGetGamesCount();
},
// 清空综合筛选选项
clearFilterOptions: () => {
- const { getMatchesData, fetchGetGamesCount } = get() || {};
- set({
- filterOptions: defaultFilterOptions,
- filterCount: 0,
- pageOption: defaultPageOption,
- });
+ const state = get();
+ const { getMatchesData, fetchGetGamesCount } = state;
+
+ if (state.isSearchResult) {
+ set({
+ searchPageState: {
+ ...state.searchPageState,
+ filterOptions: defaultFilterOptions,
+ filterCount: 0,
+ pageOption: defaultPageOption,
+ },
+ });
+ } else {
+ set({
+ listPageState: {
+ ...state.listPageState,
+ filterOptions: defaultFilterOptions,
+ filterCount: 0,
+ pageOption: defaultPageOption,
+ },
+ });
+ }
getMatchesData();
fetchGetGamesCount();
},
// 加载更多数据
loadMoreMatches: () => {
- const { pageOption, fetchMatches, isHasMoreData } = get() || {};
+ const state = get();
+ const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+ const { pageOption, isHasMoreData } = currentPageState || {};
+
if (!isHasMoreData) {
return;
}
- set({
- pageOption: {
- page: pageOption?.page + 1,
- pageSize: 20,
- },
- });
+
+ const newPageOption = {
+ page: (pageOption?.page || 1) + 1,
+ pageSize: 20,
+ };
+
+ if (state.isSearchResult) {
+ set({
+ searchPageState: {
+ ...state.searchPageState,
+ pageOption: newPageOption,
+ },
+ });
+ } else {
+ set({
+ listPageState: {
+ ...state.listPageState,
+ pageOption: newPageOption,
+ },
+ });
+ }
// 加载更多时追加数据到现有数组
- fetchMatches({}, false, true);
+ state.fetchMatches({}, false, true);
},
// 初始化搜索条件 重新搜索
initialFilterSearch: async () => {
- const { getMatchesData, fetchGetGamesCount } = get();
- set({
- distanceQuickFilter: defaultDistanceQuickFilter,
- filterOptions: defaultFilterOptions,
- pageOption: defaultPageOption,
- });
+ const state = get();
+ const { getMatchesData, fetchGetGamesCount } = state;
+
+ if (state.isSearchResult) {
+ set({
+ searchPageState: {
+ ...state.searchPageState,
+ distanceQuickFilter: defaultDistanceQuickFilter,
+ filterOptions: defaultFilterOptions,
+ pageOption: defaultPageOption,
+ },
+ });
+ } else {
+ set({
+ listPageState: {
+ ...state.listPageState,
+ distanceQuickFilter: defaultDistanceQuickFilter,
+ filterOptions: defaultFilterOptions,
+ pageOption: defaultPageOption,
+ },
+ });
+ }
fetchGetGamesCount();
return await getMatchesData();
},
// 更新store数据
updateState: (payload: Record) => {
- const state = get();
- console.log("Store: 更新数据:", state);
set({
...(payload || {}),
});
},
+
+ // 更新列表页状态中的特定字段
+ updateListPageState: (payload: Record) => {
+ const state = get();
+ set({
+ listPageState: {
+ ...state.listPageState,
+ ...payload,
+ },
+ });
+ console.log("===更新列表页状态:", state);
+ },
+
+ // 更新搜索页状态中的特定字段
+ updateSearchPageState: (payload: Record) => {
+ const state = get();
+ set({
+ searchPageState: {
+ ...state.searchPageState,
+ ...payload,
+ },
+ });
+ console.log("===更新搜索页状态:", state);
+ },
}));
// 导出便捷的 hooks
diff --git a/src/utils/getNavbarHeight.ts b/src/utils/getNavbarHeight.ts
index 0332c5b..988724f 100644
--- a/src/utils/getNavbarHeight.ts
+++ b/src/utils/getNavbarHeight.ts
@@ -1,13 +1,39 @@
import Taro from "@tarojs/taro";
-export const getNavbarHeight = (): { statusBarHeight: number; navbarHeight: number; totalHeight: number; } => {
+export const getNavbarHeight = (): { statusBarHeight: number; navBarHeight: number; totalHeight: number; } => {
+ // 1. 获取系统信息,包含状态栏高度
const systemInfo = Taro.getSystemInfoSync();
- const statusBarHeight = systemInfo?.statusBarHeight || 0;
+ const statusBarHeight = systemInfo.statusBarHeight || 0;
+
+
const isIOS = systemInfo.platform === "ios";
- const navbarHeight = isIOS ? 44 : 48;
+ const isIPad = systemInfo.model?.toLowerCase().includes('ipad') ||
+ (systemInfo.platform === 'ios' && systemInfo.screenWidth >= 768);
+
+ // 2. 获取胶囊按钮位置信息(用于计算导航栏高度)
+ const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
+
+ let navBarHeight = 44 // 默认导航栏高度
+
+ if (menuButtonInfo && menuButtonInfo.top) {
+ // 计算导航栏高度公式
+ navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+ } else {
+ // 胶囊按钮信息不可用时,使用默认值
+ if (isIPad) {
+ navBarHeight = 50; // iPad 上的导航栏高度通常更高
+ } else if (isIOS) {
+ navBarHeight = 44; // iPhone 导航栏高度
+ } else {
+ navBarHeight = 48; // Android 导航栏高度
+ }
+ }
+
+ const totalHeight = statusBarHeight + navBarHeight;
+
return {
statusBarHeight,
- navbarHeight,
- totalHeight: statusBarHeight + navbarHeight,
+ navBarHeight,
+ totalHeight,
};
};
\ No newline at end of file
diff --git a/types/list/types.ts b/types/list/types.ts
index f3d2fd8..6e05841 100644
--- a/types/list/types.ts
+++ b/types/list/types.ts
@@ -20,12 +20,45 @@ export interface IFilterOptions {
playType?: string, // 玩法
distanceFilter?: string
}
+// 页面状态接口
+export interface PageState {
+ data: TennisMatch[]
+ recommendList: TennisMatch[]
+ isShowFilterPopup: boolean
+ filterOptions: IFilterOptions
+ distanceQuickFilter: {
+ distance: string
+ quick: string
+ }
+ filterCount: number
+ pageOption: {
+ page: number
+ pageSize: number
+ }
+ gamesNum: number
+ isHasMoreData: boolean
+}
+
+// 列表页状态
+export interface ListPageState extends PageState {
+ isShowInputCustomerNavBar: boolean
+}
+
+// 搜索页状态
+export interface SearchPageState extends PageState {
+ searchResultData: TennisMatch[]
+ suggestionList: string[]
+ isShowSuggestion: boolean
+ searchHistory: {id: number, title: string}[]
+ searchHistoryParams: Record
+}
+
+// 主状态接口
export interface ListState {
currentPage: string
isSearchResult: boolean
- searchResultData: TennisMatch[]
- matches: TennisMatch[]
- recommendList: TennisMatch[]
+ listPageState: ListPageState
+ searchPageState: SearchPageState
location: {
latitude: number
longitude: number
@@ -33,32 +66,11 @@ export interface ListState {
loading: boolean
error: string | null
searchValue: string
- isShowFilterPopup: boolean
- filterOptions: IFilterOptions
- filterCount: number
distanceData: any[]
quickFilterData: any[]
- distanceQuickFilter: {
- distance: string
- quick: string
- }
timeBubbleData: BubbleOption[]
dateRangeOptions: BubbleOption[]
gamesNum: number
- isHasMoreData: boolean
- isScrollTop: boolean
- searchHistoryParams: Record
- searchHistory: {id: number, title: string}[]
- suggestionList: string[]
- isShowSuggestion: boolean
- isShowInputCustomerNavBar: boolean
- isShowResultInputCustomerNavBar: boolean
- isOpenDistancePopup: boolean,
- isOpenQuickFilterPopup: boolean,
- pageOption: {
- page: number
- pageSize: number
- }
}
export interface ListActions {
@@ -67,6 +79,8 @@ export interface ListActions {
getMatchesData: () => void
clearError: () => void
updateState: (payload: Record) => void
+ updateListPageState: (payload: Record) => void
+ updateSearchPageState: (payload: Record) => void
updateFilterOptions: (payload: Record) => void
clearFilterOptions: () => void
getSearchHistory: () => Promise