You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
7.5 KiB
324 lines
7.5 KiB
<template>
|
|
<view class="calendar-box">
|
|
<view class="month lf-p-l-10 lf-p-r-10">
|
|
<view @click="lastMonth" v-if="havePre">上月</view>
|
|
<view>{{year}}年{{month}}月</view>
|
|
<view @click="nextMonth" v-if="haveNext">下月</view>
|
|
</view>
|
|
<view class="week">
|
|
<view v-for="weeks in weekArr">{{weeks}}</view>
|
|
</view>
|
|
<view class="day">
|
|
<view :class="[{'checkday':days.date==''},{'choose':days.flag==true}]"
|
|
:style="'background:'+(days.flag==true?bgday:'')+';'" v-for="(days,index) in dayArr" :key="index">
|
|
{{days.day}}
|
|
<view :class="[{'circle':days.flag},{'repair':days.day<day},{'sign':days.day==day}]"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
lang: {
|
|
type: String,
|
|
default: 'zh'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'calendar'
|
|
},
|
|
checkDate: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bgweek: {
|
|
type: String,
|
|
default: '#1998FE'
|
|
},
|
|
bgday: {
|
|
type: String,
|
|
default: '#1998FE'
|
|
},
|
|
startTime: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
endTime: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
weeked: '', // 今天周几
|
|
dayArr: [], // 当前月每日
|
|
localDate: '', // 今天日期
|
|
day: new Date().getDate(), // 当前日
|
|
year: new Date().getFullYear(), // 当前年
|
|
month: new Date().getMonth() + 1, // 当前月
|
|
weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周
|
|
selfDays: 0,
|
|
havePre: false,
|
|
haveNext: false
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
that.dateDiff(that.startTime,that.endTime);
|
|
// 初始日期
|
|
that.initDate();
|
|
// 今天日期
|
|
that.localDate = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(that.day);
|
|
// 中英切换
|
|
if (that.lang != 'zh') that.weekArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
// 今天周几
|
|
that.weeked = that.weekArr[new Date().getDay()];
|
|
// 签到功能
|
|
if (that.type != 'calendar') {
|
|
for (let i in that.dayArr) {
|
|
let chooseList = []
|
|
if(that.selfDays) {
|
|
var dataStart = that.startTime.split('-');
|
|
var endStart = that.endTime.split('-');
|
|
let numberStart = Number(dataStart[2])
|
|
let nowMonth = new Date().getMonth() + 1;
|
|
let splitStartMonth = dataStart[1];
|
|
let splitEndMonth = endStart[1];
|
|
console.log('当前月',nowMonth)
|
|
console.log('传来的月份',that.month)
|
|
if(that.month < nowMonth) {
|
|
console.log('小于当前月')
|
|
this.havePre = true
|
|
}else if(splitEndMonth > nowMonth){
|
|
console.log('大于当前月')
|
|
this.haveNext = true
|
|
}
|
|
var totalDays = Number(that.selfDays) + Number(dataStart[2]);
|
|
for(let j = numberStart;j < totalDays;j++) {
|
|
if(that.dayArr[i].day == j && that.dayArr[i].date) {
|
|
that.$set(that.dayArr[i], 'flag', true);
|
|
}
|
|
}
|
|
}
|
|
// that.$set(that.dayArr[i], 'flag', false);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 选择年月
|
|
changeDate(e) {
|
|
let that = this;
|
|
that.year = parseInt(e.detail.value.split('-')[0]);
|
|
that.month = parseInt(e.detail.value.split('-')[1]);
|
|
that.initDate();
|
|
},
|
|
// 点击签到
|
|
signToday(obj, index) {
|
|
let that = this;
|
|
// 指定签到类型可访问
|
|
if (that.type == 'calendar') return;
|
|
// 限制本月可进行签到
|
|
if ((new Date().getMonth() + 1) != parseInt(obj.date.split('-')[1])) return;
|
|
// 禁用非本月点击签到且限制签到日期小于等于本日
|
|
if (obj.date != '' && obj.day <= that.day) {
|
|
// 开启已签到提醒
|
|
if (that.dayArr[index].flag) {
|
|
uni.showToast({
|
|
title: '已签到',
|
|
icon: 'none'
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: that.day > obj.day ? '补签成功' : '签到成功',
|
|
icon: 'success'
|
|
});
|
|
that.$set(that.dayArr[index], 'flag', true);
|
|
that.$emit('change', obj.date);
|
|
}
|
|
}
|
|
},
|
|
dateDiff(sDate1,sDate2) {
|
|
var aDate, oDate1, oDate2, iDays;
|
|
aDate = sDate1.split('-');
|
|
console.log('addate',aDate[1])
|
|
if(aDate[1] == '01') {
|
|
this.month = 1
|
|
}else if (aDate[1] == '02') {
|
|
this.month = 2
|
|
}else if (aDate[1] == '03') {
|
|
this.month = 3
|
|
}else if (aDate[1] == '04') {
|
|
this.month = 4
|
|
}else if (aDate[1] == '05') {
|
|
this.month = 5
|
|
}else if (aDate[1] == '06') {
|
|
this.month = 6
|
|
}else if (aDate[1] == '07') {
|
|
this.month = 7
|
|
}else if (aDate[1] == '08') {
|
|
this.month = 8
|
|
}else if (aDate[1] == '09') {
|
|
this.month = 9
|
|
}else{
|
|
this.month = Number(aDate[1])
|
|
}
|
|
if(aDate[1])
|
|
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
|
|
aDate = sDate2.split('-');
|
|
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
|
|
iDays = parseInt(Math.abs(oDate1 - oDate2) /1000/60/60/24);
|
|
this.selfDays = iDays+1;
|
|
return iDays + 1;
|
|
},
|
|
// 初始化日期
|
|
initDate() {
|
|
let that = this;
|
|
that.dayArr = [];
|
|
// 当前月总天数
|
|
let totalDay = new Date(that.year, that.month, 0).getDate();
|
|
// 遍历总天数将日期逐个添加至数组
|
|
for (let i = 1; i <= totalDay; i++) {
|
|
// 得到需补充天数
|
|
let value = (new Date(that.year, that.month - 1, i)).getDay();
|
|
// 补充前面空白日期
|
|
if (i == 1 && value != 0) that.addBefore(value);
|
|
// 添加本月日期
|
|
let obj = {};
|
|
obj.date = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(i);
|
|
obj.day = i;
|
|
that.dayArr.push(obj);
|
|
if (i == totalDay && value != 6) that.addAfter(value);
|
|
}
|
|
},
|
|
// 补充前面空白日期
|
|
addBefore(value) {
|
|
let that = this;
|
|
let totalDay = new Date(that.year, that.month - 1, 0).getDate();
|
|
for (let i = 0; i < value; i++) {
|
|
let obj = {};
|
|
obj.date = '';
|
|
obj.day = totalDay - (value - i) + 1;
|
|
that.dayArr.push(obj);
|
|
}
|
|
},
|
|
// 补充后空白日期
|
|
addAfter(value) {
|
|
let that = this;
|
|
for (let i = 0; i < (6 - value); i++) {
|
|
let obj = {};
|
|
obj.date = '';
|
|
obj.day = i + 1;
|
|
that.dayArr.push(obj);
|
|
}
|
|
},
|
|
// 格式化日期位数
|
|
formatNum(num) {
|
|
return num < 10 ? ('0' + num) : num;
|
|
},
|
|
// 上一个月
|
|
lastMonth() {
|
|
let that = this;
|
|
if (that.month == 1) {
|
|
that.year -= 1;
|
|
that.month = 12;
|
|
} else {
|
|
that.month -= 1;
|
|
}
|
|
that.initDate();
|
|
},
|
|
// 下一个月
|
|
nextMonth() {
|
|
let that = this;
|
|
if (that.month == 12) {
|
|
that.year += 1;
|
|
that.month = 1;
|
|
} else {
|
|
that.month += 1;
|
|
}
|
|
that.initDate();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.calendar-box {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.calendar-box,
|
|
.month,
|
|
.week,
|
|
.day {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.month,
|
|
.week,
|
|
.day {
|
|
width: 700rpx;
|
|
}
|
|
|
|
.month {
|
|
margin: 30rpx 0;
|
|
position: relative;
|
|
}
|
|
|
|
.picker {
|
|
width: 160rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.day {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.week>view,
|
|
.day>view {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.checkday {
|
|
color: #999;
|
|
}
|
|
|
|
.choose {
|
|
color: #FFFFFF;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.circle {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.sign {
|
|
background-color: #0089fe;
|
|
}
|
|
|
|
.repair {
|
|
background-color: #1998FE;
|
|
}
|
|
</style>
|