h5封装周选择器（xxxx年xx周）

碰上了对应的需求，封装了一下，两张图片是左右箭头图，自己找一下替换即可。

效果展示，可通过左右按钮和选择切换周。

<template>

  <div>

    <div class="timeChooseBox">

      <img

        :style="currentKey == 0 ? 'opacity:0.4;pointer-events:none' : ''"

        src="@/assets/report/left.png"

        @click="switchData(-1)"

      />

      <van-button @click="openTime">

        <span class="time">{{

          currentForm.label ? currentForm.label.split("(")[0] : ""

        }}</span>

        <br />

        <span class="time">{{ currentForm.start }}--{{ currentForm.end }}</span>

      </van-button>

      <img

        :style="

          disabledKey == currentKey ? 'opacity:0.4;pointer-events:none' : ''

        "

        style="margin-left: 10px"

        src="@/assets/report/right.png"

        @click="switchData(1)"

      />

    </div>

    <!-- //周选择组件 -->

    <van-popup v-model="show" position="bottom">

      <van-picker

        title="标题"

        show-toolbar

        :columns="weeksArray"

        @confirm="onConfirm"

        @cancel="onCancel"    

        value-key="label"

        :default-index="currentKey"

      />

    </van-popup>

  </div>

</template>

<script>

export default {

  data() {

    return {

      weeksArray: [],

      show: false,

      currentKey: 0,

      currentForm: {},

      disabledKey: 0,

    };

  },

  mounted() {

    this.generateWeeksArray();

    this.weeksArray.findIndex((item, index) => {

      if (

        new Date(item.start).getTime() <= new Date().getTime() &&

        new Date(item.end).getTime() >= new Date().getTime()

      ) {

        this.currentKey = index;

        this.disabledKey = index;

        this.currentForm = item;

        return;

      }

    });

    this.changeTime();

  },

  methods: {

    onConfirm(val, index) {

      this.currentKey = index;

      this.currentForm = val;

      this.show = false;

      this.changeTime();

    },

      onCancel () {

        this.show = false;

    },

    // onChange() {},

    openTime() {

      this.show = true;

    },

    //周的直接切换

    switchData(num) {

      this.currentKey = this.currentKey + num;

      this.currentForm = this.weeksArray[this.currentKey];

      this.changeTime();

    },

    //告诉父组件周传递了

    changeTime() {

      this.$emit("changeWeek", this.currentForm);

    },

    generateWeeksArray() {

      const currentDate = new Date();

        const currentYear = currentDate.getFullYear();

      //这里的i是年份

      for (let i = 0; i < 2; i++) {

        const year = currentYear - i;

        const firstDayOfYear = new Date(year, 0, 1);

        const lastDayOfYear = new Date(year, 11, 31);

        for (let week = 1; week <= 52; week++) {

          const startDate = this.getWeekStartDate(year, week);

          const endDate = this.getWeekEndDate(year, week);

          if (startDate.getFullYear() === year) {

            if (

              Number(

                new Date(startDate.toISOString().split("T")[0]).getTime()

              ) <= Number(new Date().getTime())

            ) {

              this.weeksArray.push({

                day: startDate.getTime(),

                week: week,

                start: startDate.toISOString().split("T")[0],

                end: endDate.toISOString().split("T")[0],

                year: year,

                label:

                  year +

                  "年" +

                  "第" +

                  week +

                  "周" +

                  "(" +

                  startDate.toISOString().split("T")[0] +

                  "-" +

                  endDate.toISOString().split("T")[0] +

                  ")",

              });

            }

          }

        }

      }

      //this.weeksArray按照day排列

      this.weeksArray.sort((a, b) => a.day - b.day);

    },

    getWeekStartDate(year, week) {

      const januaryFirst = new Date(year, 0, 1);

      const dayOfWeek = januaryFirst.getDay();

      const firstWeekStart = januaryFirst;

      if (dayOfWeek <= 4) {

        firstWeekStart.setDate(

          januaryFirst.getDate() - januaryFirst.getDay() + 1

        );

      } else {

        firstWeekStart.setDate(

          januaryFirst.getDate() + 8 - januaryFirst.getDay()

        );

      }

      const result = new Date(firstWeekStart);

      result.setDate(firstWeekStart.getDate() + (week - 1) * 7);

      return result;

    },

    getWeekEndDate(year, week) {

      const startDate = this.getWeekStartDate(year, week);

      const endDate = new Date(startDate);

      endDate.setDate(startDate.getDate() + 6);

      return endDate;

    },

  },

};

</script>

<style lang="scss" scoped>

.timeChooseBox {

  display: flex;

  justify-content: space-between;

  padding: 10px 30px;

  align-items: center;

  img {

    width: 60px;

    height: 60px;

  }

  font-size: 32px;

  .time {

    font-size: 32px;

    color: #333;

   

  }

  .van-button--normal {

    padding: 0 45px;

    font-size: 12px;

  }

}

</style>