feat: add create meeting time picker

components/meetingTimePicker/meetingTimePicker.acss

+picker-view {
+    background: rgb(255, 255, 255);
+    display: flex;
+}
+
+picker-view .column {
+    font-size: 34rpx;
+    color: #191F25;
+}
+
+.column-1 {
+    flex: 1;
+}
+
+.column-2 {
+    flex: 2;
+}
+
+.tab {
+    margin-top: 72rpx;
+    display: flex;
+    border-bottom: 2rpx solid rgba(25, 31, 37, 0.12);
+    border-top: 2rpx solid rgba(25, 31, 37, 0.12);
+}
+
+.tab>view {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 16rpx 34rpx;
+}
+
+.tab>view>text {
+    color: rgba(27, 38, 61, 0.49);
+    font-size: 28rpx;
+}
+
+.tab>view>text:nth-of-type(2) {
+    color: #1B263D;
+    font-size: 34rpx;
+    font-weight: bold;
+    line-height: 48rpx;
+}
+
+.tab .active {
+    background: #3296FA;
+}
+
+.tab .active>text {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.tab>.active>text:nth-of-type(2) {
+    color: #fff;
+}
+
+.coustom-end {
+    height: 144rpx;
+    position: relative;
+    border-bottom: 2rpx solid rgba(25, 31, 37, 0.12);
+}
+
+.coustom-end>text {
+    color: #3070F2;
+    position: absolute;
+    font-size: 24rpx;
+    right: 32rpx;
+    top: 22rpx;
+}
+
+.coustom-end .error {
+    left: 32rpx;
+    right: auto;
+    color: red;
+}
+
+.picker-complete {
+    position: absolute;
+    color: #3070F2;
+    font-size: 32rpx;
+    right: 32rpx;
+    top: 32rpx;
+}
\ No newline at end of file

components/meetingTimePicker/meetingTimePicker.axml

+<view class="picker-complete" onTap='complete'>完成</view>
+<view class="tab">
+  <view class="{{currentTab == 'start' ? 'active' : ''}}" id='start' onTap="changeTab">
+    <text>开始时间</text>
+    <text>{{startTime}}</text>
+    <text>{{startWeekDay}}</text>
+  </view>
+  <view class="{{currentTab == 'end' ? 'active' : ''}}" id='end' onTap="changeTab">
+    <block a:if="{{!isEndTimeCustom}}">
+      <text>持续时间</text>
+      <text>{{duration}}</text>
+      <text>结束至{{durationEndTime}}</text>
+    </block>
+    <block a:else>
+      <text>结束时间</text>
+      <text>{{endTime}}</text>
+      <text>{{endWeekDay}}</text>
+    </block>
+  </view>
+</view>
+<view class='coustom-end'>
+  <text class="error">{{error}}</text>
+  <text onTap="changeWay" a:if="{{!isEndTimeCustom}}">自定义结束时间</text></view>
+<view class="picker-area">
+  <picker-view style="height: {{ 34 * visibleItemCount }}px" value="{{pickValue}}" onChange="onChange">
+    <block a:if="{{currentTab == 'end' && !isEndTimeCustom}}">
+      <picker-view-column>
+        <view class="column" key={"{item.value}}" a:for="{{durationList}}">{{item.label}}</view>
+      </picker-view-column>
+    </block>
+    <block a:else>
+      <picker-view-column class="column-2">
+        <view class="column" key="{{item}}" a:for="{{timeData}}">{{item.slice(5)}}</view>
+      </picker-view-column>
+      <picker-view-column class="column-1">
+        <view class="column" key="{{item}}" a:for="{{timeHour}}">{{item}}</view>
+      </picker-view-column>
+      <picker-view-column class="column-1">
+        <view class="column" key="{{item}}" a:for="{{timeMin}}">{{item}}</view>
+      </picker-view-column>
+    </block>
+  </picker-view>
+</view>
\ No newline at end of file

components/meetingTimePicker/meetingTimePicker.js

+var 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 = generateTime(24);
+const timeMin = generateTime(60);
+
+function padZero(val) {
+  return ("00" + val).slice(-2);
+}
+// 生成小时和分钟
+function generateTime(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) {
+  var 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());
+  return {
+    y, m, d, w, h, min
+  }
+}
+// 时间格式转化为03月01日 14:00
+function getTabShowDateByDate(date) {
+  const res = getYMDWHMIN(date);
+  return res.m + "月" + res.d + "日 " + res.h + ':' + res.min;
+}
+function getdhmByPickValue(pickValue) {
+  const d = timeData[pickValue[0]];
+  const h = timeHour[pickValue[1]];
+  const m = timeMin[pickValue[2]];
+  return { d, h, m }
+}
+function getTabShowDateByPickValue(pickValue) {
+  const { d, h, m } = getdhmByPickValue(pickValue);
+  const time = `${d.slice(5, 10)} ${h}:${m}`;
+  const weekDay = d.slice(-2);
+  return { time, weekDay }
+}
+// 根据column值获取标准时间格式 2019/2/2 16:00
+function getPostTimeByPickValue(pickValue) {
+  const { d, h, m } = getdhmByPickValue(pickValue);
+  const newD = d.slice(0, 10).replace('年', '/').replace('月', '/').replace('日', '/');
+  return newD + ' ' + h + ':' + m
+}
+// 将周几转换为今天，明天, 昨天
+function getTabShowWeekByDate(futureData) {
+  const date = new Date(futureData);
+  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 getEndTime(startTime, duration) {
+  let newDate = new Date(startTime);
+  var 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 getDurationEndTime(startTime, duration) {
+  return getEndTime(startTime, duration).slice(-5);
+}
+// 获取持续时间 {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
+}
+// 获取时间格式的pick value用于pick column回显
+function getPickerValue(date) {
+  const res = getYMDWHMIN(date);
+  const pickerValue = [timeData.indexOf(res.y + "年" + res.m + "月" + res.d + "日 " + res.w), timeHour.indexOf(res.h), timeMin.indexOf(res.min)];
+  return pickerValue
+}
+Component({
+  mixins: [],
+  data: {
+    currentTab: 'start',
+    timeData: timeData,
+    timeHour: timeHour,
+    timeMin: timeMin,
+    durationList: durationList,
+    isEndTimeCustom: false,
+    //用于pick column回显
+    startPickValue: [],
+    endPickValue: [],
+    endDurationPickValue: [1],
+    // 当前 pick column回显
+    pickValue: [],
+    //开始、结束时间tab数据
+    startWeekDay: '今天',
+    startTime: '',
+    endWeekDay: '今天',
+    endTime: '',
+    //持续结束时间tab数据
+    duration: '2小时',
+    //已选择的标准时间格式数据
+    postStartTime: '',
+    postEndTime: '',
+    durationEndTime: '',
+    error: ''
+  },
+  props: {
+  },
+  didMount() {
+    this.setInitialValue();
+  },
+  didUpdate() {
+  },
+  didUnmount() { },
+  methods: {
+    //设置初始值
+    setInitialValue() {
+      let startDate = new Date();
+      //结束日期默认+2小时
+      let endDate = new Date();
+      var hour = endDate.getHours();
+      endDate.setHours(hour + 2);
+      // 赋值
+      if (this.props.startTime) {
+        startDate = new Data(this.props.startTime);
+      }
+      if (this.props.endTime) {
+        endDate = new Data(thia.props.endTime);
+      }
+      //开始和结束时间,持续时间赋值
+      this.setData({
+        startPickValue: getPickerValue(startDate),
+        startTime: getTabShowDateByDate(startDate),
+        postStartTime: startDate,
+        pickValue: getPickerValue(startDate),
+        endPickValue: getPickerValue(endDate),
+        endTime: getTabShowDateByDate(endDate),
+        postEndTime: endDate
+      });
+      // 如果持续时间不在范围内，需要改变默认显示结束时间的方式
+      const duration = getDuration(startDate, endDate);
+      if (duration) {
+        this.setData({
+          duration: duration.label,
+          durationEndTime: getDurationEndTime(startDate, duration.value),
+          endDurationPickValue: [duration.index]
+        })
+      } else {
+        this.setData({
+          isEndTimeCustom: true
+        })
+      }
+    },
+    onChange(e) {
+      const pickValue = e.detail.value;
+      const timeData = getTabShowDateByPickValue(pickValue);
+      //改变开始时间，改变持续时间的结束时间
+      if (this.data.currentTab === 'start') {
+        const postStartTime = getPostTimeByPickValue(pickValue);
+        this.setData({
+          startTime: timeData.time,
+          startWeekDay: getTabShowWeekByDate(postStartTime),
+          startPickValue: pickValue,
+          postStartTime
+        });
+        if (!this.data.isEndTimeCustom) {
+          this.setData({
+            durationEndTime: getDurationEndTime(postStartTime, getDurationValue(this.data.duration))
+          })
+        }
+      }
+      // 改变结束时间，这里结束时间和持续时间互不影响
+      else if (this.data.currentTab === 'end') {
+        const postEndTime = getPostTimeByPickValue(pickValue);
+        if (this.data.isEndTimeCustom) {
+          this.setData({
+            endTime: timeData.time,
+            endWeekDay: getTabShowWeekByDate(postEndTime),
+            endPickValue: pickValue,
+            postEndTime
+          });
+        } else {
+          const durationData = durationList[pickValue[0]];
+          this.setData({
+            duration: durationData.label,
+            durationEndTime: getDurationEndTime(this.data.postStartTime, durationData.value),
+            endDurationPickValue: pickValue,
+            postEndTime: getEndTime(this.data.postStartTime, durationData.value)
+          });
+        }
+      }
+      this.checkValue(this.data.postStartTime, this.data.postEndTime);
+    },
+    changeTab(e) {
+      const currentTab = e.currentTarget.id;
+      //pick coulum 回显
+      if (currentTab === 'end' && !this.data.isEndTimeCustom) {
+        return this.setData({
+          currentTab,
+          pickValue: this.data.endDurationPickValue
+        });
+      }
+      this.setData({
+        currentTab,
+        pickValue: this.data[`${currentTab}PickValue`]
+      });
+    },
+    changeWay() {
+      this.setData({
+        isEndTimeCustom: true
+      });
+      //如果在end tab 切换， 需要设置结束时间的pick column回显
+      if (this.data.currentTab == 'end') {
+        this.setData({
+          pickValue: this.data.endPickValue
+        });
+      }
+    },
+    checkValue(postStartTime, postEndTime) {
+      if (new Date(postEndTime).getTime() <= new Date(postStartTime).getTime()) {
+        this.setData({
+          error: '开始时间小于结束时间'
+        })
+        return false;
+      } else {
+        this.setData({
+          error: ''
+        })
+        return true
+      }
+    },
+    complete() {
+      const { postStartTime, postEndTime } = this.data;
+      if (this.checkValue(postStartTime, postEndTime)) {
+        this.props.onComplete({
+          startTime: postStartTime,
+          endTime: postEndTime
+        })
+      }
+    }
+  },
+});

components/meetingTimePicker/meetingTimePicker.json

+{
+  "component": true
+}
\ No newline at end of file