jp-education-student/pages/parents/sickNote/sickNote.vue

<template>
	<view>
		<u-navbar title="请假"></u-navbar>
		<view class="main">
			<view class="sick-note" v-for="(item,index) in leaveList" :key="index">
				<view class="head">
					<view class="name">
						{{item.studentName}}的请假条
					</view>
					<view class="state1" v-if="item.status == 0">
						待处理
					</view>
					<view class="state2" v-if="item.status == 1">
						已审核
					</view>
					<view class="state3" v-if="item.status == -1">
						已取消
					</view>
				</view>
				<view class="infos">
					<view class="class">
						{{item.className}}
					</view>
					<view class="date">
						{{item.createTime.slice(0,10)}}
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<button @click="toLeave">请假</button>
		</view>
	</view>
</template>

<script>
	import * as sickNoteApi from '@/apis/parents/sickNote.js'

	export default {
		data() {
			return {
				leaveList: [],
				pageNum: 1,
				pageSize: 10,
				recordsTotal: 0,
				years: '',
				studentId: ''
			}
		},
		onReady() {
			if (this.carhelp.getStudentId()) {
				this.studentId = this.carhelp.getStudentId().studentId;
				this.getLeaveList();
			}
		},
		onReachBottom() {
			if (this.leaveList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			toLeave() {
				uni.navigateTo({
					url: '/pages/parents/sickNote/leave'
				})
			},
			myLoadmore() {
				this.pageNum += 1;
				this.getLeaveList()
			},
			getLeaveList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.leaveList = [];
					this.pageNum = 1;
				}
				sickNoteApi.loadStudentLeaveLog({
					studentId: this.studentId,
					yyyyMM: this.years,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading();
					this.leaveList = [
						...this.leaveList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 12px;

		.sick-note {
			padding: 16px 12px;
			border-radius: 12px;
			background-color: #fff;
			margin-bottom: 12px;

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

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

				.state1 {
					line-height: 24px;
					border-radius: 50px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(22, 119, 255, 1);
					font-size: 12px;
					text-align: center;
					border: 1px solid 1px solid rgba(22, 119, 255, 1);
					padding: 0 16rpx;
				}
				
				.state2 {
					line-height: 24px;
					border-radius: 50px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(0, 187, 170, 1);
					font-size: 12px;
					text-align: center;
					border: 1px solid rgba(0, 187, 170, 1);
					padding: 0 16rpx;
				}
				
				.state3 {
					line-height: 24px;
					border-radius: 50px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(153, 153, 153, 1);
					font-size: 12px;
					text-align: center;
					border: 1px solid 1px solid rgba(153, 153, 153, 1);
					padding: 0 16rpx;
				}

				.checked {
					border: 1px solid rgba(204, 204, 204, 1);
					color: rgba(119, 119, 119, 1);
				}
			}

			.infos {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8px;

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

				.date {
					color: rgba(119, 119, 119, 1);
				}
			}
		}
	}

	.bottom {
		padding: 10px 16px;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

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