添加行政区选择

This commit is contained in:
张成
2025-11-22 22:50:18 +08:00
parent 6eefcd27a9
commit 17015c0cca
11 changed files with 708 additions and 49 deletions

View File

@@ -9,6 +9,7 @@ import {
getGamesCount,
getCities,
getCityQrCode,
getDistricts,
} from "../services/listApi";
import {
ListActions,
@@ -20,12 +21,23 @@ import {
function translateCityData(dataTree) {
return dataTree.map((item) => {
const { children, ...rest } = item;
// 只保留两级:国家和省份,去掉第三级(区域)
const processedChildren = children?.length > 0
? children.map(child => ({
...child,
text: child.name,
label: child.name,
value: child.name,
children: null, // 去掉第三级
}))
: null;
return {
...rest,
text: rest.name,
label: rest.name,
value: rest.name,
children: children?.length > 0 ? translateCityData(children) : null,
children: processedChildren,
};
});
}
@@ -48,6 +60,7 @@ const defaultFilterOptions: IFilterOptions = {
const defaultDistanceQuickFilter = {
distanceFilter: "",
order: "0",
district: "", // 新增:行政区筛选
};
const defaultPageOption = {
@@ -155,7 +168,8 @@ const commonStateDefaultValue = {
],
cities: [],
cityQrCode: [],
area: ['', '', ''] as [string, string, string],
area: ['', ''] as [string, string], // 改为两级:国家、省份
districts: [], // 新增:行政区列表
}
// 创建 store
@@ -176,42 +190,45 @@ export const useListStore = create<TennisStore>()((set, get) => ({
const filterOptions = currentPageState?.filterOptions || {};
// 全城和快捷筛选
const distanceQuickFilter = currentPageState?.distanceQuickFilter || {};
const { distanceFilter, order } = distanceQuickFilter || {};
const { distanceFilter, order, district } = distanceQuickFilter || {};
// 从 area 中获取省份和城市名称area 格式: ["中国", 省份, 城市]
// 从 area 中获取省份名称area 格式: ["中国", 省份]
const province = state.area?.[1] || ""; // area[1] 是省份
const city = state.area?.at(-1) || ""; // area[2] 是城市(虽然参数名是 city但实际是城市名称
// 处理 dateRange确保始终有两个值
let dateRange: [string, string] = defaultDateRange;
const filterDateRange = filterOptions?.dateRange;
if (Array.isArray(filterDateRange)) {
if (filterDateRange.length === 0) {
// 如果没有选择日期,使用默认值
dateRange = defaultDateRange;
} else if (filterDateRange.length === 1) {
// 如果只选择了一个日期,转换为两个相同的值
const singleDate = filterDateRange[0] as string;
dateRange = [singleDate, singleDate];
} else if (filterDateRange.length >= 2) {
// 如果选择了两个或更多日期,取前两个
// 如果两个日期相同,保持两个相同的值
dateRange = [filterDateRange[0] as string, filterDateRange[1] as string];
// city 参数逻辑:
// 1. 如果选择了行政区district 有值使用行政区的名称label
// 2. 如果是"全城"distanceFilter 为空),不传 city
let city: string | undefined = undefined;
if (district) {
// 从 districts 数组中查找对应的行政区名称
const selectedDistrict = state.districts.find(item => item.value === district);
if (selectedDistrict) {
city = selectedDistrict.label; // 传递行政区名称,如"静安"
}
}
// 如果是"全城"distanceFilter 为空city 保持 undefined不会被传递
// 使用 filterOptions 中的 dateRange
const dateRange: [string, string] = filterOptions?.dateRange || defaultDateRange;
const searchOption: any = {
...filterOptions,
title: state.searchValue,
ntrpMin: filterOptions?.ntrp?.[0],
ntrpMax: filterOptions?.ntrp?.[1],
dateRange: dateRange, // 确保始终是两个值的数组
distanceFilter: distanceFilter,
province: province, // 添加省份参数
};
// 只在有值时添加 city 参数
if (city) {
searchOption.city = city;
}
const params = {
pageOption: currentPageState?.pageOption,
seachOption: {
...filterOptions,
title: state.searchValue,
ntrpMin: filterOptions?.ntrp?.[0],
ntrpMax: filterOptions?.ntrp?.[1],
dateRange: dateRange, // 确保始终是两个值的数组
distanceFilter: distanceFilter,
province: province, // 添加省份参数
city: city, // 添加区县参数(虽然叫 city但实际是区县
},
seachOption: searchOption,
order: order,
lat: state?.location?.latitude,
lng: state?.location?.longitude,
@@ -618,7 +635,36 @@ export const useListStore = create<TennisStore>()((set, get) => ({
})
},
updateArea(payload: [string, string, string]) {
// 新增:获取行政区列表
async getDistricts() {
try {
const state = get();
// 从 area 中获取省份area 格式: ["中国", 省份, 城市]
const country = "中国";
const province = state.area?.at(1) || "上海"; // area[1] 是省份
const res = await getDistricts({
country,
state: province
});
if (res.code === 0 && res.data) {
const districts = res.data.map((item) => ({
label: item.cn_city,
value: item.id.toString(),
id: item.id,
}));
set({ districts });
return districts;
}
return [];
} catch (error) {
console.error("获取行政区列表失败:", error);
return [];
}
},
updateArea(payload: [string, string]) {
const state = get();
set({
...state,