fix 日历

pages2/plan/detail.vue

@@ -1,29 +1,33 @@
 <template>
 	<view style="padding: 30rpx;">
 		<view class="card">
-			<view class="date_t1">2021年 6月</view>
+			<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>
+			</view>
 			<view style="width: 100%;display: flex;justify-content:center;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 date_use" :key="index" class="date_num">
-					<view v-if="item.color == 0" class="date_num_color0">
-						{{ item.num }}
+				<view v-for="(item, index) in showDayList" :key="index" class="date_num">
+					<view v-if="item.color == 0" class="date_num_color0" 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" class="date_num_color1">
-						{{ item.num }}
+						{{ 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" class="date_num_color2">
-						{{ item.num }}
+						{{ 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" class="date_num_color3">
-						{{ item.num }}
+						{{ item.date }}
 						<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
 						<view v-if="item.dot" class="date_dot"></view>
 					</view>
@@ -83,8 +87,12 @@
 export default {
 	data() {
 		return {
+			monthIndex:0,
+			haveNextMonth:false,
+			havePreviousMonth:false,
+			showDayList:[],
 			workList: [],
-			dayLisy: [],
+			calendarStudyVo: {},
 			index: 0,
 			date: ['日', '一', '二', '三', '四', '五', '六'],
 			list: [],
@@ -147,25 +155,99 @@ export default {
 						backgroundColor: '#dd524d'
 					}
 				}
-			]
+			],
+			dayStudyList:[],
+			listItem:{},
+			currentMonth:0
 		};
 	},
 	onLoad(option) {
 		this.date_use = this.date_num;
-		let date = new Date();
-		let num = date.getDate();
-		for (let i = 0; i < this.date_num.length; i++) {
-			let item = this.date_num[i];
-			if (item.num == num) {
-				item.color = 3;
-			}
-		}
 		
+		this.getList();
 	},
 	onShow() {
-		this.getList();
+		
 	},
 	methods: {
+		swipeMonth(index){
+			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.workList = this.calendarStudyVo.coursePlanVo;
+			 if(this.monthIndex>0){
+			 	this.havePreviousMonth = true
+			 }
+			 if(this.monthIndex<this.listItem.calendarStudyVo.length-1){
+			 	this.haveNextMonth = true
+			 }
+			 this.dealDayList()
+		},
+		dealMonth(){
+			let date = new Date();
+			let currentMonth = date.getMonth()+1;
+			this.currentMonth = currentMonth
+			this.haveNextMonth = false
+			this.havePreviousMonth = false
+			for(let i=0;i<this.listItem.calendarStudyVo.length;i++){
+				 let item = this.listItem.calendarStudyVo[i]
+				if(item.month==currentMonth){
+					this.monthIndex = i
+					this.calendarStudyVo = item
+					this.workList = this.calendarStudyVo.coursePlanVo;
+					if(i>0){
+						this.havePreviousMonth = true
+					}
+					if(i<this.listItem.calendarStudyVo.length-1){
+						this.haveNextMonth = true
+					}
+				}
+				
+			}
+			this.dealDayList()
+		},
+		dealDayList(){
+			let firstItem = this.calendarStudyVo.dayStudyList[0]
+			this.calendarStudyVo.miniDayStudyList = [] //创建缩放的数组
+			let date = new Date();
+			let num = date.getDate();
+			console.log(firstItem,88)
+			for(let i = 0; i < firstItem.studyDay; i++) {
+				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
+	//			console.log(date.getMonth+1,66)
+				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
+				}
+			}
+			console.log(firstItem,88)
+			let start = todayIndex - todayItem.studyDay
+			this.calendarStudyVo.miniDayStudyList = this.calendarStudyVo.dayStudyList.slice(start,start+7)
+			this.showDayList = this.calendarStudyVo.miniDayStudyList
+		},
 		jumpDetail(item) {
 			this.$navTo.togo('/pages2/course/detail', {
 				id: item.courseId
@@ -202,10 +284,12 @@ export default {
 					item.show = 'none';
 				});
 				self.list = result.data.data;
-				self.dayLisy = result.data.data[0].calendarStudyVo[0].dayStudyList;
-				let start = self.dayLisy[0].studyDay;
-				self.workList = result.data.data[0].coursePlanVo;
-				console.log(self.workList);
+				self.listItem = self.list[0]
+				self.dealMonth()
+	//			self.calendarStudyVo = result.data.data[0].calendarStudyVo[1];
+
+				
+				console.log(self.calendarStudyVo.dayStudyList)
 			});
 		},
 		newPlan() {
@@ -228,25 +312,11 @@ export default {
 		},
 		close_calendar() {
 			this.isOpen = false;
-			this.date_use = this.date_num;
+			this.showDayList = this.calendarStudyVo.miniDayStudyList
 		},
 		oepn_calendar() {
 			this.isOpen = true;
-			this.date_use = [];
-			for (let i = 1; i <= 30; i++) {
-				let item = {};
-				item.num = i;
-				item.color = this.random(0, 3);
-				let note = this.random(0, 20);
-				item.note = note > 17 ? note - 15 : 0;
-				item.dot = this.random(0, 3) < 2 ? false : true;
-				let date = new Date();
-				let num = date.getDate();
-				if (num == i) {
-					item.color = 3;
-				}
-				this.date_use.push(item);
-			}
+			this.showDayList = this.calendarStudyVo.dayStudyList
 		},
 		random(min, max) {
 			return Math.floor(Math.random() * (max - min)) + min;
@@ -255,6 +325,7 @@ export default {
 };
 </script>
 
+
 <style scope>
 .newPlan {
 	width: 200rpx;