crm-mobile/components/wk-form/wk-field-datetime.vue

<template>
  <view>
    <view class="wk-field wk-field-datetime">
      <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">
        <view class="wk-field__body-core">
          {{ formatTime }}
        </view>
				
        <image :src="$static('images/icon/calendar.png')" class="icon-pic" />
      </view>
    </view>
		
    <uni-popup ref="popup" type="picker">
      <wk-date-picker
        v-model="formValue"
        :type="field.formType"
        @select="handleSelect" />
    </uni-popup>
  </view>
</template>

<script>
  import mixins from './mixins'
  import moment from 'moment'

  export default {
    name: 'WkFieldDatetime',
    mixins: [mixins],
    data() {
      return {
      }
    },
    computed: {
      formatTime() {
        if (!this.formValue) return ''
        if (this.field.formType === 'date') return moment(this.formValue).format('YYYY-MM-DD')
        return this.formValue
      }
    },
    methods: {
      handleChoose() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
        this.$refs.popup.open()
      },
      handleSelect(data, next) {
        this.formValue = data
        this.$emit('input', data)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: data
        })
        next()
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';
	
	.icon-pic {
		width: 32rpx;
		height: 32rpx;
	}
</style>