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

<template>
	<view>
		<u-navbar title="授课记录"></u-navbar>
		<view class="screen">
			<view class="date" @click="show = true">
				<view class="text">
					{{teachTime}}
				</view>
				<view class="icon">
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
			</view>
			<u-picker mode="time" :defaultTime="defaultTime" v-model="show" :params="params" @confirm="confirm">
			</u-picker>
			<view class="course" @click="classShow = true">
				<view class="text">
					{{className}}
				</view>
				<view class="icon">
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
			</view>
			<u-select v-model="classShow" mode="single-column" :list="classList" @confirm="classConfirm"></u-select>
		</view>

		<view class="main">
			<view class="details-box" v-for="(item,index) in callList" :key="index"
				v-if="classId == item.classId || classId == ''">
				<view class="title-number">
					<view class="title">
						{{item.className}}
					</view>
					<view class="number">
						学员数 <text>{{item.studentNum}}</text>
					</view>
				</view>
				<view class="location-time">
					<view class="location">
						{{item.classroomN}}
					</view>
					<view class="time">
						{{item.coursePeriods}}
					</view>
				</view>
				<view class="circumstance">
					<view class="date">
						{{item.courseDate}}
					</view>
					<view class="details">
						<view class="details-item">
							<text>到课</text>
							<text class="num-box">{{item.dkNum!=null?item.dkNum:'0'}}</text>
						</view>
						<view class="details-item">
							<text>请假</text>
							<text class="num-box">{{item.qjNum!=null?item.qjNum:'0'}}</text>
						</view>
						<!-- <view class="details-item">
						 	<text>旷课</text>
						 	<text class="num-box">1</text>
						 </view> -->
						<view class="details-item">
							<text>停课</text>
							<text class="num-box">{{item.tkNum!=null?item.tkNum:'0'}}</text>
						</view>
					</view>

				</view>

				<view class="check-more">
					<view class="history" @click="gotoUrl('pages/teacher/callNames/callHistory')">
						历史记录
					</view>
					<!-- <view class="call-name" @click="gotoUrl('pages/teacher/callNames/classCall')">
						点名签到
					</view> -->

				</view>
			</view>

		</view>
		<u-divider>没有更多数据了</u-divider>

	</view>
</template>

<script>
	import * as callNamesApi from '@/apis/teacher/callNames.js'
	import * as myClassApi from '@/apis/teacher/myClass.js'
	
	export default {
		data() {
			return {
				classShow: false,
				classList: [],
				classId: '',
				className: '所有班级',
				teachTime: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				defaultTime: '',
				queryDateStart: '',
				queryDateEnd: '',
				callList: [],
			}
		},
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			if (month >= 1 && month <= 9) {
				month = '0' + month;
			}
			this.defaultTime = year + '-' + month;
			this.teachTime = this.defaultTime;
			
			this.queryDateStart = year + '-' + month + '-' + '01';
			this.queryDateEnd = year + '-' + month + '-' + (new Date(year,month,0).getDate());
			
			this.getCallList();
			this.getLoadMyClass();
		},
		methods: {
			classConfirm(e) {
				this.classId = e[0].value;
				this.className = e[0].label;
			},
			getLoadMyClass() {
				this.classList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myClassApi.loadMyClass().then((res) => {
					uni.hideLoading();
					var list = res.data;
					this.classList.push({
						value: '',
						label: '所有班级'
					});
					for (var i = 0; i < list.length; i++) {
						this.classList.push({
							value: list[i].classId,
							label: list[i].className
						});
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirm(params) {
				this.teachTime = params.year + '-' + params.month;
				this.queryDateStart = params.year + '-' + params.month + '-' + '01';
				this.queryDateEnd = params.year + '-' + params.month + '-' + (new Date(params.year,params.month,0).getDate());
				this.getCallList();
			},
			getCallList() {
				this.callList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				callNamesApi.rollCallList({
					queryDateStart: this.queryDateStart,
					queryDateEnd: this.queryDateEnd
				}).then((response) => {
					uni.hideLoading();
					var list = response.data.dataList;
					for (var i = 0; i < list.length; i++) {
						if (list[i].dkNum != 0) {
							this.callList.push(list[i]);
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.screen {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;

		.date {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				margin-right: 8rpx;
			}
		}

		.course {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;

			.text {
				margin-right: 8rpx;
			}
		}
	}


	::v-deep.u-divider {
		margin-top: 12px !important;
	}

	.main {
		margin-top: 64rpx;
		padding: 24rpx 32rpx;
		text-align: center;

		.details-box {
			margin-top: 12px;
			background-color: #fff;
			padding: 12px 12px 0;
			border-radius: 12px;

			.title-number {
				display: flex;
				justify-content: space-between;
				align-items: center;

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

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

					text {
						display: inline-block;
						text-align: center;
						width: 20px;
						line-height: 20px;
						border-radius: 4px;
						background-color: rgba(13, 186, 199, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 14px;
						margin-left: 4px;
					}
				}
			}

			.location-time {
				display: flex;
				margin-top: 8px;

				.location,
				.time {
					line-height: 20px;
					border-radius: 4px;
					background-color: rgba(241, 243, 244, 1);
					color: rgba(136, 133, 133, 1);
					padding: 0px 8px;
					margin-right: 8px;
				}
			}
		}

		.circumstance {
			display: flex;
			margin-top: 8px;

			.date {
				color: rgba(51, 51, 51, 1);
				margin-right: 18px;
			}

			.details {
				display: flex;
				flex: 1;
				// justify-content: space-between;
				justify-content: space-evenly;

				.details-item {
					display: flex;
				 align-items: center;

					.num-box {
						display: inline-block;
						width: 16px;
						height: 16px;
						line-height: 16px;
						border-radius: 4px;
						background-color: rgba(153, 153, 153, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 12px;
						margin-left: 4px;
					}
				}
			}
		}

		.check-more {
			display: flex;
			text-align: center;
			font-size: 16px;
			margin-top: 17px;
			border-top: 1px solid rgba(229, 231, 234, 1);
			line-height: 38px;

			.history {
				flex: 1;
				color: rgba(119, 119, 119, 1);
				border-right: 1px solid rgba(229, 231, 234, 1);
			}

			.call-name {
				flex: 1;
				color: rgba(13, 186, 199, 1);

			}
		}
	}
</style>