打卡页面

information/children.js

@@ -98,15 +98,39 @@ export default {
 		],
 		//打卡记录
 		records: [{
-			date: 15,
+			date: 28,
+			month: 3,
+			year: 2022
+		},{
+			date: 29,
+			month: 3,
+			year: 2022
+		},{
+			date: 30,
+			month: 3,
+			year: 2022
+		},{
+			date: 31,
+			month: 3,
+			year: 2022
+		}, {
+			date: 2,
 			month: 4,
 			year: 2022
 		}, {
-			date: 16,
+			date: 3,
 			month: 4,
 			year: 2022
 		}, {
-			date: 17,
+			date: 4,
+			month: 4,
+			year: 2022
+		},{
+			date: 5,
+			month: 4,
+			year: 2022
+		},{
+			date: 6,
 			month: 4,
 			year: 2022
 		}],

pages/home/home.vue

@@ -48,7 +48,7 @@
 						</view>
 					</view>
 					<view class="home-title-text">
-						<view class="msg">出勤质量:</view>
+						<view class="msg">出勤状况:</view>
 						<view class="card-content">{{attendanceData.attendanceQuality}}</view>
 					</view>
 				</view>

subpkg/calendarmsg/calendarmsg.vue

@@ -9,12 +9,12 @@
 					<view class="total-title">本月汇总</view>
 					<view class="total-content">
 						<view class="number-box">
-							<view class="number">15</view>
+							<view class="number">{{records.length}}</view>
 							<view class="number-detail">打卡次数</view>
 						</view>
 						<view class="number-box">
-							<view class="number">2</view>
-							<view class="number-detail">迟到次数</view>
+							<view class="number">1</view>
+							<view class="number-detail">缺卡次数</view>
 						</view>
 						<view class="number-box">
 							<view class="number">优秀</view>
@@ -26,10 +26,11 @@
 
 			<view class="card-item">
 				<view class="calendar_container">
-					<zsyCalendar :sundayIndex="6" @change="dateHandler"/>
+					<zsyCalendar :sundayIndex="6" @change="dateHandler" @chooseDate="chooseDate" />
 				</view>
 				<view class="state-box">
-					<view class="state">
+					<view class="state"
+						:style="{backgroundColor: attendance==='已打卡'?'#3C9CFF':(attendance === '未打卡'?'#f9c752':'#bebebe')}">
 						<view class="state-text">{{attendance}}</view>
 					</view>
 					<view class="msg-box">
@@ -38,10 +39,9 @@
 							<text class="msg-text">{{attendanceTime}}</text>
 						</view>
 						<view class="flex">
-							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">本周出勤质量:</text>
+							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">出勤状况:</text>
 							<text class="msg-text">{{attendanceQuality}}</text>
 						</view>
-
 					</view>
 				</view>
 			</view>
@@ -51,6 +51,9 @@
 </template>
 
 <script>
+	import {
+		mapState,
+	} from 'vuex'
 	import getdata from '../../common/data.js'
 	import zsyCalendar from '@/subpkg/zsy-calendar/zsy-calendar.vue'
 	export default {
@@ -58,12 +61,17 @@
 		components: {
 			zsyCalendar
 		},
+		computed: {
+			...mapState('m_children', ['records']),
+		},
 		data() {
 			return {
 				//当日打卡信息
 				attendance: '',
 				attendanceTime: '',
-				attendanceQuality: ''
+				attendanceQuality: '',
+				//当月天数
+				// monthDates: '',
 			};
 		},
 		onLoad(options) {
@@ -73,9 +81,26 @@
 		},
 		methods: {
 			//日历事件
-			dateHandler(e) {
-				console.log(e)
+			dateHandler(e) {},
+			//选择日期
+			chooseDate(dateInfo, dateIndex) {
+				if (dateInfo.isAttend === 1) {
+					this.attendance = '已打卡'
+					this.attendanceTime = '08:27'
+					this.attendanceQuality = '良好'
+				}
+				if (dateInfo.isAttend === 0) {
+					this.attendance = '未打卡'
+					this.attendanceTime = '无打卡时间'
+					this.attendanceQuality = '无记录'
+				}
+				if (dateInfo.isAttend === -1) {
+					this.attendance = '未来时'
+					this.attendanceTime = '无打卡时间'
+					this.attendanceQuality = '无记录'
+				}
 			},
+
 		}
 	}
 </script>
@@ -112,40 +137,45 @@
 	.total {
 		height: 250rpx;
 		width: 100%;
-		
+
 		.total-title {
 			font-size: 32rpx;
 			font-weight: bold;
 			color: #2C2C2C;
 			margin: 30rpx 30rpx 0rpx 30rpx;
 		}
-		.total-content{
+
+		.total-content {
 			display: flex;
 			align-items: center;
 			justify-content: space-around;
 			height: 175rpx;
-			.number-box{
+
+			.number-box {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				.number{
+
+				.number {
 					font-size: 46rpx;
 					font-weight: bold;
 					color: #2C2C2C;
 				}
-				.number-detail{
+
+				.number-detail {
 					margin-top: 10rpx;
 					font-size: 28rpx;
 					color: #afafaf;
 				}
 			}
-			
+
 		}
 	}
 
 	.state-box {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		height: 200rpx;
 		width: 100%;
 
@@ -153,14 +183,13 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			margin: 20rpx;
 			border-radius: 100%;
-			height: 130rpx;
-			width: 130rpx;
-			background-color: #3C9CFF;
+			margin: 20rpx;
+			height: 150rpx;
+			width: 150rpx;
 
 			.state-text {
-				font-size: 28rpx;
+				font-size: 32rpx;
 				font-weight: bold;
 				color: #FFF;
 			}

subpkg/zsy-calendar/dateBox.vue

@@ -11,7 +11,7 @@
 				<view class="calendar_date__number">{{ dateInfo.date }}</view>
 				<view class="calendar_date__isToday" v-if="dateInfo.isToday"
 					:style="{ backgroundColor: dateActiveColor }"></view>
-				<view class="calendar_date__cricle"></view>
+				<view class="calendar_date__cricle" :style="{backgroundColor: dateInfo.isAttend === 1 ? '#0080ff' : (dateInfo.isAttend === -1 ? '#FFF' : '#f9c752')}"></view>
 			</view>
 		</view>
 	</view>
@@ -34,10 +34,6 @@
 				type: Number,
 				default: 75
 			},
-			dateAttendanceColor: { // 完成打卡颜色
-				type: String,
-				default: '#89d0ff'
-			},
 			dateActiveColor: { // 日期选中颜色
 				type: String,
 				default: '#3C9CFF'
@@ -51,49 +47,9 @@
 			//选择时间
 			chooseDate(dateInfo, dateIndex) {
 				this.$emit('chooseDate', dateInfo, dateIndex)
-				console.log('dateInfo', dateInfo);
 			},
-			//判断传入数据与内容是否相同，相同则设置已打卡属性为true
-			setHasClockDate() {
-				//没有返回值，直接修改原数组
 
-				// this.dates.forEach(item => {
-				// 	for (let i  in this.records) {
-				// 		console.log(item.year === this.records[i].year && item.month === this.records[i].month && item.date === this.records[i].date,'33333')
-				// 		if (item.year === this.records[i].year && item.month === this.records[i].month && item.date === this.records[i].date) 
-				// 		{
-				// 			console.log(item)
-				// 			item.key = 1
-				// 		} else {
-				// 			item.key = 0
-				// 		}
-				// 	}
-				// })
-				
-				// for(let i in this.dates){
-				// 	let years=this.dates[i].year
-				// 	let month=this.dates[i].month
-				// 	let date=this.dates[i].date
-				// 	for(let y in this.records){
-				// 		this.records[y].year === years && this.records[y].month === month && this.records[y].date ===date ? this.dates[i].key=true:this.dates[i].key=false
-				// 	}
-				// }
-					for(let i in this.records){
-						let a =this.records[i].year
-						let b=this.records[i].month
-						let c=this.records[i].date
-						for(let y in this.dates){
-							console.log(this.dates[y].year == a,this.dates[y].month == b,this.dates[y].date == c,'3333')
-							this.dates[y].year == a && this.dates[y].month == b && this.dates[y].date == c ? this.dates[y].key=true:this.dates[y].key=false
-						}
-					}
-
-				console.log('dates', this.dates);
-			}
 		},
-		created() {
-			this.setHasClockDate()
-		}
 	}
 </script>