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">
					<u-picker mode="time" v-model="show" :params="params" :defaultTime="defaultTime" @confirm="confirm">
					</u-picker>
					<view class="show" @click="show = true">
						<view class="text">
							{{teachTime}}
						</view>
						<view class="icon">
							<u-icon name="arrow-down" color="#fff" size="32"></u-icon>
						</view>

					</view>
					<!-- <view class="select" v-show="show">
							2023年1月 
						</view> -->
				</view>
				<!-- <view class="time">
					
					<view class="week" v-for="(item,index) in list" :key="index"
						:class="activeClass == index ? 'day' : ''" @click="activeClassClick(item,index)">{{item.name}}
					</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">
							{{courseRpt.chargeNum != null ? courseRpt.chargeNum : 0}}
						</view>
						<view class="infos-name">
							收费课时
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							{{courseRpt.freeNum != null ? courseRpt.freeNum : 0}}
						</view>
						<view class="infos-name">
							赠送课时
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							{{courseRpt.makeupNum != null ? courseRpt.makeupNum : 0}}
						</view>
						<view class="infos-name">
							补课课时
						</view>
					</view>
					<view class="infos-item">
						<view class="content">
							{{rollcallRpt.shouldNum != null ? rollcallRpt.shouldNum : 0}}
						</view>
						<view class="infos-name">
							应到人次
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							{{rollcallRpt.realNum != null ? rollcallRpt.realNum : 0}}
						</view>
						<view class="infos-name">
							实到人次
						</view>
					</view>
					<u-line color="#E5E7EA" direction="col" length="80" />
					<view class="infos-item">
						<view class="content">
							{{rollcallRpt.shouldNum-rollcallRpt.realNum}}
						</view>
						<view class="infos-name">
							未到/请假
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 最近课程 -->
		<view class="course" v-if="courseList.length != 0">
			<view class="title">
				<img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
			</view>
			<view class="course-infos">
				<view class="info-box" v-for="(item,index) in courseList" :key="index"
					@click="gotoUrl('pages/teacher/myCourse/CourseDetails?id=' + item.sheetId)">
					<view class="position today" v-if="item.courseDate == day">
						今
					</view>
					<view class="position tomorrow" v-if="item.courseDate == tomorrow">
						明
					</view>
					<view class="class-name">
						{{item.className}}
					</view>
					<view class="location-time">
						<view class="location" style="width: 50%;">
							{{item.classroomName}}
						</view>
						<view class="time">
							{{item.coursePeriods}}
						</view>
					</view>
					<view class="date">
						{{item.courseDate}}
					</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" @click="gotoUrl('pages/teacher/makeUpAttendance/record')">
					<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-edit-box-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 class="item" @click="gotoUrl('pages/teacher/leaveApproval/leaveApproval')">
					<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-todo-fill@1x.png" alt="">
						<view class="count" v-if="leaveList.length != 0">
							{{leaveList.length > 10 ? '10+' : leaveList.length}}
						</view>
					</view>
					<view class="text">
						请假审批
					</view>
				</view> -->
			</view>
		</view>

		<Tabbar :current="0" ref="tabbarMain"></Tabbar>
	</view>
</template>

<script>
	import * as homePageApi from '@/apis/teacher/homePage.js'
	import * as leaveApprovalApi from '@/apis/teacher/leaveApproval.js'

	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				leaveList: [],
				courseRpt: {
					chargeNum: 0,
					freeNum: 0,
					makeupNum: 0
				},
				rollcallRpt: {
					realNum: 0,
					shouldNum: 0
				},
				rptMonth: '',
				teachTime: '',
				defaultTime: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true
				},
				show: false,
				list: [{
					name: '今日'
				}, {
					name: '本周'
				}, {
					name: '本月',
				}],
				activeClass: 0,
				month: '',
				day: '',
				weekStartDate: '',
				weekEndDate: '',
				monthStartDate: '',
				monthEndDate: '',
				courseList: [],
				tomorrow: '',
			}
		},
		onReady() {
			this.getDateList();
			this.getLatelyCourseList();
			this.getRptMyMonthCourse();
		},
		onShow() {
			this.getLoadLeaveLogForAudit();
		},
		methods: {
			getLoadLeaveLogForAudit() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				leaveApprovalApi.loadLeaveLogForAudit({
					auditedIf: 0,
					yyyyMM: '',
					pageNum: 1,
					pageSize: 10000
				}).then((res) => {
					uni.hideLoading();
					this.leaveList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getRptMyMonthCourse() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.rptMyMonthCourse({
					rptMonth: this.rptMonth
				}).then((response) => {
					uni.hideLoading();
					if(response.data.courseRpt != null) {
						this.courseRpt = response.data.courseRpt;
					}
					if(response.data.rollcallRpt != null) {
						this.rollcallRpt = response.data.rollcallRpt;
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirm(params) {
				var month = '';
				if (params.month.slice(0, 1) == '0') {
					month = params.month.slice(1);
				} else {
					month = params.month;
				}
				this.teachTime = params.year + '年' + month + '月';
				this.rptMonth = params.year + '-' + params.month;
				this.getRptMyMonthCourse();
			},
			getDateList() {
				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.tomorrow = this.getFormatDate(new Date(date.setDate(date.getDate() + 1)), true);
				console.log(this.tomorrow)
				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;

				this.defaultTime = this.getFormatDate(date, true);
				this.teachTime = year + '年' + month + '月';
				this.rptMonth = this.getFormatDate(date, false);
			},
			getLatelyCourseList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.getMyLastSchedules({
					count: 2
				}).then((response) => {
					uni.hideLoading();
					this.courseList = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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
	}

	// 课时信息
	::v-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: 32rpx;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			margin: auto;
		}

		.time {
			margin-bottom: 36rpx;

			.show {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50px;
				background-color: rgba(13, 186, 199, 1);
				font-size: 16px;
				text-align: center;
				height: 64rpx;
				margin: 0 224rpx;
				position: relative;

				.text {
					font-size: 32rpx;
					color: rgba(255, 255, 255, 1);
				}

				icon {

					margin-left: 8rpx;
				}
			}

			.select {
				position: absolute;
				left: 260rpx;
				;
				right: 260rpx;
				;
				background-color: #fff;
				z-index: 999;
				box-shadow: 0px 0px 8px 0px #E8E8E8;
				height: 72rpx;
				line-height: 72rpx;
			}

		}

		.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;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.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>