jp-education-student/pages/teacher/makeUpAttendance/record.vue

<template>
	<view>
		<u-navbar title="补课记录"></u-navbar>
		<view class="screen">
			<view class="date" @click="show = true">
				<view class="text">
					{{signTime}}
				</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="cshow = 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="cshow" mode="single-column" :list="classList" @confirm="classConfirm"></u-select>
		</view>
		<view class="record">
			<view class="record-card" v-for="(item, index) in recordList" :key="index" @click="toModifyRecords(item)">
				<view class="title-time">
					<view class="title">
						{{item.className}}
					</view>
					<view class="time">
						{{item.courseDate}}
					</view>
				</view>
				<view class="condition">
					{{item.studentMessage}}
				</view>
			</view>
		</view>
		<u-divider v-if="recordList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">
			没有更多数据了</u-divider>

		<!-- 底部 -->
		<view class="btn">
			<button @click="toAddRecords">新增补课记录</button>
		</view>
	</view>
</template>

<script>
	import * as myClassApi from '@/apis/teacher/myClass.js'
	import * as makeUpAttendanceApi from '@/apis/teacher/makeUpAttendance.js'

	export default {
		data() {
			return {
				signTime: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				defaultTime: '',
				cshow: false,
				classList: [],
				classId: '',
				className: '全部课程',
				recordList: [],
				pageIndex: 1,
				pageSize: 10,
				recordsTotal: 0
			}
		},
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			if (month >= 1 && month <= 9) {
				month = '0' + month;
			}
			this.defaultTime = year + '-' + month;
			this.signTime = this.defaultTime;

			this.getLoadMyClass();
		},
		onReady() {

		},
		onShow() {
			this.getSupplementaryPageList(true);
		},
		onReachBottom() {
			if (this.recordList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore() {
				this.pageIndex += 1;
				this.getSupplementaryPageList()
			},
			getSupplementaryPageList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.recordList = [];
					this.pageIndex = 1;
				}
				makeUpAttendanceApi.pageList({
					yearMonth: this.signTime,
					classId: this.classId,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading();
					this.recordList = [
						...this.recordList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getLoadMyClass() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myClassApi.loadMyClass().then((res) => {
					uni.hideLoading();
					var list = res.data;
					var list2 = [];
					list2.push({
						value: '',
						label: '全部课程'
					})
					for (var i = 0; i < list.length; i++) {
						list2.push({
							value: list[i].classId,
							label: list[i].className
						})
					}
					this.classList = list2;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			classConfirm(e) {
				this.classId = e[0].value;
				this.className = e[0].label;

				this.getSupplementaryPageList(true);
			},
			confirm(params) {
				this.signTime = params.year + '-' + params.month;

				this.getSupplementaryPageList(true);
			},
			toAddRecords() {
				uni.navigateTo({
					url: '/pages/teacher/makeUpAttendance/addModifyRecords'
				})
			},
			toModifyRecords(item) {
				uni.navigateTo({
					url: '/pages/teacher/makeUpAttendance/addModifyRecords?id=' + item.id

						+ '&classId=' + item.classId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 底部
	.btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 12px;
		background-color: #fff;

		button {
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			line-height: 40px;
		}
	}

	.screen {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 44px;
		line-height: 44px;
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		z-index: 999;

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

	.record {
		margin: 112rpx 32rpx 0;

		.record-card {
			margin-top: 12px;
			background-color: #fff;
			border-radius: 12px;
			padding: 12px;
			display: flex;
			justify-content: space-between;

			.title-time {
				color: rgba(51, 51, 51, 1);

				.title {
					font-weight: bold;
					font-size: 18px;
				}

				.time {
					margin-top: 16rpx;
					font-size: 12px;
				}
			}

			.condition {
				// color: #0DBAC7;
				font-size: 16px;
				display: flex;
				align-items: center;
			}

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

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

	}

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