列表联调

This commit is contained in:
李瑞
2025-09-07 18:54:36 +08:00
parent 2d0d728969
commit 6feb7057af
28 changed files with 1225 additions and 740 deletions

View File

@@ -1,22 +1,49 @@
import { create } from 'zustand'
import { getGamesList, getGamesIntegrateList, getSearchHistory, clearHistory, searchSuggestion } from '../services/listApi'
import { ListActions, IFilterOptions, ListState } from '../../types/list/types'
import { create } from "zustand";
import {
getGamesList,
getGamesIntegrateList,
getSearchHistory,
clearHistory,
searchSuggestion,
} from "../services/listApi";
import {
ListActions,
IFilterOptions,
ListState,
IPayload,
} from "../../types/list/types";
import dateRangeUtils from '@/utils/dateRange'
// 完整的 Store 类型
type TennisStore = ListState & ListActions
type TennisStore = ListState & ListActions;
const defaultFilterOptions: IFilterOptions = {
dateRange: [], // 日期区间
timeSlot: '', // 时间段
dateRange: [new Date(), new Date()], // 日期区间
dateRangeQuick: '',
timeSlot: "", // 时间段
ntrp: [1, 5], // NTRP 水平区间
venueType: '', // 场地类型
playType: '', // 玩法
venueType: "", // 场地类型
playType: "", // 玩法
};
const defaultDistance = 'all'; // 默认距离
// const defaultDistance = "all"; // 默认距离
const defaultDistanceQuickFilter = {
distance: "",
quick: "0",
};
const defaultPageOption = {
page: 1,
pageSize: 20,
};
// 创建 store
export const useListStore = create<TennisStore>()((set, get) => ({
currentPage: "",
isSearchResult: false,
searchResultData: [],
// dateRange: [new Date(), new Date()], // 日期区间
// 初始状态
matches: [],
// 推荐列表
@@ -26,10 +53,10 @@ export const useListStore = create<TennisStore>()((set, get) => ({
longitude: 0,
}, // 位置
// 是否加载中
loading: false,
loading: true,
error: null,
// 搜索的value
searchValue: '',
searchValue: "",
// 是否展示综合筛选弹窗
isShowFilterPopup: false,
// 综合筛选项
@@ -37,56 +64,46 @@ export const useListStore = create<TennisStore>()((set, get) => ({
// 综合筛选 选择的筛选数量
filterCount: 0,
// 距离筛选
distance: defaultDistance,
// distance: defaultDistance,
// 快捷筛选
quickFilter: 1, // 1: 默认 2: 好评 3: 销量
// 距离筛选数据
distanceData: [
{ id: 0, label: "全城", value: "0" },
{ id: 0, label: "全城", value: "" },
{ id: 1, label: "3km", value: "3" },
{ id: 2, label: "5km", value: "5" },
{ id: 3, label: "10km", value: "10" },
],
// 快捷筛选数据
quickFilterData: [
{ text: "默认排序", value: "0" },
{ text: "好评排序", value: "1" },
{ text: "销量排序", value: "2" },
{ label: "智能排序", value: "0" },
{ label: "距离更近", value: "1" },
{ label: "时间更近", value: "2" },
],
// 距离筛选和快捷筛选
distanceQuickFilter: {
distance: '全城',
quick: '0',
},
distanceQuickFilter: defaultDistanceQuickFilter,
// 气泡日期范围
dateRangeOptions: [
{ id: 1, label: "本周末", value: "1" },
{ id: 2, label: "一周内", value: "2" },
{ id: 3, label: "一月内", value: "3" },
],
// 时间气泡数据
timeBubbleData: [
{ id: 1, label: "晨间 6:00-10:00", value: "1" },
{ id: 2, label: "上午 10:00-12:00", value: "2" },
{ id: 3, label: "中午 12:00-14:00", value: "3" },
{ id: 4, label: "下午 14:00-18:00", value: "4" },
{ id: 5, label: "晚上 18:00-22:00", value: "5" },
{ id: 6, label: "夜间 22:00-24:00", value: "6" },
],
// 场地类型数据
locationOptions: [
{ id: 1, label: "室内", value: "1" },
{ id: 2, label: "室外", value: "2" },
{ id: 3, label: "半室外", value: "3" },
],
// 玩法数据
gamePlayOptions: [
{ id: 1, label: "不限", value: "不限" },
{ id: 2, label: "单打", value: "单打" },
{ id: 3, label: "双打", value: "双打" },
{ id: 4, label: "娱乐", value: "娱乐" },
{ id: 5, label: "拉球", value: "拉球" },
{ id: 1, label: "晨间 6:00-10:00", value: "6:00-10:00" },
{ id: 2, label: "上午 10:00-12:00", value: "10:00-12:00" },
{ id: 3, label: "中午 12:00-14:00", value: "12:00-14:00" },
{ id: 4, label: "下午 14:00-18:00", value: "14:00-18:00" },
{ id: 5, label: "晚上 18:00-22:00", value: "18:00-22:00" },
{ id: 6, label: "夜间 22:00-24:00", value: "22:00-24:00" },
],
// 球局数量
gamesNum: 124,
gamesNum: 0,
// 页面滚动距离顶部距离 是否大于0
isScrollTop: false,
// 搜索历史数据
searchHistory: ['上海', '黄浦', '上海', '静安', '徐汇', '黄浦', '普陀', '黄浦', '长宁', '黄浦'],
searchHistory: [],
// 搜索历史数据默认 Top 15
searchHistoryParams: {
page: 1,
@@ -105,157 +122,249 @@ export const useListStore = create<TennisStore>()((set, get) => ({
// 打开快捷筛选框
isOpenQuickFilterPopup: false,
// 分页
pageOption: {
page: 1,
pageSize: 20,
},
pageOption: defaultPageOption,
// 组装搜索数据
getSearchParams: () => {
const state = get()
const state = get();
const filterOptions = state?.filterOptions || {};
console.log('===1111filterOptions', filterOptions)
const distanceQuickFilter = state?.distanceQuickFilter || {};
const params = {
pageOption: state.pageOption,
seachOption: {
...filterOptions,
title: state.searchValue,
ntrpMin: filterOptions?.ntrp?.[0],
ntrpMax: filterOptions?.ntrp?.[1],
dateRange: [
dateRangeUtils.formatDate(filterOptions?.dateRange?.[0]),
dateRangeUtils.formatDate(filterOptions?.dateRange?.[1])
],
},
order: '',
order: distanceQuickFilter?.quick,
lat: state?.location?.latitude,
lng: state?.location?.longitude,
}
};
console.log('===列表参数params', params)
return params;
},
// 初始化获取比赛数据
// 设置搜索的列表结果
setListData: (payload: IPayload) => {
const { isSearchResult } = get();
const { error, data, loading, gamesNum } = payload;
const saveKey = isSearchResult ? "searchResultData" : "matches";
const saveData = { error, loading, gamesNum, [saveKey]: data };
set(saveData);
},
// 获取列表数据(常规搜索)
fetchMatches: async (params) => {
set({ loading: true, error: null })
set({ loading: true, error: null });
const { getSearchParams, setListData, distanceQuickFilter } = get();
try {
const { getSearchParams } = get();
const searchParams = getSearchParams() || {};
const reqParams = {
...(searchParams || {}),
...params,
};
const isIntegrate = distanceQuickFilter?.quick === "0";
let fetchFn = getGamesList;
if (isIntegrate) {
reqParams.order = "";
fetchFn = getGamesIntegrateList;
}
const resData = await getGamesList(reqParams) || {};
console.log('===resData', resData)
console.log("===fetchMatches 获取列表数据参数:", reqParams);
const resData = (await fetchFn(reqParams)) || {};
const { data = {}, code } = resData;
if (code !== 0) {
set({
error: '1',
matches: [],
setListData({
error: "-1",
data: [],
loading: false,
})
gamesNum: 0,
});
}
const { count, rows } = data;
// const list = (rows || []).map(() => {
// return {
// id: "3",
// title: "黄浦区双打约球",
// dateTime: "7月20日(周日)下午6点 2小时",
// location: "仁恒河滨花园网球场",
// distance: "3.5km",
// registeredCount: 3,
// maxCount: 4,
// skillLevel: "2.0 至 2.5",
// matchType: "双打",
// images: [
// "https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center",
// ],
// }
// })
set({
matches: rows || [],
recommendList: rows || [],
error: null,
setListData({
// recommendList: rows || [],
error: '',
data: rows || [],
loading: false,
gamesNum: count,
})
});
} catch (error) {
set({
error,
matches: [],
setListData({
error: "-1",
data: [],
loading: false,
})
gamesNum: 0,
});
}
},
// 获取列表数据(智能筛选)
// getIntegrateListData: async (params) => {
// set({ loading: true, error: null });
// const { getSearchParams, setListData } = get();
// try {
// const searchParams = getSearchParams() || {};
// const reqParams = {
// ...(searchParams || {}),
// ...params,
// };
// reqParams.order = "";
// console.log("===getGamesIntegrateList 获取列表数据参数:", reqParams);
// const resData = (await getGamesIntegrateList(reqParams)) || {};
// const { data = {}, code } = resData;
// if (code !== 0) {
// setListData({
// error: '-1',
// data: [],
// loading: false,
// gamesNum: 0,
// });
// }
// const { count, rows } = data;
// setListData({
// // recommendList: rows || [],
// error: null,
// data: rows || [],
// loading: false,
// gamesNum: count,
// });
// } catch (error) {
// setListData({
// error: null,
// matches: [],
// loading: false,
// gamesNum: 0,
// });
// }
// },
// 获取列表数据
getMatchesData: () => {
const { fetchMatches } = get();
fetchMatches();
// if (distanceQuickFilter?.quick === "0") {
// getIntegrateListData();
// } else {
// fetchMatches();
// }
},
// 获取历史搜索数据
getSearchHistory: async () => {
try {
const params = get()?.searchHistoryParams || {}
const resData = await getSearchHistory(params) || {};
console.log('===resData', resData)
} catch (error) {
}
const params = get()?.searchHistoryParams || {};
const resData = (await getSearchHistory(params)) || {};
const searchHistory = resData?.data?.records || [];
set({
searchHistory,
});
} catch (error) { }
},
// 清空历史记录
clearHistory: async () => {
try {
const resData = await clearHistory() || {};
} catch (error) {
}
set({
searchHistory: [],
})
const params = {};
const resData = (await clearHistory(params)) || {};
if (resData?.code === 0) {
set({
searchHistory: [],
});
}
} catch (error) { }
},
// 获取联想
searchSuggestion: async (val: string) => {
try {
const resData = await searchSuggestion({ val }) || {};
console.log('===获取联想', resData)
// set({
// suggestionList: ['上海球局', '黄浦球局', '上海球局', '静安球局', '徐汇球局', '黄浦球局', '普陀球局', '黄浦球局', '长宁球局', '黄浦球局'],
// isShowSuggestion: true,
// })
const resData = (await searchSuggestion({ val, limit: 10 })) || {};
const recommendations = resData?.data?.recommendations || [];
const total = resData?.data?.total;
set({
suggestionList: recommendations,
isShowSuggestion: total > 0,
});
} catch (error) {
set({
suggestionList: ['上海球局', '黄浦球局', '上海球局', '静安球局', '徐汇球局', '黄浦球局', '普陀球局', '黄浦球局', '长宁球局', '黄浦球局'],
suggestionList: [],
isShowSuggestion: true,
})
});
}
},
// 清除错误信息
clearError: () => {
set({ error: null })
set({ error: null });
},
// 更新综合筛选项
updateFilterOptions: (payload: Record<string, any>) => {
const preFilterOptions = get()?.filterOptions || {}
const filterOptions = { ...preFilterOptions, ...payload }
const filterCount = Object.values(filterOptions).filter(Boolean).length
console.log('===更新综合筛选项', filterOptions, filterCount)
const { filterOptions: preFilterOptions, getMatchesData } = get() || {};
const filterOptions = { ...preFilterOptions, ...payload };
const filterCount = Object.values(filterOptions).filter(Boolean).length;
console.log("===更新综合筛选项", filterOptions, filterCount);
set({
filterOptions,
filterCount
})
filterCount,
pageOption: defaultPageOption,
});
// 重新搜索数据
getMatchesData();
},
// 清空综合筛选选项
clearFilterOptions: () => {
const { getMatchesData } = get() || {};
set({
filterOptions: defaultFilterOptions,
filterCount: 0
})
filterCount: 0,
pageOption: defaultPageOption,
});
getMatchesData();
},
// 加载更多数据
loadMoreMatches: () => {
const { pageOption, getMatchesData } = get() || {};
set({
pageOption: {
page: pageOption?.page + 1,
pageSize: 20,
},
});
getMatchesData();
},
// 初始化搜索条件 重新搜索
initialFilterSearch: () => {
const { getMatchesData } = get();
set({
distanceQuickFilter: defaultDistanceQuickFilter,
filterOptions: defaultFilterOptions,
pageOption: defaultPageOption,
});
getMatchesData();
},
// 更新store数据
updateState: (payload: Record<string, any>) => {
const state = get();
console.log('Store: 更新数据:', state);
console.log("Store: 更新数据:", state);
set({
...(payload || {})
})
}
}))
...(payload || {}),
});
},
}));
// 导出便捷的 hooks
export const useListState = () => useListStore((state) => state)
export const useListState = () => useListStore((state) => state);