school/pages/leave/details.vue

<template>
	<view class="center">
		<scroll-view scroll-y="true">
			<view v-for="(item,index) in leaveList" :key="index">
				<view class="leave">
					<view class="type">审批中</view>
					<view class="top flex">
						<image src="../../static/img/indexKcpj.png"></image>
						<view class="font">
							<view class="title">请假</view>
							<view class="time">time</view>
						</view>
					</view>
					<view class="leavefont">请假类型：事假</view>
					<view class="leavefont">开始时间：2021/3/18上午</view>
					<view class="leavefont">结束时间：2021/3/18下午</view>
					<view class="leavefont">理由：{{ item.reason }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getLeave } from '@/api/course.js'
export default {
	data() {
		return{
			page: 1,
			limit: 10,
			loadingType: 'more',
			leaveList:[]
		}
	},
	onLoad() {
		this.loadData()
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//监听页面是否滚动到底部加载更多
	onReachBottom() {
		this.loadData();
	},
	methods: {
		async loadData(type = 'add', loading){
			let obj = this;
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}
			if (type === 'refresh') {
				// 清空数组
				obj.courseList = [];
				obj.page = 1
			}
			//获取反馈列表
			getLeave({
				page: obj.page,
				limit: obj.limit
			}).then(e => {
				
				obj.leaveList = obj.leaveList.concat(e.data.data);
				console.log(obj.leaveList)
				//判断是否还有下一页，有是more  没有是nomore
				if (obj.limit==e.data.length) {
					obj.page++
					obj.loadingType='more'
				} else{
					obj.loadingType='nomore'
				}
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			})
		},
		
	}
}
</script>

<style lang="scss">
.leave {
	position: relative;
	padding-left: 24rpx;
	padding-top: 34rpx;
	margin: 0 auto;
	margin: 20rpx;
	padding-bottom: 20rpx;
	background: #FFFFFF;
	box-shadow: 0px 5rpx 24rpx 0px rgba(4, 0, 0, 0.06);
	border-radius: 15rpx;
	.type {
		position: absolute;
		top: 38rpx;
		right: 32rpx;
		width: 97rpx;
		height: 38rpx;
		background: #FCF0D8;
		border-radius: 5rpx;
		text-align: center;
		font-size: 22rpx;
		font-weight: 500;
		color: #FEA42C;
		line-height: 38rpx;
	}
	.top {
		justify-content: start;
		margin-bottom: 34rpx;
		image {
			width: 63rpx;
			height: 66rpx;
		}
		.font {
			margin-left: 10rpx;
			
			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #303338;
			}
			.time {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #989DA5;
			}
		}
	}
	.leavefont {
		font-size: 28rpx;
		font-weight: 500;
		color: #808080;
		margin-bottom: 10rpx;
	}
}
</style>