jp-education-student/pages/youth/sickNote/leaveDetails.vue

<template>
	<view>
		<u-navbar title="请假条详情"></u-navbar>
		<view class="head">
			<view class="photo">
				<u-avatar class="avatar" mode="square"
					:src="leaveDetail.headPhoto != null ? leaveDetail.headPhoto : '../../assets/img/head.png'" size="84">
				</u-avatar>
			</view>
			<view class="title">
				{{leaveDetail.studentName}}的请假条
			</view>
			<view class="state1" v-if="leaveDetail.status == 0">
				待处理
			</view>
			<view class="state2" v-if="leaveDetail.status == 1">
				已审核
			</view>
			<view class="state3" v-if="leaveDetail.status == -1">
				已取消
			</view>
		</view>

		<view class="main">
			<view class="item">
				<view class="title">
					所属班级
				</view>
				<view class="value">
					{{leaveDetail.className}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					请假日期
				</view>
				<view class="value">
					{{leaveDetail.courseDate}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					请假课次
				</view>
				<view class="value">
					{{leaveDetail.coursePeriods}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					授课老师
				</view>
				<view class="value">
					{{leaveDetail.teacherName}}
				</view>
			</view>
			<view class="reason">
				<view class="title">
					请假事由
				</view>
				<view class="value">
					{{leaveDetail.leaveReason}}
				</view>
			</view>
			<view class="accessory">
				<view class="title">
					老师签字
				</view>
				<view class="value">
					<img :src="leaveDetail.signUrl" alt="">
				</view>
			</view>
			<view class="item">
				<view class="title">
					老师回复
				</view>
				<view class="value">
					{{leaveDetail.auditComm}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					提交时间
				</view>
				<view class="value">
					{{leaveDetail.createTime}}
				</view>
			</view>
		</view>
		
		<view class="btn" v-if="leaveDetail.status == 0">
			<button @click="leaveCancel">撤销</button>
		</view>
		<view class="btn" v-if="leaveDetail.status == -1">
			<button style="background-color: #DBDBDB" disabled>已撤销</button>
		</view>
	</view>
</template>

<script>
	import * as sickNoteApi from '@/apis/youth/sickNote.js'
	
	export default {
		data() {
			return {
				leaveId: '',
				leaveDetail: {}
			}
		},
		onLoad(op) {
			if (op.id) {
				this.leaveId = op.id;
				this.getLeaveDetail();
			}
		},
		methods: {
			leaveCancel() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				sickNoteApi.cancelStudentLeaveLog({
					leaveId: this.leaveId
				}).then((res) => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getLeaveDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				sickNoteApi.getStudentLeaveLog({
					leaveId: this.leaveId
				}).then((res) => {
					uni.hideLoading();
					this.leaveDetail = res.data;
					this.leaveDetail.createTime = this.getFormatDate(res.data.createTime);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		margin: 12px 16px;
		padding: 12px;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;

		.photo {
			width: 84rpx;
			height: 84rpx;
			border-radius: 4px;
			overflow: hidden;

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

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 16px;
			font-weight: bold;
			margin-left: 24rpx;
		}

		.state1 {
			margin-left: auto;
			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: 7rpx 26rpx;
		}
		
		.state2 {
			margin-left: auto;
			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: 7rpx 26rpx;
		}
		
		.state3 {
			margin-left: auto;
			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: 7rpx 26rpx;
		}
	}

	.main {
		border-radius: 12px;
		background-color: #fff;
		margin: 0 16px;

		.item {
			padding: 11px 15px 14px 15px;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

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

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

		.reason,
		.accessory {
			padding: 11px 15px;
			border-bottom: 1px solid rgba(244, 244, 244, 1);

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

			.value {
				margin-top: 8px;
				color: rgba(51, 51, 51, 1);

				img {
					width: 240rpx;
					height: 120rpx;
				}
			}
		}

		.accessory {
			.value {
				margin-top: 12px;
			}
		}
	}
	
	.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;
		}
	}
</style>