<!--pages/Calendar/Calendar.wxml--><!-- 打卡日歷頁面 --><view class='all'> <view class="bar">  <!-- 上一個月 -->  <view class="previous" bindtap="handleCalendar" data-handle="prev">   <image src='../../images/pre.png'></image>  </view>  <!-- 顯示年月 -->  <view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>  <!-- 下一個月 -->  <view class="next" bindtap="handleCalendar" data-handle="next">   <image src='../../images/next.png'></image>  </view> </view> <!-- 顯示星期 --> <view class="week">  <view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view> </view> <view class='days'>  <!-- 列 -->  <view class="columns" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="i">   <view wx:for="{{days}}" wx:for-index="j" wx:key="j">    <!-- 行 -->    <view class="rows" wx:if="{{j/7 == i}}">     <view class="rows" wx:for="{{7}}" wx:for-index="k" wx:key="k">      <!-- 每個月份的空的單元格 -->      <view class='cell' wx:if="{{days[j+k].date == null}}">       <text decode="{{true}}">  </text>      </view>      <!-- 每個月份的有數字的單元格 -->      <view class='cell' wx:else>       <!-- 當前日期已簽到 -->       <view wx:if="{{days[j+k].isSign == true}}" style='background-color:#83C75D' class='cell'>        <text>{{days[j+k].date}}</text>       </view>       <!-- 當前日期未簽到 -->       <view wx:else>        <text>{{days[j+k].date}}</text>       </view>      </view>     </view>    </view>   </view>  </view> </view> <!-- 堅持打卡天數 --> <view class='count'>  <text>截至目前，你已堅持打卡</text>  <view class='daynumber'>  <text class='number'>{{count}}</text>  <text class='day'>天</text>  </view>    <text>請再接再厲，繼續努力</text> </view></view>

/* pages/Calendar/Calendar.wxss *//* 打卡日歷 */.all{ margin-top: 20rpx;}.all .bar{ display: flex; flex-direction: row; justify-content: space-between; margin: 30rpx 20rpx; padding: 10rpx;}.all .bar image{ width: 50rpx; height: 50rpx;}.all .week{ display: flex; flex-direction: row; justify-content: space-between; padding: 20rpx; padding-left: 40rpx; padding-right: 40rpx; margin: 20rpx; border-radius: 10px; background-color: #acd;}.all .days{ margin: 20rpx; padding: 10rpx; border-radius: 10px; background-color: #acd;}.all .columns{ display: flex; flex-direction: column; justify-content: space-between; }.all .columns .rows{ display: flex; flex-direction: row; justify-content: space-between;}.all .columns .rows .cell{ width: 84rpx; height: 88rpx; margin: 3rpx; text-align: center; border-radius: 50%; display: flex; flex-direction: column; justify-content: center;}.count .daynumber{ display: flex; flex-direction: row; justify-content: center;}.count .daynumber .day{ margin-top: 50rpx;}.count{ margin: 20rpx; padding: 30rpx; display: flex; text-align: center; border-radius: 10px; flex-direction: column; justify-content: center; background-color: #acd; align-items: center;}.count .number{ color: red; font-size: 60rpx; background-color: #fff; width: 100rpx; height: 100rpx; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; margin: 20rpx;}.count text{ margin: 10rpx;}

// pages/Calendar/Calendar.js//打卡日歷頁面var util = require('../../utils/util.js');var Bmob = require('../../utils/bmob.js');Page({ /**  * 頁面的初始數據  */ data: {  objectId:'',  days:[],  signUp:[],  cur_year:0,  cur_month:0,  count:0 }, /**  * 生命周期函數--監聽頁面加載  */ onLoad: function (options) {  this.setData({objectId : options.objectId});   //獲取當前年月   const date = new Date();  const cur_year = date.getFullYear();  const cur_month = date.getMonth() + 1;  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];  this.calculateEmptyGrids(cur_year, cur_month);  this.calculateDays(cur_year, cur_month);  //獲取當前用戶當前任務的簽到狀態  this.onGetSignUp();  this.setData({   cur_year,   cur_month,   weeks_ch  }) }, /**  * 生命周期函數--監聽頁面初次渲染完成  */ onReady: function () { }, /**  * 生命周期函數--監聽頁面顯示  */ onShow: function () { }, /**  * 生命周期函數--監聽頁面隱藏  */ onHide: function () { }, /**  * 生命周期函數--監聽頁面卸載  */ onUnload: function () { }, /**  * 頁面相關事件處理函數--監聽用戶下拉動作  */ onPullDownRefresh: function () { }, /**  * 頁面上拉觸底事件的處理函數  */ onReachBottom: function () { }, /**  * 用戶點擊右上角分享  */ onShareAppMessage: function () { }, // 獲取當月共多少天 getThisMonthDays:function(year, month){   return new Date(year, month, 0).getDate() }, // 獲取當月第一天星期幾 getFirstDayOfWeek:function(year, month) {  return new Date(Date.UTC(year, month - 1, 1)).getDay(); }, // 計算當月1號前空了幾個格子，把它填充在days數組的前面 calculateEmptyGrids:function(year, month) {  var that = this;  //計算每個月時要清零  that.setData({days:[]});  const firstDayOfWeek = this.getFirstDayOfWeek(year, month);    if (firstDayOfWeek > 0) {   for (let i = 0; i < firstDayOfWeek; i++) {    var obj = {     date:null,     isSign:false    }    that.data.days.push(obj);   }   this.setData({    days:that.data.days   });  //清空  } else {   this.setData({    days: []   });  } }, // 繪制當月天數占的格子，并把它放到days數組中 calculateDays:function(year, month) {  var that = this;  const thisMonthDays = this.getThisMonthDays(year, month);  for (let i = 1; i <= thisMonthDays; i++) {   var obj = {    date: i,    isSign: false   }   that.data.days.push(obj);  }  this.setData({   days:that.data.days  }); }, //匹配判斷當月與當月哪些日子簽到打卡 onJudgeSign:function(){  var that = this;  var signs = that.data.signUp;  var daysArr = that.data.days;  for (var i=0; i < signs.length;i++){   var current = new Date(signs[i].date.replace(/-/g, "/"));   var year = current.getFullYear();   var month = current.getMonth()+1;   var day = current.getDate();   day = parseInt(day);   for (var j = 0; j < daysArr.length;j++){    //年月日相同并且已打卡    if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day && signs[i].isSign == "今日已打卡"){     daysArr[j].isSign = true;    }   }  }  that.setData({days:daysArr}); }, // 切換控制年月，上一個月，下一個月 handleCalendar:function(e) {  const handle = e.currentTarget.dataset.handle;  const cur_year = this.data.cur_year;  const cur_month = this.data.cur_month;  if (handle === 'prev') {   let newMonth = cur_month - 1;   let newYear = cur_year;   if (newMonth < 1) {    newYear = cur_year - 1;    newMonth = 12;   }   this.calculateEmptyGrids(newYear, newMonth);   this.calculateDays(newYear, newMonth);   this.onGetSignUp();      this.setData({    cur_year: newYear,    cur_month: newMonth   })  } else {   let newMonth = cur_month + 1;   let newYear = cur_year;   if (newMonth > 12) {    newYear = cur_year + 1;    newMonth = 1;   }   this.calculateEmptyGrids(newYear, newMonth);   this.calculateDays(newYear, newMonth);   this.onGetSignUp();      this.setData({    cur_year: newYear,    cur_month: newMonth   })  } }, //獲取當前用戶該任務的簽到數組 onGetSignUp:function(){  var that = this;  var Task_User = Bmob.Object.extend("task_user");  var q = new Bmob.Query(Task_User);  q.get(that.data.objectId, {   success: function (result) {    that.setData({     signUp : result.get("signUp"),     count : result.get("score")    });    //獲取后就判斷簽到情況    that.onJudgeSign();   },   error: function (object, error) {   }  });   }})

{ "navigationBarTitleText": "打卡日歷"}