bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

列表

Browse Source
This commit is contained in:
李瑞
2025-09-14 01:18:23 +08:00
parent c44bd01613
commit 01aad920ad
17 changed files with 569 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/store/global.ts
View File

@@ -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<GlobalStore>()((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,
},
});
},

357
src/store/listStore.ts
View File

@@ -40,32 +40,73 @@ const defaultPageOption = {
pageSize: 20,
};
// 创建 store
const now = new Date();
export const useListStore = create<TennisStore>()((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<TennisStore>()((set, get) => ({
{ label: "距离更近", value: "1" },
{ label: "时间更近", value: "2" },
],
// 距离筛选和快捷筛选
distanceQuickFilter: defaultDistanceQuickFilter,
// 气泡日期范围
dateRangeOptions: [
@@ -97,42 +136,28 @@ export const useListStore = create<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((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<TennisStore>()((set, get) => ({
// 更新综合筛选项
updateFilterOptions: (payload: Record<string, any>) => {
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<string, any>) => {
const state = get();
console.log("Store: 更新数据:", state);
set({
...(payload || {}),
});
},
// 更新列表页状态中的特定字段
updateListPageState: (payload: Record<string, any>) => {
const state = get();
set({
listPageState: {
...state.listPageState,
...payload,
},
});
console.log("===更新列表页状态:", state);
},
// 更新搜索页状态中的特定字段
updateSearchPageState: (payload: Record<string, any>) => {
const state = get();
set({
searchPageState: {
...state.searchPageState,
...payload,
},
});
console.log("===更新搜索页状态:", state);
},
}));
// 导出便捷的 hooks