改造vant日期选择2

<template>
  <div>
    <div class='time-title'>快速搜索</div>
    <div class='k-select'>
      <div class='k-sub'>
         <span v-for='item of days' :class='{active: +daysIndex ===item.value}' @click='calcTime(item)'
               :key='item.value'>
        {{ item.name }}
      </span>
      </div>
    </div>
    <div class='xian'></div>
    <div class='k-select' style='margin-top: 0'>
      <div class='k-fiscal'>
      <span v-for='item of fiscalAndNatural' :class='{active:+fiscalAndNaturalIndex===+item.index}'
            @click='handleYear(item)'>
        {{ item.name }}
      </span>
        <div>
         <span v-for='item of years' :class='{active:+yearsIndex===+item.index}' @click='handleYearNum(item)'>
        {{ item.name }}
      </span>
        </div>
      </div>
    </div>
    <div class='time-title' style='margin-top: 0'>日期选择</div>
    <div class='date-option'>
      <div class='date-div'>
        <i class='iconfont green'>&#xe684;</i>
        <div class='date-bg0' @click='showTwoDate(1)'>
          {{ oneDate | dateformat }}
        </div>
        <div class='date-bg1'>至</div>
        <div class='date-bg2' @click='showTwoDate(2)'>
          {{ twoDate | dateformat }}
        </div>
        <span class='refresh green' @click='handleReset'></span>
      </div>
      <div class='btn-div' v-if='dateOneVisible === false && dateTwoVisible === false'>
        <button class='cz' @click='handleReset'>重置</button>
        <button class='qd' @click="$emit('dateConfirm', { oneDate, twoDate, yearType })">确定</button>
      </div>
    </div>
    <van-datetime-picker
      style='margin-top: 0.5rem'
      v-if='dateOneVisible'
      v-model='oneDate'
      type='date'
      :min-date='minDate'
      :max-date='maxDate'
      :item-height='`.7rem`'
      :show-toolbar='false'
      @confirm='onConfirm1'
      @cancel='onCanceld'
      @change='changeOne'
      ref='van_picker'
    >
      <template #confirm>&ensp;</template>
      <template #cancel>&ensp;</template>
      <template #columns-top>
        <!--        <div class='time-title'>快速搜索</div>-->
        <!--        <div class='k-select'>-->
        <!--            <span v-for='item of days' @click='calcTime(item.value)' :key='item.value'>-->
        <!--              {{ item.name }}-->
        <!--            </span>-->
        <!--        </div>-->
        <!--        <div class='time-title'>日期选择</div>-->
        <!--        <div class='time-line'>-->
        <!--          <div class='y'></div>-->
        <!--          <div class='m' @click='allYearOne'>-->
        <!--            <span class='sl'>全年</span>-->
        <!--          </div>-->
        <!--          <div class='d' @click='allMonthOne'>-->
        <!--            <span class='sl'>全月</span>-->
        <!--          </div>-->
        <!--        </div>-->
      </template>
      <template #columns-bottom>
        <div class='bot-btn'>
          <button class='cz' @click='dateOneVisible = false'>取消</button>
          <button class='qd' @click='onConfirmNewOne'>确定</button>
        </div>
      </template>
    </van-datetime-picker>
    <van-datetime-picker
      style='margin-top: 0.5rem'
      v-if='dateTwoVisible'
      v-model='twoDate'
      type='date'
      :min-date='minDate'
      :max-date='maxDate'
      :item-height='`.7rem`'
      :show-toolbar='false'
      @confirm='onConfirm2'
      @cancel='onCanceld'
      @change='changeTwo'
      ref='van_picker2'
    >
      <template #confirm>&ensp;</template>
      <template #cancel>&ensp;</template>
      <template #columns-top></template>
      <template #columns-bottom>
        <div class='bot-btn'>
          <button class='cz' @click='dateTwoVisible = false'>取消</button>
          <button class='qd' @click='onConfirmNewTwo'>确定</button>
        </div>
      </template>
    </van-datetime-picker>
  </div>
</template>

<script>
import moment from 'moment'
import { Notify } from 'vant'

export default {
  name: 'dateControl',
  data() {
    return {
      dataType: '',
      // 自然年 财年
      fiscalAndNatural: [
        {
          index: 1,
          name: '自然年'
        },
        {
          index: 2,
          name: '财年'
        }
      ],
      fiscalAndNaturalIndex: null,
      years: [],
      yearsIndex: null,
      // 改变的日期
      currentSelectTime: '',
      oneDate: new Date(),
      twoDate: new Date(),
      // 最小日期
      minDate: new Date(2018, 0, 1),
      // 最大日期
      maxDate: new Date(),
      // 快捷时间选择
      days: [
        {
          value: 1,
          name: '近7天'
        },
        {
          value: 2,
          name: '近30天'
        },
        {
          value: 3,
          name: '近60天'
        },
        {
          value: 4,
          name: '近90天'
        },
        {
          value: 5,
          name: '上一月'
        },
        {
          value: 6,
          name: '上两月'
        },
        {
          value: 7,
          name: '当月'
        },
        {
          value: 8,
          name: '当日'
        }
      ],
      daysIndex: null,
      dateOneV: false,
      dateOneVisible: false,
      dateTwoVisible: false,
      oneTwoheight: '65%',
      yearType: ''
    }
  },
  watch: {
    dateOneVisible(nv) {
      if (nv === false) {
        this.$emit('changeHeight', '65%')
      }
    },
    dateTwoVisible(nv) {
      if (nv === false) {
        this.$emit('changeHeight', '65%')
      }
    }
  },
  methods: {
    init() {
    },
    handleReset() {
      this.twoDate = new Date()
      this.oneDate = new Date()
      this.dateOneV = false
      this.oneTwoheight = '65%'
      this.fiscalAndNaturalIndex = null
      this.years = []
      this.daysIndex = null
      this.$emit('changeHeight', this.oneTwoheight)

    },
    handleYear(val) {
      this.daysIndex = null
      this.fiscalAndNaturalIndex = val.index
      let year = moment(new Date()).format('YYYY')
      this.years = []
      for (let i = 0; i < 4; i++) {
        this.years.push(
          {
            index: +year - i,
            name: +year - i
          }
        )
      }
      this.handleYearNum(val)
    },
    handleYearNum(val) {
      if (val.index === 1 || val.index === 2) {
        if (this.yearsIndex === null) {
          this.yearsIndex = this.years[0].index
        }
        // 财年的时候为2
        if (+this.fiscalAndNaturalIndex === 2) {
          this.yearType = '财年'
          this.oneDate = new Date(+this.yearsIndex - 1, 7, 1)
          this.twoDate = new Date(this.yearsIndex, 6, 31)
        } else {
          this.yearType = '自然年'
          this.oneDate = new Date(this.yearsIndex, 0, 1)
          this.twoDate = new Date(this.yearsIndex, 11, 31)
        }
      } else {
        this.yearsIndex = val.index
        // 财年的时候为2
        if (+this.fiscalAndNaturalIndex === 2) {
          this.yearType = '财年'
          this.oneDate = new Date(+val.index - 1, 7, 1)
          this.twoDate = new Date(val.index, 6, 31)
        } else {
          this.yearType = '自然年'
          this.oneDate = new Date(val.index, 0, 1)
          this.twoDate = new Date(val.index, 11, 31)
        }
      }

    },
    showTwoDate(val) {
      if (+val === 1) {
        sessionStorage.setItem('oneDate', this.oneDate)
        this.dateOneVisible = true
        this.dateTwoVisible = false
        setTimeout(() => {
          this.oneTwoheight = '85%'
          this.$emit('changeHeight', this.oneTwoheight)
        }, 30)
      } else {
        sessionStorage.setItem('twoDate', this.twoDate)
        this.dateTwoVisible = true
        this.dateOneVisible = false
        setTimeout(() => {
          this.oneTwoheight = '85%'
          this.$emit('changeHeight', this.oneTwoheight)
        }, 30)
      }
    },
    // 选择全年 1
    allYearOne() {
      this.$nextTick(() => {
        // console.log(this.$refs.van_picker.getPicker())
        this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
        this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
        console.log(this.$refs.van_picker.getPicker().getValues())
        let yearData = this.$refs.van_picker.getPicker().getValues()
        this.oneDate = new Date(yearData[0], 0, 1)
        this.twoDate = new Date(yearData[0], 11, 31)
        sessionStorage.setItem('oneDate', this.oneDate)
        sessionStorage.setItem('twoDate', this.twoDate)
        this.dateOneVisible = false
        this.dateOneV = false
        this.checked = true
        this.yearType = '自然年'
        this.isCalendarYear = true
        this.dataType = 8

      })
    },
    // 选择全月 1
    allMonthOne() {
      this.$nextTick(() => {
        // console.log(this.$refs.van_picker.getPicker())
        this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
        this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
        console.log(this.$refs.van_picker.getPicker().getValues())
        let yearData = this.$refs.van_picker.getPicker().getValues()
        this.oneDate = new Date(yearData[0], +yearData[1] - 1, 1)
        let day = this.getDuration(yearData[0], yearData[1])
        let currentMonth = moment(this.oneDate).format('YYYYMM')
        if (+currentMonth === +moment(new Date()).format('YYYYMM')) {
          this.twoDate = new Date()
        } else {
          this.twoDate = new Date(yearData[0], +yearData[1] - 1, day)
        }
        sessionStorage.setItem('oneDate', this.oneDate)
        sessionStorage.setItem('twoDate', this.twoDate)
        this.dateOneVisible = false
        this.dateOneV = false
        this.checked = false
        this.yearType = '自然年'
        this.isCalendarYear = true
        this.dataType = 7

      })
    },
    // 选择全年 2
    allYearTwo() {
      this.$nextTick(() => {
        // console.log(this.$refs.van_picker.getPicker())
        this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
        this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
        console.log(this.$refs.van_picker2.getPicker().getValues())
        let yearData = this.$refs.van_picker2.getPicker().getValues()
        this.oneDate = new Date(yearData[0], 0, 1)
        this.twoDate = new Date(yearData[0], 11, 31)
        sessionStorage.setItem('oneDate', this.oneDate)
        sessionStorage.setItem('twoDate', this.twoDate)
        this.dateTwoVisible = false
        this.checked = true
        this.yearType = '自然年'
        this.isCalendarYear = true
        this.dataType = 8

      })
    },
    // 选择全月 2
    allMonthTwo() {
      this.$nextTick(() => {
        // console.log(this.$refs.van_picker.getPicker())
        this.$refs.van_picker.getPicker().setColumnIndex([1], 0)
        this.$refs.van_picker.getPicker().setColumnIndex([2], 0)
        console.log(this.$refs.van_picker2.getPicker().getValues())
        let yearData = this.$refs.van_picker2.getPicker().getValues()
        this.oneDate = new Date(yearData[0], +yearData[1] - 1, 1)
        let day = this.getDuration(yearData[0], yearData[1])
        let currentMonth = moment(this.twoDate).format('YYYYMM')
        if (+currentMonth === +moment(new Date()).format('YYYYMM')) {
          this.twoDate = new Date()
        } else {
          this.twoDate = new Date(yearData[0], +yearData[1] - 1, day)
        }
        sessionStorage.setItem('oneDate', this.oneDate)
        sessionStorage.setItem('twoDate', this.twoDate)
        this.dateTwoVisible = false
        this.checked = false
        this.yearType = '自然年'
        this.isCalendarYear = true
        this.dataType = 7

      })
    },
    calcTime(val) {
      let that = this
      that.daysIndex = val.value
      that.fiscalAndNaturalIndex = null
      that.years = []
      let day
      if (+val.value === 1) {
        day = 7
        that.oneDate = new Date(that.DaysAgo(day))
        that.twoDate = new Date()
      } else if (+val.value === 2) {
        day = 30
        that.oneDate = new Date(that.DaysAgo(day))
        that.twoDate = new Date()
      } else if (+val.value === 3) {
        day = 60
        that.oneDate = new Date(that.DaysAgo(day))
        that.twoDate = new Date()
      } else if (+val.value === 4) {
        day = 90
        that.oneDate = new Date(that.DaysAgo(day))
        that.twoDate = new Date()
      } else if (+val.value === 5) {
        // 上一月
        day = that.getDuration(new Date().getFullYear(), +new Date().getMonth())
        that.oneDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 1, 1)
        that.twoDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 1, day)
      } else if (+val.value === 6) {
        // 上两月
        day = that.getDuration(new Date().getFullYear(), +new Date().getMonth() - 1)
        that.oneDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 2, 1)
        that.twoDate = new Date(new Date().getFullYear(), +new Date().getMonth() - 2, day)
      } else if (+val.value === 7) {
        // 当月
        that.twoDate = new Date()
        that.oneDate = that.getMonthBegin(new Date().getFullYear(), new Date().getMonth() + 1)
      } else if (+val.value === 8) {
        // 今日
        // that.oneDate = that.getMonthBegin(new Date().getFullYear(), 1)
        that.oneDate = new Date()
        that.twoDate = new Date()
      }

      that.yearType = '自然年'
      that.dataType = val
      that.dateOneVisible = false
      that.dateOneV = false
      that.dateTwoVisible = false
      that.dateTwoV = false
      that.init()
    },
    // 改变的值存入变量
    changeOne(picker) {
      this.newTime1 = new Date(picker.getValues()[0], +picker.getValues()[1] - 1, picker.getValues()[2])
    },
    changeTwo(picker) {
      this.newTime2 = new Date(picker.getValues()[0], +picker.getValues()[1] - 1, picker.getValues()[2])
    },
    onCanceld() {
      this.dateOneVisible = false
      this.dateOneV = false
      this.dateTwoVisible = false
    },
    // 中间方法调用插件方法，传递日期
    onConfirmNewOne() {
      this.onConfirm1(this.newTime1)
    },
    onConfirmNewTwo() {
      this.onConfirm2(this.newTime2)
    },
    // 时间确定
    onConfirm1(date) {
      this.dataType = ''
      if (!date) {
        date = new Date()
      }
      let oneYear = moment(date).format('YYYY')
      let twoYear = moment(this.twoDate).format('YYYY')

      if (this.GetDayDiff(this.oneDate, this.twoDate) < 0) {
        this.oneDate = sessionStorage.getItem('oneDate')
        Notify({ type: 'warning', message: '起止时间不能晚于终止时间' })
        return
      }

      if (this.isCalendarYear) {
        if (oneYear === twoYear) {
          console.log('第一个日期', this.oneDate)
          console.log('第二个日期', this.twoDate)
          this.oneDate = date

        } else {
          this.oneDate = sessionStorage.getItem('oneDate')
          Notify({ type: 'warning', message: '不能跨年查询' })
        }
      } else {
        this.oneDate = date

        this.oneTwoheight = '30%'
        this.dateOneVisible = false
        this.dateOneV = false
        this.dateTwoVisible = false
        this.datetwoV = false
      }
    },
    onConfirm2(date) {
      this.dataType = ''
      if (!date) {
        date = new Date()
      }
      let oneYear = moment(this.oneDate).format('YYYY')
      let twoYear = moment(date).format('YYYY')

      if (this.GetDayDiff(this.oneDate, this.twoDate) < 0) {
        this.twoDate = sessionStorage.getItem('twoDate')
        Notify({ type: 'warning', message: '终止时间不能早于起止时间' })
        return
      }

      if (this.isCalendarYear) {
        if (oneYear === twoYear) {
          console.log('第一个日期', this.oneDate)
          console.log('第二个日期', this.twoDate)
          this.twoDate = date

        } else {
          this.twoDate = sessionStorage.getItem('twoDate')
          Notify({ type: 'warning', message: '不能跨年查询' })
        }
      } else {
        this.twoDate = date
        let one = this.getMonthBegin(new Date().getFullYear(), 1)
        let two = this.getMonthEnd(new Date().getFullYear(), 2)
        console.log(moment(one).format('YYYYMMDD'))
        console.log(moment(two).format('YYYYMMDD'))
        if (
          moment(this.oneDate).isBetween(moment(one).format('YYYYMMDD'), moment(two).format('YYYYMMDD')) &&
          moment(this.twoDate).isBetween(moment(one).format('YYYYMMDD'), moment(two).format('YYYYMMDD'))
        ) {
        } else {
          let day = this.countWeekDaysBetween(this.oneDate, this.twoDate)
          this.cDays = day - 30
          if (this.cDays < 0) {
            this.cDays = 0
          }
          console.log(this.cDays)
        }

        this.oneTwoheight = '30%'
        this.dateOneVisible = false
        this.dateOneV = false
        this.dateTwoVisible = false
        this.datetwoV = false
      }
      this.getSupLevel2DimInfo()
    },
    // 自然月第1天
    getMonthBegin(year, month) {
      return new Date(year, month - 1, 1)
    },
    // 计算两个日期之间的相差多少天
    GetDayDiff(date1, date2) {
      return (date2 - date1) / (1000 * 3600 * 24)
    },
    // 多少天之前
    DaysAgo(val) {
      let d = new Date()
      d.setDate(d.getDate() - val)
      return d.toISOString().split('T')[0]
    },
    // 返回当月多少天
    getDuration(year, month) {
      let d = new Date(year, month, 0)
      return d.getDate()
    },
    // 自然月最后一天
    getMonthEnd(year, month) {
      return new Date(year, month, 0)
    },
    countWeekDaysBetween(date1, date2) {
      let result = (date2 - date1) / (1000 * 3600 * 24)
      return result.toFixed(0)
    },
    // 获取二级分类
    getSupLevel2DimInfo() {
      // 取当前月份的最后一天和当前比较，如果不是当前最后一天，就取上月最后一天
      function removeFalsy(arr) {
        return arr.filter(Boolean)
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang='stylus' scoped>
.time-title
  margin-top .2rem
  padding .15rem
  font-size .3rem
  text-indent .2rem

.k-select
  overflow hidden
  font-size .26rem

  .k-sub
    margin-left .25rem

    span
      display inline-block
      width 1.1rem
      text-align center
      padding .1rem .2rem
      background #f4f4f4
      margin-right .25rem
      margin-top .25rem
      border-radius .1rem
      color #777

      &.active
        color #fff
        background #0bb78e

  .k-fiscal
    margin-left .25rem
    margin-bottom .25rem

    span
      display inline-block
      width 1.1rem
      text-align center
      padding .1rem .2rem
      background #f4f4f4
      margin-right .25rem
      margin-top .25rem
      border-radius .1rem
      color #777

      &.active
        color #fff
        background #0bb78e

.xian
  border-bottom: 1px dashed #dedede;
  margin-top: .3rem

.time-line
  display flex
  text-align center
  font-size .32rem
  padding-top .15rem
  padding-bottom .15rem

  .y
    flex 1

  .m
    flex 1

    .sl
      padding .15rem .35rem
      border-radius 5px

  .d
    flex 1

    .sl
      padding .15rem .35rem
      border-radius 5px

.bot-btn
  overflow hidden
  padding .15rem
  text-align center

  .cz, .qd
    display inline-block
    padding .15rem 1.3rem
    color #fff

  .cz
    background #f4f4f4
    color #333
    border-radius .6rem 0 0 .6rem

  .qd
    background #0BB48C
    border-radius 0 .6rem .6rem 0

.date-option
  overflow hidden

  .btn-div
    overflow hidden
    margin-top .35rem
    padding .15rem
    text-align center

    .cz, .qd
      display inline-block
      padding .15rem 1.3rem
      color #fff

    .cz
      background #f4f4f4
      color #333
      border-radius .6rem 0 0 .6rem

    .qd
      background #0BB48C
      border-radius 0 .6rem .6rem 0

  .date-div
    display inline-block
    background #fff
    margin-left .4rem
    margin-top .2rem

    .date-bg0
      display inline-block
      text-align center
      margin-left .25rem
      padding .15rem .25rem
      border-radius .1rem
      background #F4F4F4
      color #666

    .date-bg1
      display inline-block
      margin-left .25rem
      color #666

    .date-bg2
      display inline-block
      text-align center
      margin-left .25rem
      padding .15rem .25rem
      border-radius .1rem
      background #F4F4F4
      color #666

    .refresh:before {
      margin-left .25rem
      content: '\27F2';
      font-size .36rem
    }
</style>