diff --git a/src/components/CourtType/index.tsx b/src/components/CourtType/index.tsx
index 7f8b163..cf51e53 100644
--- a/src/components/CourtType/index.tsx
+++ b/src/components/CourtType/index.tsx
@@ -8,10 +8,10 @@ import styles from './index.module.scss'
interface IProps {
name: string;
options: BubbleOption[];
- value: string;
- onChange: (name: string, value: string) => void;
+ value: string | string[];
+ onChange: (name: string, value: string | string[] | number | (string | number)[]) => void;
}
-const GamePlayType = (props: IProps) => {
+const CourtType = (props: IProps) => {
const { name, onChange , options, value} = props;
return (
@@ -24,8 +24,9 @@ const GamePlayType = (props: IProps) => {
size="small"
columns={3}
name={name}
+ multiple={true}
/>
);
};
-export default GamePlayType;
+export default CourtType;
diff --git a/src/components/FilterPopup/index.tsx b/src/components/FilterPopup/index.tsx
index 8057ad1..1891814 100644
--- a/src/components/FilterPopup/index.tsx
+++ b/src/components/FilterPopup/index.tsx
@@ -87,10 +87,12 @@ const FilterPopup = (props: FilterPopupProps) => {
/**
* @description 筛选选项改变
* @param name 选项名称
- * @param value 选项值
+ * @param value 选项值(单选时为字符串,多选时为数组)
*/
- const handleFilterChange = (name, value) => {
- onChange({ [name]: value });
+ const handleFilterChange = (name: string, value: string | string[] | number | (string | number)[]) => {
+ // 多选时,如果数组为空,传空数组;单选时保持原值
+ const finalValue = Array.isArray(value) && value.length === 0 ? [] : value;
+ onChange({ [name]: finalValue });
};
/**
@@ -147,12 +149,13 @@ const FilterPopup = (props: FilterPopupProps) => {
{/* 范围选择 */}
@@ -188,14 +191,14 @@ const FilterPopup = (props: FilterPopupProps) => {
onChange={handleFilterChange}
name="venueType"
options={locationOptions}
- value={filterOptions?.venueType}
+ value={Array.isArray(filterOptions?.venueType) ? filterOptions.venueType : (filterOptions?.venueType ? [filterOptions.venueType] : [])}
/>
{/* 玩法 */}
diff --git a/src/components/GamePlayType/index.tsx b/src/components/GamePlayType/index.tsx
index 7a70de0..b6bd360 100644
--- a/src/components/GamePlayType/index.tsx
+++ b/src/components/GamePlayType/index.tsx
@@ -7,9 +7,9 @@ import styles from "./index.module.scss";
import { BubbleOption } from "types/list/types";
interface IProps {
name: string;
- value: string;
+ value: string | string[];
options: BubbleOption[];
- onChange: (name: string, value: string) => void;
+ onChange: (name: string, value: string | string[] | number | (string | number)[]) => void;
}
const GamePlayType = (props: IProps) => {
const { name, onChange, value, options } = props;
@@ -24,6 +24,7 @@ const GamePlayType = (props: IProps) => {
size="small"
columns={3}
name={name}
+ multiple={true}
/>
{/* {
diff --git a/src/store/listStore.ts b/src/store/listStore.ts
index f382cfa..de191e0 100644
--- a/src/store/listStore.ts
+++ b/src/store/listStore.ts
@@ -51,10 +51,10 @@ const defaultDateRange: [string, string] = [dayjs().format('YYYY-MM-DD'), dayjs(
const defaultFilterOptions: IFilterOptions = {
dateRange: defaultDateRange, // 日期区间
- timeSlot: "", // 时间段
+ timeSlot: [], // 时间段(多选,默认为空数组)
ntrp: [1, 5], // NTRP 水平区间
- venueType: "", // 场地类型
- playType: "", // 玩法
+ venueType: [], // 场地类型(多选,默认为空数组)
+ playType: [], // 玩法(多选,默认为空数组)
};
// const defaultDistance = "all"; // 默认距离
@@ -502,7 +502,20 @@ export const useListStore = create()((set, get) => ({
const state = get();
const { currentPageState } = state.getCurrentPageState();
const filterOptions = { ...currentPageState?.filterOptions, ...payload };
- const filterCount = Object.values(filterOptions).filter(Boolean).length;
+
+ // 计算筛选数量:排除 dateRange、ntrp 默认值,以及空数组和空字符串
+ const filterCount = Object.entries(filterOptions).filter(([key, value]) => {
+ if (key === 'dateRange') return false; // 日期区间不算筛选
+ if (key === 'ntrp') {
+ // NTRP 只有不是默认值 [1, 5] 时才算筛选
+ const ntrp = value as [number, number];
+ return ntrp && (ntrp[0] !== 1 || ntrp[1] !== 5);
+ }
+ // 数组为空数组或字符串为空字符串时不算筛选
+ if (Array.isArray(value)) return value.length > 0;
+ if (typeof value === 'string') return value !== '';
+ return Boolean(value);
+ }).length;
// 先更新状态
state.updateCurrentPageState({
diff --git a/types/list/types.ts b/types/list/types.ts
index 2875776..bc1b8b1 100644
--- a/types/list/types.ts
+++ b/types/list/types.ts
@@ -15,10 +15,10 @@ export interface TennisMatch {
}
export interface IFilterOptions {
dateRange: [string, string]; // 日期区间
- timeSlot?: string; // 时间段
+ timeSlot?: string | string[]; // 时间段(支持多选)
ntrp?: [number, number]; // NTRP 水平区间
- venueType?: string; // 场地类型
- playType?: string; // 玩法
+ venueType?: string | string[]; // 场地类型(支持多选)
+ playType?: string | string[]; // 玩法(支持多选)
distanceFilter?: string;
}
// 页面状态接口