zc_saas_h5/pages2/plan/index.vue

<template>
	<view >
		<nav-bar title="学习计划"></nav-bar>
		<view v-if="havePlan">
			<view class="card" v-if="havePlan">
				<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%;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 showDayList" :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>
				<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)">
						<text class="date_t2">{{ item.goodsName }}</text>
						<view class="circle_num" style="margin-left: 20rpx;">{{ item.classHours }}</view>
					</view>
				</view>
			</view>
			<!-- 列表-->
			<view>
				<uni-swipe-action>
					<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item, index) in list" :key="index">
						<view class="list_item" :class="index % 2 == 0 ? 'list_item_bac1' : 'list_item_bac2'" @click.stop="openEdit(item)">
							<u-row>
								<u-col span="11">
									<text class="item_t1">
										{{ item.goodsVos[0].educationName + '-' + item.goodsVos[0].projectName + '-' + item.goodsVos[0].businessName }}：{{
											$method.timestampToTime(item.endTime)
										}}截止
									</text>
								</u-col>
								<u-col span="1"><image style="transform: rotate(180deg);" src="/static/icon/openSwith.png" class="img_more" @click.stop="openShow(item)"></image></u-col>
							</u-row>
							<scroll-view style="white-space: nowrap" class="scroll-view_H" scroll-x="true">
								<view style="margin-top: 30rpx;display: inline-block;width:296rpx;margin-right: 30rpx;" v-for="(items, indexs) in item.goodsVos" :key="indexs">
									<image :src="$method.splitImgHost(items.coverUrl)" class="r_image"></image>
									<view class="r_t2">{{ items.goodsName }}</view>
								</view>
							</scroll-view>

							<view style="display: flex;margin-top: 30rpx;">
								<text class="item_t2">学习频率：</text>
								<view style="display: flex;justify-content:center;">
									<view v-for="(item1, index) in item.studyCount" :key="index" class="item_date">{{ replay(item1) }}</view>
								</view>
							</view>
							<view style="display: flex;margin-top: 20rpx;">
								<text class="item_t2">学习进度：{{ item.studyNum }}/{{ item.pitchNum }}</text>
							</view>
						</view>
						<template v-slot:right>
							<view class="operate">
								<image src="/static/operate_1.png" class="operate_img operate_img1" @click="delWorker(item)"></image>
								<!-- <image src="/static/operate_2.png" class="operate_img operate_img2"></image> -->
								<image @click="edit(item)" src="/static/operate_3.png" class="operate_img operate_img3"></image>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>

			<view class="newPlan" @click="newPlan()">新建计划</view>
		</view>
		<view v-else class="tipBox">
			<template v-if="isLoaded">
				<view class="dis_ffs" v-if="goodsList.length">
					<view class="tip">您暂无相关计划哦~</view>
					<view class="tipBtn" @click="newPlan()">马上制定</view>
				</view>
				<view class="dis_ffs" v-else>
					<view class="tip">您暂无课程可以制定计划哦~</view>
					<view class="tipBtn" @click="planNow()">马上选课</view>
				</view>
			</template>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoaded:false, //是否请求完毕
			monthIndex: 0,
			haveNextMonth: false,
			havePreviousMonth: false,
			showDayList: [],
			workList: [],
			calendarStudyVo: {},
			index: 0,
			date: ['日', '一', '二', '三', '四', '五', '六'],
			list: [],
			isOpen: false,
			date_num: [
				{
					num: 20,
					color: 0,
					note: 0,
					dot: false
				},
				{
					num: 21,
					color: 1,
					note: 0,
					dot: false
				},
				{
					num: 22,
					color: 0,
					note: 0,
					dot: true
				},
				{
					num: 23,
					color: 2,
					note: 0,
					dot: false
				},
				{
					num: 24,
					color: 1,
					note: 0,
					dot: false
				},
				{
					num: 25,
					color: 3,
					note: 2,
					dot: false
				},
				{
					num: 26,
					color: 0,
					note: 1,
					dot: true
				}
			],
			date_use: [],
			options: [
				{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			activeDate:'',
			dayStudyList: [],
			listItem: {},
			currentMonth: 0,
			havePlan: false,
			goodsList: [] //用户拥有的商品
		};
	},
	onLoad(option) {
		this.date_use = this.date_num;
		this.getUserGoodsList();
	},
	onShow() {
		this.workList = [];
		this.showDayList = [];
		// this.calendarStudyVo = {};
		this.isOpen = false;
		this.getList();
	},
	methods: {
		itemClick(item,index) {
			// console.log(item)
			this.activeDate = item.date;
			this.workList = this.getStudyCourseByDay();
		},
		/**
		 * 根据选中日期获取需要学习的课程
		 */
		getStudyCourseByDay() {
			let courseList = [];
			this.showDayList.forEach(day => {
				if(day.date == this.activeDate) {
					if(day.daySectionList) {
						day.daySectionList.forEach(section => {
							this.listItem.goodsVos.forEach(vos => {
								if(vos.goodsId == section.goodsId) {
									courseList.push(vos)
								}
							})
						})
					}
				}
			})
			
			return courseList;
		},
		planNow(){
			uni.switchTab({
			    url: '/pages/course/index'
			});
		},
		getUserGoodsList() {
			this.$api.courseGoodsList().then(res => {
				if (res.data.code === 200) {
					this.isLoaded = true;
					this.goodsList = res.data.rows;
				}
			});
		},
		//删除计划
		delWorker(option) {
			var data = {
				planId: option.planId,
				status: -1
			};
			let self = this;
			this.$api.editsystemplan(data).then(res => {
				uni.setStorageSync('updateHome', 1);
				self.getList();
			});
		},
		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();
		},
		dealMonth() {
			let date = new Date();
			let currentMonth = date.getMonth() + 1;
			this.haveNextMonth = false;
			this.havePreviousMonth = false;
			this.calendarStudyVo = {}
			this.workList = this.getStudyCourseByDay();
			// this.workList = this.listItem.goodsVos;
			if (this.listItem !== undefined) {
				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;
						if (i > 0) {
							this.havePreviousMonth = true;
						}
						if (i < this.listItem.calendarStudyVo.length - 1) {
							this.haveNextMonth = true;
						}
					}
				}
				
				if(!this.calendarStudyVo.dayStudyList) { //计划没有当前月
					this.monthIndex = 0;
					this.calendarStudyVo = this.listItem.calendarStudyVo[0];
					
					if(this.listItem.calendarStudyVo.length > 1) {
						console.log('len')
						this.haveNextMonth = true;
					}
				}
				this.dealDayList();
			}
		},
		openEdit(item) {
			this.activeDate = '';
			this.listItem = item;
			this.isOpen = false;
			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;
					}
					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)
			
			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
										}
									})
								})
							}
						}
					})
				}
			}
			
		},
		async jumpDetail(item) {
			
			let currentTime = this.$method.getZeroTime();
			
			if(currentTime < item.studyStartTime || currentTime > item.studyEndTime) {
				uni.showToast({
					title:'不在学习有效期，不可以学习了哦',
					icon:'none'
				})
				return;
			}
			
			if( (item.classStartTime && currentTime <= item.classStartTime) || (item.classEndTime && currentTime >= item.classEndTime) ) {
				uni.showToast({
					title:'不在班级有效期，不能进入学习',
					icon:'none'
				})
				return;
			}
			
			if(item.learningStatus == 2) {
				uni.showToast({
					title:'开放学习时间待定，不能进入学习',
					icon:'none'
				})
				return;
			}
			
			if(item.classStatus == 0 ) {
				uni.showToast({
					title:'尚未开班，不能进入学习',
					icon:'none'
				})
				return;
			}
			
			if(item.learningStatus == 3 && (currentTime < item.learningTimeStart) ) {
				uni.showToast({
					title:'不在开放学习时间,不能进入学习',
					icon:'none'
				})
				return;
			}
			
			if(item.gradeStatus == 1 && item.status == 1 && (item.studyEndTime > currentTime) &&  (item.classEndTime && (item.classEndTime < currentTime)) && (item.periodStatus == 0 || item.periodStatus == -1) && item.studyCount > 0) {
				
				uni.showModal({
					title:'提示',
					content:'班级已过期，需要重新选班',
					showCancel:false,
					success:() => {
						uni.navigateTo({
							url:"/pages2/wd/class"
						})
					}
				})
				return;
			}
			
			let rebuildStatus = await this.courseGoodsRebuildStatus(item.goodsId,item.gradeId);
			
			if(rebuildStatus == 0) {
				this.$navTo.togo('/pages2/learn/details', {
					gradeId:item.gradeId,
					goodsId: item.goodsId
				})
				return;
			}
			
			if(item.courseNum == 1 ) {
				
				this.$api.courseCourseList({
					pageNum:1,
					pageSize:1,
					goodsId:item.goodsId,
					gradeId:item.gradeId
				}).then(res => {
					if(res.data.code == 200) {
						uni.navigateTo({
							url:`/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}`
						})
					}
				});
				return;
			}
			
			this.$navTo.togo('/pages2/wd/course', {
				id: item.goodsId,
				gid:item.gradeId
			});
			return;
		},
		/**
		 * @param {Object} goodsId 商品id
		 * 查询商品重修状态
		 */
		courseGoodsRebuildStatus(goodsId,gradeId) {
			return new Promise(resolve => {
				this.$api.courseGoodsRebuildStatus({
					goodsId:goodsId,
					gradeId:gradeId
				}).then(res => {
					resolve(res.data.data)
				})
			})
		},
		replay(index) {
			if (index == 0) {
				return '日';
			}
			if (index == 1) {
				return '一';
			}
			if (index == 2) {
				return '二';
			}
			if (index == 3) {
				return '三';
			}
			if (index == 4) {
				return '四';
			}
			if (index == 5) {
				return '五';
			}
			if (index == 6) {
				return '六';
			}
		},
		getList() {
			let self = this;
			this.$api.getsystemplanlist({ status: 1 }).then(result => {
				result.data.rows.forEach((item, index) => {
					item.show = 'none';
				});
				self.list = result.data.rows;
				if (result.data.rows.length > 0) {
					self.listItem = self.list[0];
					self.dealMonth();
					self.havePlan = true;
					// if (self.list.length > 0) {
					// 	self.listItem = self.list[0];
					// 	self.dealMonth();
					// 	self.havePlan = true;
					// }
				} else {
					self.havePlan = false;
				}
				self.updateHomePlan();
			});
		},
		updateHomePlan() {
			/* const pages = getCurrentPages(); //获取页面栈
			const beforePage = pages[pages.length - 2]; //前一个页面
			beforePage.$vm.updateHomePlan(); */
		},
		newPlan() {
			this.$navTo.togo('/pages2/plan/create');
		},
		edit(item) {
			this.$navTo.togo('/pages2/plan/edit', {
				id: item.planId
			});
		},
		swipeChange(e, item) {
			item.show = e;
		},
		openShow(item) {
			if (item.show == 'none') {
				item.show = 'right';
			} else {
				item.show = 'none';
			}
		},
		updateHomePlan() {
			const pages = getCurrentPages(); //获取页面栈
			const beforePage = pages[pages.length - 2]; //前一个页面
			//	beforePage.$vm.updateHomePlan();
		},
		close_calendar() {
			this.isOpen = false;
			this.showDayList = this.calendarStudyVo.miniDayStudyList;
		},
		oepn_calendar() {
			this.isOpen = true;
			this.showDayList = this.calendarStudyVo.dayStudyList;
		},
		random(min, max) {
			return Math.floor(Math.random() * (max - min)) + min;
		}
	}
};
</script>

<style scope>
.dis_ffs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tipBtn {
	width: 160rpx;
	height: 56rpx;
	background: #007aff;
	border-radius: 16rpx;
	color: #ffffff;
	text-align: center;
	line-height: 56rpx;
	margin-top: 30rpx;
}
.tipBox {
	display: flex;
	align-items: center; /*垂直居中*/
	justify-content: center; /*水平居中*/
	flex-direction: column;
	margin-top: 40%;
}
.tip {
	color: #999999;
	font-size: 32rpx;
}
.newPlan {
	width: 200rpx;
	height: 64rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.15);
	border-radius: 32rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #32467b;
	text-align: center;
	line-height: 64rpx;
	position: fixed;
	bottom: 60rpx;
	left: 50%;
	transform: translateX(-50%);
}
.operate_img3 {
	background: #3478f6;
}
.operate_img2 {
	background: #f09a37;
}
.operate_img1 {
	background: #eb4d3d;
}
.operate_img {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	padding:14rpx;
	box-sizing: border-box;
	margin: 10rpx 0;
}
.operate {
	margin-top:16rpx;
	width: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.item_t2 {
	font-size: 23rpx;
	color: #32467b;
}
.item_date {
	width: 26rpx;
	height: 26rpx;
	background: #007AFF;
	border-radius: 50%;
	margin-left: 20rpx;
	font-size: 18rpx;
	color: #fefeff;
	text-align: center;
}
.r_t2 {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #0c141f;
	white-space: pre-wrap;
}
.r_image {
	width: 278rpx;
	height: 134rpx;
	border-radius: 16rpx;
}
.img_more {
	width: 26rpx;
	height: 26rpx;
}
.item_t1 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #32467b;
}
.list_item_bac1 {
	background: linear-gradient(45deg, rgba(172, 203, 238, 0.2), rgba(231, 240, 253, 0.2));
}
.list_item_bac2 {
	background: linear-gradient(45deg, rgba(255, 232, 206, 0.3), rgba(251, 184, 160, 0.3));
}
.list_item {
	width: 100%;
	min-height: 418rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	border-radius: 24rpx;
	margin-top: 16rpx;
	padding: 15rpx;
	background:#fff;
}
.date_dot {
	width: 6rpx;
	height: 6rpx;
	background: #ffcc00;
	border-radius: 50%;
	margin: 0 auto;
}
.date_note {
	border-radius: 15rpx;
	padding:0 5rpx;
	min-width:50rpx;
	height: 29rpx;
	line-height: 25rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: -19rpx;
	left: 80%;
}
.circle_num {
	border-radius: 15rpx;
	padding:0 5rpx;
	min-width:50rpx;
	height: 29rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	margin: 5rpx;
}
.date_t2 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2f4379;
}
.date_line_close {
	width: 40rpx;
	height: 20rpx;
}
.date_line {
	width: 40rpx;
	height: 6rpx;
	background: #7f8caf;
	border-radius: 2rpx;
}
.date_num {
	width: 14%;
	text-align: center;
	position: relative;
	display: inline-block;
	margin-top: 20rpx;
}
.date_num_color0 {
	position:relative;
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #32467b;
}
.date_num_color1 {
	position:relative;
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #34c759;
}
.date_num_color2 {
	position:relative;
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #ff3b30;
}
.date_num_color3 {
	position:relative;
	color: #007AFF;
	background-color: rgba(229,241,255,1);
	border-radius: 50%;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	display: inline-block;
}
.active_color{
	color: #fff;
	background-color: #007AFF;
	border-radius: 50%;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	display: inline-block;
}
.card_date {
	width: 14%;
	text-align: center;
	color: #7f8caf;
    position: relative;
    display: inline-block;
}
.date_t1 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
	width: 100%;
	text-align: center;
	padding: 20rpx 0;
}
.card {
	width: 100%;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	border-radius: 24rpx;
	padding-bottom: 20rpx;
}
page {
	background: rgba(234,238,241,1);
}
</style>