jp-education-student/pages/parents/classSchedule/classSchedule.vue

<template>
	<view>
		<u-navbar title="课程表">
			<view class="slot-wrap" @click="getToday()">
				今天
			</view>
		</u-navbar>
		<!-- 日期 -->
		<view class="date-picker">
			<view class="check" @click="beforeWeek">
				<u-icon name="arrow-left" size="32"></u-icon>前一周
			</view>
			<view class="date">
				{{date}}
			</view>
			<view class="check" @click="afterWeek">
				后一周<u-icon name="arrow-right" size="32"></u-icon>
			</view>
		</view>
		<view class="date-item">
			<view class="item" v-for="(item,index) in weekDate" :key="index"
				:class="activeClass == index ? 'checked' : ''" @click="activeClassClick(item,index)">
				<view class="dot" :class="activeClass == index ? 'dot-checked' : ''">

				</view>
				<view class="week ">
					{{item.week}}
				</view>
				<view class="day ">
					{{item.day}}
				</view>
			</view>
		</view>
		<!-- 课表信息 -->
		<view class="courses-learned">
		  已学课程	
		</view>
		<view class="class-box">
			<view class="picture">
				<img src="../../../assets/img/classschedule.png" alt="">
			</view>
			<view class="infos">
				<view class="title">
					中国舞十级班
				</view>
				<view class="tag">
					<view class="item">
						二楼舞蹈一教室
					</view>
					<view class="item">
						08:30-10:00
					</view>

				</view>
				<view class="else">
					<view class="teacher">
						<view class="photo">
							<img src="../../../assets/img/teachercard.png" alt="">
						</view>
						<view class="name">
							陈老师
						</view>
					</view>

					<view class="class-times">
						<view class="text">
							课次
						</view>
						<view class="num">
							22
						</view>

					</view>

				</view>

			</view>

		</view>
		<view class="courses-learned">
		  未学课程
		</view>
		<view class="class-box">
			<view class="picture">
				<img src="../../../assets/img/classschedule.png" alt="">
			</view>
			<view class="infos">
				<view class="title">
					中国舞十级班
				</view>
				<view class="tag">
					<view class="item">
						二楼舞蹈一教室
					</view>
					<view class="item">
						08:30-10:00
					</view>
		
				</view>
				<view class="else">
					<view class="teacher">
						<view class="photo">
							<img src="../../../assets/img/teachercard.png" alt="">
						</view>
						<view class="name">
							陈老师
						</view>
					</view>
		
					<view class="class-times">
						<view class="text">
							课次
						</view>
						<view class="num">
							22
						</view>
		
					</view>
		
				</view>
		
			</view>
		
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				date: '',
				weekDate: [],
				weekN: ["一", "二", "三", "四", "五", "六", "日"],
				activeClass: 0,
				weekDate1: '',
			}
		},
		onReady() {
			this.getToday();
		},
		methods: {
			getToday() {
				this.weekDate = [];
				let date = new Date(); //当前日期
				let year = date.getFullYear(); //当前年
				let month = date.getMonth() + 1; //当前月
				let day = date.getDate(); //当天
				let mydate = new Date(year, month - 1, day);
				let weekday = mydate.getDay();
				this.weekDate1 = new Date(year, month - 1, day + 1 - weekday);
				this.getWeekDate(true);
			},
			getWeekDate(bl) {
				let weekDate2 = new Date(this.weekDate1.getTime());
				for (var i = 0; i < 7; i++) {
					for (var j = 0; j < this.weekN.length; j++) {
						if (i == j) {
							this.weekDate.push({
								week: this.weekN[j],
								day: this.getFormatDate(new Date(weekDate2.setDate(this.weekDate1.getDate() + i)))
							})
						}
					}
				}

				if (bl) {
					let date = new Date(); //当前日期
					date = this.getFormatDate(date);
					for (var m = 0; m < this.weekDate.length; m++) {
						if (date == this.weekDate[m].day) {
							this.activeClass = m;
							this.date = this.weekDate[m].day;
						}
					}
				}
			},
			getFormatDate(date) {
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}

				return (myyear + "-" + mymonth + "-" + myweekday);
			},
			beforeWeek() {
				console.log(this.activeClass)
				this.weekDate = [];
				this.weekDate1 = new Date(this.weekDate1.setDate(this.weekDate1.getDate() - 7));
				this.getWeekDate();
				for (var m = 0; m < this.weekDate.length; m++) {
					if (this.activeClass == m) {
						this.date = this.weekDate[m].day;
					}
				}
			},
			afterWeek() {
				this.weekDate = [];
				this.weekDate1 = new Date(this.weekDate1.setDate(this.weekDate1.getDate() + 7));
				this.getWeekDate();
				for (var m = 0; m < this.weekDate.length; m++) {
					if (this.activeClass == m) {
						this.date = this.weekDate[m].day;
					}
				}
			},
			activeClassClick(item, index) {
				this.activeClass = index;
				for (var m = 0; m < this.weekDate.length; m++) {
					if (index == m) {
						this.date = this.weekDate[m].day;
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 日期
	.date-picker {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10px 12px 17px 12px;
		color: rgba(13, 186, 199, 1);

		.date {
			font-size: 16px;
			color: #333333;
		}
	}

	.date-item {
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		padding: 0 12px 16px 12px;
		border-radius: 0px 0px 9px 9px;
		box-shadow: 0px 4px 4px 0px #CFD2D5;

		.item {
			line-height: 20px;
			border-radius: 8px;
			background-color: rgba(238, 238, 238, 1);
			color: #1C222A;
			text-align: center;
			width: 12%;
			padding: 12rpx 0;
			position: relative;

			.week {
				font-size: 12px;

			}

			.day {
				font-size: 16px;
				font-weight: bold;
			}
		}

		.checked {
			background-color: rgba(13, 186, 199, 1);
			color: #fff;
		}

		.dot {
			width: 6px;
			height: 6px;
			background-color: rgba(13, 186, 199, 1);
			border-radius: 999px;
			position: absolute;
			top: 8rpx;
			right: 8rpx;
		}

		.dot-checked {
			background-color: #fff;
		}

	}


	// 课表信息
	.courses-learned{
		margin-top: 40rpx;
		padding: 0 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 16px;
		font-weight: bold;
	}
	.class-box {
		margin: 12px 16px;
		padding: 24rpx 0 24rpx 24rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 255, 255, 1);
		display: flex;

		.picture {
			width: 200rpx;
			height: 200rpx;
			border-radius: 4px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.infos {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
				font-weight: bold;
			}

			.tag {
				display: flex;

				.item {
					line-height: 40rpx;
					border-radius: 8rpx;
					background-color: rgba(241, 243, 244, 1);
					color: rgba(16, 16, 16, 1);
					text-align: center;
					margin-right: 12rpx;
					font-size: 24rpx;
					padding: 0 8rpx;
				}

				@media screen and (max-width: 310px) {
					.item {
						padding: 0 4rpx;
						margin-right: 8rpx;
					}
				}

			}

			.else {
				display: flex;
				justify-content: space-between;
				padding-right: 24rpx;

				.teacher {
					display: flex;
					align-items: center;

					.photo {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50px;
						overflow: hidden;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						color: rgba(16, 16, 16, 1);
						margin-left: 12px;
					}
				}

				.class-times {
					display: flex;
					align-items: center;

					.text {
						color: rgba(119, 119, 119, 1);
						font-size: 16px;
					}

					.num {
						line-height: 20px;
						border-radius: 4px;
						background-color: rgba(13, 186, 199, 1);
						color: rgba(255, 255, 255, 1);
						text-align: center;
						margin-left: 8rpx;
						padding: 0 4px;
					}
				}

			}
		}
	}


	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	}
</style>