|
|
@@ -0,0 +1,276 @@
|
|
|
+import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
|
|
|
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
|
|
|
+import './LimitPickers.scss'
|
|
|
+import Taro from "@tarojs/taro";
|
|
|
+import React from "react";
|
|
|
+import { useTranslation } from "react-i18next";
|
|
|
+// export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number,ref?:any }) {
|
|
|
+const Component = forwardRef((props: {
|
|
|
+ limit: number, onChange: Function, onCancel: Function,
|
|
|
+ isRealTime?: boolean, limitDay?: number, time?: number, themeColor?: string, title?: string
|
|
|
+}, ref) => {
|
|
|
+
|
|
|
+ const days: string[] = [];
|
|
|
+ const today = new Date();
|
|
|
+ var color = props.themeColor ? props.themeColor : '#ff0000'
|
|
|
+ var alpha = alphaToHex(0.4)
|
|
|
+ const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
|
|
|
+ const [isDisableConfirm, setIsDisableConfirm] = useState(false)
|
|
|
+ const [count,setCount] = useState(0)
|
|
|
+ const {t} = useTranslation()
|
|
|
+
|
|
|
+ function alphaToHex(alpha) {
|
|
|
+ var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
|
|
|
+ var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
|
|
|
+ if (hexValue.length === 1) {
|
|
|
+ hexValue = "0" + hexValue; // 如果十六进制字符串只有一位,补零
|
|
|
+ }
|
|
|
+ return hexValue;
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ global.picker_time = global.set_time
|
|
|
+ if (props.time) {
|
|
|
+ var date = new Date(props.time)
|
|
|
+ setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(date), date.getHours(), date.getMinutes()])
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+ // useEffect(() => {
|
|
|
+ // setValues([6, today.getHours(), today.getMinutes()])
|
|
|
+ // }, [props.limit])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ var date = new Date();
|
|
|
+ if (!props.isRealTime) {
|
|
|
+ date = new Date(global.set_time);
|
|
|
+ }
|
|
|
+
|
|
|
+ date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
|
|
|
+ date.setHours(values[1])
|
|
|
+ date.setMinutes(values[2])
|
|
|
+ global.picker_time = date.getTime()
|
|
|
+ }, [values])
|
|
|
+
|
|
|
+
|
|
|
+ for (let i = props.limitDay ? props.limitDay - 1 : 6; i >= 0; i--) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setDate(today.getDate() - i);
|
|
|
+
|
|
|
+ const month = date.getMonth() + 1;
|
|
|
+ const day = date.getDate();
|
|
|
+ const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
|
|
|
+
|
|
|
+ const formattedDate = `${month}月${day}日 ${weekday}`;
|
|
|
+ if (i == 0) {
|
|
|
+ days.push('今天 ');
|
|
|
+ }
|
|
|
+ else if (i == 1) {
|
|
|
+ days.push('昨天 ');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ days.push(formattedDate);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const hours: number[] = [];
|
|
|
+
|
|
|
+
|
|
|
+ for (let i = 0; i <= 23; i++) {
|
|
|
+ hours.push(i);
|
|
|
+ }
|
|
|
+
|
|
|
+ const minutes: number[] = [];
|
|
|
+ for (let i = 0; i <= 59; i++) {
|
|
|
+ minutes.push(i);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function getTimestamp(dateTimeString: string): number {
|
|
|
+ const timestamp = Date.parse(dateTimeString);
|
|
|
+ return timestamp;
|
|
|
+ }
|
|
|
+
|
|
|
+ function getDaysDiff(date: Date): number {
|
|
|
+ const today = new Date();
|
|
|
+ today.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
|
+ targetDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ const timeDiff = today.getTime() - targetDate.getTime();
|
|
|
+ const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
|
|
|
+
|
|
|
+ return daysDiff;
|
|
|
+ }
|
|
|
+
|
|
|
+ function onPickerChange(e) {
|
|
|
+ // console.log('picker change')
|
|
|
+ // console.log(e.detail.value)
|
|
|
+ var list = e.detail.value
|
|
|
+
|
|
|
+ const date = new Date();
|
|
|
+ date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - list[0]));
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = date.getMonth() + 1;
|
|
|
+ const day = date.getDate();
|
|
|
+
|
|
|
+ const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:00`;
|
|
|
+ // if (getTimestamp(time) > today.getTime()) {
|
|
|
+ // setValues([list[0], today.getHours(), today.getMinutes()])
|
|
|
+ // }
|
|
|
+ if (getTimestamp(time) > global.set_time) {
|
|
|
+ // console.log('oppsu')
|
|
|
+ Taro.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: t('feature.common.toast.min_value'),
|
|
|
+ })
|
|
|
+ // console.log(list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes())
|
|
|
+ setValues([list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
|
|
|
+ disableConfirm()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var limitDate = new Date(props.limit)
|
|
|
+
|
|
|
+ if (getTimestamp(time) < props.limit) {
|
|
|
+ Taro.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: t('feature.common.toast.max_value'),
|
|
|
+ })
|
|
|
+ setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
|
|
|
+ disableConfirm()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ setValues(e.detail.value)
|
|
|
+
|
|
|
+ //把picker变动时间存储起来
|
|
|
+ setPickerTime();
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onPickerEnd(e){
|
|
|
+ // console.log(e)
|
|
|
+ // console.log(values)
|
|
|
+ // setValues(values)
|
|
|
+ // setCount(count+1)
|
|
|
+ }
|
|
|
+
|
|
|
+ function disableConfirm() {
|
|
|
+ setIsDisableConfirm(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setIsDisableConfirm(false)
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+
|
|
|
+ function expandZero(num: number): string {
|
|
|
+ return num < 10 ? `0${num}` : `${num}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ function cancel(e) {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
+ props.onCancel()
|
|
|
+ }
|
|
|
+
|
|
|
+ function confirm(e) {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
+ if (isDisableConfirm) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var date = new Date();
|
|
|
+ if (!props.isRealTime) {
|
|
|
+ date = new Date(global.set_time);
|
|
|
+ }
|
|
|
+
|
|
|
+ date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
|
|
|
+ date.setHours(values[1])
|
|
|
+ date.setMinutes(values[2])
|
|
|
+ props.onChange(date.getTime())
|
|
|
+ }
|
|
|
+
|
|
|
+ function setPickerTime() {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function getConfirmData() {
|
|
|
+ var date = new Date();
|
|
|
+ if (!props.isRealTime) {
|
|
|
+ date = new Date(global.set_time);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
|
|
|
+ date.setHours(values[1])
|
|
|
+ date.setMinutes(values[2])
|
|
|
+ return date.getTime()
|
|
|
+ }
|
|
|
+
|
|
|
+ useImperativeHandle(ref, () => ({
|
|
|
+ getConfirmData: getConfirmData
|
|
|
+ }));
|
|
|
+
|
|
|
+ function pickerDetail() {
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
+ <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
|
|
|
+ <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
|
|
|
+ <PickerView
|
|
|
+ value={values}
|
|
|
+ className="picker"
|
|
|
+ maskClass="picker-mask"
|
|
|
+ onChange={onPickerChange}
|
|
|
+ onPickEnd={onPickerEnd}
|
|
|
+ immediateChange={true}
|
|
|
+ indicatorStyle='height: 50px;color:red;'>
|
|
|
+ <PickerViewColumn style='flex:0 0 45%'>
|
|
|
+ {days.map(item => {
|
|
|
+ return (
|
|
|
+ <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}</View>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </PickerViewColumn>
|
|
|
+ <PickerViewColumn>
|
|
|
+ {hours.map(item => {
|
|
|
+ return (
|
|
|
+ <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </PickerViewColumn>
|
|
|
+ <PickerViewColumn>
|
|
|
+ {minutes.map(item => {
|
|
|
+ return (
|
|
|
+ <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </PickerViewColumn>
|
|
|
+ </PickerView>
|
|
|
+
|
|
|
+ {/* <View className="point_bg1 ">
|
|
|
+ <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>:</Text>
|
|
|
+ </View> */}
|
|
|
+ </View>
|
|
|
+ <View className='modal_operate'>
|
|
|
+ <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
|
|
|
+ <Text className='modal_cancel_text' style={{ color: color }}>取消</Text>
|
|
|
+ </View>
|
|
|
+ <View className='btn_space' />
|
|
|
+ <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
|
|
|
+ <Text className='modal_confirm_text' style={{ color: '#000' }}>确定</Text>
|
|
|
+ </View>
|
|
|
+
|
|
|
+
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ return pickerDetail()
|
|
|
+
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+export default React.memo(Component);;
|