我的网课

pages.json

@@ -246,7 +246,19 @@
 						"bounce": "none"
 					}
 				}
-			}
+			},
+			{
+					"path": "plan/index",
+					"style": {
+						"navigationBarTitleText": "学习计划",
+						"navigationBarTextStyle": "white",
+						"navigationStyle": "custom", // 隐藏系统导航栏
+						"app-plus": {
+							"titleNView": false, //禁用原生导航栏 
+							"bounce": "none"
+						}
+					}
+				}
 		],
 		"plugins": {
 			"polyv-player": {

pages/wd/index.vue

@@ -21,7 +21,7 @@
 				<view style="background-color: #F0F1F5;height:80rpx;"></view>
 			</view>
 			<view style="top: 195px;position: relative;padding-bottom: 30rpx;">
-				<view class="menu_box">
+				<navigator url="/pages2/plan/index" class="menu_box">
 					<view style="display: flex;align-items: center;">
 						<image src="/static/icon/my_icon1.png" class="my_icon"></image>
 						<view>学习计划</view>
@@ -29,7 +29,7 @@
 					<view>
 						今天有 <text style="color: #007AFF;margin: 0 5rpx;">3</text> 个学习任务
 					</view>
-				</view>
+				</navigator>
 				<view class="menu_box">
 					<view style="display: flex;align-items: center;">
 						<image src="/static/icon/my_icon2.png" class="my_icon"></image>
@@ -123,6 +123,7 @@
 		},
 		methods: {
 			logout(){
+				console.log(343)
 				this.$method.isLogout()
 				this.isLogin = this.$method.isLogin()
 				uni.switchTab({

pages2/plan/index.vue

@@ -0,0 +1,543 @@
+<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">学习进度：{{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>
+</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
+				}
+				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';
+			}
+		},
+		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>