zhxg_app_v1.0/pages/dormitory/plan.vue

<template>
	<view class="award">
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
			<view class="awardList">
				<view class="List" v-for="(item,index) in awardList" :key="item.index">
					<view class="awardListleft">
						<text class="title">任务类型: {{item.taskType == "1" ? "调宿申请" : "退宿申请"}}</text>
						<text>姓名：{{item.stuName}}</text>
						<text>学号：{{item.stuNo}}</text>
						<text class="home">旧宿舍：{{item.oldDorm}}</text>
						<text class="home">新宿舍：{{item.newDorm}}</text>
						<text class="home">预执行时间：{{item.taskWant}}</text>
						<text class="home">任务状态：<uni-tag :inverted="true" :text="getStatus(item.taskStatus)"
								type="success" /></text>
					</view>
				</view>
			</view>
			<view class="empty" v-if="awardList.length==0&&topLoading==false">
				<image src="@/static/empty.png" mode="widthFix"></image>
				暂时没有数据
			</view>
			<view class="loading-more-top" v-if="topLoading">
				<uni-load-more style="padding-top: 90px;" status="loading" />
			</view>
			<view class="loading-more" v-if="loading">
				<uni-load-more status="loading" />
			</view>
			<view class="no-more" v-if="!loading&&awardList.length!=0">
				到底啦~~
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listOwnTask,
		getTaskStatus
	} from "@/api/dms/index.js";

	export default {
		data() {
			return {
				awardList: [],
				task_status_list: [],
				loading: false,
				topLoading: true,
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
			}
		},
		async onShow() {
			await this.getTaskStatus();
			await this.listOwnTask();
		},
		methods: {
			scrolltolower() {
				if (this.queryParams.pageNum < this.totalPages) {
					this.queryParams.pageNum++;
					this.loading = true;
					setTimeout(() => {
						this.listOwnTask()
					}, 1000)
				} else {}
			},
			async getTaskStatus() {
				let res = await getTaskStatus();
				if (res.code == 200) {
					this.task_status_list = [...res.data]
				}
			},
			getStatus(status) {
				let data = this.task_status_list.filter(x => x.dictValue == status.toString());
				if (data != null && data.length != 0) {
					return data[0].dictLabel;
				} else {
					return "无";
				}
			},
			async listOwnTask() {
				let res = await listOwnTask(this.queryParams);
				if (res.code == 200) {
					this.loading = false;
					if (this.queryParams.pageNum == 1) {
						this.awardList = res.data;
					} else {
						this.awardList = this.awardList.concat(res.data); // 否则追加新数据到列表中
					}
					this.totalPages = Math.ceil(res.total / this.queryParams.pageSize);
					this.topLoading = false;
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.award {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F5F7;

		scroll-view {
			height: calc(100vh - 45px);

			.no-more {
				text-align: center;
				color: gray;
				padding-bottom: 10px;
			}

			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 200rpx;
				color: #9E9E9E;
				font-size: 36rpx;

				image {
					width: 250rpx;
					margin-bottom: 50rpx;
				}
			}
		}

		.awardList {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.List {
				// align-items: center;
				display: flex;
				justify-content: space-between;
				width: 90%;
				background-color: white;
				border-radius: 10rpx;
				padding: 40rpx 30rpx 30rpx 30rpx;
				margin-bottom: 30rpx;

				.awardListleft {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 40rpx;
						font-weight: bold;
						color: black;
						width: 600rpx;
						margin-bottom: 10rpx;
					}

					.home {
						width: 600rpx;
					}

					text {
						padding-bottom: 10rpx;
						color: #9C9C9C;
					}
				}
			}
		}


	}
</style>