改造vant日期选择2

<template>
  <div>
    <div class='time-title'>快速搜索</div>
    <div class='k-select'>
        <span v-for='item of days' @click='calcTime(item)' :key='item.value'>
          {{ item.name }}
        </span>
    </div>
    <div class='time-title'>日期选择</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('confirm', {oneDate, twoDate, timeStr})">确定</button>
      </div>
    </div>
    <van-datetime-picker
      style="margin-top: .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>
      </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
      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: '',
      // 财年
      goldStart: '',
      // 改变的日期
      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: '今年'
        }
      ],
      timeStr: '当月',
      dateOneV: false,
      dateOneVisible: false,
      dateTwoVisible: false,
      oneTwoheight: '45%'
    };
  },
  watch: {
    dateOneVisible(nv) {
      if (nv === false) {
        this.$emit('changeHeight', '45%');
      }
    },
    dateTwoVisible(nv) {
      if (nv === false) {
        this.$emit('changeHeight', '45%');
      }
    }
  },
  methods: {
    init() {
    },
    handleReset() {
      this.twoDate = new Date();
      this.oneDate = moment(moment().format('YYYY-MM') + '-01')
      this.timeStr = '当月';
      this.dateOneV = false;
      this.init();
    },
    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;
        this.init();
      });
    },
    // 选择全月 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;
        this.init();
      });
    },
    // 选择全年 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;
        this.init();
      });
    },
    // 选择全月 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;
        this.init();
      });
    },
    // 7 30 60 90 天查询
    calcTime(val) {
      let that = this;
      that.timeStr = val.name;
      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 === 8) {
        this.oneDate = new Date(new Date().getFullYear(), 0, 0);
        this.twoDate = new Date();
        day = this.countWeekDaysBetween(this.oneDate, this.twoDate);
      }

      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 = moment(moment().format('YYYY-MM') + '-01')
      }

      that.cDays = day;
      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;
          this.init();
        } else {
          this.oneDate = sessionStorage.getItem('oneDate');
          Notify({ type: 'warning', message: '不能跨年查询' });
        }
      } else {
        this.oneDate = date;
        this.init();
        this.oneTwoheight = '30%';
        this.timeStr = '时间段';
        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;
          this.init();
        } 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.init();
        this.oneTwoheight = '30%';
        this.timeStr = '时间段';
        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) {
      return (date2 - date1) / (1000 * 3600 * 24).toFixed(0);
    },
    // 获取二级分类
    getSupLevel2DimInfo() {
      // 取当前月份的最后一天和当前比较，如果不是当前最后一天，就取上月最后一天
      function removeFalsy(arr) {
        return arr.filter(Boolean);
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>

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

.k-select
  overflow hidden
  padding .3rem .6rem

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

.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 .3rem
    margin-top .2rem

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

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

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

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