diff --git a/.env b/.env index 1eee7ad..0cde6d6 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ -TARO_APP_API=https://yjx.dev.yaojiankang.top -#TARO_APP_API=https://playedu.yaojiankang.top +#TARO_APP_API=https://yjx.dev.yaojiankang.top +TARO_APP_API=https://playedu.yaojiankang.top TARO_APP_LGOIN=true diff --git a/src/components/dateTimePicker/dateTimePicker.tsx b/src/components/dateTimePicker/dateTimePicker.tsx index 60a26f8..f9f4b4b 100644 --- a/src/components/dateTimePicker/dateTimePicker.tsx +++ b/src/components/dateTimePicker/dateTimePicker.tsx @@ -1,33 +1,70 @@ -import {FC} from "react"; +import {FC, useEffect, useState} from "react"; +import {Picker} from "@tarojs/components"; +import {dateDate, DateTime, dateTimePicker, DateTimePickers, getIndex, getTime} from './utils' interface Props { - children: JSX.Element + children?: JSX.Element disabled?: boolean + defaultValue?: string + onChange?: (time: string) => void + name?:string } -const DateTimePicker: FC = () => { +const DateTimePicker: FC = (props) => { + const [defaultValue, setDefaultValue] = useState(dateDate(new Date(props.defaultValue || Date.now()))) // 默认时间 或者 当天时间 + const datePicker = dateTimePicker(defaultValue.year, defaultValue.year) // 时间选择器数据（年，月，日，时间） + const [activityArray, setActivityArray] = useState([]) + const [value, setValue] = useState([]) - // function bindMultiPickerChange() { - // let activityArray = JSON.parse(JSON.stringify(this.activityArray)), - // {value} = e.detail, - // _result = []; - // for (let i = 0; i < value.length; i++) { - // _result[i] = activityArray[i][value[i]].id; - // } - // this.$emit("result", _result); - // } + useEffect(() => { + setDefaultValue(dateDate(new Date(props.defaultValue || Date.now()))) + const data = datePicker(defaultValue.year, defaultValue.month) + setValue(getIndex(data, defaultValue)) + setActivityArray(data) + }, [props.defaultValue]) + + + function change(e) { + props?.onChange?.(getTime(activityArray, e.detail.value)) + } + + function columnChange(e) { + const oldValue: number[] = JSON.parse(JSON.stringify(value)) + oldValue[e.detail.column] = e.detail.value + setValue(oldValue) + + let year = activityArray[0][oldValue[0]].id + let month = activityArray[1][oldValue[1]].id + + switch (e.detail.column) { + case 0: + year = e.detail.value + break + case 1: + month = e.detail.value + 1 + break + } + if ([0, 1].includes(e.detail.value)) { + const data = datePicker(year, month) + setActivityArray(data) + } + } return ( - <> - // - // {props.children}12 - // + + {props.children} + ) } diff --git a/src/components/dateTimePicker/utils.ts b/src/components/dateTimePicker/utils.ts index d3c778d..c0f4eef 100644 --- a/src/components/dateTimePicker/utils.ts +++ b/src/components/dateTimePicker/utils.ts @@ -1,4 +1,4 @@ -interface DateTime { +export interface DateTime { year: number month: number day: number @@ -6,6 +6,16 @@ interface DateTime { minutes: number } +export interface DateTimePickerType { + name: string + id: number | string + + [key: string]: any +} + + +export type DateTimePickers = Array[] + /** * 获取一个月的天数 * @param year 年 @@ -33,10 +43,6 @@ const dateDate = function (date: Date): DateTime { } }; -interface DateTimePicker { - name: string - id: number | string -} /** * 时间选择器 @@ -45,10 +51,10 @@ interface DateTimePicker { * @param endyear 结束月 */ const dateTimePicker = function (startyear: number, endyear: number) { - const years: DateTimePicker[] = []; - const months: DateTimePicker[] = []; - const hours: DateTimePicker[] = []; - const minutes: DateTimePicker[] = []; + const years: DateTimePickerType[] = []; + const months: DateTimePickerType[] = []; + const hours: DateTimePickerType[] = []; + const minutes: DateTimePickerType[] = []; for (let i = startyear - 20; i <= endyear + 20; i++) { years.push({name: i + '年', id: i}) } @@ -78,12 +84,12 @@ const dateTimePicker = function (startyear: number, endyear: number) { id: i }); } - return function (_year: number | string, _month: string | number) { - const days: DateTimePicker[] = []; + return function (_year: number | string, _month: string | number): DateTimePickers { + const days: DateTimePickerType[] = []; _year = parseInt(String(_year)); _month = parseInt(String(_month)); //获取日期 - for (let i: string | number = 0; i <= getDaysInOneMonth(_year, _month); i = Number(i) + 1) { + for (let i: string | number = 1; i <= getDaysInOneMonth(_year, _month); i = Number(i) + 1) { if (i < 10) { i = "0" + i; } @@ -97,8 +103,40 @@ const dateTimePicker = function (startyear: number, endyear: number) { }; +/** + * 获取时间下标 + */ +function getIndex(pickerData: DateTimePickers, arr: DateTime) { + let timeIndex: number[] = []; + let indexKey = ["year", "month", "day", "hours", "minutes"]; + pickerData.forEach((picker, index) => { + const _index = picker.findIndex(d => parseInt(String(d.id)) === parseInt(arr[indexKey[index]])) + timeIndex[index] = _index >= 0 ? _index : 0; + }) + return timeIndex; +} + + +/** 获取时间 */ +function getTime(pickerData: DateTimePickers, arr: number[]): string { + let time = '' + pickerData.forEach((picker, index) => { + if (index < 2) { + time += picker[arr[index]].id + '-' + } else if (index === 3) { + time += " " + picker[arr[index]].id + ':' + } else { + time += picker[arr[index]].id + } + }) + return time +} + + export { dateTimePicker, getDaysInOneMonth, + getIndex, + getTime, dateDate } diff --git a/src/pages/manage/spotMeeting/spotMeeting.module.scss b/src/pages/manage/spotMeeting/spotMeeting.module.scss index e0e99f7..08f015a 100644 --- a/src/pages/manage/spotMeeting/spotMeeting.module.scss +++ b/src/pages/manage/spotMeeting/spotMeeting.module.scss @@ -21,7 +21,7 @@ .code { - width: 300rpx; + width: 400rpx; margin: 40rpx auto; position: relative; } @@ -33,7 +33,7 @@ top: 0; bottom: 0; margin: auto; - width: 300rpx; + width: 400rpx; height: 40rpx; text-align: center; font-weight: bold; diff --git a/src/pages/manage/spotMeeting/spotMeeting.tsx b/src/pages/manage/spotMeeting/spotMeeting.tsx index b18246a..e8d3f08 100644 --- a/src/pages/manage/spotMeeting/spotMeeting.tsx +++ b/src/pages/manage/spotMeeting/spotMeeting.tsx @@ -10,13 +10,14 @@ import code from '@/static/img/code.png' import Icon from "@/components/icon"; import failure from "@/static/img/failure.png" import {Profile} from "@/store"; +import DateTimePicker from "@/components/dateTimePicker/dateTimePicker"; const SpotMeeting: FC = () => { const path = encodeURIComponent("/pages/meeting/meeting") const params = Taro.getCurrentInstance().router?.params as { id: string | undefined } const [manages, setManages] = useState([]) - const [start, setStart] = useState(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd hh:00:00")) - const [end, setEnd] = useState(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd 18:00:00")) + const [start, setStart] = useState(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd 08:00")) + const [end, setEnd] = useState(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd 18:00")) const [depid, setDepid] = useState(null) const [imgUrl, setImgUrl] = useState('') const [name, setName] = useState('') @@ -41,8 +42,8 @@ const SpotMeeting: FC = () => { if (res) { downUrl(res.id, false) - setEnd(formatDate(new Date(res.estimate_end_time), "YY-MM-dd 18:00:00")) - setStart(formatDate(new Date(res.estimate_start_time), "YY-MM-dd 08:00:00")) + setEnd(formatDate(new Date(res.estimate_end_time), "YY-MM-dd 18:00")) + setStart(formatDate(new Date(res.estimate_start_time), "YY-MM-dd 08:00")) } } else { setLoading(false) @@ -67,6 +68,7 @@ const SpotMeeting: FC = () => { const depChange = useCallback((e) => { setDepid(manages[Number(e.detail.value)]?.id) }, [manages]) + const change_start = useCallback((time: string) => { const mil = new Date(time).getTime() const endMil = new Date(end).getTime() @@ -76,6 +78,7 @@ const SpotMeeting: FC = () => { setStart(time) } }, [end]) + const change_end = useCallback((time: string) => { const mil = new Date(time).getTime() const startMil = new Date(start).getTime() @@ -243,7 +246,7 @@ const SpotMeeting: FC = () => { ? @@ -269,22 +272,26 @@ const SpotMeeting: FC = () => { onInput={(e) => setName(e.detail.value)} />} /> - change_start(e.detail.value + ' 8:00:00')} - name='estimate_start_time'> + onChange={(time) => change_start(time)} + > - - + + + change_end(e.detail.value + ' 18:00:00')} - name='estimate_end_time'> + onChange={(time) => change_end(time)} + > - + + { {/**/} - { id !== undefined && <> {