fix: fix check value and refator

components/meetingTimePicker/meetingTimePicker.acss

@@ -7,6 +7,9 @@ picker-view .column {
     font-size: 34rpx;
     color: #191F25;
 }
+.pick-column{
+    border-left: 100vw solid transparent;
+}
 
 .column-1 {
     flex: 1;

components/meetingTimePicker/meetingTimePicker.axml

@@ -2,19 +2,19 @@
 <view class="tab">
   <view class="{{currentTab == 'start' ? 'active' : ''}}" id='start' onTap="changeTab">
     <text>开始时间</text>
-    <text>{{startTime}}</text>
-    <text>{{startWeekDay}}</text>
+    <text>{{start.showTime}}</text>
+    <text>{{start.weekDay}}</text>
   </view>
   <view class="{{currentTab == 'end' ? 'active' : ''}}" id='end' onTap="changeTab">
     <block a:if="{{!isEndTimeCustom}}">
       <text>持续时间</text>
-      <text>{{duration}}</text>
-      <text>结束至{{durationEndTime}}</text>
+      <text>{{duration.label}}</text>
+      <text>结束至{{duration.showTime}}</text>
     </block>
     <block a:else>
       <text>结束时间</text>
-      <text>{{endTime}}</text>
-      <text>{{endWeekDay}}</text>
+      <text>{{end.showTime}}</text>
+      <text>{{end.weekDay}}</text>
     </block>
   </view>
 </view>
@@ -22,7 +22,7 @@
   <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">
+  <picker-view style="height: {{ 34 * visibleItemCount }}px" indicator-class="pick-column" 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>

components/meetingTimePicker/meetingTimePicker.js

@@ -33,7 +33,7 @@ function GetDateStr(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);
@@ -41,36 +41,22 @@ function getYMDWHMIN(date) {
   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
+    y, m, d, w, h, min, second
   }
 }
 // 时间格式转化为03月01日 14:00
-function getTabShowDateByDate(date) {
+function getShowTime(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 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 getTabShowWeekByDate(futureData) {
-  const date = new Date(futureData);
+function getWeekDay(date) {
   let week = '今天';
   //同年同月
   if (currentDate.getFullYear() == date.getFullYear() &&
@@ -92,17 +78,33 @@ function getTabShowWeekByDate(futureData) {
 }
 
 // 根据开始时间和持续时间计算结束时间 2019/2/2 16:00
-function getEndTime(startTime, duration) {
-  let newDate = new Date(startTime);
+function getEndTimeByDuration(startDate, duration) {
+  const newDate = new Date(startDate); //新创建一个时间对象，以免改变startDate
   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);
+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)
+}
+
+// 时间格式转化为2019/2/2 16:00
+function getPostTimeByDate(date) {
+  const res = getYMDWHMIN(date);
+  return res.y + '/' + res.m + "/" + res.d + " " + res.h + ':' + res.min;
 }
+
 // 获取持续时间 {value,lable,index}
 function getDuration(startDate, endDate) {
   const time = endDate.getTime() - startDate.getTime();
@@ -126,39 +128,35 @@ function getDurationValue(durationLable) {
   });
   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,
+    currentTab: 'start',
     isEndTimeCustom: false,
-    //用于pick column回显
-    startPickValue: [],
-    endPickValue: [],
-    endDurationPickValue: [1],
-    // 当前 pick column回显
-    pickValue: [],
-    //开始、结束时间tab数据
-    startWeekDay: '今天',
-    startTime: '',
-    endWeekDay: '今天',
-    endTime: '',
-    //持续结束时间tab数据
-    duration: '2小时',
-    //已选择的标准时间格式数据
-    postStartTime: '',
-    postEndTime: '',
-    durationEndTime: '',
-    error: ''
+    pickValue: [],// 当前 pick column回显
+    error: '',
+    start: {
+      pickValue: [],
+      weekDay: '今天',
+      showTime: '',
+    },
+    end: {
+      pickValue: [],
+      weekDay: '今天',
+      showTime: '',
+    },
+    duration: {
+      pickValue: [1],
+      showTime: '',
+      label: '2小时',
+    },
+    startPostTime: '',
+    endPostTime: ''
   },
   props: {
   },
@@ -183,82 +181,97 @@ Component({
       if (this.props.endTime) {
         endDate = new Data(thia.props.endTime);
       }
-      //开始和结束时间,持续时间赋值
+
+      this.changeStart(startDate);
+      this.changeEnd(endDate);
       this.setData({
-        startPickValue: getPickerValue(startDate),
-        startTime: getTabShowDateByDate(startDate),
-        postStartTime: startDate,
-        pickValue: getPickerValue(startDate),
-        endPickValue: getPickerValue(endDate),
-        endTime: getTabShowDateByDate(endDate),
-        postEndTime: endDate
+        pickValue: getPickerValue(startDate)
       });
       // 如果持续时间不在范围内，需要改变默认显示结束时间的方式
-      const duration = getDuration(startDate, endDate);
-      if (duration) {
-        this.setData({
-          duration: duration.label,
-          durationEndTime: getDurationEndTime(startDate, duration.value),
-          endDurationPickValue: [duration.index]
-        })
+      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({
+        duration: {
+          label: durationData.label,
+          showTime: getDurationShowTime(startDate, durationData.value),
+          pickValue: pickValue || [durationData.index]
+        }
+      })
+    },
     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
-        });
+        const startDate = getDateByPickValue(pickValue);
+        this.changeStart(startDate, pickValue);
+
+        // 如果是持续时间面板，改变持续时间的结束时间
+        const durationValue = getDurationValue(this.data.duration.label);
         if (!this.data.isEndTimeCustom) {
           this.setData({
-            durationEndTime: getDurationEndTime(postStartTime, getDurationValue(this.data.duration))
+            'duration.showTime': getDurationShowTime(startDate, durationValue),
+            endDurationPostTime: getEndTimeByDuration(startDate, durationValue)
           })
+        } else {
+          this.checkValue(startDate, this.data.endPostTime);
         }
       }
-      // 改变结束时间，这里结束时间和持续时间互不影响
+      // 改变结束时间，结束时间和持续时间互不影响
       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
-          });
+          const endDate = getDateByPickValue(pickValue);
+          this.changeEnd(endDate, pickValue);
+
+          this.checkValue(this.data.startPostTime, endDate);
         } 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.changeDuration(this.data.startPostTime, durationData, pickValue);
         }
       }
-      this.checkValue(this.data.postStartTime, this.data.postEndTime);
+
     },
     changeTab(e) {
       const currentTab = e.currentTarget.id;
+      this.setData({
+        currentTab
+      })
       //pick coulum 回显
       if (currentTab === 'end' && !this.data.isEndTimeCustom) {
         return this.setData({
-          currentTab,
-          pickValue: this.data.endDurationPickValue
+          pickValue: this.data.duration.pickValue
         });
       }
       this.setData({
-        currentTab,
-        pickValue: this.data[`${currentTab}PickValue`]
+        pickValue: this.data[`${currentTab}`].pickValue
       });
     },
     changeWay() {
@@ -268,14 +281,14 @@ Component({
       //如果在end tab 切换， 需要设置结束时间的pick column回显
       if (this.data.currentTab == 'end') {
         this.setData({
-          pickValue: this.data.endPickValue
+          pickValue: this.data.end.pickValue
         });
       }
     },
-    checkValue(postStartTime, postEndTime) {
-      if (new Date(postEndTime).getTime() <= new Date(postStartTime).getTime()) {
+    checkValue(startPostTime, endPostTime) {
+      if (endPostTime.getTime() <= startPostTime.getTime()) {
         this.setData({
-          error: '开始时间小于结束时间'
+          error: '结束时间小于开始时间'
         })
         return false;
       } else {
@@ -286,11 +299,18 @@ Component({
       }
     },
     complete() {
-      const { postStartTime, postEndTime } = this.data;
-      if (this.checkValue(postStartTime, postEndTime)) {
+      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: postStartTime,
-          endTime: postEndTime
+          startTime: getPostTimeByDate(startPostTime),
+          endTime: endDurationPostTime
         })
       }
     }