uniapp上一周，下一周demo效果（整理）

<template>
  <view class="scheduling">
    <status-bar title="我的排班"></status-bar>
    <view class="topWeek">
      <view class="weekBtn row-me column-center margin-bottom30">
        <view class="btn" @click="weekClick(-7)">上一周</view>
        <view class="font-size30 color202233 margin-left20 margin-right20">
          {{dayList[0].date.substring(0,4)}}年{{dayList[0].date.substring(5,7)}}月
        </view>
        <view class="btn" @click="weekClick(+7)">下一周</view>
      </view>
      <view class="row-me row-center wattTxt">
        <view class="">一</view>
        <view class="">二</view>
        <view class="">三</view>
        <view class="">四</view>
        <view class="">五</view>
        <view class="">六</view>
        <view class="">日</view>
      </view>
      <!-- 7天日期数据 -->
      <view class="row-me row-center space-between dayTxt">
        <view class="box column-me column-center align-center" :class="{'boxBg': item.checked == true}"
          v-for="(item,index) in dayList" :key="index" @click="dayClick(item,index)">
          <view class="font-bold font-size30 color202233 margin-bottom8">{{item.date.substring(8,10)}}</view>
          <view class="color6D7984 font-size24">{{item.dates}}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import lunarCalendar from 'lunar-calendar'
  import moment from "moment";
  export default {
    components: {
    },
    data() {
      return {
        description: '我的排班',
        nowDate: moment().startOf('week').add(1, 'day'),
        dayList: [], //7天的数据
        dateDay: '', //当前几号
        currentYear: '', // 当前年月日
        currentMonth: '', // 当前年月日
        currentDay: '', // 当前年月日
        // nowDate: moment().startOf('week')
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    //组件创建
    created() {
    },
    // 页面加载
    onLoad(e) {
    },
    // 页面显示
    onShow() {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate(); //得到日期
      month = month >= 9 ? month : '0' + month;
      day = day >= 9 ? day : '0' + day;
      this.dateDay = year + '-' + month + '-' + day; //当前年月日
      this.currentYear = year; // 当前年
      this.currentMonth = month; // 当前月
      this.currentDay = day; // 当前日
      console.log(this.dateDay, '111111');
      this.getList(this.nowDate);
    },
    // 方法
    methods: {
      tabClick(index) {
        this.referIndex = index;
      },
      changeImg(id) {
        if (this.arrList1.includes(id)) {
          //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
          //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
          this.arrList1 = this.arrList1.filter(function(ele) {
            return ele != id;
          });
        } else {
          this.arrList1.push(id);
        }
        // this.form.time1 = '';
        // this.form.time1 = this.arrList1.join(",");
        console.log(this.arrList1, 'this.arrList1');
      },
      // 点击上一周,下一周
      weekClick(num) {
        this.nowDate = this.nowDate.add(num, 'd')
        this.getList(this.nowDate)
      },
      getList(firstDayOfWeek) {
        const days = [];
        for (let i = 0; i < 7; i++) {
          let date = moment(firstDayOfWeek).add(i, 'day').format('YYYY-MM-DD')
          days.push({
            date: date,
            dates: lunarCalendar.solarToLunar(date.substring(0, 4), date.substring(5, 7), date
              .substring(8,
                10)).lunarDayName
          });
        }
        for (let item of days) {
          console.log(item, '222222222')
          item.checked = false;
          if (this.dateDay == item.date) {
            item.checked = true;
          }
        }
        this.dayList = days;
        console.log(this.dayList, '159最后的时间数组')
      },
      // 点击清空按钮
      emptyClick() {
        uni.showModal({
          title: '提示',
          content: '是否要清空未预约的数据？',
          cancelColor: '#353535',
          confirmColor: '#215AA0',
          cancelText: '取消',
          // showCancel: false,
          confirmText: '确认',
          success: function(res) {
            if (res.confirm) {
            } else if (res.cancel) {}
          }
        })
      },
      // 点击头部日期
      dayClick(item1, index) {
        for (let item of this.dayList) {
          item.checked = false;
          this.dayList[index].checked = true;
        }
      },
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
<style lang="scss" scoped>
  .scheduling {
    height: 100vh;
    overflow: auto;
    background-color: #F6F7F9;
    .topWeek {
      background-color: #fff;
      padding: 30rpx 0;
      .weekBtn {
        .btn {
          width: 111rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: rgba(33, 90, 160, 0.1);
          border-radius: 20rpx;
          text-align: center;
          font-size: 24rpx;
          color: #215AA0;
        }
      }
      .wattTxt {
        margin: 0 30rpx 10rpx 30rpx;
        view {
          flex: 1;
          text-align: center;
          font-size: 24rpx;
          color: #202233;
        }
      }
      .dayTxt {
        margin: 0 30rpx 10rpx 30rpx;
        .box {
          // flex: 1;
          width: 90rpx;
          height: 100rpx;
          background: #F6F7F9;
        }
        .boxBg {
          background: #215AA0 !important;
          view {
            color: #FFFFFF !important;
          }
        }
      }
    }
  }
</style>