crm-mobile/components/wk-form/wk-field-date-range.vue

<template>
  <view class="wk-field wk-field-date-range">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
		
    <view class="wk-field__body" @click.stop="handleChoose('startTime')">
      <view v-if="startTime" class="wk-field__body-core">
        {{ startTime }}
      </view>
      <view v-else class="wk-field__body-core wk-placeholder placeholder">
        开始时间
      </view>
			
      <image :src="$static('images/icon/calendar.png')" class="icon-pic" />
    </view>
		
    <view class="range-text">
      至
    </view>
		
    <view class="wk-field__body" @click.stop="handleChoose('endTime')">
      <view v-if="endTime" class="wk-field__body-core">
        {{ endTime }}
      </view>
      <view v-else class="wk-field__body-core wk-placeholder placeholder">
        结束时间
      </view>
			
      <image :src="$static('images/icon/calendar.png')" class="icon-pic" />
    </view>
		
    <uni-popup ref="popup" type="picker">
      <wk-date-picker
        v-model="selectedDate"
        :type="dateType"
        @select="handleSelect" />
    </uni-popup>
  </view>
</template>

<script>
  import mixins from './mixins'
  import moment from 'moment'
	
  export default {
    name: 'WkFieldDateRange',
    mixins: [mixins],
    data() {
      return {
        selectedDate: null,
				
        startTime: null,
        endTime: null,
        activateKey: ''
      }
    },
    computed: {
      dateType() {
        return Number(this.field.precisions) === 1 ? 'date' : 'datetime'
      }
    },
    watch: {
      formValue: {
        handler() {
          // this.checkedStatus = Boolean(Number(this.formValue))
          this.startTime = this.formValue[0] || null
          this.endTime = this.formValue[1] || null
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      /**
       * 格式化时间
       * @param {Object} val
       */
      formatTime(val) {
        if (!val) return ''
        if (this.dateType === 'date') return moment(val).format('YYYY-MM-DD')
        return val
      },
			
      /**
       * 去选择
       * @param {Object} key
       */
      handleChoose(key) {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
        this.activateKey = key
        this.$refs.popup.open()
      },
			
      /**
       * 选择
       * @param {Object} data
       * @param {Object} next
       */
      handleSelect(data, next) {
        next()
        let start = this.activateKey === 'startTime' ? data : this.startTime
        let end = this.activateKey === 'endTime' ? data : this.endTime
        if (start && end && moment(start).isAfter(end)) {
          this.$toast('开始时间不能大于结束时间')
          return
        }
        this[this.activateKey] = data
				
        this.formValue = [this.startTime, this.endTime]
        this.$emit('input', this.formValue)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: this.formValue
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';
	
	.range-text {
		font-size: $wk-font-sm;
		color: $gray;
		margin: 10rpx 0;
	}
	
	.wk-field__body {
		.wk-field__body-core.placeholder {
			font-size: $wk-font-base;
		}
		
		.icon-pic {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>