ebiz-h5/src/views/ebiz/underwriting/components/FieldPicker.vue

<template>
  <div class="date-picter mb1" id="date-picter">
    <div v-if="defaultStyle == 'style02'" @click="DatePickerShow(flag)" class="fs12 red ml15">
      <span v-if="value">{{ value }} </span>
      <span v-else>{{ placeholder }} </span>
      <img src="@/assets/images/u79.png" alt class="absolute mt5 ml5" />
    </div>
    <div v-else-if="defaultStyle == 'style03'" @click="DatePickerShow(flag)" class="fs12 mr15">
      <span v-if="value">{{ value }} </span>
      <span v-else>{{ placeholder }} </span>
      <img src="@/assets/images/u80.png" alt class="absolute ml5" />
    </div>
    <van-field
      v-else
      readonly
      clickable
      :label="label"
      :value="date"
      :placeholder="placeholder"
      @click="DatePickerShow(flag)"
      :required="required"
      :name="label"
      right-icon="arrow"
    />
    <van-popup v-model="showDataPicker" position="bottom" style="z-index：9999">
      <van-datetime-picker :type="type" v-model="data" @confirm="onConfirmDate" @cancel="cancel" :max-date="maxDate" :min-date="minDate" />
    </van-popup>
  </div>
</template>
<script>
import { Field, Popup, DatetimePicker } from 'vant'
import utils from '@/assets/js/business-common'
import beforeDate from '@/assets/js/utils/getBeforeDate.js'
export default {
  name: 'FieldDatePicter',
  props: {
    // defaultStyle :style02 时，显示红字红三角的样式，不写的话展示默认样式
    defaultStyle: {
      type: String,
      default: ''
    },
    isDefault: {
      type: Boolean,
      default: false
    },
    maxDate: {
      type: Date,
      default: () => {
        return beforeDate.getBeforeYear(-20)
      }
    },
    minDate: {
      type: Date,
      default: () => {
        return new Date('1900-01-01')
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: '11'
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    type: {
      type: String,
      default: 'date'
    },
    defaultDate: {
      type: Date,
      default: () => {
        return new Date()
      }
    },
    defaulTime: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    flag: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentDate: beforeDate.getBeforeYear(30), //当前时间的30年前
      showDataPicker: false,
      data: '', //时间插件绑定的值
      date: '' //field显示的值
      //minDate: new Date('1900-01-01') //因为VANT组件默认是十年前
    }
  },
  components: {
    [DatetimePicker.name]: DatetimePicker,
    [Field.name]: () => import('@/views/ebiz/underwriting/components/GField.vue'),
    [Popup.name]: Popup
  },
  created() {
    // this.DatePickerShow(this.flag)
    this.init()
    // setTimeout(() => {
    //   this.showDataPicker = false
    // }, 0)
  },
  mounted() {},
  watch: {
    value() {
      this.init()
    }
  },
  methods: {
    /**
     * 初始化
     */

    init() {
      if (this.type == 'time') {
        this.data = this.value
      } else if (this.value) {
        this.data = new Date(this.value)
      } else {
        this.data = this.currentDate
      }
      if (this.required) {
        this.rules = 'required'
      }
      if (this.isDefault) {
        this.data = beforeDate.getBeforeYear(0)
      }
      this.date = this.value
    },

    onConfirmDate(value) {
      let result = ''
      if (this.type == 'time') {
        result = value
      } else {
        let dateType = {
          date: 'yyyy-MM-dd',
          datetime: 'yyyy-MM-dd HH:mm:ss',
          'year-month': 'yyyy-MM',
          time: 'mm:ss'
        }
        result = utils.formatDate(value, dateType[this.type])
      }

      this.$emit('update:value', result)
      this.date = result
      this.$emit('confirm', result)
      this.showDataPicker = false
    },
    cancel() {
      this.showDataPicker = false
      this.$emit('cancel', '')
    },
    DatePickerShow(flag) {
      if (this.readonly || this.disabled) {
        return
      }
      this.showDataPicker = flag
      this.$emit('showUp', flag)
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-bar {
  .van-nav-bar {
    &__text {
      color: white;
    }
    &__title {
      color: white;
    }
  }
  .van-icon {
    color: white;
  }
}
</style>