小程序自定义日历实现签到功能

使用uniapp自带的uni-calendar可以实现简单的数据展示以及打卡

但是项目要求的日历日期由后端返回每个月的返回而不是整年的返回，

签到的方式也是点击按钮签到而不是点击日历表

这样uniapp的组件就不能实现我们的项目要求了

效果图：

 

实现方法如下：

html

		<view class="context">
				<view class="top">
					<view class="box" @tap="bindPreMonth">
						<image src="https://res-other-platform.mutouyun.com/taskforest/icon/left_arrows.png" mode=""
							class="img imgLeft"></image>
						{{preMoth}}月
					</view>
					  <view>{{year}}年{{month}}月</view>
					<view class="box" @tap="bindNextMonth">
						{{nextMoth}}月
						<image src="https://res-other-platform.mutouyun.com/taskforest/icon/right_arrows.png" mode=""
							class="img imgRight"></image>
					</view>
				</view>
				<view  class="middle">
					  <view v-for="(item,index) in data_arr" :key="index" class="middle_num">//data_arr星期
						    {{item}}
						  </view>
				</view>
				<view class="calen">
//calendarList日历里面的数据
					  <view v-for="(item,index) in calendarList"   class="calen_num"   :key="index"
						:class="item.isCurMonth==0?'calen_item':' '">
						<view :class="[{'active':item.status == 1 }]">
							<image src="https://res-other-platform.mutouyun.com/taskforest/icon/green_gifi.png" mode=""
								v-if="item.recieveDay==1" class="gifi_img"
								:class="item.recieveDay==1&&calendarList[index-1].status==1?'gift_bg':' '"></image>
							<!-- <image src="https://res-other-platform.mutouyun.com/taskforest/icon/gifi_color.png" mode=""
								v-else-if="getGifi" class="gifi_img"></image> -->
							<text v-else> {{item.date.substr(6)}}</text>
						</view>
						<text v-if="calendarList[index-1].status==1&&calendarList[index].status==1"
							:class="{'bg_active': calendarList[index-1].status==1&&calendarList[index].status==1&&index%7!==0}">
						</text>
					</view>
				</view>
			</view>

css

.context {
		padding-top: 10rpx;
		background: #FCE2D4;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		position: relative;
		top: -42rpx;
	}

	.top {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #B74C37;
		padding: 0 24rpx;
	}

	.middle {
		display: flex;
		padding-bottom: 16rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #C54834;
	}

	.middle_num {
		width: 14%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.calen {
		display: flex;
		width: 100%;
		height: 434rpx;
		flex-wrap: wrap;
		background: linear-gradient(45deg, #EDFAFF 0%, #FFEDF1 100%);
		border-radius: 0px 0px 10rpx 10rpx;
	}

	.calen_blank {
		width: 14%;
		height: 20%;
		background-color: pink;
	}

	.calen_num {
		width: 14%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #17181A;
		position: relative;
	}

	.calen_item {
		color: #C4C7CC;
	}

	.active {
		background: linear-gradient(-90deg, #3CC55B, #28C06B);
		border: 3px solid #FFFFFF;
		border-radius: 50%;
		color: #fff;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 999;
	}

js

				data() {
			return {
				data_arr: ["日", "一", "二", "三", "四", "五", "六"],
				year: "",
				month: "",
				currentMonthDays: '',
				startWeek: '',
				calendarList: [],
				nextMoth: '',
				preMoth: '',
				showSign: true,
				newDate: '',
				calendar: [],
				getGifi: false,
				deMonth: '',
				successfully: false, //签到成功的提示
				description: '',
				getDialog: false, //领取奖励弹窗
				flag: false, //判断用户今天有没有签到
				authenticationDialog: false, //有没有实名
				authType: null
			}
		},
	watch: {
			month(newVal) {
				console.log('新日期', newVal);
				let pre = Number(this.month) - 1
				if (pre == 0) {
					this.preMoth = '1' + 2
				} else if (pre < 10) {
					this.preMoth = '0' + pre
				} else {
					this.preMoth = pre
				}
				let next = Number(this.month) + 1
				if (next > 12) {
					this.nextMoth = '0' + 1
				} else if (next < 10) {
					this.nextMoth = '0' + next
				} else {
					this.nextMoth = next
				}
			}
		},
onLoad: function(options) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			});
			this.authType = uni.getStorageSync('authObj').authType
			console.log('用户相关信息', this.authType);
			let now = new Date()
			this.year = now.getFullYear()
			this.month = now.getMonth() + 1
			let date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			let moth = ''
			if (m < 10) {
				moth = '0' + m
			} else {
				moth = m;
			}
			this.newDate = `${y}${moth}${d}`
			this.deMonth = `${y}${moth}`
			this.hadleCander(this.deMonth)
			setTimeout(() => {
				uni.hideLoading();
				this.dialog = true;
			}, 1500);
		},		


// 日历
			async hadleCander(month) {
				const res = await getUsersignCalendare({
					t: Date.parse(new Date()) / 1000,
					month: month,
				})
				this.calendarList = res.data.calendarList
				this.calendar = res.data
				console.log('日历', this.calendar.awardStatus);
				this.calendarList.forEach((item, index) => {
					if (item.status == 1 && item.recieveDay == 1 && this.calendar.awardStatus ==
						0) {
						this.getGifi = true
					}
					if (item.date == this.newDate) {
						if (item.status == 1) {
							this.showSign = false
						} else if (item.status == 2) {
							this.flag = true
						}
						console.log('当前的时间', item.status, this.flag);
					}
				})
				if (this.calendar.awardStatus == 3) {
					this.showSign = false
				}
				this.description =
					`进度为${this.calendar.consecutiveDays}/${this.calendar.target}，请继续努力哦~`
				console.log('res', this.calendarList)
			},			
//上个月按钮
			bindPreMonth() {
				let year = this.year
				let month = this.month
				//判断是否是1月
				if (month - 1 >= 1) {
					month = month - 1
				} else {
					month = 12
					year = year - 1
				}
				this.year = year
				this.month = month
				let newMoth = ''
				if (month < 10) {
					newMoth = `${year}0${month}`
				} else {
					newMoth = `${year}${month}`
				}
				console.log('this.month', this.month);

				this.hadleCander(newMoth)
			},

			//下个月按钮
			bindNextMonth() {
				let year = this.year
				let month = this.month
				//判断是否是12月
				if (month + 1 <= 12) {
					month = month + 1
				} else {
					month = 1
					year = year + 1
				}
				this.year = year
				this.month = month
				let newMoth = ''
				if (month < 10) {
					newMoth = `${year}0${month}`
				} else {
					newMoth = `${year}${month}`
				}
				this.hadleCander(newMoth)
			}