<template>
<!-- 打卡日历页面 -->
<view class='all'>
<!-- 显示星期 -->
<!-- <view class="week" v-if="langType=='ch'">
<view v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
</view>
<view class="week" v-else>
<view v-for="(item,index) in weeks_en" :key="index">{{item}}</view>
</view> -->
<view class="myDateTable">
<view class="bar">
<!-- 上一个月 -->
<view class="previous" @click="handleCalendar(0)">
<view class="barbtn" v-if="langType=='ch'">上一月</view>
<view class="barbtn" v-else>Last</view>
</view>
<!-- 显示年月 -->
<view class="date">{{cur_year || "--"}}年{{cur_month || "--"}}月</view>
<!-- 下一个月 -->
<view class="next" v-if="cur_month != toMonth" @click="handleCalendar(1)">
<view class="barbtn" v-if="langType=='ch'">下一月</view>
<view class="barbtn" v-else>Next</view>
</view>
<view v-else class="nextOne">
<view class="barbtn" v-if="langType=='ch'">下一月</view>
<view class="barbtn" v-else>Next</view>
</view>
</view>
<view class="week" v-if="langType=='ch'">
<view v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
</view>
<view class="month-date">
<view v-for="(item,j) in days" :key="j" class='dateCell'>
<view v-if="item.date==undefined||item.date == null" class='cell'>
<text :decode="true"> </text>
</view>
<view v-else>
<!-- 已签到日期 -->
<view v-if="item.isSign == true" class='cell yellow' style="width: 60rpx;height: 60rpx;background: #f39800;border-radius: 50%;color: #fff;">
<text>{{item.date}}</text>
</view>
<!-- 漏签 -->
<!-- <view @click="clickSignUp(item.date,0)" class="cell redColor bgGray"
v-else-if="cur_year<toYear||(cur_year==toYear&&cur_month<toMonth)||(cur_year==toYear&&cur_month==toMonth&&item.date<today)">
小程序不兼容这个 v-else-if="(new Date(cur_year+'-'+cur_month+'-'+item.date))<(new Date())">
<text>{{item.date}}</text>
</view> -->
<!-- 今日未签到-->
<view @click="clickSignUp(item.date)" class="cell white bg-red" v-else-if="item.date==today&&cur_month==toMonth&&cur_year==toYear">
<text>今日</text>
</view>
<!-- 当前日期之后 -->
<view class="whiteColor cell" v-else>
<text>{{item.date}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
days: [],
SignUp: [],
cur_year: 0, //当前选的年
cur_month: 0, //当前选的月
today: parseInt(new Date().getDate()), //本日
toMonth: parseInt(new Date().getMonth() + 1), //本月
toYear: parseInt(new Date().getFullYear()), //本年
weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
weeks_en: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
};
},
props: {
sendYear: {
type: Number,
default: new Date().getFullYear()
},
sendMonth: {
type: Number,
default: new Date().getMonth() + 1
},
dataSource: { //已签到的数据源
type: Array,
default: () => {
return []
}
},
langType: { //只是示例一个翻译而已,要想所有都翻译自己可以再加加
type: String,
default: "ch"
},
},
created() {
this.cur_year = this.sendYear;
this.cur_month = this.sendMonth;
this.SignUp = this.dataSource;
this.calculateEmptyGrids(this.cur_year, this.cur_month);
this.calculateDays(this.cur_year, this.cur_month);
this.onJudgeSign();
},
watch: {
dataSource: 'onResChange',
},
methods: {
// 获取当月共多少天
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate()
},
// 获取当月第一天星期几
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
// 计算当月1号前空了几个格子,把它填充在days数组的前面
calculateEmptyGrids(year, month) {
//计算每个月时要清零
this.days = [];
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
var obj = {
date: null,
isSign: true
}
// if(i==4||i==6){
// obj.isSign = true
// }
this.days.push(obj);
}
}
},
// 绘制当月天数占的格子,并把它放到days数组中
calculateDays(year, month) {
const thisMonthDays = this.getThisMonthDays(year, month);
// this.columnsLen=Math.ceil(thisMonthDays/7);
// console.log(this.columnsLen);
for (let i = 1; i <= thisMonthDays; i++) {
var obj = {
date: i,
isSign: false
}
// if(i==4||i==6){
// obj.isSign = true
// }
this.days.push(obj);
}
//console.log(this.days);
},
onResChange(newD, oldD) {
this.SignUp = newD;
this.onJudgeSign();
},
//匹配判断当月与当月哪些日子签到打卡
onJudgeSign() {
var signs = this.SignUp;
console.log('SignUp',this.SignUp)
var daysArr = this.days;
for (var i = 0; i < signs.length; i++) {
var current = new Date(signs[i].signTime.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 == this.cur_year && month == this.cur_month && daysArr[j].date == day) { //&& signs[i].isSign == "今日已打卡"
// console.log(daysArr[j].date, day);
daysArr[j].isSign = true;
}
}
}
this.days = daysArr;
},
// 切换控制年月,上一个月,下一个月
handleCalendar(type) {
const cur_year = parseInt(this.cur_year);
const cur_month = parseInt(this.cur_month);
var newMonth;
var newYear = cur_year;
if (type === 0) { //上个月
newMonth = cur_month - 1;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
} else {
newMonth = cur_month + 1;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
}
this.calculateEmptyGrids(newYear, newMonth);
this.calculateDays(newYear, newMonth);
this.cur_year = newYear;
this.cur_month = newMonth;
this.SignUp = []; //先清空
console.log(22,this.cur_year+"-"+this.cur_month);
this.$emit('dateChange',this.cur_year+"-"+this.cur_month); //传给调用模板页面去拿新数据
},
clickSignUp(date, type) { //type=0补签,type=1当日签到
// var str = "签到";
// if (type == 0) {//如果不需要补签功能直接在这阻止不执行后面的代码就行。
// str = "补签";
// }
// uni.showToast({
// title: str + "成功" + date + "号",
// icon: 'success',
// duration: 2000
// });
// this.SignUp.push(this.cur_year + "-" + this.cur_month + "-" + date); //自动加假数据,写了接口就不用了
// console.log(this.SignUp);
// this.$forceUpdate();
// this.$emit('clickChange', this.cur_year + "-" + this.cur_month + "-" + date); //传给调用模板页面
// this.$emit('clickChange'); //传给调用模板页面
//refresh
this.onJudgeSign();
}
}
}
</script>
<style scoped>
.all .bar {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx;
background: #fff;
border-radius: 20rpx;
margin: 2.5vw;
padding-top: 32rpx;
align-items: center;
padding-left: 56rpx;
padding-right: 56rpx;
margin-bottom: 0rpx;
}
.bar .barbtn {
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
}
.all .week {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx;
padding-left: 56rpx;
padding-right: 56rpx;
border-radius: 20rpx;
background-color: #fff;
margin: 2.5vw;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #666666;
line-height: 40rpx;
margin-bottom: 0px;
/* margin-top: 36rpx; */
}
.month-date{
padding-left: 48rpx;
/* padding-right: 56rpx; */
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
padding-bottom: 30rpx;
}
.myDateTable {
margin: 32rpx;
border-radius: 20rpx;
background: #fff;
margin-top:40rpx
}
.myDateTable .dateCell {
width: 9vw;
padding: 1vw;
display: inline-block;
text-align: center;
font-size: 32rpx;
min-width: 9.5vw;
display: flex;
align-items: center;
justify-content: center;
}
.dateCell .cell {
display: flex;
border-radius: 50%;
height: 9vw;
justify-content: center;
align-items: center;
}
/* .whiteColor {
color: #fff;
} */
.greenColor {
color: #01b90b;
font-weight: bold;
}
.bgWhite {
background-color: #fff;
}
.bgGray {
background-color: rgba(255, 255, 255, 0.42);
}
.bgBlue {
font-size: 28rpx;
background-color: #4b95e6;
}
.redColor {
color: #ff0000;
}
.date{
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Semibold;
font-weight: bold;
text-align: left;
color: #333333;
line-height: 40rpx;
}
.cell .yellow{
width: 60rpx;
height: 60rpx;
background: #f39800;
border-radius: 50%;
}
.TipArea{
word-break:break-all;
word-wrap:break-word;
font-size: 28rpx;
padding: 20rpx;
}
.impTip{
display: inline-block;
color: #ff0000;
}
.nextOne{
color:#ddd
}
</style>