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

<template>
	<view>
		<u-navbar title="点名签到">
			<view class="slot-wrap" @click="getToday()">
				今天
			</view>
		</u-navbar>
		<!-- <view class="search">
			<u-search placeholder="搜索班级/一对一学员" action-text="查询"></u-search>
		</view> -->
		<view class="date-box">
			<view class="date-picker">
				<view class="check" @click="beforeWeek">
					<u-icon name="arrow-left" size="32"></u-icon>前一周
				</view>
				<view class="date" @click="show = true">
					{{date}}
				</view>
				<view class="check" @click="afterWeek">
					后一周<u-icon name="arrow-right" size="32"></u-icon>
				</view>
			</view>
			
			<u-picker mode="time" v-model="show" :params="params" :defaultTime="defaultTime" @confirm="confirm">
			</u-picker>
			
			<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="item.isDotShow ? 'dot' : ''"
						:style="activeClass == index ? 'background-color: #fff;' : ''">
			
					</view>
					<view class="week ">
						{{item.week}}
					</view>
					<view class="day ">
						{{parseInt(item.day.slice(8))}}
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<!-- <view class="date">
				2023-01-03 星期一
			</view> -->
			<view class="details-box" v-for="(item,index) in callList" :key="index">
				<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.qkNum!=null?item.qkNum:'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">{{item.kkNum}}</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?id=' + item.sheetId)"
						v-if="form.employeeRole == '4'">
						点名签到
					</view>

				</view>
			</view>

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

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

	export default {
		data() {
			return {
				date: '',
				weekDate: [],
				weekN: ["一", "二", "三", "四", "五", "六", "日"],
				activeClass: 0,
				weekDate1: '',
				callList: [],
				defaultTime: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true
				},
				show: false,
				form: {}
			}
		},
		onReady() {
			this.getToday();
			this.getTeacherInfo();
		},
		methods: {
			getTeacherInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					if(response.data.employee != null) {
						this.form = response.data.employee;
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirm(params) {
				this.weekDate = [];
				let pickerDate = params.year + "-" + params.month + "-" + params.day;
				let year = params.year;
				let month = parseInt(params.month);
				let day = parseInt(params.day);
				let mydate = new Date(year, month - 1, day);
				let weekday = mydate.getDay();
				this.weekDate1 = new Date(year, month - 1, day + 1 - weekday);
				
				this.getWeekDate();
				
				for (var m = 0; m < this.weekDate.length; m++) {
					if (pickerDate == this.weekDate[m].day) {
						this.activeClass = m;
						this.date = this.weekDate[m].day;
					}
				}
				this.getCallList();
			},
			getCallList() {
				this.callList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				callNamesApi.rollCallList({
					queryDateStart: this.weekDate[0].day,
					queryDateEnd: this.weekDate[6].day
				}).then((response) => {
					uni.hideLoading();
					var list = response.data.dataList;
					for (var i = 0; i < list.length; i++) {
						if (this.date == list[i].courseDate) {
							this.callList.push(list[i]);
						}
						for (var j = 0; j < this.weekDate.length; j++) {
							if (this.weekDate[j].day == list[i].courseDate) {
								this.weekDate[j].isDotShow = true;
							}
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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.defaultTime = this.getFormatDate(date, true);
				
				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) {
							var weekDate3=new Date(weekDate2.getTime()+i*24*60*60*1000);
							this.weekDate.push({
								week: this.weekN[j],
								day: this.getFormatDate(weekDate3),
								isDotShow: false
							})
						}
					}
				}

				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;
						}
					}
					this.getCallList();
				}
			},
			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() {
				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;
					}
				}
				this.getCallList();
			},
			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;
					}
				}
				this.getCallList();
			},
			activeClassClick(item, index) {
				this.activeClass = index;
				for (var m = 0; m < this.weekDate.length; m++) {
					if (index == m) {
						this.date = this.weekDate[m].day;
					}
				}
				this.getCallList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 200rpx;
	}
	::v-deep.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	}
    .date-box{
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
	}
	.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
		}
	}

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

	}

	.search {
		background-color: #fff;
		padding: 8px 12px;
	}

	::v-deep.u-action {
		width: 17.1%;
		text-align: center;
		line-height: 28px;
		border-radius: 50px;
		background-color: rgba(13, 186, 199, 1);
		color: rgba(255, 255, 255, 1);
	}

	::v-deep.u-content {
		background-color: #F0F4FA !important;
	}

	::v-deep.u-input {
		background-color: #F0F4FA !important;
	}

	.main {
         margin-top:224rpx;
		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>