meetingTimePicker.js 9.55 KB
import { getInterTime } from '../../utils/utils';
const currentDate = new Date();
const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const durationList = [{ value: 60, label: '1小时' }, { value: 120, label: '2小时' }, { value: 30, label: '30分钟' }];
const timeData = generateDate(365);
const timeHour = generateHour(24);
const timeMin = generateMin(60);

function padZero(val) {
  return ("00" + val).slice(-2);
}
// 生成分钟 每隔五分钟
function generateMin(max) {
  const time = [];
  for (let i = 0; i < max; i += 5) {
    time.push(padZero(i))
  }
  return time;
}
// 生成小时
function generateHour(max) {
  const time = [];
  for (let i = 0; i < max; i++) {
    time.push(padZero(i))
  }
  return time;
}
// 生成年月日周
function generateDate(max) {
  const timeData = [];
  for (let i = max; i > 0; i--) {
    timeData.push(GetDateStr(-i));
  }
  for (let i = 0; i < max; i++) {
    timeData.push(GetDateStr(i));
  }
  return timeData
}
function GetDateStr(AddDayCount) {
  let time = new Date();
  time.setDate(time.getDate() + AddDayCount);
  const res = getYMDWHMIN(time);
  return res.y + '年' + res.m + "月" + res.d + "日 " + res.w;
}
// 获取年月日周时分秒
function getYMDWHMIN(date) {
  const y = date.getFullYear();
  const m = padZero(date.getMonth() + 1);
  const d = padZero(date.getDate());
  const w = weekList[date.getDay()];
  const h = padZero(date.getHours());
  const min = padZero(date.getMinutes());
  const second = padZero(date.getSeconds())
  return {
    y, m, d, w, h, min, second
  }
}
// 时间格式转化为03月01日 14:00
function getShowTime(date) {
  const res = getYMDWHMIN(date);
  return res.m + "月" + res.d + "日 " + res.h + ':' + res.min;
}
// 时间格式转化为2019/2/2 16:00
function getPostTimeByDate(date) {
  const res = getYMDWHMIN(date);
  return res.y + '/' + res.m + "/" + res.d + " " + res.h + ':' + res.min;
}
function getPickerValue(date) {
  const res = getYMDWHMIN(date);

  return [timeData.indexOf(res.y + "年" + res.m + "月" + res.d + "日 " + res.w), timeHour.indexOf(res.h), timeMin.indexOf(res.min)];
}
// 将周几转换为今天,明天, 昨天
function getWeekDay(date) {
  let week = '今天';
  //同年同月
  if (currentDate.getFullYear() == date.getFullYear() &&
    currentDate.getMonth() == date.getMonth()
  ) {
    if (currentDate.getDate() == date.getDate()) {
      week = '今天'
    } else if (date.getDate() - currentDate.getDate() == 1) {
      week = '明天'
    } else if (currentDate.getDate() - date.getDate() == 1) {
      week = '昨天'
    } else {
      week = weekList[date.getDay()]
    }
  } else {
    week = weekList[date.getDay()]
  }
  return week;
}

// 根据开始时间和持续时间计算结束时间 2019/2/2 16:00
function getEndTimeByDuration(startDate, duration) {
  const newDate = new Date(startDate); //新创建一个时间对象,以免改变startDate
  const min = newDate.getMinutes();
  newDate.setMinutes(min + duration);
  const res = getYMDWHMIN(newDate);
  return res.y + '/' + res.m + '/' + res.d + ' ' + res.h + ':' + res.min;
}

// 获取结束至时间的显示 16:00
function getDurationShowTime(startDate, duration) {
  return getEndTimeByDuration(startDate, duration).slice(-5);
}
// 根据column值获取标准时间格式 2019/2/2 16:00
function getDateByPickValue(pickValue) {
  const d = timeData[pickValue[0]];
  const h = timeHour[pickValue[1]];
  const m = timeMin[pickValue[2]];
  const newD = d.slice(0, 10).replace('年', '/').replace('月', '/').replace('日', '/') + ' ' + h + ':' + m + ':00';
  return new Date(newD)
}

// 获取持续时间 {value,lable,index}
function getDuration(startDate, endDate) {
  const time = endDate.getTime() - startDate.getTime();
  const min = time / 1000 / 60;
  let duration = null;
  durationList.forEach((it, index) => {
    if (it.value == min) {
      it.index = index;
      duration = it
    }
  })
  return duration
}
// 根据持续时间的显示值获取实际分钟数
function getDurationValue(durationLable) {
  let value = 120;
  durationList.forEach(it => {
    if (it.label == durationLable) {
      value = it.value
    }
  });
  return value
}

Component({
  mixins: [],
  data: {
    timeData: timeData,
    timeHour: timeHour,
    timeMin: timeMin,
    durationList: durationList,
    currentTab: 'start',
    isEndTimeCustom: false,
    pickValue: [],// 当前 pick column回显
    error: '',
    start: {
      pickValue: [],
      weekDay: '今天',
      showTime: '',
    },
    end: {
      pickValue: [],
      weekDay: '今天',
      showTime: '',
    },
    duration: {
      pickValue: [2],
      showTime: '',
      label: '30分钟',
    },
    startPostTime: '',
    endPostTime: '',
    endDurationPostTime: ''
  },
  props: {
    visibleItemCount: 5
  },
  didMount() {
    this.setInitialValue();
  },
  didUpdate() {
  },
  didUnmount() { },
  methods: {
    //设置初始值
    setInitialValue() {
      let startDate = getInterTime(new Date());

      //结束日期默认+ 半小时
      let endDate = getInterTime(new Date());
      const min = endDate.getMinutes();
      endDate.setMinutes(min + 30);
      // 赋值
      if (this.props.startTime) {
        startDate = new Date(this.props.startTime);
      }
      if (this.props.endTime) {
        endDate = new Date(this.props.endTime);
      }
      console.log(this.props)

      this.changeStart(startDate);
      this.changeEnd(endDate);
      this.setData({
        pickValue: getPickerValue(startDate)
      });
      // 如果持续时间不在范围内,需要改变默认显示结束时间的方式
      const durationData = getDuration(startDate, endDate);
      if (durationData) {
        this.changeDuration(startDate, durationData);
      } else {
        this.setData({
          isEndTimeCustom: true
        })
      }
    },
    changeStart(startDate, pickValue) {
      this.setData({
        startPostTime: startDate,
        start: {
          pickValue: pickValue || getPickerValue(startDate),
          showTime: getShowTime(startDate),
          weekDay: getWeekDay(startDate)
        }
      })
    },
    changeEnd(endDate, pickValue) {
      this.setData({
        endPostTime: endDate,
        end: {
          pickValue: pickValue || getPickerValue(endDate),
          showTime: getShowTime(endDate),
          weekDay: getWeekDay(endDate)
        }
      })
    },
    changeDuration(startDate, durationData, pickValue) {
      this.setData({
        endDurationPostTime: getEndTimeByDuration(startDate, durationData.value),
        duration: {
          label: durationData.label,
          showTime: getDurationShowTime(startDate, durationData.value),
          pickValue: pickValue || [durationData.index]
        }
      })
    },
    onChange(e) {
      const pickValue = e.detail.value;
      //开始时间的分钟数必须是5的倍数才对的上
      if (pickValue.includes(-1)) {
        pickValue[pickValue.indexOf(-1)] = 0
      }
      if (this.data.currentTab === 'start') {
        const startDate = getDateByPickValue(pickValue);
        this.changeStart(startDate, pickValue);

        // 如果是持续时间面板,改变持续时间的结束时间
        const durationValue = getDurationValue(this.data.duration.label);
        if (!this.data.isEndTimeCustom) {
          this.setData({
            'duration.showTime': getDurationShowTime(startDate, durationValue),
            endDurationPostTime: getEndTimeByDuration(startDate, durationValue)
          })
        } else {
          // 实时校验
          this.checkValue(startDate, this.data.endPostTime);
        }
      }
      // 改变结束时间,结束时间和持续时间互不影响
      else if (this.data.currentTab === 'end') {
        if (this.data.isEndTimeCustom) {
          const endDate = getDateByPickValue(pickValue);
          this.changeEnd(endDate, pickValue);

          this.checkValue(this.data.startPostTime, endDate);
        } else {
          const durationData = durationList[pickValue[0]];
          this.changeDuration(this.data.startPostTime, durationData, pickValue);
        }
      }

    },
    changeTab(e) {
      const currentTab = e.currentTarget.id;
      this.setData({
        currentTab
      })
      //pick coulum 回显
      if (currentTab === 'end' && !this.data.isEndTimeCustom) {
        return this.setData({
          pickValue: this.data.duration.pickValue
        });
      } else {
        this.setData({
          pickValue: this.data[`${currentTab}`].pickValue
        });
      }
    },
    changeWay() {
      this.setData({
        isEndTimeCustom: true
      });
      //如果在end tab 切换, 需要设置结束时间的pick column回显
      if (this.data.currentTab == 'end') {
        this.setData({
          pickValue: this.data.end.pickValue
        });
      }
    },
    checkValue(startPostTime, endPostTime) {
      if (endPostTime.getTime() <= startPostTime.getTime()) {
        this.setData({
          error: '结束时间小于开始时间'
        })
        return false;
      } else {
        this.setData({
          error: ''
        })
        return true
      }
    },
    complete() {
      const { startPostTime, endPostTime, endDurationPostTime } = this.data;
      if (this.data.isEndTimeCustom) {
        if (this.checkValue(startPostTime, endPostTime)) {
          this.props.onComplete({
            startTime: getPostTimeByDate(startPostTime),
            endTime: getPostTimeByDate(endPostTime)
          })
        }
      } else {
        this.props.onComplete({
          startTime: getPostTimeByDate(startPostTime),
          endTime: endDurationPostTime
        })
      }
    }
  },
});