@10yun/cv-mobile-ui 0.5.53 → 0.5.55

package/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue

@@ -7,24 +7,32 @@
             <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
             <view class="uni-date__x-input">{{ displayValue || singlePlaceholderText }}</view>
           </view>
+
           <view v-else class="uni-date-x uni-date-range">
             <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
             <view class="uni-date__x-input text-center">{{ displayRangeValue.startDate || startPlaceholderText }}</view>
+
             <view class="range-separator">{{ rangeSeparator }}</view>
+
             <view class="uni-date__x-input text-center">{{ displayRangeValue.endDate || endPlaceholderText }}</view>
           </view>
+
           <view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
             <uni-icons type="clear" color="#c0c4cc" size="22"></uni-icons>
           </view>
         </view>
       </slot>
     </view>
+
     <view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view>
+
     <view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container">
       <view v-if="!isRange" class="uni-date-single--x" :style="pickerPositionStyle">
         <view class="uni-popper__arrow"></view>
+
         <view v-if="hasTime" class="uni-date-changed popup-x-header">
           <input class="uni-date__input text-center" type="text" v-model="inputDate" :placeholder="selectDateText" />
+
           <time-picker
             type="time"
             v-model="pickerTime"
@@ -44,6 +52,7 @@
             />
           </time-picker>
         </view>
+
         <Calendar
           ref="pcSingle"
           :showMonth="false"
@@ -54,10 +63,12 @@
           :default-value="defaultValue"
           style="padding: 0 8px"
         />
+
         <view v-if="hasTime" class="popup-x-footer">
           <text class="confirm-text" @click="confirmSingleChange">{{ okText }}</text>
         </view>
       </view>
+
       <view v-else class="uni-date-range--x" :style="pickerPositionStyle">
         <view class="uni-popper__arrow"></view>
         <view v-if="hasTime" class="popup-x-header uni-date-changed">
@@ -68,6 +79,7 @@
               v-model="tempRange.startDate"
               :placeholder="startDateText"
             />
+
             <time-picker
               type="time"
               v-model="tempRange.startTime"
@@ -85,7 +97,9 @@
               />
             </time-picker>
           </view>
+
           <uni-icons type="arrowthinright" color="#999" style="line-height: 40px"></uni-icons>
+
           <view class="popup-x-header--datetime">
             <input
               class="uni-date__input uni-date-range__input"
@@ -93,6 +107,7 @@
               v-model="tempRange.endDate"
               :placeholder="endDateText"
             />
+
             <time-picker
               type="time"
               v-model="tempRange.endTime"
@@ -111,6 +126,7 @@
             </time-picker>
           </view>
         </view>
+
         <view class="popup-x-body">
           <Calendar
             ref="left"
@@ -135,12 +151,14 @@
             style="padding: 0 8px; border-left: 1px solid #f1f1f1"
           />
         </view>
+
         <view v-if="hasTime" class="popup-x-footer">
           <text @click="clear">{{ clearText }}</text>
           <text class="confirm-text" @click="confirmRangeChange">{{ okText }}</text>
         </view>
       </view>
     </view>
+
     <Calendar
       v-if="isPhone"
       ref="mobile"
@@ -161,6 +179,7 @@
       :hideSecond="hideSecond"
       @confirm="mobileChange"
       @maskClose="close"
+      @change="calendarClick"
     />
   </view>
 </template>
@@ -192,10 +211,17 @@ import TimePicker from './time-picker.vue';
 import { initVueI18n } from '@dcloudio/uni-i18n';
 import i18nMessages from './i18n/index.js';
 import { getDateTime, getDate, getTime, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat } from './util';
+
 export default {
   name: 'UniDatetimePicker',
+
   options: {
+    // #ifdef MP-TOUTIAO
+    virtualHost: false,
+    // #endif
+    // #ifndef MP-TOUTIAO
     virtualHost: true
+    // #endif
   },
   components: {
     Calendar,
@@ -387,6 +413,7 @@ export default {
       // todo
       return this.isRange ? 653 : 301;
     },
+
     /**
      * for i18n
      */
@@ -450,6 +477,7 @@ export default {
         });
         return;
       }
+
       if (!Array.isArray(newVal) && !this.isRange) {
         if (newVal) {
           this.displayValue = this.inputDate = this.calendarDate = getDate(newVal);
@@ -468,12 +496,14 @@ export default {
         if (!before && !after) return;
         const beforeDate = getDate(before);
         const beforeTime = getTime(before, this.hideSecond);
+
         const afterDate = getDate(after);
         const afterTime = getTime(after, this.hideSecond);
         const startDate = beforeDate;
         const endDate = afterDate;
         this.displayRangeValue.startDate = this.tempRange.startDate = startDate;
         this.displayRangeValue.endDate = this.tempRange.endDate = endDate;
+
         if (this.hasTime) {
           this.displayRangeValue.startDate = `${beforeDate} ${beforeTime}`;
           this.displayRangeValue.endDate = `${afterDate} ${afterTime}`;
@@ -509,11 +539,17 @@ export default {
         this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1;
         return;
       }
+      // #ifdef MP-WEIXIN
+      const { windowWidth } = uni.getWindowInfo();
+      // #endif
+      // #ifndef MP-WEIXIN
       const { windowWidth } = uni.getSystemInfoSync();
+      // #endif
       this.isPhone = windowWidth <= 500;
       this.windowWidth = windowWidth;
     },
     show() {
+      this.$emit('show');
       if (this.disabled) {
         return;
       }
@@ -545,8 +581,10 @@ export default {
               this.$refs.right.changeMonth('pre');
             }
           } else {
-            this.$refs.right.changeMonth('next');
-            this.$refs.right.cale.lastHover = false;
+            // this.$refs.right.changeMonth('next')
+            if (this.isPhone) {
+              this.$refs.right.cale.lastHover = false;
+            }
           }
         }
       }, 50);
@@ -581,6 +619,7 @@ export default {
           }
         }
       }
+
       this.$emit('update:modelValue', value);
       this.$emit('input', value);
       this.$emit('change', value);
@@ -601,6 +640,7 @@ export default {
         this.calendarDate = this.inputDate = getDate(now);
         this.pickerTime = getTime(now, this.hideSecond);
       }
+
       let startLaterInputDate = false;
       let startDate, startTime;
       if (this.start) {
@@ -614,6 +654,7 @@ export default {
           this.inputDate = startDate;
         }
       }
+
       let endEarlierInputDate = false;
       let endDate, endTime;
       if (this.end) {
@@ -654,6 +695,7 @@ export default {
         fulldate: e.fulldate
       };
       this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj);
+      this.$emit('calendarClick', e);
     },
     rightChange(e) {
       const { before, after } = e.range;
@@ -665,13 +707,15 @@ export default {
         fulldate: e.fulldate
       };
       this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj);
+      this.$emit('calendarClick', e);
     },
     mobileChange(e) {
       if (this.isRange) {
         const { before, after } = e.range;
-        if (!before || !after) {
+        if (!before) {
           return;
         }
+
         this.handleStartAndEnd(before, after, true);
         if (this.hasTime) {
           const { startTime, endTime } = e.timeRange;
@@ -686,6 +730,7 @@ export default {
           this.displayValue = e.fulldate;
         }
         this.setEmit(this.displayValue);
+        this.calendarDate = this.displayValue;
       }
       this.$refs.mobile.close();
     },
@@ -706,21 +751,31 @@ export default {
       if (!checkDate(this.tempRange.endDate)) {
         this.tempRange.endDate = getDate(Date.now());
       }
+
       let start, end;
+
       let startDateLaterRangeStartDate = false;
       let startDateLaterRangeEndDate = false;
       let startDate, startTime;
+
+      let compareStartDateString = this.tempRange.startDate;
+      let compareEndDateString = this.tempRange.endDate;
+      if (this.hasTime) {
+        compareStartDateString = `${this.tempRange.startDate} ${this.tempRange.startTime}`;
+        compareEndDateString = `${this.tempRange.endDate} ${this.tempRange.endTime}`;
+      }
+
       if (this.start) {
         let startString = this.start;
         if (typeof this.start === 'number') {
           startString = getDateTime(this.start, this.hideSecond);
         }
         [startDate, startTime] = startString.split(' ');
-        if (this.start && !dateCompare(this.start, this.tempRange.startDate)) {
+        if (this.start && !dateCompare(this.start, compareStartDateString)) {
           startDateLaterRangeStartDate = true;
           this.tempRange.startDate = startDate;
         }
-        if (this.start && !dateCompare(this.start, this.tempRange.endDate)) {
+        if (this.start && !dateCompare(this.start, compareEndDateString)) {
           startDateLaterRangeEndDate = true;
           this.tempRange.endDate = startDate;
         }
@@ -734,11 +789,12 @@ export default {
           endString = getDateTime(this.end, this.hideSecond);
         }
         [endDate, endTime] = endString.split(' ');
-        if (this.end && !dateCompare(this.tempRange.startDate, this.end)) {
+
+        if (this.end && !dateCompare(compareStartDateString, this.end)) {
           endDateEarlierRangeStartDate = true;
           this.tempRange.startDate = endDate;
         }
-        if (this.end && !dateCompare(this.tempRange.endDate, this.end)) {
+        if (this.end && !dateCompare(compareEndDateString, this.end)) {
           endDateEarlierRangeEndDate = true;
           this.tempRange.endDate = endDate;
         }
@@ -755,6 +811,7 @@ export default {
         if (!this.tempRange.startTime) {
           this.tempRange.startTime = getTime(Date.now(), this.hideSecond);
         }
+
         if (startDateLaterRangeEndDate) {
           this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond);
         } else if (endDateEarlierRangeEndDate) {
@@ -776,7 +833,8 @@ export default {
       this.pickerVisible = false;
     },
     handleStartAndEnd(before, after, temp = false) {
-      if (!(before && after)) return;
+      if (!before) return;
+      if (!after) after = before;
       const type = temp ? 'tempRange' : 'range';
       const isStartEarlierEnd = dateCompare(before, after);
       this[type].startDate = isStartEarlierEnd ? before : after;
@@ -792,6 +850,7 @@ export default {
       endDate = new Date(endDate.replace('-', '/').replace('-', '/'));
       return startDate <= endDate;
     },
+
     /**
      * 比较时间差
      */
@@ -803,6 +862,7 @@ export default {
       const diff = (endDate - startDate) / (24 * 60 * 60 * 1000);
       return Math.abs(diff);
     },
+
     clear(needEmit = true) {
       if (!this.isRange) {
         this.displayValue = '';
@@ -838,10 +898,228 @@ export default {
           this.$emit('update:modelValue', []);
         }
       }
+    },
+
+    calendarClick(e) {
+      this.$emit('calendarClick', e);
     }
   }
 };
 </script>
 <style>
-@import 'style.css';
+.uni-date {
+  width: 100%;
+  flex: 1;
+}
+
+.uni-date-x {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #666;
+  font-size: 14px;
+  flex: 1;
+}
+.uni-date-x .icon-calendar {
+  padding-left: 3px;
+}
+
+.uni-date-x .range-separator {
+  height: 35px;
+  /* #ifndef MP */
+  padding: 0 2px;
+  /* #endif */
+  line-height: 35px;
+}
+.uni-date-x--border {
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #e5e5e5;
+}
+
+.uni-date-editor--x {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.uni-date-editor--x .uni-date__icon-clear {
+  padding-right: 3px;
+  display: flex;
+  align-items: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-date__x-input {
+  width: auto;
+  height: 35px;
+  /* #ifndef MP */
+  padding-left: 5px;
+  /* #endif */
+  position: relative;
+  flex: 1;
+  line-height: 35px;
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.uni-date__input {
+  height: 40px;
+  width: 100%;
+  line-height: 40px;
+  font-size: 14px;
+}
+
+.uni-date-range__input {
+  text-align: center;
+  max-width: 142px;
+}
+
+.uni-date-picker__container {
+  position: relative;
+}
+
+.uni-date-mask--pc {
+  position: fixed;
+  bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  z-index: 996;
+}
+
+.uni-date-single--x {
+  background-color: #fff;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.uni-date-range--x {
+  background-color: #fff;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.uni-date-editor--x__disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.uni-date-editor--logo {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+}
+
+/* 添加时间 */
+.popup-x-header {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.popup-x-header--datetime {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex: 1;
+}
+
+.popup-x-body {
+  display: flex;
+}
+
+.popup-x-footer {
+  padding: 0 15px;
+  border-top-color: #f1f1f1;
+  border-top-style: solid;
+  border-top-width: 1px;
+  line-height: 40px;
+  text-align: right;
+  color: #666;
+}
+
+.popup-x-footer text:hover {
+  color: #007aff;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.popup-x-footer .confirm-text {
+  margin-left: 20px;
+  color: #007aff;
+}
+
+.uni-date-changed {
+  text-align: center;
+  color: #333;
+  border-bottom-color: #f1f1f1;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+.uni-date-changed--time text {
+  height: 50px;
+  line-height: 50px;
+}
+
+.uni-date-changed .uni-date-changed--time {
+  flex: 1;
+}
+
+.uni-date-changed--time-date {
+  color: #333;
+  opacity: 0.6;
+}
+
+.mr-50 {
+  margin-right: 50px;
+}
+
+/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+.uni-popper__arrow,
+.uni-popper__arrow::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-top-width: 0;
+}
+
+.uni-popper__arrow {
+  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+  top: -6px;
+  left: 10%;
+  margin-right: 3px;
+  border-bottom-color: #ebeef5;
+}
+
+.uni-popper__arrow::after {
+  content: ' ';
+  top: 1px;
+  margin-left: -6px;
+  border-bottom-color: #fff;
+}
 </style>