From 6295b2b379488ee57f60d93ffe17b99fc5a42788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=91=9E?= Date: Sun, 14 Sep 2025 12:22:01 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/game_pages/list/index.tsx | 44 +++--- src/game_pages/searchResult/index.tsx | 31 ++-- src/store/listStore.ts | 202 +++++++++++++------------- types/list/types.ts | 11 +- 4 files changed, 154 insertions(+), 134 deletions(-) diff --git a/src/game_pages/list/index.tsx b/src/game_pages/list/index.tsx index ce30aaa..52c10bc 100644 --- a/src/game_pages/list/index.tsx +++ b/src/game_pages/list/index.tsx @@ -35,7 +35,8 @@ const ListPage = () => { clearFilterOptions, initialFilterSearch, loadMoreMatches, - fetchGetGamesCount + fetchGetGamesCount, + updateDistanceQuickFilter } = store; const { @@ -100,15 +101,15 @@ const ListPage = () => { // 监听距离和排序方式变化，自动调用接口 - useEffect(() => { - // 只有当 distanceQuickFilter 有值时才调用接口 - if (distanceQuickFilter?.distance !== undefined || distanceQuickFilter?.quick !== undefined) { + // useEffect(() => { + // // 只有当 distanceQuickFilter 有值时才调用接口 + // if (distanceQuickFilter?.distanceFilter !== undefined || distanceQuickFilter?.order !== undefined) { - if (distanceQuickFilter?.quick !== "0") { - getMatchesData(); - } - } - }, [distanceQuickFilter?.distance, distanceQuickFilter?.quick]); + // // if (distanceQuickFilter?.quick !== "0") { + // getMatchesData(); + // // } + // } + // }, [distanceQuickFilter?.distanceFilter, distanceQuickFilter?.order]); // 获取位置信息 const getLocation = async () => { @@ -133,7 +134,7 @@ const ListPage = () => { } const refreshMatches = () => { - initialFilterSearch(); + initialFilterSearch(true); }; // const getLoadMoreMatches = () => { @@ -194,16 +195,19 @@ const ListPage = () => { updateFilterOptions(params); }; - const handleSearchChange = () => { }; + const handleSearchChange = () => { }; // 距离筛选 const handleDistanceOrQuickChange = (name, value) => { - updateListPageState({ - distanceQuickFilter: { - ...distanceQuickFilter, - [name]: value, - }, + updateDistanceQuickFilter({ + [name]: value, }); + // updateListPageState({ + // distanceQuickFilter: { + // ...distanceQuickFilter, + // [name]: value, + // }, + // }); }; const handleSearchClick = () => { @@ -262,10 +266,10 @@ const ListPage = () => { cityOptions={distanceData} quickOptions={quickFilterData} onChange={handleDistanceOrQuickChange} - cityName="distance" - quickName="quick" - cityValue={distanceQuickFilter?.distance} - quickValue={distanceQuickFilter?.quick} + cityName="distanceFilter" + quickName="order" + cityValue={distanceQuickFilter?.distanceFilter} + quickValue={distanceQuickFilter?.order} /> diff --git a/src/game_pages/searchResult/index.tsx b/src/game_pages/searchResult/index.tsx index b9ed085..da342fe 100644 --- a/src/game_pages/searchResult/index.tsx +++ b/src/game_pages/searchResult/index.tsx @@ -23,13 +23,15 @@ const SearchResult = () => { updateFilterOptions, // 更新筛选条件 clearFilterOptions, loadMoreMatches, - getMatchesData + getMatchesData, + initialFilterSearch, + updateDistanceQuickFilter } = useListStore() || {}; const { isShowFilterPopup, distanceQuickFilter, - searchResultData, + data, recommendList, filterCount, filterOptions, @@ -48,6 +50,8 @@ const SearchResult = () => { getMatchesData(); return () => { + + initialFilterSearch() updateState({ currentPage: '', isSearchResult: false @@ -80,12 +84,15 @@ const SearchResult = () => { // 距离筛选 const handleDistanceOrQuickChange = (name, value) => { - updateSearchPageState({ - distanceQuickFilter: { - ...distanceQuickFilter, - [name]: value, - }, + updateDistanceQuickFilter({ + [name]: value, }); + // updateSearchPageState({ + // distanceQuickFilter: { + // ...distanceQuickFilter, + // [name]: value, + // }, + // }); }; const refreshMatches = () => { @@ -120,10 +127,10 @@ const SearchResult = () => { cityOptions={distanceData} quickOptions={quickFilterData} onChange={handleDistanceOrQuickChange} - cityName="distance" - quickName="quick" - cityValue={distanceQuickFilter?.distance} - quickValue={distanceQuickFilter?.quick} + cityName="distanceFilter" + quickName="order" + cityValue={distanceQuickFilter?.distanceFilter} + quickValue={distanceQuickFilter?.order} /> {/* 筛选 icon */} { {/* 列表内容 */} ()((set, get) => ({ const state = get(); const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState; const filterOptions = currentPageState?.filterOptions || {}; + // 全城和快捷筛选 const distanceQuickFilter = currentPageState?.distanceQuickFilter || {}; + const { distanceFilter, order } = distanceQuickFilter || {}; const params = { pageOption: currentPageState?.pageOption, @@ -164,8 +166,9 @@ export const useListStore = create()((set, get) => ({ ntrpMin: filterOptions?.ntrp?.[0], ntrpMax: filterOptions?.ntrp?.[1], dateRange: filterOptions?.dateRange, + distanceFilter: distanceFilter, }, - order: distanceQuickFilter?.quick, + order: order, lat: state?.location?.latitude, lng: state?.location?.longitude, }; @@ -178,32 +181,45 @@ export const useListStore = create()((set, get) => ({ const { error, data, loading, count, isAppend = false } = payload; const isHasMoreData = count > 0; + const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState; + const currentData = currentPageState?.data || []; + const newData = isAppend ? [...currentData, ...(data || [])] : (data || []); + state.updateCurrentPageState({ + data: newData, + isHasMoreData, + }); + + set({ + error, + loading, + }); + if (state.isSearchResult) { // 更新搜索页状态 - const currentData = state.searchPageState?.searchResultData || []; - const newData = isAppend ? [...currentData, ...(data || [])] : (data || []); - set({ - searchPageState: { - ...state.searchPageState, - searchResultData: newData, - isHasMoreData, - }, - error, - loading, - }); + // const currentData = state.searchPageState?.data || []; + // const newData = isAppend ? [...currentData, ...(data || [])] : (data || []); + // set({ + // searchPageState: { + // ...state.searchPageState, + // data: newData, + // isHasMoreData, + // }, + // error, + // loading, + // }); } else { // 更新列表页状态 - const currentData = state.listPageState?.data || []; - const newData = isAppend ? [...currentData, ...(data || [])] : (data || []); - set({ - listPageState: { - ...state.listPageState, - data: newData, - isHasMoreData, - }, - error, - loading, - }); + // const currentData = state.listPageState?.data || []; + // const newData = isAppend ? [...currentData, ...(data || [])] : (data || []); + // set({ + // listPageState: { + // ...state.listPageState, + // data: newData, + // isHasMoreData, + // }, + // error, + // loading, + // }); } }, @@ -222,11 +238,11 @@ export const useListStore = create()((set, get) => ({ // 获取当前页面的距离筛选 const state = get(); const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState; - console.log("===当前页面状态:", state.isSearchResult, currentPageState); + console.log("===获取列表数据=当前页面状态:", state.isSearchResult, currentPageState); const distanceQuickFilter = currentPageState?.distanceQuickFilter || {}; // 是否选择了智能排序 - const isIntegrate = distanceQuickFilter?.quick === "0"; + const isIntegrate = distanceQuickFilter?.order === "0"; let fetchFn = getGamesList; if (isIntegrate) { @@ -352,60 +368,64 @@ export const useListStore = create()((set, get) => ({ set({ error: null }); }, + getCurrentPageState: () => { + const state = get(); + return { + currentPageState: state.isSearchResult ? state.searchPageState : state.listPageState, + currentPageKey: state.isSearchResult ? "searchPageState" : "listPageState", + }; + }, + + // 更新当前页面状态 + updateCurrentPageState: (payload: Record) => { + const state = get(); + const { currentPageState, currentPageKey } = state.getCurrentPageState(); + set({ + [currentPageKey]: { ...currentPageState, ...payload } + }); + }, + // 更新综合筛选项 updateFilterOptions: (payload: Record) => { const state = get(); - const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState; + const { currentPageState } = state.getCurrentPageState(); const filterOptions = { ...currentPageState?.filterOptions, ...payload }; const filterCount = Object.values(filterOptions).filter(Boolean).length; - - if (state.isSearchResult) { - set({ - searchPageState: { - ...state.searchPageState, - filterOptions, - filterCount, - pageOption: defaultPageOption, - }, - }); - } else { - set({ - listPageState: { - ...state.listPageState, - filterOptions, - filterCount, - pageOption: defaultPageOption, - }, - }); - } + + state.updateCurrentPageState({ + filterOptions, + filterCount, + pageOption: defaultPageOption, + }); // 获取球局数量 state.fetchGetGamesCount(); }, + // 更新距离和快捷筛选 + updateDistanceQuickFilter: (payload: Record) => { + const state = get(); + const { currentPageState } = state.getCurrentPageState(); + const { distanceQuickFilter } = currentPageState || {}; + const newDistanceQuickFilter = { ...distanceQuickFilter, ...payload }; + state.updateCurrentPageState({ + distanceQuickFilter: newDistanceQuickFilter, + pageOption: defaultPageOption, + }); + + state.getMatchesData(); + state.fetchGetGamesCount(); + }, + // 清空综合筛选选项 clearFilterOptions: () => { 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, - }, - }); - } + + state.updateCurrentPageState({ + filterOptions: defaultFilterOptions, + filterCount: 0, + pageOption: defaultPageOption, + }); getMatchesData(); fetchGetGamesCount(); }, @@ -424,52 +444,38 @@ export const useListStore = create()((set, get) => ({ page: (pageOption?.page || 1) + 1, pageSize: 20, }; - - if (state.isSearchResult) { - set({ - searchPageState: { - ...state.searchPageState, - pageOption: newPageOption, - }, - }); - } else { - set({ - listPageState: { - ...state.listPageState, - pageOption: newPageOption, - }, - }); - } + + state.updateCurrentPageState({ + pageOption: newPageOption, + }); + // 加载更多时追加数据到现有数组 state.fetchMatches({}, false, true); }, // 初始化搜索条件 重新搜索 - initialFilterSearch: async () => { + initialFilterSearch: async (isSearchData = false) => { const state = get(); const { getMatchesData, fetchGetGamesCount } = state; - + if (state.isSearchResult) { set({ searchPageState: { - ...state.searchPageState, - distanceQuickFilter: defaultDistanceQuickFilter, - filterOptions: defaultFilterOptions, - pageOption: defaultPageOption, + ...searchPageStateDefaultValue }, }); } else { set({ listPageState: { - ...state.listPageState, - distanceQuickFilter: defaultDistanceQuickFilter, - filterOptions: defaultFilterOptions, - pageOption: defaultPageOption, + ...listPageStateDefaultValue }, }); } - fetchGetGamesCount(); - return await getMatchesData(); + if (!isSearchData) { + return; + } + await fetchGetGamesCount(); + await getMatchesData(); }, // 更新store数据 @@ -481,6 +487,7 @@ export const useListStore = create()((set, get) => ({ // 更新列表页状态中的特定字段 updateListPageState: (payload: Record) => { + console.log("===更新列表页状态:", payload); const state = get(); set({ listPageState: { @@ -488,7 +495,6 @@ export const useListStore = create()((set, get) => ({ ...payload, }, }); - console.log("===更新列表页状态:", state); }, // 更新搜索页状态中的特定字段 diff --git a/types/list/types.ts b/types/list/types.ts index 6e05841..c038980 100644 --- a/types/list/types.ts +++ b/types/list/types.ts @@ -27,8 +27,8 @@ export interface PageState { isShowFilterPopup: boolean filterOptions: IFilterOptions distanceQuickFilter: { - distance: string - quick: string + distanceFilter: string + order: string } filterCount: number pageOption: { @@ -46,7 +46,7 @@ export interface ListPageState extends PageState { // 搜索页状态 export interface SearchPageState extends PageState { - searchResultData: TennisMatch[] + data: TennisMatch[] suggestionList: string[] isShowSuggestion: boolean searchHistory: {id: number, title: string}[] @@ -88,9 +88,12 @@ export interface ListActions { searchSuggestion: (val: string) => Promise getSearchParams: () => Record loadMoreMatches: () => void - initialFilterSearch: () => void + initialFilterSearch: (isSearchData?: boolean) => void setListData: (payload: IPayload) => void fetchGetGamesCount: () => Promise + getCurrentPageState: () => { currentPageState: any; currentPageKey: string } + updateCurrentPageState: (payload: Record) => void + updateDistanceQuickFilter: (payload: Record) => void } export interface IPayload {