wanjiashangchao-user/components/benben-picker/time-picker.vue

<template>
  <view class="w-picker-view">
    <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in range.hours" :key="index">{{ item }}时</view>
      </picker-view-column>
      <picker-view-column>
        <view class="w-picker-item" v-for="(item, index) in range.minutes" :key="index">{{ item }}分</view>
      </picker-view-column>
      <picker-view-column v-if="second">
        <view class="w-picker-item" v-for="(item, index) in range.seconds" :key="index">{{ item }}秒</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickVal: [],
      range: {},
      checkObj: {},
    }
  },
  props: {
    itemHeight: {
      type: String,
      default: '44px',
    },
    value: {
      type: [String, Array, Number],
      default: '',
    },
    current: {
      //是否默认选中当前日期
      type: Boolean,
      default: false,
    },
    second: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value(val) {
      this.initData()
    },
  },
  created() {
    this.initData()
  },
  methods: {
    formatNum(n) {
      return Number(n) < 10 ? '0' + Number(n) : Number(n) + ''
    },
    checkValue(value) {
      let strReg = /^\d{2}:\d{2}:\d{2}$/,
        example = '18:00:05'
      if (!strReg.test(value)) {
        console.log(new Error('请传入与mode、fields匹配的value值，例value=' + example + ''))
      }
      return strReg.test(value)
    },
    resetData(year, month, day, hour, minute) {
      let curDate = this.getCurrenDate()
      let curFlag = this.current
      let curHour = curDate.curHour
      let curMinute = curDate.curMinute
      let curSecond = curDate.curSecond
      for (let hour = 0; hour < 24; hour++) {
        hours.push(this.formatNum(hour))
      }
      for (let minute = 0; minute < 60; minute++) {
        minutes.push(this.formatNum(minute))
      }
      for (let second = 0; second < 60; second++) {
        seconds.push(this.formatNum(second))
      }
      return {
        hours,
        minutes,
        seconds,
      }
    },
    getData(curDate) {
      //用来处理初始化数据
      let hours = [],
        minutes = [],
        seconds = []
      let curFlag = this.current
      let disabledAfter = this.disabledAfter
      let fields = this.fields
      let curHour = curDate.curHour
      let curMinute = curDate.curMinute
      let curSecond = curDate.curSecond
      for (let hour = 0; hour < 24; hour++) {
        hours.push(this.formatNum(hour))
      }
      for (let minute = 0; minute < 60; minute++) {
        minutes.push(this.formatNum(minute))
      }
      for (let second = 0; second < 60; second++) {
        seconds.push(this.formatNum(second))
      }
      return this.second
        ? {
            hours,
            minutes,
            seconds,
          }
        : {
            hours,
            minutes,
          }
    },
    getCurrenDate() {
      let curDate = new Date()
      let curHour = curDate.getHours()
      let curMinute = curDate.getMinutes()
      let curSecond = curDate.getSeconds()
      return this.second
        ? {
            curHour,
            curMinute,
            curSecond,
          }
        : {
            curHour,
            curMinute,
          }
    },
    getDval() {
      let value = this.value
      let fields = this.fields
      let dVal = null
      let aDate = new Date()
      let hour = this.formatNum(aDate.getHours())
      let minute = this.formatNum(aDate.getMinutes())
      let second = this.formatNum(aDate.getSeconds())
      if (value) {
        let flag = this.checkValue(value)
        if (!flag) {
          dVal = [hour, minute, second]
        } else {
          dVal = value ? value.split(':') : []
        }
      } else {
        dVal = this.second ? [hour, minute, second] : [hour, minute]
      }
      return dVal
    },
    initData() {
      let curDate = this.getCurrenDate()
      let dateData = this.getData(curDate)
      let pickVal = [],
        obj = {},
        full = '',
        result = '',
        hour = '',
        minute = '',
        second = ''
      let dVal = this.getDval()
      let curFlag = this.current
      let disabledAfter = this.disabledAfter
      let hours = dateData.hours
      let minutes = dateData.minutes
      let seconds = dateData.seconds
      let defaultArr = this.second
        ? [
            dVal[0] && hours.indexOf(dVal[0]) != -1 ? hours.indexOf(dVal[0]) : 0,
            dVal[1] && minutes.indexOf(dVal[1]) != -1 ? minutes.indexOf(dVal[1]) : 0,
            dVal[2] && seconds.indexOf(dVal[2]) != -1 ? seconds.indexOf(dVal[2]) : 0,
          ]
        : [
            dVal[0] && hours.indexOf(dVal[0]) != -1 ? hours.indexOf(dVal[0]) : 0,
            dVal[1] && minutes.indexOf(dVal[1]) != -1 ? minutes.indexOf(dVal[1]) : 0,
          ]
      pickVal = disabledAfter
        ? defaultArr
        : curFlag
        ? this.second
          ? [
              hours.indexOf(this.formatNum(curDate.curHour)),
              minutes.indexOf(this.formatNum(curDate.curMinute)),
              seconds.indexOf(this.formatNum(curDate.curSecond)),
            ]
          : [hours.indexOf(this.formatNum(curDate.curHour)), minutes.indexOf(this.formatNum(curDate.curMinute))]
        : defaultArr
      this.range = dateData
      this.checkObj = obj
      hour = dVal[0] ? dVal[0] : hours[0]
      minute = dVal[1] ? dVal[1] : minutes[0]
      if (this.second) second = dVal[2] ? dVal[0] : seconds[0]
      result = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute}`
      full = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute + ':00'}`
      this.$nextTick(() => {
        this.pickVal = pickVal
      })
      this.$emit('change', {
        result: result,
        value: full,
        obj: obj,
      })
    },
    handlerChange(e) {
      let arr = [...e.detail.value]
      let data = this.range
      let hour = '',
        minute = '',
        second = '',
        result = '',
        full = '',
        obj = {}
      hour = arr[0] || arr[0] == 0 ? data.hours[arr[0]] || data.hours[data.hours.length - 1] : ''
      minute = arr[1] || arr[1] == 0 ? data.minutes[arr[1]] || data.minutes[data.minutes.length - 1] : ''
      if (this.second) second = arr[2] || arr[2] == 0 ? data.seconds[arr[2]] || data.seconds[data.seconds.length - 1] : ''
      obj = this.second
        ? {
            hour,
            minute,
            second,
          }
        : {
            hour,
            minute,
          }
      this.checkObj = obj
      result = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute}`
      full = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute + ':00'}`
      this.$emit('change', {
        result: result,
        value: full,
        obj: obj,
      })
    },
  },
}
</script>

<style lang="scss">
@import './w-picker.css';
</style>