显示本周日历，左右滑动，日历翻页

显示本周日历，左右滑动，日历翻页

html

<!--pages/work/taskCalendar/index.wxml-->
<view class="topBox">
  <view class="title1">
    <text>{{dayName}}</text>
    <!-- <image bindtap="showCalendar" src="/image/icon-calendar-blue.png" style="width:64rpx;height: 64rpx;" /> -->
    <view class="section">
      <picker mode="date" value="{{date}}" start="2015-01-01" end="2075-01-01" bindchange="bindDateChange">
        <view class="picker">
          <image class="icon-calendar-select dateIcon" src="/image/icon-calendar-blue.png"></image>
        </view>
      </picker>
    </view>
  </view>
  <view class="title2">星期{{weekNum}}</view>
  <view class="weekBox">
    <view class="weekIt" bindtouchstart="myTouchStart" bindtouchmove="myTouchMove">
      <view wx:for="{{weeks}}" wx:key="index" class="dayIt  {{weekNum==item[1] ? 'blueIndex':''}}" bindtap="ckDay" data-item="{{item}}" data-ind="{{index}}">
        <view>{{item[1]}}</view>
        <view>{{item[0]}}</view>
        <view wx:if="{{item[3] =='isTask-true'}}" class="isTaskicon  {{weekNum==item[1] ? 'fffBg':'blueBg'}}"></view>
      </view>
    </view>
  </view>
</view>

<van-popup show="{{ calendarState }}" position="bottom" custom-style="border-radius: 12rpx 12rpx 0 0;" bind:close="closeCalendar">
  <van-calendar title="日历" poppable="{{ false }}" show-confirm="{{ false }}" class="calendar" default-date="{{defaultDate}}" bind:select="setDate" />
</van-popup>

js

const {
  globalData,
  fetch,
  dayjs
} = getApp()
let startPoint = 0; //记录滑动的初始位置
let slipFlag = false; //定义 滑动事件 节流阀, 防止一次滑动触发多次滑动事件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    calendarState: false,
    list: [],
    theday: '',
    dayName: '',
    weekName: '',
    weekNum: '',
  },

  onLoad: function (options) {
    this.setData({
      theday: new Date()
    })
    this.getList()
    this.setToday()
    this.getWeekDates()
    // if (this.data.weeks.length) {
    //   this.setWeekorder()
    // }
  },
  onShow: function () {},
  getList() {
    console.log('获取当前日期', this.data.theday)

    let ckDay = dayjs(this.data.theday).format('YYYY-MM-DD')
    console.log('获取当前日期-ckDay', ckDay)
    let param = {
      day: ckDay
    }
    fetch.task.queryCalendar(param, res => {
      console.log('kkooooo', param, res)
      const result = res.data.map(item => {
        item.submitTime = dayjs(item.startTime).format('YYYY/MM/DD HH:mm')
        return item
      })
      this.setData({
        // list: list.concat(result)
        list: result
      })

      console.log('fdfdfd', this.data.list)

    })


    // console.log(this.data.list)
    // const {
    //   page,
    //   list,
    //   limit
    // } = this.data



  },
  setToday() {
    var Day = this.data.theday;
    console.log('setToday', Day)
    var sign2 = ":";
    var year = Day.getFullYear() // 年
    var month = Day.getMonth() + 1; // 月
    var day = Day.getDate(); // 日
    var hour = Day.getHours(); // 时
    var minutes = Day.getMinutes(); // 分
    var seconds = Day.getSeconds() //秒
    var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var week = weekArr[Day.getDay()];
    // 给一位数的数据前面加 “0”
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
      day = "0" + day;
    }
    if (hour >= 0 && hour <= 9) {
      hour = "0" + hour;
    }
    if (minutes >= 0 && minutes <= 9) {
      minutes = "0" + minutes;
    }
    if (seconds >= 0 && seconds <= 9) {
      seconds = "0" + seconds;
    }
    var days = year + "-" + month + "-" + day;
    this.setData({
      dayName: month + "/" + day,
      weekName: week,
      weekNum: week.substr(-1)
    })
    this.getList()
  },
  // 获取周一到周日的具体日期数组
  getWeekDates() {
    const d = this.getMonDate()
    let arr = []
    for (let i = 0; i < 7; i++) {
      arr.push([
        d.getDate(),
        this.getDayName(d.getDay()),
        this.toTimeFormat(d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + d.getDate())),
        'isTask-false'
      ])
      d.setDate(d.getDate() + 1)
    }
    console.log('这里！！', d, arr)
    this.setData({
      weeks: arr
    })


    this.setWeekorder()
  },
  // 日期格式处理函数(自动补零)  输出类型(YYYY-)MM-DD
  toTimeFormat(d) {
    const arr = d.split('-') // 分解
    arr.forEach((item, index) => {
      arr[index] = item < 10 ? '0' + item : item // 补零
    })
    return arr.join('-') // 合并
  },
  // 获取当前日期的星期一
  getMonDate() {
    const now = this.data.theday
    const nowTime = now.getTime()
    const day = now.getDay() > 0 ? now.getDay() : 7; //getDay()返回0-6，0表示周日，需处理
    const oneDayTime = 24 * 60 * 60 * 1000
    const MondayTime = nowTime - (day - 1) * oneDayTime
    const monDay = new Date(MondayTime)
    return monDay
  },
  // 0-6转换成中文名称
  getDayName(day) {
    const _day = parseInt(day)
    if (isNaN(_day) || _day < 0 || _day > 6) return false
    // const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const weekday = ['日', '一', '二', '三', '四', '五', '六']
    return weekday[_day]
  },

  showCalendar() {
    this.setData({
      calendarState: true
    })
  },
  closeCalendar() {
    this.setData({
      calendarState: false
    })
  },

  bindDateChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    var d = e.detail.value
    var dw = this.weekDay(d)
    let dateLength = d.length;
    let dn = d.substring(dateLength - 2, dateLength).replace('-', '/');
    var arr = [
      dn,
      dw,
      d
    ]
    console.log('arr', d, dn, dw)
    this.ckTheday(arr, true)
  },
  weekDay(time) {
    const weekNum = new Date(time).getDay();
    let week = "";
    switch (weekNum) {
      case 0:
        week = "日";
        break;
      case 1:
        week = "一";
        break;
      case 2:
        week = "二";
        break;
      case 3:
        week = "三";
        break;
      case 4:
        week = "四";
        break;
      case 5:
        week = "五";
        break;
      case 6:
        week = "六";
        break;
    }
    return week;
  },
  myTouchStart(e) {
    slipFlag = true
    startPoint = e.touches[0]
  },

  myTouchMove(e) {
    if (((startPoint.clientX - e.touches[e.touches.length - 1].clientX) > 80) && slipFlag) {
      console.log("左滑事件");
      var thedaychuo = (this.data.theday).getTime()
      var thedaychuoN1 = thedaychuo + (1000 * 60 * 60 * 24 * 7)
      this.chuoToformat(thedaychuoN1)
      slipFlag = false
      return
    } else if (((startPoint.clientX - e.touches[e.touches.length - 1].clientX) < -80) && slipFlag) {
      console.log("右滑事件");
      var thedaychuo = (this.data.theday).getTime()
      var thedaychuoN2 = thedaychuo - (1000 * 60 * 60 * 24 * 7)
      this.chuoToformat(thedaychuoN2)
      slipFlag = false
      return
    }
  },
  ckDay(e) {
    console.log('ckday', e.currentTarget.dataset, this.data.theday)
    var e = e.currentTarget.dataset
    this.ckTheday(e.item, false)
  },
  ckTheday(item, state) {
    console.log('ckTheday', item, this.getMonDate())
    let DateTime = item[2]
    let GMT = this.StrToGMT(DateTime)
    let dateLength = DateTime.length;
    let dn = DateTime.substring(dateLength - 5, dateLength).replace('-', '/');
    if (dn !== this.data.dayName) {
      this.setData({
        weekNum: item[1],
        theday: GMT,
        dayName: dn
      })
      this.getList()
      if (state) {
        this.getWeekDates()
      }
    }

  },
  //普通格式转GMT
  StrToGMT(time) {
    let GMT = new Date(time)
    return GMT
  },
  chuoToformat(time) {
    console.log('yoyoyoy', time)
    var date = new Date(time)
    this.setData({
      theday: date
    })
    this.setToday()
    this.getWeekDates()
  },
  linkTo(e) {
    console.log(e.currentTarget.dataset.item)
    const {
      id,
      sysNo
    } = e.currentTarget.dataset.item
    if (sysNo) {
      let url = `/pages/home/tasks/index?id=${id}`
      wx.navigateTo({
        url
      })
    }
  },
  setWeekorder() {
    var st = this.data.weeks[0][2]
    var et = this.data.weeks[6][2]
    let params = {
      startTime: st + "," + et
    }

    var taskList = []
    fetch.task.scheduleTaskList(params, res => {
      console.log('ioioioi', res)
      if (res.flag == 0) {
        taskList = res.data.map(item => {
          item.submitTime = dayjs(item.startTime).format('YYYY-MM-DD')
          return item
        })
      }
      let weeks = this.data.weeks
      if (taskList.length) {
        weeks.forEach(e => {
          taskList.forEach(el => {
            if (el.submitTime == e[2]) {
              e[3] = 'isTask-true'
            }
          });
        });
      }

      this.setData({
        weeks
      })
    })
  },
  coco() {
    console.log(this.data)
  }
})

/* pages/work/taskCalendar/index.wxss */
.topBox {
  background: #fff;
  height: 315rpx;
  padding: 32rpx 32rpx 0 32rpx;
  line-height: 1.5;
}

.title1 {
  font-weight: 900;
  color: #151818;
  font-size: 48rpx;
}

.title1 image {
  float: right;
  width: 64rpx;
  height: 64rpx;
}

.title2 {
  font-weight: 500;
  color: #999;
  font-size: 28rpx;
}

.listBox {
  margin: 90rpx 32rpx 0 32rpx;
  border-left: 1rpx solid #bbb;
  padding: 0 0 0 32rpx;
}

.liBox {
  /* height: 304rpx; */
  background: #ffffff;
  border-radius: 0rpx 12rpx 12rpx 0rpx;
  box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 64rpx;
  position: relative;
  padding: 32rpx 30rpx;
}

.liBox {
  color: #999;
  font-size: 28rpx;
  line-height: 2;
}

.liti-1 {
  font-weight: 700;
  color: #191919;
  font-size: 32rpx;
}

.liline {
  border-bottom: 1rpx solid #e5e5e5;
  margin: 28rpx 0;
}

.process-icon {
  position: absolute;
  top: -2rpx;
  left: -44rpx;
  width: 12rpx;
  height: 12rpx;
  background: #bbbbbb;
  border-radius: 50%;
}

.fr {
  float: right;
}

.listBox .liBox:nth-child(odd) {
  border-left: 6rpx solid #409eff;
}

.listBox .liBox:nth-child(even) {
  border-left: 6rpx solid #ffb92d;
}

.b-1 {
  border-left: 6rpx solid #409eff;
}

.b-2 {
  border-left: 6rpx solid #ffb92d;
}

.calendar {
  --calendar-height: 500px;
}

.stateColor_1 {
  color: #11af2b;
}

.redText {
  background: #f56c6c;
  border-radius: 50%;
  color: #fff;
  font-size: 22rpx;
  padding: 1px 6rpx;
  position: relative;
  top: -2rpx;
  border: 1rpx solid #fabbbb;
  font-weight: 100;
}

.dateIcon {
  position: relative;
  top: -50rpx;
}

.weekBox {
  height: 204rpx;
}

.weekIt {
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: 204rpx;
}

.dayIt {
  /* background: #fff; */
  width: 11vw;
  display: inline-block;
  text-align: center;
  padding: 35rpx 10rpx;
  height: 60%;
}

.dayIt view:nth-child(1) {
  color: #999;
  margin-bottom: 20rpx;
}

.blueIndex {
  background: #409eff;
  color: #fff;
  border-radius: 12rpx;
  box-shadow: 0rpx 6rpx 10rpx rgba(49, 135, 223, 0.5);
}

.blueIndex view:nth-child(1) {
  color: #fff;
}
.fffBg{
  background: #fff;
}
.blueBg{
  background: #409eff;
  color: #409eff;
}
.isTaskicon{
  width: 8rpx;
  height: 8rpx;
  margin: auto;
  border-radius: 50%;
  margin-top: 12rpx;
}