From 10ff967f4a9f6493f1caa8c5405a9cc7618989b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Sat, 6 Dec 2025 22:02:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8D=95=E5=8F=8C=E6=89=93?= =?UTF-8?q?=20=EF=BC=8C=E5=A4=9A=E9=80=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CourtType/index.tsx | 9 +++++---- src/components/FilterPopup/index.tsx | 15 +++++++++------ src/components/GamePlayType/index.tsx | 5 +++-- src/store/listStore.ts | 21 +++++++++++++++++---- types/list/types.ts | 6 +++--- 5 files changed, 37 insertions(+), 19 deletions(-) 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; } // 页面状态接口