<view class="calendar">
<view class="time">
<view>
<text class="t_blue">{{year}}</text>年
<text class="t_blue">{{month}}</text>月
<text class="t_blue">{{date}}</text>日
</view>
</view>
<view class="weekName">
<view>日</view>
<view class="monday">一</view>
<view class="tuesday">二</view>
<view class="wednesday">三</view>
<view class="thursday">四</view>
<view class="friday">五</view>
<view>六</view>
</view>
<view class="week">
<!-- 填补空格-->
<view wx:for="{{nbsp}}" wx:key="item.id" style="color:#fff;">空</view>
<!-- 已过日期 + 已签到日期-->
<view wx:for="{{date-1}}" wx:key="item.id">
<text wx:if="{{item+1==calendarSignData[item+1]}}" style="color:#C589CF;">
<text class="iconfont icon-yiqiandao"></text>
</text>
<text wx:else>{{item+1}}</text>
</view>
<!-- 已签到日期 || 今日-->
<view>
<text wx:if="{{date==calendarSignData[date]}}" style="color:#C589CF;">
<text class="iconfont icon-yiqiandao"></text>
</text>
<text wx:else style="color:#C589CF;">
<text class="iconfont icon-weiqiandao"></text>
</text>
</view>
<!-- 日期-->
<view wx:for="{{monthDaySize-date}}" wx:key="item.id">{{item+date+1}}</view>
</view>
<view class="calendarSign">
<van-button size="large" wx:if="{{!calendarSignData[date]}}" bindtap="calendarSign">签到</van-button>
<van-button size="large" wx:else bindtap="calendarSign">今日已签到</van-button>
</view>
</view>
page {
margin-top: 50rpx;
background: -webkit-linear-gradient(left, rgb(213, 178, 219), rgb(217, 154, 228));
}
.calendar {
margin: 0 4vw;
padding-bottom: 10rpx;
border-radius: 15rpx;
background-color: #fff;
}
.time {
display: flex;
align-items: center;
padding: 20rpx 20rpx 0 20rpx;
text-align: center;
border-top-left-radius: 15rpx;
border-top-right-radius: 15rpx;
background-color: #fff;
}
.time view {
flex: 1;
font-size: 38rpx;
font-weight: bold;
color: #c589cf;
}
.weekName {
display: flex;
font-size: 30rpx;
padding: 16rpx 0;
margin: 15rpx 15rpx 0 15rpx;
border-top-left-radius: 15rpx;
border-top-right-radius: 15rpx;
background-color: #c589cf;
}
.weekName view {
flex: 1;
text-align: center;
color: #fff;
}
.week {
margin: 0 15rpx 15rpx 15rpx;
font-size: 30rpx;
}
.week view {
width: 14.2%;
height: 70rpx;
line-height: 70rpx;
display: inline-block;
margin: 10rpx 0;
text-align: center;
}
.week view text {
width: 100%;
height: 100%;
display: inline-block;
font-family: '微软雅黑';
}
.calendarSign {
margin: 20rpx;
}
let app = new getApp();
import * as api from "../../../../api/home.js"
Page({
//当前时间
getNowFormatDate() {
let date = new Date();
let seperator1 = "-";
let seperator2 = ":";
let month = date.getMonth() + 1;
let strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
" " + date.getHours() + seperator2 + date.getMinutes() +
seperator2 + date.getSeconds();
return currentdate;
},
//签到
calendarSign: function() {
let data = {
checkDate: this.getNowFormatDate()
}
app.login().then((res) => {
api.addCheckIn(data).then((res) => {
if (res.code == 0) {
this.getCheckedInRecord(this.data.year, this.data.month, this.data.monthDaySize)
wx.showToast({
title: '签到成功',
icon: 'success',
duration: 2000
})
} else {
wx.showToast({
title: res.msg,
icon: 'success',
duration: 2000
})
}
})
})
},
//获取已签到日期
getCheckedInRecord: function(year, month, monthDaySize) {
let calendarSignData = new Array(monthDaySize)
let data = {
month: month,
year: year
}
app.login().then((res) => {
api.getCheckedInRecord(data).then((res) => {
if (res.code == 0) {
let arr = res.data.checkedDayList
for (let value of arr) {
calendarSignData[value] = value
}
this.setData({
calendarSignData: calendarSignData,
})
}
})
})
},
//初始化
init: function() {
let mydate = new Date(); //本地时间
let year = mydate.getFullYear(); //年
let month = mydate.getMonth() + 1; //月
let date = mydate.getDate(); //今日
let day = mydate.getDay(); //天
let nbsp = 7 - ((date - day) % 7); //空格
let monthDaySize; //天数
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
monthDaySize = 31;
} else if (month == 4 || month == 6 || month == 9 || month == 11) {
monthDaySize = 30;
} else if (month == 2) { //计算是否是闰年,如果是二月份则是29天
if ((year - 2000) % 4 == 0) {
monthDaySize = 29;
} else {
monthDaySize = 28;
}
};
this.setData({
year: year,
month: month,
nbsp: nbsp,
date: date,
monthDaySize: monthDaySize
})
this.getCheckedInRecord(year, month, monthDaySize) //获取已签到日期
},
onLoad: function() {
this.init() //初始化
}
})
