saas_miniprogram/pages2/plan/index.vue

<template>
	<view style="padding: 16rpx;">
		<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(item.goodsVos[0].coverUrl)" class="r_image"></image>
									<view class="r_t2">{{ item.goodsVos[0].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">
			<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>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			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;
		},
		/**
		 * 根据选中日期获取需要学习的课程
		 */
		getStudyCourseByDay() {
			let courseList = [];
			this.showDayList.forEach(day => {
				if(day.date == this.activeDate) {
					
				}
			})
		},
		planNow(){
			uni.switchTab({
			    url: '/pages/course/index'
			});
		},
		getUserGoodsList() {
			this.$api.courseGoodsList().then(res => {
				if (res.data.code === 200) {
					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.workList = this.calendarStudyVo.goodsVos;
			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.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;
						}
					}
				}
				this.dealDayList();
			}
		},
		openEdit(item) {
			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)
		},
		jumpDetail(item) {
			this.$navTo.togo('/pages2/wd/course', {
				id: item.goodsId,
				gid:item.gradeId
			});
			return;
		},
		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();
					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: 50%;
	width: 29rpx;
	height: 29rpx;
	line-height: 25rpx;
	border: 1px solid #ffcc00;
	font-size: 18rpx;
	color: #ffcc00;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: -19rpx;
	right: 9rpx;
}
.circle_num {
	border-radius: 50%;
	width: 29rpx;
	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 {
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #32467b;
}
.date_num_color1 {
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #34c759;
}
.date_num_color2 {
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #ff3b30;
}
.date_num_color3 {
	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>