<!-- 日歷 -->
? ? ? ? <view class="myReport-calendar">
? ? ? ? ? ? <view class="img">
? ? ? ? ? ? ? ? <image mode="aspectFit" src="/imgs/calendar.png"></image>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="calendar">
? ? ? ? ? ? ? ? <view class="selectDate">
? ? ? ? ? ? ? ? ? ? <view class="date-wrap">
? ? ? ? ? ? ? ? ? ? ? ? {{year}}年{{month}}月
? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <view class="week">
? ? ? ? ? ? ? ? ? ? <block wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key">
? ? ? ? ? ? ? ? ? ? ? ? <view>{{item}}</view>
? ? ? ? ? ? ? ? ? ? </block>
? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? <view class="date-box">

? ? ? ? ? ? ? ? ? ? <block wx:for='{{dateArr}}' wx:key='key'>
? ? ? ? ? ? ? ? ? ? ? ? <view class='{{theDay == item.isToday ? "nowDay" : ""}}' data-key='{{item.isToday}}'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class='date-head' data-year='{{year}}' data-month='{{month}}'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data-datenum='{{item.dateNum}}'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <view>{{item.dateNum}}</view>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? </block>
? ? ? ? ? ?</view>
? ? ?</view>
</view>

// pages/report/report.js
Page({

? ? /**
? ? ?* 頁(yè)面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? ? ? ? ?year: 0,
? ? ? ? month: 0,
? ? ? ? weekArr: ['日', '一', '二', '三', '四', '五', '六'],
? ? ? ? dateArr: [],
? ? ? ? isToday: "",
? ? ? ? isTodayWeek: false,
? ? ? ? todayIndex: 0,
? ? ? ? theDay: "",
? ? ? ? index: '',
? ? ? ? signNum: '', //簽到數(shù)
? ? },
? ?dateInit: function (setYear, setMonth) {
? ? ? ? //全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+1
? ? ? ? let dateArr1 = []; //需要遍歷的日歷數(shù)組數(shù)據(jù)
? ? ? ? let arrLen = 0; //dateArr的數(shù)組長(zhǎng)度
? ? ? ? let now = setYear ? new Date(setYear, setMonth) : new Date();
? ? ? ? let year = setYear || now.getFullYear();
? ? ? ? let nextYear = 0;
? ? ? ? let month = setMonth || now.getMonth(); //沒(méi)有+1方便后面計(jì)算當(dāng)月總天數(shù)
? ? ? ? let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
? ? ? ? let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目標(biāo)月1號(hào)對(duì)應(yīng)的星期
? ? ? ? let dayNums = new Date(year, nextMonth, 0).getDate(); //獲取目標(biāo)月有多少天
? ? ? ? let obj = {};
? ? ? ? let num = 0;
? ? ? ? if (month + 1 > 11) {
? ? ? ? ? ? nextYear = year + 1;
? ? ? ? ? ? dayNums = new Date(nextYear, nextMonth, 0).getDate();
? ? ? ? }
? ? ? ? arrLen = startWeek + dayNums;
? ? ? ? for (let i = 0; i < arrLen; i++) {
? ? ? ? ? ? if (i >= startWeek) {
? ? ? ? ? ? ? ? num = i - startWeek + 1;
? ? ? ? ? ? ? ? obj = {
? ? ? ? ? ? ? ? ? ? isToday: '' + year + (month + 1) + num,
? ? ? ? ? ? ? ? ? ? dateNum: num,
? ? ? ? ? ? ? ? ? ? weight: 5
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? obj = {};
? ? ? ? ? ? }
? ? ? ? ? ? dateArr1[i] = obj;
? ? ? ? }
? ? ? ? this.setData({
? ? ? ? ? ? dateArr: dateArr1
? ? ? ? })
? ? ? ? let nowDate = new Date();
? ? ? ? let nowYear = nowDate.getFullYear();
? ? ? ? let nowMonth = nowDate.getMonth() + 1;
? ? ? ? let nowWeek = nowDate.getDay();
? ? ? ? let getYear = setYear || nowYear;
? ? ? ? let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
? ? ? ? if (nowYear == getYear && nowMonth == getMonth) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? isTodayWeek: true,
? ? ? ? ? ? ? ? todayIndex: nowWeek
? ? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? isTodayWeek: false,
? ? ? ? ? ? ? ? todayIndex: -1
? ? ? ? ? ? })
? ? ? ? }
? ? },
? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ? ?*/
? ? onShow: function () {
? ? ? ? let now = new Date();
? ? ? ? let year = now.getFullYear();
? ? ? ? let month = now.getMonth() + 1;
? ? ? ? this.dateInit();
? ? ? ? this.setData({
? ? ? ? ? ? year: year,
? ? ? ? ? ? month: month,
? ? ? ? ? ? isToday: '' + year + month + now.getDate(),
? ? ? ? ? ? theDay: '' + year + month + now.getDate()
? ? ? ? })
? ? },
? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ? ?*/
? ? onLoad: function (options) {
? ? ? ??
? ? },

? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ? ?*/
? ? onReady: function () {

? ? },

? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ? ?*/
? ? onShow: function () {

? ? },

? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ? ?*/
? ? onHide: function () {

? ? },

? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ? ?*/
? ? onUnload: function () {

? ? },

? ? /**
? ? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
? ? ?*/
? ? onPullDownRefresh: function () {

? ? },

? ? /**
? ? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ? ?*/
? ? onReachBottom: function () {

? ? },

? ? /**
? ? ?* 用戶點(diǎn)擊右上角分享
? ? ?*/
? ? onShareAppMessage: function () {

? ? }
})

/* 日歷 */
.myReport-calendar {
? ? width: 100%;
? ? height: 700rpx;
? ? margin-top: 27rpx;
? ? margin-bottom: 40rpx;
? ? position: relative;
}

.calendar {
? ? position: absolute;
? ? top: 88rpx;
? ? left: 0;
? ? right: 0;
? ? bottom: 0;
? ? margin: 0 auto;
}

.today .day {
? ? width: 100%;
? ? height: 100%;
? ? margin: 0 auto;
? ? text-align: center;
}

.today text {
? ? display: block;
? ? width: 60rpx;
? ? text-align: center;
? ? line-height: 60rpx;
? ? color: #fff;
? ? background: #00c8be;
? ? border-radius: 100rpx;
}

.selectDate {
? ? padding-bottom: 20rpx;
? ? text-align: center;
}

.date-wrap {
? ? font-size: 32rpx;
? ? font-weight: 600;
? ? color: #232323;
}

.week {
? ? display: flex;
? ? align-items: center;
? ? justify-content: space-around;
? ? padding: 30rpx;
? ? color: #000000;
? ? font-weight: 400;
? ? font-size: 28rpx;
}

.date-box {
? ? font-size: 0;
? ? padding: 0 30rpx 30rpx 30rpx;?
? ? margin: 0 auto;
}

.date-box>view {
? ? position: relative;
? ? display: inline-block;
? ? width: 14.285%;
? ? color: #333;
? ? text-align: center;
? ? vertical-align: middle;
? ? padding-bottom: 30rpx;
}

.date-head {
? ? height: 60rpx;
? ? line-height: 60rpx;
? ? font-size: 28rpx;
}

.nowDay .date-head {
? ? width: 60rpx;
? ? border-radius: 50%;
? ? text-align: center;
? ? color: #fff;
? ? background-color: #00c8be;
? ? margin: 0 auto;
}

.nowDay .date-head:hover {
? ? background: linear-gradient(to bottom right, #009899, #19d6cb);
}