4.19

components/todayclass-box/todayclass-box.vue

@@ -23,9 +23,9 @@
 					{{classInfo.time}}
 				</view>
 				<u-tag :text="before" :type="beforeType" plain icon="hourglass"
-					v-if="classIndex === 0 && state != 'none'" @click="navVideoBefore">
+					v-if="classIndex === 0 && state != 'none'" @click="navVideoBefore(classCurrent-2)">
 				</u-tag>
-				<u-tag :text="now" type="success" icon="play-right" v-if="classIndex === 1" @click="navVideoNow">
+				<u-tag :text="now" type="success" icon="play-right" v-if="classIndex === 1" @click="navVideoNow(classCurrent-1)">
 				</u-tag>
 				<u-tag :text="after" type="error" :color="afterColor" :borderColor="afterColor" plain icon="pushpin"
 					v-if="classIndex === 2"></u-tag>
@@ -86,7 +86,7 @@
 					this.homeClassList = [{
 						name: '休息时间',
 						teacher: '孩子自由安排',
-						time: '点击查看课程列表'
+						time: '查看课程列表'
 					}]
 				}
 				//三节完整数据
@@ -129,16 +129,16 @@
 					url: '/subpkg/classlist/classlist'
 				})
 			},
-			navVideoBefore() {
+			navVideoBefore(index) {
 				if (this.before === '查看回放') {
 					uni.navigateTo({
-						url: '/subpkg/video/videopage'
+						url: `/subpkg/video/videopage?info=${index}`
 					})
 				}
 			},
-			navVideoNow() {
+			navVideoNow(index) {
 				uni.navigateTo({
-					url: '/subpkg/video/livepage'
+					url: `/subpkg/video/livepage?info=${index}`
 				})
 			},
 		},

components/top-box/top-box.vue

@@ -81,9 +81,9 @@
 			//学期选择
 			pickerConfirm(e) {
 				if (e.value[0] != this.semester) {
+					this.isLoading = true
 					//拼接图表数据
 					this.updateChildrenSemester(e.value[0])
-					this.isLoading = true
 					console.log(e.value[0], this.childreninfo.tmdid);
 					this.$initGrade(e.value[0], this.childreninfo.tmdid)
 					this.setSemesterPicker = false

pages.json

@@ -133,7 +133,7 @@
 			}, {
 				"path": "video/livepage",
 				"style": {
-					"navigationBarTitleText": "",
+					"navigationStyle": "custom",
 					"enablePullDownRefresh": false
 				}
 

pages/common/blockmsg.scss

@@ -24,9 +24,9 @@
 			color: $color-title;
 		}
 		.block-tag-box{
-			border-radius: 20rpx;
+			border-radius: 50rpx;
 			border: 1rpx solid $color-mixblue;
-			padding: 6rpx;
+			padding: 8rpx;
 			.block-tag{
 				font-size: 22rpx;
 				color: $color-mixblue;

pages/home/home.vue

@@ -35,12 +35,12 @@
 					<view class="t-icon t-icon-weizhidaka-dakacuowu" v-if="attendance==='未打卡'"
 						style="width:60rpx;height: 60rpx;background-repeat: no-repeat;margin-left: auto;"></view>
 				</view>
+				
 				<view class="state-box">
 					<view class="text-content">今日打卡:</view>
-
 					<view class="flex">
-						<view v-if="attendance==='已打卡'" class="t-icon t-icon-gou" style="width: 70rpx;height: 70rpx;"></view>
-						<view v-if="attendance==='未打卡'" class="t-icon t-icon-jinggao" style="width: 70rpx;height: 70rpx;"></view>
+						<view v-if="attendance==='已打卡'" class="t-icon t-icon-gou" style="width: 65rpx;height: 65rpx;"></view>
+						<view v-if="attendance==='未打卡'" class="t-icon t-icon-jinggao" style="width: 65rpx;height: 65rpx;"></view>
 						<view class="state"
 							:style="{backgroundColor: attendance==='已打卡'?'#4169E1':(attendance === '未打卡'?'#f9c752':'#FFF')}">
 							<view class="state-text">{{attendance}}</view>
@@ -48,10 +48,9 @@
 					</view>
 					
 					<view class="text-content">打卡时间:</view>
-
 					<view class="flex">
-						<view v-if="attendance==='已打卡'" class="t-icon t-icon-shijian1" style="width: 70rpx;height: 70rpx;"></view>
-						<view v-if="attendance==='未打卡'" class="t-icon t-icon-bangzhu" style="width: 70rpx;height: 70rpx;"></view>
+						<view v-if="attendance==='已打卡'" class="t-icon t-icon-shijian1" style="width: 65rpx;height: 65rpx;"></view>
+						<view v-if="attendance==='未打卡'" class="t-icon t-icon-bangzhu" style="width: 65rpx;height: 65rpx;"></view>
 						<view class="state"
 							:style="{backgroundColor: attendance==='已打卡'?'#4169E1':(attendance === '未打卡'?'#f9c752':'#FFF')}">
 							<view class="state-text">{{attendanceTime}}</view>
@@ -105,7 +104,7 @@
 	export default {
 		computed: {
 			...mapState('m_chart', ['homeData']),
-			...mapState('m_children', ['childreninfo', 'classList', 'records']),
+			...mapState('m_children', ['classList', 'records']),
 			...mapState('m_parent', ['myData'])
 		},
 		data() {
@@ -294,7 +293,7 @@
 			align-items: center;
 			justify-content: center;
 			border-radius: 50rpx;
-			height: 70rpx;
+			height: 65rpx;
 			width: 210rpx;
 		}
 	}

pages/homework/homework.vue

@@ -86,7 +86,7 @@
 							<view class="t-icon t-icon-daiban"></view>
 							<view class="item-text">{{item.detail.title}}</view>
 							<!-- 详情列表展示(评测,活动或者作业)信息 -->
-							<view style="display: flex; align-items: center;margin: 0 5rpx 0 auto;" @click="navData">
+							<view style="display: flex; align-items: center;margin: 0 5rpx 0 auto;" @click="navData(index)">
 								<view class="t-icon t-icon-fenlei"></view>
 								<view class="msg">详情列表</view>
 							</view>
@@ -94,7 +94,7 @@
 
 						<view style="margin-bottom: 20rpx;">
 							<view class="block-box" v-for="(i,x) in item.detail.data" :key="x">
-								<view class="index" style="height: 100rpx;"></view>
+								<view class="index" :style="{height: 100+'rpx',backgroundColor: current === 0 ? '#4169E1':(current === 1 ? '#ff8caf': '#f9c752')}"></view>
 								<view class="class-block" style="height: 100rpx; width: 90%;">
 									<view class="block-title">{{i.name}}</view>
 									<view class="block-tag-box">
@@ -227,10 +227,10 @@
 				this.updateActivityArea(activityDataTemp)
 			},
 			//导航到详情页面
-			navData() {
+			navData(index) {
 				this.updateHomeworkDetail(this.pageData[this.current].detail.data)
 				uni.navigateTo({
-					url: '/subpkg/detaillist/detaillist'
+					url: `/subpkg/detaillist/detaillist?index=${index}`
 				})
 			}
 

pages/my/my.vue

@@ -279,13 +279,13 @@
 						font-size: 32rpx;
 						font-weight: bolder;
 						margin: 20rpx 0;
-						color: #616161;
+						color: #576064;
 
 						.card-des {
 							margin-top: 10rpx;
 							font-weight: 400;
 							font-size: 24rpx;
-							color: #a6aaaf;
+							color: $color-subtitle;
 						}
 					}
 				}
@@ -354,11 +354,6 @@
 					}
 				}
 			}
-
-			.calendar {
-				z-index: 999;
-			}
 		}
-
 	}
 </style>

store/children.js

@@ -49,14 +49,7 @@ export default {
 		updateHomeworkDetail(state, homeworkDetail) {
 			state.homeworkDetail = homeworkDetail
 		},
-		//更新日历页未打卡数据
-		updateNoAttendNum(state, noAttendNum) {
-			state.calendar.noAttendNum = noAttendNum
-		},
-		//更新日历页已打卡数据
-		updateIsAttendNum(state, isAttendNum) {
-			state.calendar.isAttendNum = isAttendNum
-		},
+
 		
 		
 		//持久化存储
@@ -73,6 +66,15 @@ export default {
 			uni.setStorageSync('semesterList', JSON.stringify(state.semesterList))
 		},
 		
+		//更新日历页未打卡数据
+		updateNoAttendNum(state, noAttendNum) {
+			state.calendar.noAttendNum = noAttendNum
+		},
+		//更新日历页已打卡数据
+		updateIsAttendNum(state, isAttendNum) {
+			state.calendar.isAttendNum = isAttendNum
+		},
+		
 
 	},
 	//模块属性(数据包装)

subpkg/calendar/calendar.vue

@@ -5,7 +5,7 @@
 		<view class="card-box">
 
 			<view class="card-item">
-				<view class="total">
+				<view class="total" v-if="topImage === false">
 					<view class="total-title">本月打卡</view>
 					<view class="total-content">
 						<view class="number-box">
@@ -17,16 +17,20 @@
 							<view class="number-detail">缺卡次数</view>
 						</view>
 						<view class="number-box">
-							<text class="number" :style="{color: monthAttendQuality==='优秀'?'#4169E1':(monthAttendQuality === '良好'?'#f9c752':'#3B4144')}">{{monthAttendQuality}}</text>
+							<text class="number"
+								:style="{color: monthAttendQuality==='优秀'?'#4169E1':(monthAttendQuality === '良好'?'#f9c752':'#3B4144')}">{{monthAttendQuality}}</text>
 							<view class="number-detail">本月出勤质量</view>
 						</view>
 					</view>
 				</view>
+				<view class="flex" style="justify-content: center;" v-if="topImage === true">
+					<view class="image" :style="{backgroundImage:`url(${image})`}"></view>
+				</view>
 			</view>
 
 			<view class="card-item">
 				<view class="calendar_container">
-					<zsyCalendar :sundayIndex="6" @chooseDate="chooseDate"/>
+					<zsyCalendar :sundayIndex="6" @chooseDate="chooseDate" @change="change" />
 				</view>
 				<view class="state-box">
 					<view class="state"
@@ -40,7 +44,8 @@
 						</view>
 						<view class="flex">
 							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">出勤效率:</text>
-							<text class="msg-text" :style="{color: attendanceQuality==='优秀'?'#4169E1':(attendanceQuality === '良好'?'#f9c752':'#3B4144')}">{{attendanceQuality}}</text>
+							<text class="msg-text"
+								:style="{color: attendanceQuality==='优秀'?'#4169E1':(attendanceQuality === '良好'?'#f9c752':'#3B4144')}">{{attendanceQuality}}</text>
 						</view>
 					</view>
 				</view>
@@ -61,10 +66,12 @@
 			zsyCalendar
 		},
 		computed: {
-			...mapState('m_children', ['records','calendar']),
+			...mapState('m_children', ['records', 'calendar']),
 		},
 		data() {
 			return {
+				image: 'https://image.meiye.art/pic_1632658822816Dw1wc8QoTOnItNvJI76v6',
+				topImage: false,
 				//当日打卡信息
 				attendance: '',
 				attendanceTime: '',
@@ -72,6 +79,8 @@
 				//当月天数
 				// monthDates: '',
 				monthAttendQuality: '',
+				//当月
+				month: '',
 			};
 		},
 		onLoad(options) {
@@ -79,8 +88,18 @@
 			this.getMonthAttendQuality()
 		},
 		methods: {
+			//选中日期改变回调
+			change(e) {
+				if(e.month != this.month){
+					this.topImage = true
+				}else{
+					this.topImage = false
+				}
+			},
 			//今日打卡
 			getTodayAttendance() {
+				//获取当月
+				this.month = new Date().getMonth() + 1
 				//获得当前时间时间戳
 				let timeNow = (new Date()).format("yyyy-M-dd")
 				let timeArr = timeNow.split("-")
@@ -88,28 +107,31 @@
 				if (info.length === 0) {
 					//出勤状况
 					this.attendance = '未打卡',
-					//打卡时间
-					this.attendanceTime = '未记录',
-					//出勤质量
-					this.attendanceQuality = '未记录'
+						//打卡时间
+						this.attendanceTime = '未记录',
+						//出勤质量
+						this.attendanceQuality = '未记录'
 				} else {
 					this.attendance = '已打卡'
 					this.attendanceTime = info[0].time
-					this.attendanceQuality = info[0].time<='08:15'? '优秀':(info[0].time<='08:25'? '良好' : '较差')
+					this.attendanceQuality = info[0].time <= '08:15' ? '优秀' : (info[0].time <= '08:25' ? '良好' : '较差')
 				}
 			},
 			//判断本月出勤质量
 			getMonthAttendQuality() {
-				this.monthAttendQuality = this.calendar.noAttendNum <= 3? '优秀':(this.calendar.noAttendNum <= 6? '良好' : '较差')
+				this.monthAttendQuality = this.calendar.noAttendNum <= 3 ? '优秀' : (this.calendar.noAttendNum <= 6 ? '良好' :
+					'较差')
 			},
 			//选择日期
 			chooseDate(dateInfo, dateIndex) {
 				// console.log(dateInfo);
 				if (dateInfo.isAttend === 1) {
 					this.attendance = '已打卡'
-					this.attendanceTime = this.records.filter(x => x.date === dateInfo.date && x.month === dateInfo.month && x.year === x.year)[0].time
+					this.attendanceTime = this.records.filter(x => x.date === dateInfo.date && x.month === dateInfo
+						.month && x.year === x.year)[0].time
 					// console.log(info);
-					this.attendanceQuality = this.attendanceTime<='08:15'? '优秀':(this.attendanceTime<='08:25'? '良好' : '较差')
+					this.attendanceQuality = this.attendanceTime <= '08:15' ? '优秀' : (this.attendanceTime <= '08:25' ?
+						'良好' : '较差')
 				}
 				if (dateInfo.isAttend === 0) {
 					this.attendance = '未打卡'
@@ -236,4 +258,11 @@
 		display: flex;
 		align-items: center;
 	}
+	.image {
+		width: 45%;
+		height: 250rpx;
+		border-radius: $card-border-radius;
+		background-size: 100%;
+		background-repeat: no-repeat;
+	}
 </style>

subpkg/common/videopage.scss

@@ -0,0 +1,75 @@
+.container{
+	width: 100%;
+	
+		.block-tag-box {
+			margin-left: 40rpx;
+			border-radius: 50rpx;
+			border: 1rpx solid $color-mixblue;
+			padding: 8rpx;
+		
+			.block-tag {
+				font-size: 22rpx;
+				color: $color-mixblue;
+			}
+		}
+		
+		.video-box {
+			width: 100%;
+		
+			.video {
+				width: 100%;
+			}
+		}
+		
+		.info-box {
+			width: 650rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 30rpx 50rpx;
+			height: 250rpx;
+			background-color: #FFF;
+		
+			.info-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: $color-title;
+			}
+		
+			.info-name {
+				margin-left: 40rpx;
+				font-size: 40rpx;
+				font-weight: bold;
+				color: $color-title;
+			}
+		
+			.info-time {
+				font-size: 22rpx;
+				color: $color-subtitle;
+			}
+		
+			.info-mini {
+				font-size: 20rpx;
+				margin-top: 10rpx;
+				font-weight: bold;
+				color: $color-title;
+			}
+		}
+		
+		.flex {
+			display: flex;
+			align-items: center;
+		}
+		
+		.flex-column {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+		}
+		
+		.t-icon {
+			width: 40rpx;
+			height: 40rpx;
+		}
+	}
+	

subpkg/detaillist/detaillist.vue

@@ -11,10 +11,15 @@
 		<view class="detail-box" v-if="!loading">
 			<view class="detail-item" v-for="(item,index) in homeworkDetail" :key="index">
 				<view class="flex" style="width: 100%;">
-					<view class="t-icon t-icon-daiban"></view>
-					<view class="name">{{item.name}}</view>
+					<view class="capsule" :style="{backgroundColor: current == 0 ? '#4169E1':(current == 1 ? '#ff8caf': '#f9c752')}">
+						<view class="t-icon t-icon-buke" v-if="current == 0"></view>
+						<view class="t-icon t-icon-zuoye" v-if="current == 1"></view>
+						<view class="t-icon t-icon-kehugenjin" v-if="current == 2"></view>
+						<view class="name">{{item.name}}</view>
+					</view>
+					
 					<view class="t-icon t-icon-yiwancheng" v-if="item.finish"
-						style="margin-left: auto; width: 90rpx; height: 90rpx;"></view>
+						style="margin-left: auto; width: 80rpx; height: 80rpx;"></view>
 				</view>
 				<!-- 正文 -->
 				<view class="content-box">
@@ -56,9 +61,12 @@
 				loading: true,
 				height: ['160px', '160px', '160px', '160px', '160px', '160px', '160px', '160px', '160px', '160px'],
 				width: ['100%', '100%', '100%', '100%', '100%', '100%', '100%', '100%', '100%', '100%'],
+				current: '',
 			};
 		},
-		onLoad() {
+		onLoad(options) {
+			this.current = options.index
+			console.log(this.current);
 			// 延时
 			uni.$u.sleep(1500).then(() => {
 				this.loading = false
@@ -81,34 +89,43 @@
 			margin-bottom: 20rpx;
 			background-color: #fff;
 			padding: 20rpx;
-
-			.t-icon {
-				width: 40rpx;
-				height: 40rpx;
-			}
-
-			.name {
-				font-size: 32rpx;
-				font-weight: bold;
-				color: $color-title;
+			.capsule{
 				margin-left: 10rpx;
-				line-height: 90rpx;
+				display: flex;
+				align-items: center;
+				padding: 0 20rpx;
+				background-color: $color-mixblue;
+				border-radius: 100rpx;
+				height: 60rpx;
+				.t-icon {
+					width: 30rpx;
+					height: 30rpx;
+				}
+				
+				.name {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #FFF;
+					margin-left: 10rpx;
+					line-height: 90rpx;
+				}
 			}
 		}
 
 		.content-box {
-			padding: 0 10rpx;
+			padding-top: 10rpx;
 			display: flex;
 			flex-direction: column;
 
 			.subtitle {
+				padding: 10rpx 10rpx 10rpx 20rpx;
 				font-size: 26rpx;
 				font-weight: bold;
 				color: $color-title;
 			}
 			
 			.content-detail-box{
-				margin: 40rpx 0 20rpx 0;
+				margin: 20rpx 0 20rpx 0;
 				padding: 20rpx;
 				background-color: #f6f6f6;
 				border-radius: $card-border-radius;

subpkg/video/livepage.vue

@@ -1,19 +1,70 @@
 <template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-
+	<view class="container">
+		<back text="课程直播"></back>
+		<view class="video-box">
+			<video class="video" id="classVideo" :src="video" controls></video>
+		</view>
+		<view class="info-box">
+			<view class="flex" style="justify-content: space-between;">
+				<view class="flex">
+					<view class="info-text">当前科目:</view>
+					<view class="info-name">{{classInfo.name}}</view>
+				</view>
+				<view class="flex">
+					<view class="info-time">时间: {{classInfo.time}}</view>
+				</view>
+			</view>
+			<view class="flex">
+				<view class="info-text">授课老师:</view>
+				<view class="block-tag-box">
+					<view class="block-tag">{{classInfo.teacher}}</view>
+				</view>
+			</view>
+			<view class="flex" style="justify-content: space-around;">
+				<view class="flex-column">
+					<view class="t-icon t-icon-tongzhihuotixing"></view>
+					<view class="info-mini">通知</view>
+				</view>
+				<view class="flex-column">
+					<view class="t-icon t-icon-baocun"></view>
+					<view class="info-mini">保存</view>
+				</view>
+				<view class="flex-column">
+					<view class="t-icon t-icon-fenxiang"></view>
+					<view class="info-mini">分享</view>
+				</view>
+			</view>
+		</view>
+		<!-- 缺省区域 -->
+		<view style="margin-top: 150rpx;">
+			<u-empty mode="data"></u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	export default {
+		computed: {
+			...mapState('m_children', ['classList'])
+		},
+		data() {
+			return {
+				video: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
+				classInfo: '',
+			};
+		},
+		onLoad(options) {
+			this.classInfo = this.classList[options.info]
+			console.log(this.classInfo);
+			this.videoContext = uni.createVideoContext('classVideo')
+		},
+		methods: {}
+	}
+</script>
+
+<style lang="scss">
+@import '@/subpkg/common/videopage.scss';
 </style>

subpkg/video/videopage.vue

@@ -1,42 +1,70 @@
 <template>
-	<view>
-		<back text="课程直播"></back>
+	<view class="container">
+		<back text="课程回放"></back>
 		<view class="video-box">
-			<video class="video" id="classVideo" :src="video" @error="videoErrorCallback" controls></video>
+			<video class="video" id="classVideo" :src="video" controls></video>
+		</view>
+		<view class="info-box">
+			<view class="flex" style="justify-content: space-between;">
+				<view class="flex">
+					<view class="info-text">当前科目:</view>
+					<view class="info-name">{{classInfo.name}}</view>
+				</view>
+				<view class="flex">
+					<view class="info-time">时间: {{classInfo.time}}</view>
+				</view>
+			</view>
+			<view class="flex">
+				<view class="info-text">授课老师:</view>
+				<view class="block-tag-box">
+					<view class="block-tag">{{classInfo.teacher}}</view>
+				</view>
+			</view>
+			<view class="flex" style="justify-content: space-around;">
+				<view class="flex-column">
+					<view class="t-icon t-icon-tongzhihuotixing"></view>
+					<view class="info-mini">通知</view>
+				</view>
+				<view class="flex-column">
+					<view class="t-icon t-icon-baocun"></view>
+					<view class="info-mini">保存</view>
+				</view>
+				<view class="flex-column">
+					<view class="t-icon t-icon-fenxiang"></view>
+					<view class="info-mini">分享</view>
+				</view>
+			</view>
+		</view>
+		<!-- 缺省区域 -->
+		<view style="margin-top: 150rpx;">
+			<u-empty mode="data"></u-empty>
 		</view>
 	</view>
 </template>
 
 <script>
+	import {
+		mapState
+	} from 'vuex'
 	export default {
+		computed: {
+			...mapState('m_children', ['classList'])
+		},
 		data() {
 			return {
 				video: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
+				classInfo: '',
 			};
 		},
-		onLoad() {
+		onLoad(options) {
+			this.classInfo = this.classList[options.info]
+			console.log(this.classInfo);
 			this.videoContext = uni.createVideoContext('classVideo')
 		},
-		methods: {
-			videoErrorCallback(e) {
-				uni.showModal({
-					content: e.target.errMsg,
-					showCancel: false
-				})
-			},
-
-
-
-		}
+		methods: {}
 	}
 </script>
 
 <style lang="scss">
-	.video-box {
-		width: 100%;
-
-		.video {
-			width: 100%;
-		}
-	}
+@import '@/subpkg/common/videopage.scss';
 </style>

subpkg/z-calendar/zsy-calendar.vue

@@ -29,16 +29,16 @@
 			</swiper>
 
 			<!-- 收缩情况下的日历轮播 -->
-			<swiper v-else key="shrinkSwiper" circular :style="{height: swiperHeight('close')}" :current="shrinkCurrent"
+			<!-- <swiper v-else key="shrinkSwiper" circular :style="{height: swiperHeight('close')}" :current="shrinkCurrent"
 				:duration="duration" :skip-hidden-item-layout="true" @change="e => shrinkCurrent = e.detail.current">
 				<swiper-item v-for="(swiper, swiperIndex) in 3" :key="swiperIndex" class="swiper-item">
 					<DateBox :dates="calendarSwiperShrinkDates[swiperIndex]" :cellHeight="cellHeight"
 						:dateActiveColor="dateActiveColor" :swiperMode="swiperMode" @chooseDate="chooseShrinkDate" />
 				</swiper-item>
-			</swiper>
+			</swiper> -->
 		</view>
 
-		<!-- 日历切换模式 -->
+		<!-- 日历切换模式
 		<!-- <view class="calendar_toggle" @tap="swiperMode = swiperMode === 'open' ? 'close' : 'open'">
 			<view class="icon" :class="{down: swiperMode === 'close'}"></view>
 		</view> -->
@@ -47,7 +47,8 @@
 
 <script>
 	import {
-		mapState,mapMutations
+		mapState,
+		mapMutations
 	} from 'vuex'
 	import {
 		parseTime,
@@ -100,11 +101,10 @@
 				swiperMode: this.mode, // 日历轮播显示模式 open：展开 close：收缩
 				dateCache: {}, // 日期缓存
 				emitTimer: null, // 日期改变向父级传递当前选中日期计时器
-				dateClick: false ,// 是否进行了日期的点击选择
-				noAttendArr: [],//缺卡天数暂存
-				noAttend: [],//缺卡天数
-				isAttendArr: [],//打卡天数暂存
-				isAttend: [],//打卡天数
+				dateClick: false, // 是否进行了日期的点击选择
+
+				noAttend: [], //缺卡天数暂存
+				isAttend: [], //打卡天数暂存
 			}
 		},
 		computed: {
@@ -184,7 +184,7 @@
 						}
 						this.emitTimer = setTimeout(() => {
 							this.emitDate()
-						}, this.duration + 200)
+						}, this.duration + 1)
 					}
 				}
 			}
@@ -193,7 +193,7 @@
 			this.init() // 初始化数据
 		},
 		methods: {
-			...mapMutations('m_children', ['updateNoAttendNum','updateIsAttendNum']),
+			...mapMutations('m_children', ['updateNoAttendNum', 'updateIsAttendNum']),
 			// 初始化数据
 			init() {
 				if (this.selectedDate === null) this.selectedDate = this.today // 默认选中日期为当天
@@ -218,8 +218,6 @@
 				const year = this.getAssignDateInfo(false, 0)
 				const month = this.getAssignDateInfo(false, 1)
 				const cur = this.generateCalendar(year, month)
-				this.noAttend = this.noAttendArr
-				this.isAttend = this.isAttendArr
 				this.updateIsAttendNum(this.isAttend)
 				this.updateNoAttendNum(this.noAttend)
 				const prev = this.generateCalendar(month === 1 ? year - 1 : year, month === 1 ? 12 : month - 1)
@@ -237,9 +235,9 @@
 				// 初始化日期信息完毕执行回调函数
 				cb && cb()
 			},
-			
-			
-			
+
+
+
 			// 生成展开的日历数据
 			generateCalendar(year, month) {
 				let calendarDate = []
@@ -276,7 +274,7 @@
 							isSelected: false,
 							isToday: false,
 							type: 'cur',
-							isAttend: 0,//未打卡
+							isAttend: 0, //未打卡
 						}
 
 						// 今天的日期在不在里面
@@ -292,7 +290,7 @@
 								month: month === 12 ? 1 : month + 1,
 								date: i,
 								type: 'next',
-								isAttend: 0,//未打卡
+								isAttend: 0, //未打卡
 							}
 							this.theDateIsToday(item)
 							calendarDate.push(item)
@@ -312,37 +310,40 @@
 				}
 				//当月时间
 				let currentMonth = (new Date).getMonth() + 1;
-				//当月缺卡记录
-				let noAttendArr = 0
-				//当月打卡记录
-				let isAttendArr = 0
 				//判断是否打卡和时间对比并修改数据
-				let todayDate = Date.now()//毫秒数
+				let todayDate = Date.now() //毫秒数
 				calendarDate.forEach(item => {
-					if (this.records.find(x => x.month === item.month && x.year === item.year && x.date === item.date)) {
-						item.isAttend = 1//已打卡
+					if (this.records.find(x => x.month === item.month && x.year === item.year && x.date === item
+							.date)) {
+						item.isAttend = 1 //已打卡
 					}
 					//判断是否在当前日期之后
 					let valueTime = (new Date(`${item.year}/${item.month}/${item.date}`)).getTime();
-					 if(valueTime>todayDate){
-					 	item.isAttend = -1//时间未到
-					 }
-					//当月缺卡次数
-					if(item.month === currentMonth && item.isAttend === 0 && item.type === 'cur'){
-						noAttendArr++
-					}
-					//当月打卡次数
-					if(item.month === currentMonth && item.isAttend === 1 && item.type === 'cur'){
-						isAttendArr++
+					if (valueTime > todayDate) {
+						item.isAttend = -1 //时间未到
 					}
+					//判断是否为周末
+					// if(){}
 				})
-				this.noAttendArr = noAttendArr
-				this.isAttendArr = isAttendArr
-				
+				//未打卡
+				let noAttendArr = calendarDate.filter(x => x.month === currentMonth && x.isAttend === 0 && x.type ===
+					'cur')
+				//打卡
+				let isAttendArr = calendarDate.filter(x => x.month === currentMonth && x.isAttend === 1 && x.type ===
+					'cur')
+				// //前一月打卡
+				// let prevIsAttendArr = calendarDate.filter(x => x.month === currentMonth-1 && x.isAttend === 1 && x.type ===
+				// 	'prev')
+				// let prevNoAttendArr = calendarDate.filter(x => x.month === currentMonth-1 && x.isAttend === 0 && x.type ===
+				// 	'prev')
+				// console.log(prevIsAttendArr);
+				// console.log(prevNoAttendArr);
+				this.noAttend = noAttendArr.length
+				this.isAttend = isAttendArr.length
+
 				return calendarDate
 			},
 
-				
 			// 判断日期是否为今天
 			theDateIsToday(item) {
 				if (item.year + '-' + item.month + '-' + item.date === this.getAssignDateInfo(true, 0) + '-' + this

utils/APIHandler.js

@@ -49,7 +49,7 @@ function initHome() {
 	}, {
 		name: '外语',
 		teacher: '张老师',
-		time: '11:00-11:50',
+		time: '10:50-11:50',
 		timeFrame: '上午第三节'
 	}, {
 		name: '思品',
@@ -64,7 +64,7 @@ function initHome() {
 	}, {
 		name: '科学',
 		teacher: '张老师',
-		time: '16:00-16:50',
+		time: '16:00-18:50',
 		timeFrame: '上午第三节'
 	}]
 	this.$store.commit('m_children/updateClassList', classList)
@@ -133,6 +133,11 @@ function initHome() {
 		month: 4,
 		year: 2022,
 		time: '08:20'
+	},{
+		date: 19,
+		month: 4,
+		year: 2022,
+		time: '08:20'
 	}]
 	this.$store.commit('m_children/updateRecords', records)
 	let homeData = {