<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">
? ? <!-- 填補(bǔ)空格-->
? ? <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({
? //當(dāng)前時(shí)間
? 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(); //本地時(shí)間
? ? 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; //天數(shù)
? ? 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) { //計(jì)算是否是閏年,如果是二月份則是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() //初始化
? }
})
