uniapp-hainan/components/zwy-calendar/zwy-calendar.vue

<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>