jp-education-student/pages/youth/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" @click="toLeaveDetails(item)">
				<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">
						{{getFormatDate(item.createTime)}}
					</view>
				</view>
			</view>
		</view>

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

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

	export default {
		data() {
			return {
				leaveList: [],
				pageNum: 1,
				pageSize: 10,
				recordsTotal: 0,
				years: '',
				studentId: ''
			}
		},
		onShow() {
			if (this.carhelp.getNsStudentId()) {
				this.studentId = this.carhelp.getNsStudentId().studentId;
				this.getLeaveList(true);
			}
		},
		onReachBottom() {
			if (this.leaveList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			getFormatDate(val) {
				let date = new Date(val);
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				if (mymonth < 10) {
					mymonth = '0' + mymonth;
				}
				if (myweekday < 10) {
					myweekday = '0' + myweekday;
				}
				if(hour < 10) {
					hour = '0' + hour;
				}
				if(minute < 10) {
					minute = '0' + minute;
				}
				if(second < 10) {
					second = '0' + second;
				}
			
				return (myyear + '-' + mymonth + '-' + myweekday + ' ' + hour + ':' + minute + ':' + second);
			},
			toLeaveDetails(item) {
				uni.navigateTo({
					url: '/pages/youth/sickNote/leaveDetails?id=' + item.leaveId
				})
			},
			toLeave() {
				uni.navigateTo({
					url: '/pages/youth/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>