<template>
|
<!-- 打卡日历页面 -->
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="日历签到" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
|
<view class="bar">
|
<!-- 上一个月 -->
|
<view class="previous" @click="handleCalendar(0)">
|
<button class="barbtn" v-if="langType=='ch'">上一月</button>
|
<button class="barbtn" v-else>Last</button>
|
</view>
|
<!-- 显示年月 -->
|
<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
|
<!-- 下一个月 -->
|
<view class="next" @click="handleCalendar(1)">
|
<button class="barbtn" v-if="langType=='ch'">下一月</button>
|
<button class="barbtn" v-else>Next</button>
|
</view>
|
</view>
|
<!-- 显示星期 -->
|
<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 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 greenColor bgWhite '>
|
<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,1)" class="cell coreshop-text-white bgBlue" v-else-if="item.date==today&&cur_month==toMonth&&cur_year==toYear">
|
<text>签到</text>
|
</view>
|
<!-- 当前日期之后 -->
|
<view class="coreshop-text-white cell" v-else>
|
<text>{{item.date}}</text>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
<!--<view class="TipArea ">
|
坚持签到<view class="impTip">可获得积分和余额</view>
|
</view>-->
|
|
<view class='count'>
|
<text>截至目前，已坚持打卡</text>
|
<view class='daynumber'>
|
<text class='number'>{{sumCount}}</text>
|
<text class='day'>天</text>
|
</view>
|
|
<view>本月累积打卡<text class="monthSum">{{dataSource.length}}</text>天</view>
|
<text>请再接再厉，继续努力!</text>
|
</view>
|
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
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'],
|
dataSource: [], //已签到的数据源
|
langType: 'ch',//只是示例一个翻译而已，要想所有都翻译自己可以再加加
|
sumCount: 0,
|
signData: []
|
};
|
},
|
onLoad() {
|
var checkInIsOpen = this.$store.state.config.checkInIsOpen;
|
if (checkInIsOpen == 2) {
|
console.log('签到功能未开启');
|
this.$refs.uToast.show({
|
message: "签到功能未开启", type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
} else {
|
this.getUserCheckByMonth(this.cur_year, this.cur_month);
|
this.getUserCheckCount();
|
}
|
},
|
created() {
|
this.cur_year = new Date().getFullYear();
|
this.cur_month = new Date().getMonth() + 1;
|
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',
|
},
|
computed: {
|
...mapState({
|
hasLogin: state => state.hasLogin,
|
userInfo: state => state.userInfo,
|
}),
|
|
},
|
methods: {
|
getUserCheckCount() {
|
this.$u.api.getUserCheckCount().then(res => {
|
console.log(res);
|
if (res.status) {
|
this.sumCount = res.data;
|
} else {
|
this.$refs.uToast.show({ message: res.msg, type: 'error', back: false })
|
}
|
});
|
},
|
getUserCheckByMonth(cur_year, cur_month) {
|
this.$refs.uToast.show({
|
loading: false, type: 'loading',
|
title: '正在加载',
|
message: "正在加载",
|
duration: 1000
|
})
|
this.$u.api.getUserCheckByMonth({
|
year: cur_year,
|
month: cur_month,
|
}).then(res => {
|
console.log(res);
|
if (res.status) {
|
this.dataSource = res.data;
|
} else {
|
this.$refs.uToast.show({ message: res.msg, type: 'error', back: false })
|
}
|
});
|
},
|
goLogin() {
|
this.$store.commit('showLoginTip', true);
|
},
|
// 获取当月共多少天
|
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: false
|
}
|
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
|
}
|
this.days.push(obj);
|
}
|
//console.log(this.days);
|
},
|
onResChange(newD, oldD) {
|
this.SignUp = newD;
|
this.onJudgeSign();
|
},
|
//匹配判断当月与当月哪些日子签到打卡
|
onJudgeSign() {
|
var signs = this.SignUp;
|
var daysArr = this.days;
|
for (var i = 0; i < signs.length; i++) {
|
var current = new Date(signs[i].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 = []; //先清空
|
|
this.getUserCheckByMonth(this.cur_year, this.cur_month);
|
|
//this.$emit('dateChange', this.cur_year + "-" + this.cur_month); //传给调用模板页面去拿新数据
|
},
|
clickSignUp(date, type) { //type=0补签，type=1当日签到
|
var _this = this;
|
if (!this.hasLogin) {
|
this.$store.commit('showLoginTip', true);
|
return false;
|
} else {
|
//如果不需要补签功能直接在这阻止不执行后面的代码就行。
|
if (type == 0) {
|
return false;
|
}
|
var postDate = this.cur_year + "-" + this.cur_month + "-" + date;
|
this.$u.api.userCheckIn({
|
date: postDate,
|
}).then(res => {
|
console.log(res);
|
if (res.status) {
|
uni.showToast({
|
title: "签到成功",
|
icon: 'success',
|
duration: 2000
|
});
|
//this.SignUp.push(this.cur_year + "-" + this.cur_month + "-" + date);
|
_this.dataSource.push(this.cur_year + "-" + this.cur_month + "-" + date);
|
console.log(_this.dataSource);
|
//_this.SignUp = _this.dataSource;
|
if (res.data) {
|
_this.sumCount = res.data.cumulativeCheckInCount;
|
}
|
|
_this.onJudgeSign();
|
} else {
|
this.$refs.uToast.show({ message: res.msg, type: 'error', back: false })
|
}
|
});
|
this.$forceUpdate();
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "checkIn.scss";
|
</style>
|
