zz--front/pages2/plan/detail.vue

<template>
	<view style="padding: 30rpx;">
		<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%;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 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.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.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.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">
				<view style="margin-left: 30rpx;margin-top: 10rpx;display: flex;align-items: center;" @click="jumpDetail(item)">
					<text class="date_t2">{{ item.courseName }}</text>
					<view class="circle_num" style="margin-left: 20rpx;">{{ item.chapterNum }}</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.coursePlanVo[0].categoryName }}：{{ $method.timestampToTime(item.endTime) }}截止</text>
							</u-col>
							<u-col span="1"><image src="/static/more.png" class="img_more" @click.stop="openShow(item)"></image></u-col>
						</u-row>
						<view style="margin-top: 30rpx;">
							<image :src="$method.splitImgHost(item.coursePlanVo[0].coverUrl)" class="r_image"></image>
							<view class="r_t2">{{ item.coursePlanVo[0].courseName }}</view>
						</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">学习进度：60/120</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>
</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'
					}
				}
			],
			dayStudyList: [],
			listItem: {},
			currentMonth: 0,
			havePlan: false
		};
	},
	onLoad(option) {
		this.date_use = this.date_num;
	},
	onShow() {
		this.workList = []
		this.showDayList = []
		this.calendarStudyVo = {}
		this.isOpen = false
		this.getList();
	},
	methods: {
		//删除计划
		delWorker(option) {
			var data = {
				planId: option.planId,
				status: 0
			};
			let self = this
			this.$api.planupdateGenerate(data).then(res => {
				self.getList()
			})
		},
		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.haveNextMonth = false;
			this.havePreviousMonth = false;
			this.workList = this.listItem.coursePlanVo;
			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();
			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;
				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 = 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
			});
			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.planUserPlan().then(result => {
				result.data.data.forEach((item, index) => {
					item.show = 'none';
				});
				self.list = result.data.data;
				if(result.data.data.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
				}

			});
		},
		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';
			}
		},
		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>
.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: 45rpx;
	height: 45rpx;
	border-radius: 50%;
	padding: 20rpx;
	margin: 10rpx 0;
}
.operate {
	height: 418rpx;
	width: 90rpx;
	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: #32467b;
	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;
}
.r_image {
	width: 278rpx;
	height: 134rpx;
}
.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%;
	height: 418rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	border-radius: 24rpx;
	margin-top: 20rpx;
	padding: 15rpx;
}
.date_dot {
	width: 6rpx;
	height: 6rpx;
	background: #ffcc00;
	border-radius: 50%;
	margin: 0 auto;
}
.date_note {
	border-radius: 50%;
	width: 29rpx;
	height: 29rpx;
	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 {
	color: #32467b;
}
.date_num_color1 {
	color: #34c759;
}
.date_num_color2 {
	color: #ff3b30;
}
.date_num_color3 {
	color: #ffffff;
	background-color: #ffcc00;
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
}
.card_date {
	width: 14%;
	text-align: center;
	color: #7f8caf;
}
.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: #fdfdfd;
}
</style>