第五期

pages2/plan/index.vue

@@ -3,7 +3,51 @@
 		<nav-bar title="学习计划"></nav-bar>
 		<view v-if="havePlan">
 			<view class="card" v-if="havePlan">
-				<view class="date_t1">
+				<swiper :style="{height:!isOpen?'550rpx':'260rpx'}" class="swiper"  :current="swiperIndex" :duration="duration">
+					<swiper-item v-for="(swiperItem,swiperIndex) in swiperList" :key="swiperIndex">
+						<view class="date_t1">
+							<!-- <u-icon name="arrow-left" size="28" v-if="havePreviousMonth" @click="swipeMonth(-1)"></u-icon> -->
+							<text style="padding: 0 15rpx;">{{ swiperItem.year }}年 {{ swiperItem.month }}月</text>
+							<!-- <u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon> -->
+						</view>
+						<view style="width: 100%;margin-top: 20rpx;">
+							<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
+						</view>
+						<view style="width: 100%;margin-top: 20rpx;">
+							<view v-for="(item, index) in swiperItem.dayStudyList" :key="index" class="date_num">
+								<view v-if="item.color == 0" @click="itemClick(item,index)" class="date_num_color0" :class="{active_color:item.date == activeDate}" v-show="item.date > 0">
+									{{ item.date }}
+									<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+									<view v-if="item.dot" class="date_dot"></view>
+								</view>
+								<view v-if="item.color == 1" @click="itemClick(item,index)" class="date_num_color1"  :class="{active_color:item.date == activeDate}">
+									{{ item.date }}
+									<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+									<view v-if="item.dot" class="date_dot"></view>
+								</view>
+								<view v-if="item.color == 2" @click="itemClick(item,index)" class="date_num_color2"  :class="{active_color:item.date == activeDate}">
+									{{ item.date }}
+									<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+									<view v-if="item.dot" class="date_dot"></view>
+								</view>
+								<view v-if="item.color == 3" @click="itemClick(item,index)" class="date_num_color3"  :class="{active_color:item.date == activeDate}">
+									{{ item.date }}
+									<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+									<view v-if="item.dot" class="date_dot"></view>
+								</view>
+							</view>
+						</view>
+						<view style="width: 100%;display: flex;justify-content: center;" v-if="isOpen == false">
+							<view @click="oepn_calendar" style="height: 20rpx;width: 40rpx;padding:20rpx 0;"><view class="date_line"></view></view>
+						</view>
+						<view style="width: 100%;display: flex;justify-content: center;" v-else>
+							<image class="date_line_close" @click="close_calendar" src="/static/close_card.png"></image>
+						</view>
+					</swiper-item>
+					
+				</swiper>
+				
+				<!-- <view class="date_t1">
 					<u-icon name="arrow-left" size="28" v-if="havePreviousMonth" @click="swipeMonth(-1)"></u-icon>
 					<text style="padding: 0 15rpx;">{{ calendarStudyVo.year }}年 {{ calendarStudyVo.month }}月</text>
 					<u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon>
@@ -40,9 +84,10 @@
 				</view>
 				<view style="width: 100%;display: flex;justify-content: center;" v-else>
 					<image class="date_line_close" @click="close_calendar" src="/static/close_card.png"></image>
-				</view>
+				</view> -->
+				
 				<view v-for="(item, index) in workList" :key="index">
-					<view style="margin-left: 30rpx;margin-top: 10rpx;display: flex;align-items: center;" @click="jumpDetail(item)">
+					<view style="padding-left: 30rpx;padding-top: 10rpx;display: flex;align-items: center;background:#fff;" @click="jumpDetail(item)">
 						<text class="date_t2">{{ item.goodsName }}</text>
 						<view class="circle_num" style="margin-left: 20rpx;">{{ item.classHours }}</view>
 					</view>
@@ -113,12 +158,14 @@
 export default {
 	data() {
 		return {
+			swiperIndex:0,
 			isLoaded:false, //是否请求完毕
 			monthIndex: 0,
 			haveNextMonth: false,
 			havePreviousMonth: false,
 			showDayList: [],
 			workList: [],
+			swiperList:[],
 			calendarStudyVo: {},
 			index: 0,
 			date: ['日', '一', '二', '三', '四', '五', '六'],
@@ -255,26 +302,33 @@ export default {
 			});
 		},
 		swipeMonth(index) {
-			console.log(index,198)
-			this.isOpen = false;
-			this.haveNextMonth = false;
-			this.havePreviousMonth = false;
-			this.monthIndex = this.monthIndex + index;
-			this.currentMonth = this.currentMonth + index;
-			let item = this.listItem.calendarStudyVo[this.monthIndex];
-			this.calendarStudyVo = item;
-			this.activeDate = '';
-			// this.workList = this.calendarStudyVo.goodsVos;
-			this.workList = this.getStudyCourseByDay();
-			if (this.monthIndex > 0) {
-				this.havePreviousMonth = true;
-			}
-			if (this.monthIndex < this.listItem.calendarStudyVo.length - 1) {
-				this.haveNextMonth = true;
-			}
-			this.dealDayList();
+			this.swiperIndex = this.swiperIndex + index
+			
+			console.log(this.swiperIndex)
+			// console.log(index,198)
+			// this.isOpen = false;
+			// this.haveNextMonth = false;
+			// this.havePreviousMonth = false;
+			// this.monthIndex = this.monthIndex + index;
+			// this.currentMonth = this.currentMonth + index;
+			// let item = this.listItem.calendarStudyVo[this.monthIndex];
+			// this.calendarStudyVo = item;
+			// this.activeDate = '';
+			// // this.workList = this.calendarStudyVo.goodsVos;
+			// this.workList = this.getStudyCourseByDay();
+			// if (this.monthIndex > 0) {
+			// 	this.havePreviousMonth = true;
+			// }
+			// if (this.monthIndex < this.listItem.calendarStudyVo.length - 1) {
+			// 	this.haveNextMonth = true;
+			// }
+			// this.dealDayList();
 		},
 		dealMonth() {
+			
+			this.swiperList = []
+			
+			
 			let date = new Date();
 			let currentMonth = date.getMonth() + 1;
 			this.haveNextMonth = false;
@@ -295,6 +349,8 @@ export default {
 							this.haveNextMonth = true;
 						}
 					}
+					
+					this.swiperList.push(this.listItem.calendarStudyVo[i])
 				}
 				
 				if(!this.calendarStudyVo.dayStudyList) { //计划没有当前月
@@ -316,87 +372,134 @@ export default {
 			this.dealMonth();
 		},
 		dealDayList() {
-			let firstItem = this.calendarStudyVo.dayStudyList[0];
-			this.calendarStudyVo.miniDayStudyList = []; //创建缩放的数组
-			let date = new Date();
-			let num = date.getDate();
-			//如果不是当前月，默认显示第一周
-			if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
-				num = 1;
-			}
-			 for (let i = 0; i < firstItem.studyDay; i++) {
-				 //补齐1号前的日数凑满一周
-				this.calendarStudyVo.dayStudyList.unshift({ date: 0 });
-			} 
-			let todayIndex;
-			let todayItem;
-			for (let i = 0; i < this.calendarStudyVo.dayStudyList.length; i++) {
-				let item = this.calendarStudyVo.dayStudyList[i];
-				item.color = 0;
-				if (item.date == num) {
-					if (date.getMonth() + 1 == this.calendarStudyVo.month) {
-						item.color = 3;
+			
+			this.swiperList.forEach((swiper,index) => {
+				let firstItem = swiper.dayStudyList[0]
+				for (let i = 0; i < firstItem.studyDay; i++) {
+					 //补齐1号前的日数凑满一周
+					swiper.dayStudyList.unshift({ date: 0 });
+				} 
+				
+				for (let i = 0; i < swiper.dayStudyList.length; i++) {
+					let item = swiper.dayStudyList[i];
+					item.color = 0;
+					
+					if (item.perform == 1) {
+						item.color = 1;
+					}
+					if (item.perform == 2) {
+						item.color = 2;
+					}
+					item.note = item.studyCourseKnob;
+					if (item.note > 0) {
+						item.dot = true;
 					}
-					todayIndex = i;
-					todayItem = item;
-				}
-				if (item.perform == 1) {
-					item.color = 1;
-				}
-				if (item.perform == 2) {
-					item.color = 2;
 				}
-				item.note = item.studyCourseKnob;
-				if (item.note > 0) {
-					item.dot = true;
+				
+				for (let i = 0; i < swiper.dayStudyList.length; i++) {
+					let item = swiper.dayStudyList[i];
+					
+					if (item.note > 0) {
+						item.note = 0;
+						swiper.dayStudyList.forEach(day => {
+							if(day.date == item.date) {
+								if(day.daySectionList) {
+									day.daySectionList.forEach(section => {
+										this.listItem.goodsVos.forEach(vos => {
+											if(vos.goodsId == section.goodsId) {
+												item.note += vos.classHours
+											}
+										})
+									})
+								}
+							}
+						})
+					}
 				}
-			}
+				
+			})
 			
-			let start 
-			start = todayIndex - todayItem.studyDay;
-			/* if(todayItem){
+			// let firstItem = this.calendarStudyVo.dayStudyList[0];
+			// this.calendarStudyVo.miniDayStudyList = []; //创建缩放的数组
+			// let date = new Date();
+			// let num = date.getDate();
+			// //如果不是当前月，默认显示第一周
+			// if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
+			// 	num = 1;
+			// }
+			//  for (let i = 0; i < firstItem.studyDay; i++) {
+			// 	 //补齐1号前的日数凑满一周
+			// 	this.calendarStudyVo.dayStudyList.unshift({ date: 0 });
+			// } 
+			// let todayIndex;
+			// let todayItem;
+			// for (let i = 0; i < this.calendarStudyVo.dayStudyList.length; i++) {
+			// 	let item = this.calendarStudyVo.dayStudyList[i];
+			// 	item.color = 0;
+			// 	if (item.date == num) {
+			// 		if (date.getMonth() + 1 == this.calendarStudyVo.month) {
+			// 			item.color = 3;
+			// 		}
+			// 		todayIndex = i;
+			// 		todayItem = item;
+			// 	}
+			// 	if (item.perform == 1) {
+			// 		item.color = 1;
+			// 	}
+			// 	if (item.perform == 2) {
+			// 		item.color = 2;
+			// 	}
+			// 	item.note = item.studyCourseKnob;
+			// 	if (item.note > 0) {
+			// 		item.dot = true;
+			// 	}
+			// }
+			
+			// let start 
+			// start = todayIndex - todayItem.studyDay;
+			// /* if(todayItem){
 				
-			}else{
-				//今天在下个月不存在，例如31号
-				todayIndex = this.calendarStudyVo.dayStudyList.length-1
-				todayItem = this.calendarStudyVo.dayStudyList[todayIndex]
-				start = todayIndex - todayItem.studyDay;
-			} */
-			/* if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
-				todayIndex = 0
-				todayItem = this.calendarStudyVo.dayStudyList[todayIndex]
-				start = 0;
-			} */
-			console.log(start,689)
-			/* this.calendarStudyVo.miniDayStudyList = []
-			for(let i=start;i<start + 7;i++){
-				this.calendarStudyVo.miniDayStudyList.push(this.calendarStudyVo.dayStudyList[i])
-			} */
-			console.log(this.calendarStudyVo.miniDayStudyList,789)
-			this.calendarStudyVo.miniDayStudyList = this.calendarStudyVo.dayStudyList.slice(start, start + 7);
-			this.showDayList = this.calendarStudyVo.miniDayStudyList;
-			console.log(this.showDayList)
+			// }else{
+			// 	//今天在下个月不存在，例如31号
+			// 	todayIndex = this.calendarStudyVo.dayStudyList.length-1
+			// 	todayItem = this.calendarStudyVo.dayStudyList[todayIndex]
+			// 	start = todayIndex - todayItem.studyDay;
+			// } */
+			// /* if ((date.getMonth() + 1) != this.calendarStudyVo.month) {
+			// 	todayIndex = 0
+			// 	todayItem = this.calendarStudyVo.dayStudyList[todayIndex]
+			// 	start = 0;
+			// } */
+			// console.log(start,689)
+			// /* this.calendarStudyVo.miniDayStudyList = []
+			// for(let i=start;i<start + 7;i++){
+			// 	this.calendarStudyVo.miniDayStudyList.push(this.calendarStudyVo.dayStudyList[i])
+			// } */
+			// console.log(this.calendarStudyVo.miniDayStudyList,789)
+			// this.calendarStudyVo.miniDayStudyList = this.calendarStudyVo.dayStudyList.slice(start, start + 7);
+			// this.showDayList = this.calendarStudyVo.miniDayStudyList;
+			// console.log(this.showDayList)
 			
-			for (let i = 0; i < this.calendarStudyVo.dayStudyList.length; i++) {
-				let item = this.calendarStudyVo.dayStudyList[i];
+			// for (let i = 0; i < this.calendarStudyVo.dayStudyList.length; i++) {
+			// 	let item = this.calendarStudyVo.dayStudyList[i];
 				
-				if (item.note > 0) {
-					item.note = 0;
-					this.showDayList.forEach(day => {
-						if(day.date == item.date) {
-							if(day.daySectionList) {
-								day.daySectionList.forEach(section => {
-									this.listItem.goodsVos.forEach(vos => {
-										if(vos.goodsId == section.goodsId) {
-											item.note += vos.classHours
-										}
-									})
-								})
-							}
-						}
-					})
-				}
-			}
+			// 	if (item.note > 0) {
+			// 		item.note = 0;
+			// 		this.showDayList.forEach(day => {
+			// 			if(day.date == item.date) {
+			// 				if(day.daySectionList) {
+			// 					day.daySectionList.forEach(section => {
+			// 						this.listItem.goodsVos.forEach(vos => {
+			// 							if(vos.goodsId == section.goodsId) {
+			// 								item.note += vos.classHours
+			// 							}
+			// 						})
+			// 					})
+			// 				}
+			// 			}
+			// 		})
+			// 	}
+			// }
 			
 		},
 		async jumpDetail(item) {
@@ -599,7 +702,7 @@ export default {
 };
 </script>
 
-<style scope>
+<style scope lang="scss">
 .dis_ffs {
 	display: flex;
 	flex-direction: column;
@@ -846,7 +949,11 @@ export default {
 	background: #ffffff;
 	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
 	border-radius: 24rpx;
-	padding-bottom: 20rpx;
+	padding-bottom:20rpx;
+	
+	.swiper {
+		height:550rpx;
+	}
 }
 page {
 	background: rgba(234,238,241,1);