提交

src/components/ebiz/FieldDatePicter.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="date-picter mb1" id="date-picter">
+    <van-field
+      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">
+      <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'
+export default {
+  name: 'FieldDatePicter',
+  props: {
+    maxDate: {
+      type: Date,
+      default: () => {
+        return new Date('2039-12-31')
+      }
+    },
+    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
+    }
+  },
+  data() {
+    return {
+      currentDate: new Date(),
+      showDataPicker: false,
+      data: '', //时间插件绑定的值
+      date: '', //field显示的值
+      minDate: new Date('1900-01-01') //因为VANT组件默认是十年前
+    }
+  },
+  components: {
+    [DatetimePicker.name]: DatetimePicker,
+    [Field.name]: Field,
+    [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'
+      }
+      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) {
+      this.showDataPicker = flag
+      this.$emit('showUp', flag)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.date-picter:not(:last-child)::after {
+  position: absolute;
+  z-index: 99;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  // bottom: 0;
+  // top: 0;
+  left: 4.26667vw;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+#date-picter {
+  /deep/.van-cell:not(:last-child)::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 4.26667vw;
+    border-bottom: 1px solid transparent;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+.nav-bar {
+  .van-nav-bar {
+    &__text {
+      color: white;
+    }
+    &__title {
+      color: white;
+    }
+  }
+  .van-icon {
+    color: white;
+  }
+}
+</style>