init

miniprogram/pages/driverIndex/page/signInReocrd/component/calendar/calendar.js

@@ -0,0 +1,344 @@
+// component/calendar/calendar.js
+const dayjs = require('dayjs');
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    calendarAllList: {
+      type: Array
+    }
+    // isShow:{
+    //   type:Boolean,
+    //   value:false
+    // },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    calendarWeek: ['一', '二', '三', '四', '五', '六', '日'],
+    currentTime: '',
+    nowYear: '',
+    nowMonth: '',
+    swiperHeight: '',
+    calendarPageIndex: 1,
+    selectedIndex: '',
+    isShow: false //是否展开
+  },
+  lifetimes: {
+    attached: function () {
+      //在组件实例进入页面节点树时执行
+      this.setData({
+        currentTime: `${new Date().getFullYear()}/${
+          new Date().getMonth() + 1
+        }/${new Date().getDate()}`,
+        nowYear: new Date().getFullYear(),
+        nowMonth:
+          new Date().getMonth() + 1 > 9
+            ? new Date().getMonth() + 1
+            : '0' + (new Date().getMonth() + 1)
+      });
+      this.getMonthDate();
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    setSwiperHeight() {
+      // swiper高度
+      const query = wx.createSelectorQuery().in(this);
+      if (this.data.isShow) {
+        query
+          .select('.currentBox')
+          .boundingClientRect(res => {
+            this.setData({
+              swiperHeight: res.height
+            });
+          })
+          .exec();
+      }
+    },
+    changeSwiper(e) {
+      let index = this.data.calendarPageIndex;
+      const diff = e.detail.current - index;
+      if (diff == 1 || diff == -2) {
+        // 向右边滑动，显示swiper左边内容
+        this.nextMonth();
+      } else if (diff == -1 || diff == 2) {
+        // 向左边滑动 显示swiper右边内容
+        this.prevMonth();
+      }
+    },
+    transitionStop(e) {
+      //更新轮播图当前index
+      this.setData({
+        calendarPageIndex: e.detail.current
+      });
+      this.setSwiperHeight();
+    },
+    prevMonth() {
+      //上一个月
+      if (!this.data.isShow) {
+        //收起时切换上下月有问题所以做了限制
+        return;
+      }
+      const index = this.data.calendarPageIndex;
+      let pre = index == 0 ? 2 : index - 1;
+      this.setData({
+        calendarPageIndex: pre
+      });
+      let year = new Date(this.data.currentTime).getFullYear();
+      let month = new Date(this.data.currentTime).getMonth() - 1;
+      if (month < 0) {
+        month = 11;
+        year--;
+      }
+      this.initDate(new Date(year, month, 1));
+      this.getMonthDate();
+    },
+    nextMonth() {
+      //下一个月
+      if (!this.data.isShow) {
+        return;
+      }
+      const index = this.data.calendarPageIndex;
+      let next = index == 2 ? 0 : index + 1;
+      this.setData({
+        calendarPageIndex: next
+      });
+      let year = new Date(this.data.currentTime).getFullYear();
+      let month = new Date(this.data.currentTime).getMonth() + 1;
+      if (month > 11) {
+        month = 0;
+        year++;
+      }
+      this.initDate(new Date(year, month, 1));
+      this.getMonthDate();
+    },
+    initDate(date = new Date()) {
+      //初始化日期
+      const year = date.getFullYear();
+      const month =
+        date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+      const currentDate = year + '/' + month + '/' + day;
+      this.setData({
+        currentTime: currentDate,
+        nowYear: year,
+        nowMonth: month
+      });
+    },
+    getMonthDate() {
+      let showMonthList = this.getShowMonthList();
+      const calendarAllList = [];
+      showMonthList.forEach(item => {
+        calendarAllList.push(this.getAllMonthDay(item));
+      });
+      let allList = [];
+      const index = this.data.calendarPageIndex;
+      if (index == 1) {
+        allList = [calendarAllList[0], calendarAllList[1], calendarAllList[2]];
+      } else if (index == 2) {
+        allList = [calendarAllList[2], calendarAllList[0], calendarAllList[1]];
+      } else if (index == 0) {
+        allList = [calendarAllList[1], calendarAllList[2], calendarAllList[0]];
+      }
+      this.setData({
+        calendarAllList: allList
+      });
+      if (!this.data.selectedIndex) {
+        //初始化才进
+        let day = new Date().getDate();
+        let index = allList[1].list.findIndex(
+          x => x.day == day && (!x.isLastMon || !x.isNextMon)
+        );
+        this.setData({
+          selectedIndex: index,
+          selectDate: allList[1].month,
+          currentSelectDate: allList[1].month + '-' + allList[1].list[index].day
+        });
+      }
+      this.setSwiperHeight();
+      if (!this.data.isShow) {
+        this.getCurrentWeek();
+      }
+      let params = {
+        date: this.data.nowYear + '-' + this.data.nowMonth,
+        calendarAllList: this.data.calendarAllList,
+        isShow: this.data.isShow
+      };
+      this.triggerEvent('selectMonth', params);
+    },
+    getAllMonthDay(time) {
+      //获取每月的每一天
+      const timeArr = time.split('-');
+      let dayLenth = new Date(timeArr[0], timeArr[1], 0).getDate();
+      let dayList = [];
+      for (let i = 0; i < dayLenth; i++) {
+        dayList.push({
+          day: i + 1,
+          // timestamp: new Date(`${timeArr[0]}-${Number(timeArr[1])}-${i+1}`).getTime(),
+          week: new Date(timeArr[0], timeArr[1] * 1 - 1, i + 1).getDay(),
+          date: dayjs(timeArr[0] + '-' + timeArr[1] + '-' + (i + 1)).format(
+            'YYYY-M-D'
+          ),
+          isClock: 0
+        });
+      }
+
+      for (let j = 0; j < 7; j++) {
+        if (dayList[0].week != 1) {
+          // 补全月首日期
+          let month = Number(timeArr[1]) - 1 == 0 ? 12 : Number(timeArr[1]) - 1;
+          let year =
+            Number(timeArr[1]) - 1 == 0 ? Number(timeArr[0]) - 1 : timeArr[0];
+          const lastMonthDay = new Date(
+            timeArr[0],
+            Number(timeArr[1]) - 1,
+            0
+          ).getDate();
+          const day = {
+            day: lastMonthDay - j,
+            // timestamp: new Date(`${year}-${month}-${lastMonthDay - j}`).getDay(),
+            week: new Date(year, month - 1, lastMonthDay - j).getDay(),
+            isLastMon: true,
+            date: dayjs(year + '-' + month + '-' + (lastMonthDay - j)).format(
+              'YYYY-M-D'
+            )
+          };
+          dayList.unshift(day);
+        }
+        if (dayList[dayList.length - 1].week != 0) {
+          // 补全末位 下月日期
+          let month = Number(timeArr[1]) + 1 > 12 ? 1 : Number(timeArr[1]) + 1;
+          let year =
+            Number(timeArr[1]) + 1 > 12 ? Number(timeArr[0]) + 1 : timeArr[0];
+          const day = {
+            day: j + 1,
+            // timestamp: new Date(`${year}-${month}-${j + 1}`).getTime(),
+            week: new Date(year, month - 1, j + 1).getDay(),
+            date: dayjs(year + '-' + month + '-' + (j + 1)).format('YYYY-M-D'),
+            isNextMon: true
+          };
+          dayList.push(day);
+        }
+      }
+
+      return {
+        month: `${timeArr[0]}-${Number(timeArr[1])}`,
+        list: dayList
+      };
+    },
+    getShowMonthList() {
+      //获取前后三个月的月份
+      const timeArr = this.data.currentTime.split('/');
+      let searchMonthList = [`${timeArr[0]}-${timeArr[1]}`];
+      if (Number(timeArr[1]) > 1 && Number(timeArr[1]) < 12) {
+        const preMonth = Number(timeArr[1]) - 1;
+        const nextMonth = Number(timeArr[1]) + 1;
+        searchMonthList = [
+          `${timeArr[0]}-${preMonth}`,
+          searchMonthList[0],
+          `${timeArr[0]}-${nextMonth}`
+        ];
+      } else if (Number(timeArr[1]) == 1) {
+        const preYear = Number(timeArr[0]) - 1;
+        searchMonthList = [
+          `${preYear}-12`,
+          searchMonthList[0],
+          `${timeArr[0]}-02`
+        ];
+      } else if (Number(timeArr[1]) == 12) {
+        const nextYear = Number(timeArr[0]) + 1;
+        searchMonthList = [
+          `${timeArr[0]}-11`,
+          searchMonthList[0],
+          `${nextYear}-01`
+        ];
+      }
+      return searchMonthList;
+    },
+    selectWeekDay(e) {
+      let item = e.currentTarget.dataset.item;
+      if (item.isLastMon || item.isNextMon) {
+        return false;
+      }
+      this.setData({
+        currentSelectDate: item.date
+      });
+      this.triggerEvent('getSelectDate', this.data.currentSelectDate);
+    },
+    selectDay(e) {
+      //选择日期
+      let { arr_item, item, index } = e.currentTarget.dataset;
+      if (item.isLastMon || item.isNextMon || !this.data.isShow) {
+        return false;
+      }
+      this.setData({
+        selectedIndex: index,
+        selectDate: arr_item.month
+      });
+      let currentSelectDate = arr_item.month + '-' + arr_item.list[index].day;
+      this.setData({
+        currentSelectDate
+      });
+      this.triggerEvent('getSelectDate', currentSelectDate);
+    },
+    changeShowStatus() {
+      this.setData({
+        isShow: !this.data.isShow
+      });
+      this.setData({
+        currentTime: dayjs(this.data.currentSelectDate).format('YYYY/M/D')
+      });
+      this.getMonthDate();
+      this.setSwiperHeight();
+    },
+    getCurrentWeek() {
+      //初始化选择项的这一周
+      let list = [];
+      let currentMonth = dayjs(this.data.currentSelectDate).format('YYYY-M');
+      let item = this.data.calendarAllList.filter(
+        x => x.month === currentMonth
+      )[0];
+      item.list.map(x => (x.date = dayjs(x.date).format('YYYY-MM-DD')));
+      let weekOfDay = dayjs(this.data.currentSelectDate).format('d'); //计算今天是这周第几天
+      for (let i = 1; i < 8; i++) {
+        let dayTime;
+        if (weekOfDay == 0) {
+          dayTime = dayjs(this.data.currentSelectDate).subtract(7 - i, 'days');
+        } else {
+          if (i == 7) {
+            dayTime = dayjs(this.data.currentSelectDate).add(
+              i - weekOfDay,
+              'days'
+            );
+          } else {
+            dayTime = dayjs(this.data.currentSelectDate).subtract(
+              weekOfDay - i,
+              'days'
+            );
+          }
+        }
+        let obj = {
+          day: dayTime.format('D'),
+          date: dayTime.format('YYYY-M-D'),
+          isNextMon: dayTime.format('YYYY-M') > currentMonth ? true : false,
+          isLastMon: dayTime.format('YYYY-M') < currentMonth ? true : false,
+          isClock: item.list.filter(
+            x => x.date == dayTime.format('YYYY-MM-DD')
+          )[0].isClock
+        };
+        list.push(obj);
+      }
+      this.setData({
+        nowYear: dayjs(this.data.currentSelectDate).format('YYYY'),
+        nowMonth: dayjs(this.data.currentSelectDate).format('MM'),
+        showFalseList: list
+      });
+    }
+  }
+});

miniprogram/pages/driverIndex/page/signInReocrd/component/calendar/calendar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/pages/driverIndex/page/signInReocrd/component/calendar/calendar.wxml

@@ -0,0 +1,55 @@
+<!--component/calendar/calendar.wxml-->
+
+
+<view class="main">
+  <view class="current-time">
+    <view class="pre" bindtap="prevMonth">＜</view>
+    <view class="time">{{nowYear}}-{{nowMonth}}</view>
+    <view class="next" bindtap="nextMonth">＞</view>
+  </view>
+  <view class="calendar-week">
+    <view class="weekday" wx:for="{{ calendarWeek }}" wx:key="index" data-item='{{item}}'>{{item}}</view>
+  </view>
+  <!-- wx:if="{{isShow}}" -->
+  <view style="position:relative;"  wx:if="{{isShow}}">
+    <swiper style="height:{{isShow?(swiperHeight+5)+'px':'95rpx'}};" current="{{calendarPageIndex}}" circular="{{true}}" bindchange="changeSwiper" bindanimationfinish="transitionStop" >
+      <block wx:for="{{calendarAllList}}" wx:for-item="arrItem" wx:for-index="arrIndex" wx:key="arrIndex">
+        <swiper-item class="swiper-item">
+          <view class="day-box {{calendarPageIndex==arrIndex?'currentBox':''}}">
+            <!-- item.week == 6 || item.week == 0 -->
+            <block wx:for="{{arrItem.list}}" wx:key="index">
+              <view catchtap="selectDay" data-arr_item="{{arrItem}}" data-item="{{item}}" data-index="{{index}}" class="day-item {{ item.isLastMon || item.isNextMon ? 'disable':''}}" >
+                <view class="{{currentSelectDate===item.date?'select_on':''}}">{{ item.isNow?'今天': item.day }}</view>
+                <view class="{{item.isClock==1?'clockTrue':(item.isLastMon || item.isNextMon || item.isClock==0 ?'':'clockFalse')}}"></view>
+                <!-- <view  class="{{item.isClock==1?'clockTrue':(item.isClock==2?'':(item.isLastMon || item.isNextMon?'':'clockFalse'))}}"></view> -->
+              </view>
+            </block>
+          </view>
+        </swiper-item>
+      </block>
+
+    </swiper>
+  </view>
+  <!-- -->
+  <view wx:else style="height:95rpx">
+    <view class="day-box">
+      <block wx:for="{{showFalseList}}" wx:key="index">
+        <view class="day-item {{ item.isLastMon || item.isNextMon ? 'disable':''}}" >
+          <view catchtap="selectWeekDay" data-item="{{item}}" class="{{currentSelectDate===item.date?'select_on':''}}">{{ item.isNow?'今天': item.day }}</view>
+          <view  class="{{item.isClock==1?'clockTrue':(item.isLastMon || item.isNextMon || item.isClock==0 ?'':'clockFalse')}}"></view>
+        </view>
+      </block>
+    </view>
+  </view>
+  <view class="splitLine">
+    <view class="toShowBtn" wx:if="{{!isShow}}" catchtap="changeShowStatus">
+      <view class="bottom-arrow1"></view>
+      <view class="bottom-arrow2"></view>
+    </view>
+    <view class="toShowBtn toHideBtn" wx:else catchtap="changeShowStatus">
+      <view class="bottom-arrow1"></view>
+      <view class="bottom-arrow2"></view>
+    </view>
+  </view>
+  <view style="height: 40rpx;" catchtap="changeShowStatus"></view>
+</view>

miniprogram/pages/driverIndex/page/signInReocrd/component/calendar/calendar.wxss

@@ -0,0 +1,125 @@
+/* component/calendar/calendar.wxss */
+.calendar-week{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    color:#939191;
+    text-align: center;
+    font-size: 28rpx;
+  }
+  .main{
+    /* padding: 0rpx 24rpx; */
+  }
+  .day-box {
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    text-align: center;
+    font-size: 28rpx;
+  }
+  .day-item{
+    position: relative;
+    line-height: 85rpx;
+    font-size: 32rpx;
+    color: #000000;
+    font-weight: bold;
+  }
+  .clockTrue,.clockFalse{
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 12rpx;
+    background: #7CD47B;
+    bottom: 6rpx;
+    left: 0;
+    margin: 0 auto;
+    right: 0;
+    position: absolute;
+  }
+  .clockFalse{
+    background-color: red;
+  }
+  .day-item.disable {
+    color: #999999;
+  }
+  .current-time{
+    padding: 6px 16px;
+    background: #F8F8F8;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 25rpx;
+  }
+  .pre, .next{
+    width: 56rpx;
+    height: 56rpx;
+    background: #EAEAEA;
+    border-radius: 4rpx;
+    color: #666666;
+    font-size: 40rpx;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .time{
+    font-size: 36rpx;
+    font-weight: bold;
+    /* padding: 0 50rpx; */
+  }
+  .select_on{
+    width: 85rpx;
+    height: 85rpx;
+    line-height: 85rpx;
+    border-radius: 50%;
+    background: #3D7EEA;
+    color: #ffffff;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+  }
+  .splitLine{
+    width: 100%;
+    height: 2rpx;
+    /* background: #EAEAEA; */
+    position: relative;
+  }
+  .toShowBtn{
+    width: 30rpx;
+    height: 30rpx;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  .toHideBtn {
+    top: 8rpx;
+    transform: rotate(180deg);
+  }
+  .bottom-arrow1,.bottom-arrow2{
+    width:0;
+    height:0;
+    display:block;
+    position:absolute;
+    left:0;
+    top:0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    z-index: 5;/*兼容ie8-*/
+    border-bottom:0 transparent dashed;
+    border-left:16rpx transparent dashed;
+    border-right:16rpx transparent dashed;
+    /* border-top:16rpx white solid; */
+    overflow:hidden;
+  }
+  .bottom-arrow1{
+    top:8rpx;/*重要*/
+    border-top:16rpx #707070 solid;
+  }
+  .bottom-arrow2{
+    border-top:16rpx #ffffff solid;
+  }