jp-education-student/pages/teacher/callNames/classCall.vue

<template>
	<view>
		<u-navbar title="班级点名"></u-navbar>
		<view class="main">
			<view class="position">
				<view class="infos">
					<view class="class">
						{{classList.className}}
					</view>
					<view class="item">
						<view class="title">
							上课时间：
						</view>
						<view class="value">
							{{scheduleSheet.courseDate}} {{scheduleSheet.coursePeriods}}
				
						</view>
					</view>
					<view class="item">
						<view class="title">
							上课教室：
						</view>
						<view class="value">
							{{classRoom.name}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							授课老师：
						</view>
						<view class="value">
							{{employee.employeeName}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							学员总数：
						</view>
						<view class="value">
							{{studentList.length}}人
						</view>
					</view>
					
				</view>
				<view class="tabs">
					<u-tabs bar-width="80" inactive-color="#777777" active-color="#4F3C27" :list="list" :is-scroll="false"
						:current="current" @change="change"></u-tabs>
				</view>
			</view>
			
			
			<view class="details">
				<view class="item"  v-for="(item,index) in rollCallList" :key="index">
					<view class="picture">
						<u-avatar class="avatar" mode="square"
							:src="item.headPhoto != null ? item.headPhoto : '../../assets/img/head.png'" size="112">
						</u-avatar>
					</view>
					<view class="info">
						<view class="name-tel">
							<view class="name">
								{{item.studentName}}
							</view>
							<view class="tel">
								<view class="img">
									<img src="../../../assets/img/riLine-smartphone-line@1x.png" alt="">
								</view>
								<view>
									{{item.firstContactPhone != null ? item.firstContactPhone : item.secondContactPhone}}
								</view>
							</view>
						</view>
						<view class="else">
							<view class="remain">
								<!-- <view>剩余课时</view>
								<view class="num"></view> -->
							</view>
							<view class="leaved">
								<!-- <view>已请假</view>
								<view class="num"></view> -->
							</view>
						</view>

					</view>
					<view class="state" @click="showStudent(item)">
						<view class="text" v-if="item.rollCallResult == '1'">到课</view>
						<view class="text" v-if="item.rollCallResult == '2'">请假</view>
						<view class="text" v-if="item.rollCallResult == '3'">旷课</view>
						<view class="text" v-if="item.rollCallResult == '4'">补课</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
				</view>
				
				
			</view>
			<!-- <u-cell-group>
				<u-cell-item title="班级名称" :value="classList.className" :arrow="false"></u-cell-item>
				<u-cell-item title="上课时间" :value="scheduleSheet.courseDate+' '+scheduleSheet.coursePeriods" :arrow="false"></u-cell-item>
				<u-cell-item title="上课教室" :value="classRoom.name" :arrow="false"></u-cell-item>
				<u-cell-item class="teacher" title="任课老师" :value="employee.employeeName"
					@click="gotoUrl('pages/teacher/myCourse/teacherHomepage?id='+employee.employeeId)"></u-cell-item>
				<u-cell-item title="学员总数" :value="studentList.length+'人'" :arrow="false"></u-cell-item>
				<u-cell-item title="点名结果批量设置" :value="resultName" @click="show = true"></u-cell-item>
			</u-cell-group> -->
		</view>
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName"
			@confirm="confirm"></u-picker>
		<!-- 底部 -->
		<view class="bottom">
			<view class="sign-result">
				<view class="title">
					签到结果
				</view>
				<view class="result">
					<view class="itemClass arrive">
						到课<text>{{dkNum}}</text>
					</view>
					<view class="itemClass leave">
						请假<text>{{qjNum}}</text>
					</view>
					<!-- <view class="itemClass truant">
						旷课<text>{{scheduleSheet.kkNum!=null?scheduleSheet.kkNum:'0'}}</text>
					</view> -->
					<!-- <view class="itemClass make-up">
						补课<text>{{scheduleSheet.bkNum!=null?scheduleSheet.bkNum:'0'}}</text>
					</view> -->
					<view class="itemClass stop">
						停课<text>{{tkNum}}</text>
					</view>
				</view>
			</view>
			<view class="set-btn">
				<view class="set">
					<view class="set-text">点名结果批量设置</view>
					<view class="choose" @click="show = true">
						<view class="text">
							到课
						</view>
						<view class="icon">
							<u-icon size="28" color="#cccccc" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="btn">
					<button @click="save()">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as callNamesApi from '@/apis/teacher/callNames.js'

	export default {
		data() {
			return {
				resultName: '到课',
				studentId: '',
				studentResult: '',
				classList: {},
				classRoom: {},
				employee: {},
				scheduleSheet: {},
				studentList: [],
				sheetId: '',
				show: false,
				selectorObj: [{
						cateName: '到课',
						id: '1'
					},
					{
						cateName: '请假',
						id: '2'
					},
					// {
					// 	cateName: '旷课',
					// 	id: '3'
					// },
					// {
					// 	cateName: '补课',
					// 	id: '4'
					// }
				],
				list: [{
					name: '正常'
				}, {
					name: '请假'
				}, {
					name: '停课',

				}],
				current: 0,
				leaveStudentList: [],
				stopStudentList: [],
				rollCallList: [],
				dkNum: 0,
				qjNum: 0,
				tkNum: 0,
			}
		},
		onLoad(op) {
			if (op.id) {
				this.sheetId = op.id;
				this.getRollCallDetail();
			}
		},
		methods: {
			getRollCallSignIn() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				callNamesApi.rollCallSignIn(this.sheetId, this.rollCallList).then((response) => {
					uni.hideLoading();
					this.getRollCallDetail();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getRollCallDetail() {
				this.studentList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				callNamesApi.rollCallDetail({
					sheetId: this.sheetId
				}).then((response) => {
					uni.hideLoading();
					this.classList = response.data.class;
					this.classRoom = response.data.classRoom;
					this.employee = response.data.employee;
					this.scheduleSheet = response.data.scheduleSheet;
					var list = response.data.studentList;
					this.leaveStudentList = response.data.leaveStudentList;
					this.stopStudentList = response.data.stopStudentList;
					
					for (var i = 0; i < list.length; i++) {
						if(list[i].rollCallResult == '1' || list[i].rollCallResult == null) {
							this.studentList.push(list[i]);
						}
					}
					
					this.list[0].name = '正常' + this.studentList.length;
					this.list[1].name = '请假' + this.leaveStudentList.length;
					this.list[2].name = '停课' + this.stopStudentList.length;
					this.rollCallList = this.studentList;
					
					this.dkNum = 0;
					this.qjNum = this.leaveStudentList.length;
					this.tkNum = this.stopStudentList.length;
					for (var i = 0; i < this.studentList.length; i++) {
						if(this.studentList[i].rollCallResult == '1') {
							this.dkNum += 1;
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			save() {
				if(this.current == 0) {
					for (var i = 0; i < this.rollCallList.length; i++) {
						if(this.rollCallList[i].rollCallResult == null) {
							this.rollCallList[i].rollCallResult = '1';
						}
					}
				} 
				this.getRollCallSignIn();
			},
			showStudent(item) {
				this.show = true;
				this.studentId = item.studentId;
			},
			confirm(obj) {
				if (!this.studentId) {
					this.resultName = this.selectorObj[obj[0]].cateName;
					for (var i = 0; i < this.rollCallList.length; i++) {
						this.rollCallList[i].rollCallResult = this.selectorObj[obj[0]].id;
					}
				} else {
					for (var i = 0; i < this.rollCallList.length; i++) {
						if (this.studentId == this.rollCallList[i].studentId) {
							this.rollCallList[i].rollCallResult = this.selectorObj[obj[0]].id;
						}
					}
					this.studentId = '';
				}
			},
			change(index) {
				this.current = index;
				if(index == 1) {
					this.rollCallList = this.leaveStudentList;
				} else if(index == 2) {
					this.rollCallList = this.stopStudentList;
				} else {
					this.rollCallList = this.studentList;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 200px;
	}
	
	.main {

		background: linear-gradient(180deg, rgba(13, 186, 199, 1) 0%, rgba(244, 246, 246, 1) 100%);
        .position{
			background-color: rgba(13, 186, 199, 1);
			position: fixed;
			top: 88rpx;
			left: 0;
			right: 0;
			z-index: 999;
		}
		.infos {
			color: #fff;
			padding: 32rpx;
			

			.class {
				color: rgba(255, 255, 255, 1);
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.item {
				display: flex;
				margin-top: 16rpx;

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

		.tabs {
			border-radius: 16px 16px 0px 0px;
			background-color: rgba(255, 255, 255, 1);
			height: 88rpx;
			padding: 0 170rpx;
		}

		.details {
			background-color: #fff;
            margin-top: 424rpx;
			.item {
				padding: 24rpx 32rpx;
				display: flex;
				border-top: 1px solid rgba(229, 231, 234, 1);

				.picture {
					width: 112rpx;
					height: 112rpx;

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

				.info {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.name-tel {
						display: flex;
						align-items: center;

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

						.tel {
							color: rgba(119, 119, 119, 1);
							display: flex;
							align-items: center;
							line-height: 32rpx;
							margin-left: 24rpx;

							.img {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;

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

								}
							}
						}
					}

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

						.remain,
						.leaved {
							display: flex;
							color: rgba(119, 119, 119, 1);
							align-items: center;
							margin-right: 24rpx;

							.num {
								width: 40rpx;
								height: 32rpx;
								line-height: 32rpx;
								border-radius: 4px;
								background-color: rgba(153, 153, 153, 1);
								color: rgba(255, 255, 255, 1);
								font-size: 24rpx;
								text-align: center;
								margin-left: 8rpx;
							}
						}

					}

				}

				.state {
					display: flex;
					align-items: end;
					margin-left: auto;

					.text {
						color: rgba(51, 51, 51, 1);
					}

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

	/deep/.u-cell_title {
		color: rgba(119, 119, 119, 1);
	}

	/deep/.u-cell__value {
		color: #333333;
	}

	.teacher {
		/deep/.u-cell__value {
			color: #00BAC8;
		}
	}

	.student-details {
		padding: 12px 16px;
		background-color: #fff;
		display: flex;
		position: relative;
		border-bottom: 1px solid rgba(229, 231, 234, 1);
		;

		.photo {
			width: 56px;
			height: 56px;
			border-radius: 4px;
			overflow: hidden;
			margin-right: 11px;

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

		.details {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.name-tel {
				display: flex;

				.name {
					margin-right: 12px;
					color: rgba(51, 51, 51, 1);
					font-size: 18px;
				}

				.tel {
					color: rgba(119, 119, 119, 1);
					display: flex;
					align-items: center;
				}
			}

			.class-leave {
				color: rgba(119, 119, 119, 1);
				display: flex;

				.class {
					margin-right: 12px;
					line-height: 14px;
					display: flex;
					align-items: center;
				}

				.leave {
					display: flex;
					align-items: center;
				}

				text {
					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;
					text-align: center;
					margin-left: 4px;

				}

			}

		}

		.to-class {
			color: #333333;
			position: absolute;
			bottom: 34rpx;
			right: 24rpx;
		}
	}

	// 底部
	.bottom {
		padding: 12px 16px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.sign-result {
			display: flex;
			justify-content: space-between;
			padding-bottom: 22rpx;
			border-bottom: 2rpx solid rgba(229, 231, 234, 1);

			.title {
				color: rgba(119, 119, 119, 1);
				line-height: 40rpx;
			}

			.result {
				display: flex;
				justify-content: space-between;

				.itemClass {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					margin-left: 24rpx;

					text {
						display: inline-block;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 8rpx;
						background-color: rgba(22, 132, 252, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						text-align: center;
						margin-left: 6rpx;
					}
				}

				.arrive {
					color: rgba(22, 132, 252, 1);
				}

				.leave {
					color: rgba(129, 97, 255, 1);

					text {
						background-color: rgba(129, 97, 255, 1);
					}
				}

				.truant {
					color: rgba(255, 61, 0, 1);

					text {
						background-color: rgba(255, 61, 0, 1);
					}
				}

				.make-up {
					color: rgba(0, 187, 170, 1);

					text {
						background-color: rgba(0, 187, 170, 1);
					}
				}

				.stop {
					color: rgba(238, 49, 56, 1);

					text {
						background-color: rgba(238, 49, 56, 1);
						;
					}
				}
			}
		}

		.set-btn {
			display: flex;
			margin-top: 20rpx;

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

				.set-text {
					color: rgba(51, 51, 51, 1);
				}

				.choose {
					margin-left: 34rpx;
					display: flex;
					align-items: center;
					height: 20px;

					.text {
						color: rgba(13, 186, 199, 1);
						font-weight: bold;
					}

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

			.btn {
				width: 272rpx;
				margin-left: auto;
			}

			button {

				border-radius: 50px;
				background-color: rgba(13, 186, 199, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 16px;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style>