This commit is contained in:
李瑞
2025-09-14 12:22:01 +08:00
parent 01aad920ad
commit 6295b2b379
4 changed files with 154 additions and 134 deletions

View File

@@ -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}
/>
</View>

View File

@@ -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 */}
<View
@@ -156,7 +163,7 @@ const SearchResult = () => {
{/* 列表内容 */}
<ListContainer
data={searchResultData}
data={data}
recommendList={recommendList}
loading={loading}
error={error}

View File

@@ -31,8 +31,8 @@ const defaultFilterOptions: IFilterOptions = {
// const defaultDistance = "all"; // 默认距离
const defaultDistanceQuickFilter = {
distance: "",
quick: "0",
distanceFilter: "",
order: "0",
};
const defaultPageOption = {
@@ -73,7 +73,7 @@ const listPageStateDefaultValue = {
const searchPageStateDefaultValue = {
...pageStateDefaultValue,
// 搜索结果数据
searchResultData: [],
data: [],
// 联想词
suggestionList: [],
// 是否显示联想词
@@ -154,7 +154,9 @@ export const useListStore = create<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<string, any>) => {
const state = get();
const { currentPageState, currentPageKey } = state.getCurrentPageState();
set({
[currentPageKey]: { ...currentPageState, ...payload }
});
},
// 更新综合筛选项
updateFilterOptions: (payload: Record<string, any>) => {
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<string, any>) => {
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<TennisStore>()((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<TennisStore>()((set, get) => ({
// 更新列表页状态中的特定字段
updateListPageState: (payload: Record<string, any>) => {
console.log("===更新列表页状态:", payload);
const state = get();
set({
listPageState: {
@@ -488,7 +495,6 @@ export const useListStore = create<TennisStore>()((set, get) => ({
...payload,
},
});
console.log("===更新列表页状态:", state);
},
// 更新搜索页状态中的特定字段

View File

@@ -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<void>
getSearchParams: () => Record<string, any>
loadMoreMatches: () => void
initialFilterSearch: () => void
initialFilterSearch: (isSearchData?: boolean) => void
setListData: (payload: IPayload) => void
fetchGetGamesCount: () => Promise<void>
getCurrentPageState: () => { currentPageState: any; currentPageKey: string }
updateCurrentPageState: (payload: Record<string, any>) => void
updateDistanceQuickFilter: (payload: Record<string, any>) => void
}
export interface IPayload {