uav-uniapp-demo-24-8-18/pages/signIn/signIn.vue

<template>
	<view class="sigin-in bx">
		<navbar :leftClick="leftClick" :title="$t('page.signIn.title')"></navbar>

		<view class="sigin-in-content">
			<!-- <view class="title">{{ $t('page.signIn.title') }}</view> -->
			<view class="numberOfSays">{{ $t('page.signIn.sign',[numberOfSays]) }}</view>

			<view class="date-info">
				<view class="month-info">
					<view class="left-arrow">
						<image @click="changeMonth(0)" src="/static/signin/arrow.png" mode="widthFix"></image>
					</view>
					
					<view class="month">{{ $t(`page.signIn.${monthIndex}`) }}</view>
					
					<view class="right-arrow">
						<image @click="changeMonth(1)" src="/static/signin/arrow.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="day-list">
					<view v-for="(item,index) in dayList" :key="index" class="day-item">
						<view v-if="item.sign" class="check-img">
							<image src="/static/signin/check.png" mode="widthFix"></image>
						</view>
						<view class="sort">{{ $t('page.signIn.day',[index + 1])}}</view>
						<view class="img-box">
							<image src="/static/signin/gift.png" mode="widthFix"></image>
						</view>
						<view class="day">{{ forMateDate(item) }}</view>
					</view>
				</view>

				<view class="tips">{{ tips[type[$i18n.locale]] }}</view>

				<view  :class="{ signedIn : userInfo.sginState == 1 }" @click="submitSignin" class="submit">{{ $t('page.signIn.title') }}</view>

			</view>

		</view>

	</view>
</template>

<script>
	import navbar from '@/components/base/m-navbar.vue'

	export default {
		components: {
			navbar
		},
		data() {
			return {
				numberOfSays: 0, //签到天数
				dayList: [], //日期列表
				tips: '', //提示
				type: {
					en: 'keyEnglish',
					es: "keySpanish",
					"zh": "keyChinese"
				},
				monthIndex: 0, //当前月份(0-11)
				signinList : [],		//签到列表
				userInfo : {}
			}
		},
		onShow() {
			this.initDate()
			this.getTips()
			this.getSigninList()
			this.getUserInfo()
		},
		methods: {
			leftClick() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},

			//初始化日期列表
			initDate() {
				if(this.dayList.length >= 28) return
				//保存当前月份
				this.monthIndex = this.$dayjs().month();
				// 获取当前日期
				let now = this.$dayjs();
				// 获取当前月最后一天的日期  
				let lastDayOfMonth = now.endOf('month');
				// 获取当前月的天数
				let daysInMonth = lastDayOfMonth.date();
				//获取当前月的第一天
				var firstDay = this.$dayjs().date(1)
				this.dayList.push(firstDay)
				//获取一个月的所有日期
				for (let i = 1; i < daysInMonth; i++) {
					this.dayList.push(this.$dayjs(firstDay).add(i, 'day'))
				}
			},

			//格式化时间
			forMateDate(day) {
				return this.$dayjs(day).format("MM-DD")
			},

			//获取已签到列表
			getSigninList() {
				this.request('getSignRecord').then(res => {
					if (res.code == 200) {
						this.signinList = res.result
						this.updateSigninState()
					}
				})
			},

			//获取提示签到说明
			getTips() {
				this.request('getTips').then(res => {
					if (res.code == 200) {
						this.tips = res.result
					}
				})
			},

			//签到
			submitSignin(day) {
				this.$play()
				if(this.userInfo.sginState == 1){
					return uni.$u.toast(this.$t('message.34'))
				}
				this.request('sign').then(res => {
					if (res.code == 200) {
						uni.$u.toast(this.$t('message.35'))
						this.getSigninList()
					}
				})
			},

			//修改当前月份
			changeMonth(type) {
				this.$play()
				if (!type) {
					if(this.monthIndex <= 0) return
					// 获取当前月份之前的月份
					this.monthIndex -= 1;
					this.getDays()
				} else {
					if(this.monthIndex >= 11) return
					//获取当前月份之后的月份
					this.monthIndex += 1
					this.getDays()
				}
			},
			
			//获取过去或者未来的月份所有天
			getDays(){
				// 使用当前年份和新的月份索引创建一个日期对象
				let firstDayOfMonth = this.$dayjs().year(this.$dayjs().year()).month(this.monthIndex).startOf('month');
				
				// 获取当前月之前月份的最后一天  
				let lastDayOfMonth = firstDayOfMonth.endOf('month');
				
				// 获取当前月之前月份的天数  
				let daysInMonth = lastDayOfMonth.date();
				
				// 初始化日期列表  
				this.dayList = [];
				
				// 遍历这个月的每一天  
				for (let i = 1; i <= daysInMonth; i++) {
					// 添加每一天到列表中  
					this.dayList.push(firstDayOfMonth.add(i - 1, 'day'));
				}
				
				//更新签到状态
				this.updateSigninState()
			},
			
			//更新签到状态
			updateSigninState(){
				this.signinList.forEach(item => {
					let signDate = this.$dayjs(item.signTime).format("YYYY-MM-DD")
					this.dayList.forEach(day => {
						if (day.isSame(signDate, 'day')) {
							this.$set(day, 'sign', true)
						}
					})
					//统计用户选择的月份签到天数
					this.countSigninDayNum()
				})
			},
			
			//统计用户选择的月份签到天数
			countSigninDayNum(){
				this.numberOfSays = 0;
				let lastIndex = this.getLastDayIndex()
				//计算选择月份连续签到天数
				for(let j = lastIndex ; j >= 0 ; j--){
					if(this.dayList[j].sign){
						this.numberOfSays++
					}else{
						return
					}
				}
			},
			
			//获取用户选择月份最后一天签到的索引
			getLastDayIndex() {  
			    for (let i = this.dayList.length - 1; i >= 0; i--) {  
			        if (this.dayList[i].sign) {  
			            return i;
			        }  
			    }  
			},
			
			//获取用户信息(用户判断用户是否已签到)
			getUserInfo() {
				this.request('userInfo').then(res => {
					if (res.code == 200) {
						this.userInfo = res.result.userInfo
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sigin-in {
		// background: black;
		padding-bottom: 80rpx;

		.sigin-in-content {
			width: 96%;
			margin: 0 auto;

			.numberOfSays {
				text-align: center;
				padding: 20rpx 0rpx;
			}

			.date-info {
				// background: $uni-bg-color-app;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;

				.month-info {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 20rpx;

					.month {
						background: $uni-bg-color-app;
						color: $uni-text-color-inverse;
						padding: 10rpx;
						border-radius: 10rpx;
						margin: 0rpx 15rpx;
						font-size: 30rpx;
					}

					image {
						width: 30rpx;
					}

					.right-arrow {
						image {
							transform: rotate(-180deg);
						}
					}
				}

				.day-list {
					display: flex;
					flex-wrap: wrap;

					.day-item {
						background: $uni-bg-color-app;
						color: $uni-text-color-inverse;
						position: relative;
						flex-shrink: 0;
						width: calc(20% - 7px);
						// background: #565656;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
						margin-right: calc(35px / 4);
						box-sizing: border-box;
						padding: 10rpx;

						&:nth-child(5n) {
							margin-right: 0rpx;
						}

						.check-img {
							position: absolute;
							right: 4rpx;
							top: -4rpx;

							image {
								width: 30rpx;
							}
						}

						image {
							width: 40rpx;
							margin: 10rpx 0rpx;
						}

						.sort {
							font-size: 20rpx;
						}

						.day {
							font-size: 20rpx;
							border-radius: 20rpx;
							background: #66B53B;
						}

						view {
							display: flex;
							justify-content: center;
						}
					}
				}

				.tips {
					color: #888888;
					font-size: 20rpx;
					text-align: center;
					margin: 20rpx 0rpx;
				}

				.submit {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
					background: $uni-bg-color-app;
					color: $uni-text-color-inverse;
					border-radius: 40rpx;
					margin-bottom: 20rpx;
				}
				
				.signedIn{
					background: #ccc;
				}

			}

		}
	}
</style>