vue 仿日历格式对账单下载功能

本次主要是使用vue+element UI来完成对账单功能的实现，需求是当前时间及之前一天不可点击，大于当前日期置灰不可点击。
模板简陋敬请谅解 …

先上效果图

vue

页面布局方便数据渲染

<template>
  <div class="download-box">
    <div class="block">
      <el-date-picker
        value-format="yyyy-M"
        v-model="value2"
        type="month"
        placeholder="请选择日期"
        @change="pickerMonth(value2)"
      >
      </el-date-picker>
    </div>
    <el-tabs type="card">
      <el-tab-pane label="日账单">
        <div class="he-pick">
          <div @click="monthChange(1)"></div>
          <div class="pick-time">{{ this.year + '-' + this.month }}</div>
          <div @click="monthChange(2)"></div>
        </div>
        <div class="item">
          <div
            v-for="(item, index) in dayList"
            :key="index"
            class="pick-item"
            :class="tabindex === index ? 'tabcolor' : ''"
            @click="tabPick(item, index)"
          >
            <div class="item-bg" :class="theday < item ? 'tabsbg' : ''">
              <div
                class="item-day"
                :class="theday === item ? 'activeText' : ''"
              >
                <div>{{ item.substr(8) }}日</div>
              </div>
              <div class="item-img activeimg01" v-if="theSubday > item"></div>
              <div class="item-hint" v-if="theSubday === item">账单未生成</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="月账单">月日历</el-tab-pane>
    </el-tabs>
  </div>
</template>

js

使用new Date 和 moment.js 来完成日历日期的获取，得到日期为年月日的数组方便使用substr() 方法展示。

<script>
// 先引用moment.js,相对于new Date获取当前日期方便
const moment = require('moment');

export default {
  data() {
    return {
      // element控件
      tabPosition: 'top',
      value2: '',
      // 获取年月日
      year: 0,
      month: 0,
      // 当前时间
      theday: 0,
      // 当前前一天
      theSubday: 0,
      // 每个月总天数
      dayAll: 0,
      // 点击切换默认下标
      tabindex: 0,
      // 存放当前月日期
      dayList: [],
    };
  },
  created() {
    this.getMoment();
  },
  methods: {
    // 获取年月
    getMoment() {
      this.theSubday = moment().subtract(1, 'days').format('YYYY-MM-DD');
      this.theday = moment().format('YYYY-MM-DD');
      this.year = new Date().getFullYear();
      this.month = new Date().getMonth() + 1;
      this.getdayAll();
    },
    // 获取循环天数
    getdayAll() {
      this.dayList = [];
      this.dayAll = new Date(this.year, this.month, 0).getDate();
      for (let i = 1; i <= this.dayAll; i += 1) {
        // for循环并且拼接得到每一天，十号之前自动补上0
        this.dayList.push(`${this.year}-${this.month < 10 ? `0${this.month}` : this.month}-${i < 10 ? `0${i}` : i}`);
      }
    },
    // tab日历事件
    monthChange(e) {
      if (e === 1) {
        this.tabindex = 0;
        this.month -= 1;
        if (this.month < 1) {
          this.month = 12;
          this.year -= 1;
        }
      } else {
        this.tabindex = '';
        this.month += 1;
        if (this.month > 12) {
          this.month = 1;
          this.year += 1;
        }
      }
      this.getdayAll();
    },
    // 点击下载事件
    tabPick(item, index) {
    // 判断切换点击时的class，大于当前日期无效
      if (this.theSubday > item) {
        this.tabindex = index;
        ...执行下载调用接口
      }
    },
    // 日历控件切换显示月份
    pickerMonth(val) {
      console.log(val);
      this.tabindex = '';
      this.year = val.substr(0, 4);
      this.month = val.substr(5);
      console.log(this.year, this.month);
      this.getdayAll();
    },
  },
};
</script>

scss

最后补充下css，这样一个日历格式的对账单下载功能就实现了

.download-box {
  position: relative;
  padding-top: 20px;

  /deep/ {
    .el-tabs__header {
      width: 168px;
    }

    .el-tabs__item.is-active {
      color: #fff;
      background-color: #3388ff;
    }
  }
}

.block {
  position: absolute;
  left: 220px;
  top: 20px;
}

.he-pick {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f6f6;

  div {
    &:nth-of-type(1) {
      width: 21px;
      height: 21px;
      background: url(../images/logo_06.png) no-repeat center;
      background-size: cover;
    }

    &:nth-of-type(2) {
      font-size: 22px;
      padding: 0 30px;
    }

    &:nth-of-type(3) {
      width: 21px;
      height: 21px;
      background: url(../images/logo_07.png) no-repeat center;
      background-size: cover;
    }
  }
}

.item {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;

  .pick-item {
    width: 155px;
    height: 119px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    position: relative;

    .item-day {
      font-size: 12px;
      color: #333;
    }

    .item-hint {
      text-align: center;
      margin-top: 54px;
      font-size: 13px;
    }

    .activeText {
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      background-color: #3388ff;
      border-radius: 50%;
      color: #fff;
    }
  }

  .tabsbg {
    background-color: #f8fafb;
  }

  .tabcolor {
    background-color: #eaf3ff;

    .item-bg {
      background-color: #eaf3ff;
    }

    .activeimg01 {
      background: url(../images/logo_09.png) no-repeat center;
      background-size: cover;
    }
  }
}

.item-img {
  width: 16px;
  height: 18px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0 auto;
}

.activeimg01 {
  background: url(../images/logo_08.png) no-repeat center;
  background-size: cover;
}

.item-bg {
  width: 115px;
  height: 79px;
  padding: 20px;
  background-color: #fff;
}