增加日历
This commit is contained in:
@@ -6,7 +6,6 @@ import styles from "./index.module.scss";
|
|||||||
import { Button } from "@nutui/nutui-react-taro";
|
import { Button } from "@nutui/nutui-react-taro";
|
||||||
import { useListStore } from "src/store/listStore";
|
import { useListStore } from "src/store/listStore";
|
||||||
import { BubbleOption, FilterPopupProps } from "../../../types/list/types";
|
import { BubbleOption, FilterPopupProps } from "../../../types/list/types";
|
||||||
import dateRangeUtils from '@/utils/dateRange'
|
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { CalendarUI } from "@/components";
|
import { CalendarUI } from "@/components";
|
||||||
// 场地
|
// 场地
|
||||||
@@ -16,13 +15,6 @@ import GamePlayType from "@/components/GamePlayType";
|
|||||||
import { useDictionaryActions } from "@/store/dictionaryStore";
|
import { useDictionaryActions } from "@/store/dictionaryStore";
|
||||||
import { View } from "@tarojs/components";
|
import { View } from "@tarojs/components";
|
||||||
|
|
||||||
|
|
||||||
const dateTrabseformMap = {
|
|
||||||
'1': dateRangeUtils.getThisWeekend,
|
|
||||||
'2': dateRangeUtils.getNextWeekRange,
|
|
||||||
'3': dateRangeUtils.getNextMonthRange
|
|
||||||
}
|
|
||||||
|
|
||||||
const FilterPopup = (props: FilterPopupProps) => {
|
const FilterPopup = (props: FilterPopupProps) => {
|
||||||
const {
|
const {
|
||||||
loading,
|
loading,
|
||||||
@@ -44,12 +36,13 @@ const FilterPopup = (props: FilterPopupProps) => {
|
|||||||
* @param dictionaryValue 字典选项
|
* @param dictionaryValue 字典选项
|
||||||
* @returns 选项列表
|
* @returns 选项列表
|
||||||
*/
|
*/
|
||||||
const [selectedDates, setSelectedDates] = useState<String[]>([])
|
// const [selectedDates, setSelectedDates] = useState<String[]>([])
|
||||||
|
|
||||||
const handleDateChange = (dates: Date[]) => {
|
const handleDateChange = (dates: Date[]) => {
|
||||||
const dateArray = dates.map(date => dayjs(date).format('YYYY-MM-DD'))
|
const dateArray = dates.map(date => dayjs(date).format('YYYY-MM-DD'))
|
||||||
setSelectedDates(dateArray)
|
onChange({
|
||||||
console.log('选中的日期:', dateArray)
|
'dateRange': dateArray,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleOptions = (dictionaryValue: []) => {
|
const handleOptions = (dictionaryValue: []) => {
|
||||||
@@ -89,29 +82,6 @@ const FilterPopup = (props: FilterPopupProps) => {
|
|||||||
onCancel();
|
onCancel();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 日期选择
|
|
||||||
* @param date 日期
|
|
||||||
*/
|
|
||||||
const handleDateRangeChange = (date: Date) => {
|
|
||||||
onChange({
|
|
||||||
'dateRange': [date, date],
|
|
||||||
'dateRangeQuick': '',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 点击 本周末 一周内 一月内
|
|
||||||
*/
|
|
||||||
const handleDateRangeQuickClick = (name, value) => {
|
|
||||||
const date = dateTrabseformMap?.[value]()
|
|
||||||
onChange({
|
|
||||||
'dateRange': [date?.start, date?.end],
|
|
||||||
[name]: value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Popup
|
<Popup
|
||||||
@@ -127,22 +97,10 @@ const FilterPopup = (props: FilterPopupProps) => {
|
|||||||
<div className={styles.filterPopupWrapper}>
|
<div className={styles.filterPopupWrapper}>
|
||||||
{/* 日历 */}
|
{/* 日历 */}
|
||||||
<View>
|
<View>
|
||||||
{/* 快捷选日期 */}
|
|
||||||
<View>
|
|
||||||
<Bubble
|
|
||||||
options={dateRangeOptions}
|
|
||||||
value={filterOptions?.dateRangeQuick}
|
|
||||||
onChange={handleDateRangeQuickClick}
|
|
||||||
layout="grid"
|
|
||||||
size="small"
|
|
||||||
columns={3}
|
|
||||||
name="dateRangeQuick"
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<CalendarUI
|
<CalendarUI
|
||||||
type="multiple"
|
type="multiple"
|
||||||
isBorder={true}
|
isBorder={true}
|
||||||
value={selectedDates}
|
value={filterOptions?.dateRange}
|
||||||
onChange={handleDateChange}
|
onChange={handleDateChange}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
@@ -164,9 +122,10 @@ const FilterPopup = (props: FilterPopupProps) => {
|
|||||||
max={5.0}
|
max={5.0}
|
||||||
step={0.5}
|
step={0.5}
|
||||||
className={styles.filterPopupRange}
|
className={styles.filterPopupRange}
|
||||||
onChange={handleFilterChange}
|
onChange={(value) => {
|
||||||
|
handleFilterChange("ntrp", value)
|
||||||
|
}}
|
||||||
value={filterOptions?.ntrp}
|
value={filterOptions?.ntrp}
|
||||||
name="ntrp"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 场次气泡选项 */}
|
{/* 场次气泡选项 */}
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ interface RangeProps {
|
|||||||
};
|
};
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
name: string;
|
name?: string;
|
||||||
showTitle?: boolean;
|
showTitle?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -64,7 +64,7 @@ const NtrpRange: React.FC<RangeProps> = ({
|
|||||||
if (Number(start) === Number(min) && Number(end) === Number(max)) {
|
if (Number(start) === Number(min) && Number(end) === Number(max)) {
|
||||||
return "不限";
|
return "不限";
|
||||||
}
|
}
|
||||||
return `${start.toFixed(1)} - ${end.toFixed(1)}之间`;
|
return `${start?.toFixed(1)} - ${end?.toFixed(1)}之间`;
|
||||||
}, [JSON.stringify(currentValue || []), min, max]);
|
}, [JSON.stringify(currentValue || []), min, max]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -51,11 +51,12 @@ export const useGlobalStore = create<GlobalStore>()((set, get) => ({
|
|||||||
|
|
||||||
// 获取位置信息
|
// 获取位置信息
|
||||||
getCurrentLocationInfo: () => {
|
getCurrentLocationInfo: () => {
|
||||||
getCurrentLocation().then((res) => {
|
return getCurrentLocation().then((res) => {
|
||||||
set({
|
set({
|
||||||
getLocationLoading: false,
|
getLocationLoading: false,
|
||||||
location: res || {},
|
location: res || {},
|
||||||
});
|
});
|
||||||
|
return res;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -18,9 +18,10 @@ import dateRangeUtils from '@/utils/dateRange'
|
|||||||
// 完整的 Store 类型
|
// 完整的 Store 类型
|
||||||
type TennisStore = ListState & ListActions;
|
type TennisStore = ListState & ListActions;
|
||||||
|
|
||||||
|
const toDate = dateRangeUtils?.formatDate(new Date())
|
||||||
|
|
||||||
const defaultFilterOptions: IFilterOptions = {
|
const defaultFilterOptions: IFilterOptions = {
|
||||||
dateRange: [new Date(), new Date()], // 日期区间
|
dateRange: [toDate, toDate], // 日期区间
|
||||||
dateRangeQuick: '',
|
|
||||||
timeSlot: "", // 时间段
|
timeSlot: "", // 时间段
|
||||||
ntrp: [1, 5], // NTRP 水平区间
|
ntrp: [1, 5], // NTRP 水平区间
|
||||||
venueType: "", // 场地类型
|
venueType: "", // 场地类型
|
||||||
@@ -124,7 +125,6 @@ export const useListStore = create<TennisStore>()((set, get) => ({
|
|||||||
getSearchParams: () => {
|
getSearchParams: () => {
|
||||||
const state = get();
|
const state = get();
|
||||||
const filterOptions = state?.filterOptions || {};
|
const filterOptions = state?.filterOptions || {};
|
||||||
console.log('===1111filterOptions', filterOptions)
|
|
||||||
const distanceQuickFilter = state?.distanceQuickFilter || {};
|
const distanceQuickFilter = state?.distanceQuickFilter || {};
|
||||||
const params = {
|
const params = {
|
||||||
pageOption: state.pageOption,
|
pageOption: state.pageOption,
|
||||||
@@ -133,10 +133,7 @@ export const useListStore = create<TennisStore>()((set, get) => ({
|
|||||||
title: state.searchValue,
|
title: state.searchValue,
|
||||||
ntrpMin: filterOptions?.ntrp?.[0],
|
ntrpMin: filterOptions?.ntrp?.[0],
|
||||||
ntrpMax: filterOptions?.ntrp?.[1],
|
ntrpMax: filterOptions?.ntrp?.[1],
|
||||||
dateRange: [
|
dateRange: filterOptions?.dateRange,
|
||||||
dateRangeUtils.formatDate(filterOptions?.dateRange?.[0]),
|
|
||||||
dateRangeUtils.formatDate(filterOptions?.dateRange?.[1])
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
order: distanceQuickFilter?.quick,
|
order: distanceQuickFilter?.quick,
|
||||||
lat: state?.location?.latitude,
|
lat: state?.location?.latitude,
|
||||||
@@ -152,7 +149,8 @@ export const useListStore = create<TennisStore>()((set, get) => ({
|
|||||||
const { error, data, loading, gamesNum } = payload;
|
const { error, data, loading, gamesNum } = payload;
|
||||||
const saveKey = isSearchResult ? "searchResultData" : "matches";
|
const saveKey = isSearchResult ? "searchResultData" : "matches";
|
||||||
const saveData = { error, loading, gamesNum, [saveKey]: data };
|
const saveData = { error, loading, gamesNum, [saveKey]: data };
|
||||||
set(saveData);
|
console.log('===saveData', saveData)
|
||||||
|
set({...saveData});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取列表数据(常规搜索)
|
// 获取列表数据(常规搜索)
|
||||||
|
|||||||
@@ -13,8 +13,7 @@ export interface TennisMatch {
|
|||||||
shinei: string
|
shinei: string
|
||||||
}
|
}
|
||||||
export interface IFilterOptions {
|
export interface IFilterOptions {
|
||||||
dateRange: [Date, Date], // 日期区间
|
dateRange: [string, string], // 日期区间
|
||||||
dateRangeQuick?: string, // 日期快捷选择
|
|
||||||
timeSlot?: string, // 时间段
|
timeSlot?: string, // 时间段
|
||||||
ntrp?: [number, number], // NTRP 水平区间
|
ntrp?: [number, number], // NTRP 水平区间
|
||||||
venueType?: string, // 场地类型
|
venueType?: string, // 场地类型
|
||||||
|
|||||||
Reference in New Issue
Block a user