jp-education-student/pages/teacher/homePage/homePage.vue

<template>
	<view>
		<view class="navigation">
			启航教培管家·教师端
		</view>
		
		<!-- 课时信息 -->
		<view class="class-infos-box">
			<view class="title">
				<view class="campus">
					青少年宫校区
				</view>
				<view class="cut">
					切换校区
					<view class="img">
						<img src="../../../assets/img/riLine-exchange-line@1x.png" alt="">
					</view>
				</view>
			</view>
			
			<!-- 详细信息 -->
			<view class="main">
				<view class="time">
					<!-- <view class="day">
						今日
					</view> -->
					<view class="week" v-for="(item,index) in list" :key="index"
						:class="activeClass == index ? 'day' : ''" @click="activeClassClick(item,index)">{{item.name}}
					</view>
					<!-- <view class="month">
						本月
					</view> -->
				</view>
				<view class="date" v-if="activeClass == 0">
					({{day.replaceAll('-','.')}})
				</view>
				<view class="date" v-if="activeClass == 1">
					({{weekStartDate.replaceAll('-','.')}}-{{weekEndDate.replaceAll('-','.')}})
				</view>
				<view class="date" v-if="activeClass == 2">
					({{monthStartDate.replaceAll('-','.')}}-{{monthEndDate.replaceAll('-','.')}})
				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="content">
							9
						</view>
						<view class="infos-name">
							收费课时
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							9
						</view>
						<view class="infos-name">
							赠送课时
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							9
						</view>
						<view class="infos-name">
							补课课时
						</view>
					</view>
					<view class="infos-item">
						<view class="content">
							100
						</view>
						<view class="infos-name">
							应到人次
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							99
						</view>
						<view class="infos-name">
							实到人次
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							1
						</view>
						<view class="infos-name">
							未到/请假
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 最近课程 -->
		<view class="course">
			<view class="title">
				<img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
			</view>
			<view class="course-infos">
				<view class="info-box" @click="gotoUrl('pages/teacher/callNames/classCall')">
					<view class="position today">
						今
					</view>
					<view class="class-name">
						周开琴书法班1
					</view>
					<view class="location-time">
						<view class="location">
							4楼6教室
						</view>
						<view class="time">
							09:30-10:45
						</view>
					</view>
					<view class="date">
						2023.1.3
					</view>
				</view>
				<view class="info-box info-box2">
					<view class="position tomorrow">
						明
					</view>
					<view class="class-name">
						周开琴书法班2
					</view>
					<view class="location-time">
						<view class="location">
							4楼6教室
						</view>
						<view class="time">
							09:30-10:45
						</view>
					</view>
					<view class="date">
						2023.1.3
					</view>
				</view>
			</view>
		</view>

		<!-- 我的应用 -->
		<view class="my-app">
			<view class="title">
				<img src="../../../assets/img/riFill-stack-fill@1x.png" alt="">我的应用
			</view>
			<view class="app-items">
				<view class="item" @click="gotoUrl('pages/teacher/message/messageNotification')">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%)">
						<img src="../../../assets/img/riFill-notification-3-fill@1x.png" alt="">
						<view class="count">
							99+
						</view>
					</view>
					<view class="text">
						消息通知
					</view>
				</view>
				<view class="item" @click="gotoUrl('pages/teacher/myCourse/myCourse')">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						我的课表
					</view>
				</view>
				<view class="item" @click="gotoUrl('pages/teacher/callNames/callNames')">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						点名签到
					</view>
				</view>
				<view class="item" @click="gotoUrl('pages/teacher/myClass/myClass')">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						班级信息
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%);">
						<img src="../../../assets/img/riFill-quill-pen-fill@1x.png" alt="">
					</view>
					<view class="text">
						学员点评
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-star-fill@1x.png" alt="">
					</view>
					<view class="text">
						学员秀
					</view>
				</view>
			</view>
		</view>
		
		<Tabbar :current="0" ref="tabbarMain"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				list: [{
					name: '今日'
				}, {
					name: '本周'
				}, {
					name: '本月',
				}],
				activeClass: 0,
				month: '',
				day: '',
				weekStartDate: '',
				weekEndDate: '',
				monthStartDate: '',
				monthEndDate: '',
			}
		},
		onLoad() {
			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();
			let weekDate1 = new Date(year, month - 1, day + 1 - weekday);
			let weekDate2 = new Date(year, month - 1, day + 7 - weekday);
			
			this.day = this.getFormatDate(date,true);
			this.weekStartDate = this.getFormatDate(weekDate1,true);
			this.weekEndDate = this.getFormatDate(weekDate2,true);
			this.monthStartDate = this.getFormatDate(date,false) + "-" + '01';
			
			let days = new Date(year, month + 1, 0).getDate();
			this.monthEndDate = this.getFormatDate(date,false) + "-" + days;
		},
		methods: {
			getFormatDate(date,m) {
				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;
				}
				if(m) {
					return (myyear + "-" + mymonth + "-" + myweekday);
				}else {
					return (myyear + "-" + mymonth);
				}
			},
			activeClassClick(item,index) {
				this.activeClass = index;
				if (this.activeClass == 0) {
					console.log(this.day)
				} else if (this.activeClass == 1) {
					console.log(this.weekStartDate)
					console.log(this.weekEndDate)
				} else {
					console.log(this.monthStartDate)
					console.log(this.monthEndDate)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navigation {

		height: 44px;
		line-height: 44px;
		background-color: rgba(13, 186, 199, 1);
		color: #ffffff;
		padding-left: 16px;
		font-size: 20px
	}

	// 课时信息
	/deep/.u-line {
		transform: scaleX(1) !important;
	}

	.class-infos-box {
		background: linear-gradient(#0DBAC7, #F4F6F6);

		.title {
			padding: 12px 16px;
			display: flex;
			justify-content: space-between;
			color: #fff;

			.cut {
				height: 16px;
				font-size: 14px;

				.img {
					display: inline-block;

					img {
						vertical-align: middle;
					}

				}
			}
		}

		// 详细信息
		.main {
			width: 91.4%;
			border-radius: 12px;
			padding-top: 22px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			margin: auto;
		}

		.time {
			width: 93%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			height: 32px;
			line-height: 32px;
			border-radius: 50px;
			background-color: rgba(240, 244, 250, 1);
			color: #777777;
			text-align: center;

			.day {
				color: #fff9;
				background-color: #0DBAC7;
				border-radius: 50px;
			}

			.day,
			.week,
			.month {
				width: 33.3%;
			}

		}

		.date {
			height: 17px;
			color: rgba(119, 119, 119, 1);
			font-size: 12px;
			font-family: PingFangSC-regular;
			margin: 18px 0;
		}

		.infos {
			display: flex;
			flex-wrap: wrap;

			.infos-item {
				width: 33%;
				margin-bottom: 40rpx;

				.content {
					height: 28px;
					color: rgba(13, 186, 199, 1);
					font-size: 20px;
					text-align: center;
					font-family: PingFangSC-medium;
				}

				.infos-name {
					height: 20px;
					color: rgba(119, 119, 119, 1);
				}
			}
		}
	}

	// 最近课程
	.course {

		margin: auto;
		margin-top: 16px;
		width: 91.4%;

		.title {
			height: 20px;
			line-height: 20px;
			margin-bottom: 14px;
			color: #333333;
			font-weight: bold;

			img {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.course-infos {
			display: flex;
			justify-content: space-between;

			.info-box {
				border-top: 2px solid #0DBAC7;
				background: linear-gradient(to right, #E4F8E3, #dcf5f6);
				width: 47.8%;
				padding: 24rpx 0 14rpx 24rpx;
				box-shadow: 2px 2px 2px 2px #e7e9e9;
				border-radius: 8px;
				position: relative;

				.position {
					width: 48rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: absolute;
					top: 0;
					right: 16rpx;
					text-align: center;
					border-radius: 0px 0px 4px 4px;
					font-size: 12px;
					color: #fff;
				}

				.today {
					background-color: #0DBAC7;
				}

				.tomorrow {
					background-color: #0086FF;
				}

				.class-name {
					height: 20px;
					color: rgba(51, 51, 51, 1);
					font-size: 14px;
				}

				.location-time {
					margin-top: 8rpx;
					display: flex;
					justify-content: start;
					color: rgba(119, 119, 119, 1);
					font-size: 12px;

					.time {
						margin-left: 8rpx;
					}
				}

				.date {
					color: rgba(119, 119, 119, 1);
					font-size: 12px;
					margin-top: 8rpx;
				}
			}

			.info-box2 {
				border-top: 2px solid #0086FF;
			}
		}
	}

	// 我的应用
	.my-app {
		margin: auto;
		margin-top: 16px;
		padding: 16px;
		background-color: #fff;
		margin-bottom: 300rpx;

		.title {
			height: 20px;
			line-height: 20px;
			margin-bottom: 14px;
			font-weight: bold;
			color: #333333;

			img {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.app-items {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx;

				.icon-box {
					width: 40px;
					height: 40px;
					text-align: center;
					border-radius: 8px;
					position: relative;

					.count {
						width: 28px;
						height: 16px;
						line-height: 16px;
						border-radius: 50px;
						background-color: rgba(238, 49, 56, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 10px;
						text-align: center;
						position: absolute;
						top: -16rpx;
						right: -28rpx;
					}

					img {
						margin: 8px 0;


					}
				}

				.text {
					margin-top: 16rpx;
				}
			}
		}

	}
</style>