v3-h5-web/pages_student/views/accessApplication/safeAccess.vue

<!-- 安全准入 -->
<template>
	<view id="safeAccess">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="for-box" v-for="(item,index) in dataList" :key="index" @click="goInfoPage(item)">
				<view class="name-box">
					<view
						:class="item.auditStatus==0?'typeColor1':(item.auditStatus==1?'typeColor2':(item.auditStatus==2?'typeColor3':''))">
						{{item.auditStatus==0?'待审核':(item.auditStatus==1?'未通过':(item.auditStatus==2?'已通过':''))}}
					</view>
					<view>{{item.subName}}{{item.roomNum?'('+item.roomNum+')':''}}准入申请</view>
				</view>
				<view class="time-box">
					<view></view>
					<view>
						{{item.auditStatus==0?'申请时间：' + item.creatTime:(item.auditStatus==1?'审核未通过时间：' + item.rejectTime:(item.auditStatus==2?'有效期：' + item.auditTime + ' 至 ' + item.validEndTime:''))}}
					</view>
				</view>
			</view>
			<img v-if="!dataList[0]" :src="imagesUrl('commonality/chemicalsInfoNull.png')" style="width:300rpx;height:300rpx;margin:200rpx auto 0rpx;display: block;">
			<view v-if="!dataList[0]" class="get-null-box">暂无数据</view>
			<view class="get-null-box" v-if="getData.nullDataType">暂无更多数据</view>
		</scroll-view>
		<view class="bottom-button-box" @click="goChooseALaboratory">准入申请</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		laboratoryAppletListApply
	} from '@/pages_student/api/index.js'
	export default {
		data() {
			return {
				//列表请求参数
				queryParams: {
					page: 1,
					pageSize: 20,
				},
				total: 0,
				dataList: [],
				getData:{},
			}
		},
		onLoad() {

		},
		onShow() {
			this.clearData();
			this.getList();
		},
		methods: {
			//清除
			clearData() {
				this.dataList = [];
				this.queryParams.page = 1;
			},
			//去准入详情
			goInfoPage(item) {
				item.infoId = item.id;
				uni.navigateTo({
					url: '/pages_student/views/accessApplication/applicationDetails?item=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},
			//去选择实验室
			goChooseALaboratory() {
				uni.navigateTo({
					url: '/pages_student/views/accessApplication/newApplication'
				})
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					console.log('没有更多数据!')
				} else {
					setTimeout(function() {
						self.queryParams.page += 1;
						self.getList();
					}, 1000)

				}

			},
			//获取列表数据
			async getList() {
				let self = this;
				this.$set(this.queryParams, 'auditStatus', this.auditStatus)
				const {
					data
				} = await laboratoryAppletListApply(this.queryParams);
				if (data.code == 200) {
					//通过forEach循环数组
					data.data.records.forEach((item, i) => {
						item.auditTime = parseTime(item.auditTime, "{y}-{m}-{d}")
						item.validEndTime = parseTime(item.validEndTime, "{y}-{m}-{d}")
						item.rejectTime = parseTime(item.rejectTime, "{y}-{m}-{d}")
					})
					this.dataList = [...this.dataList, ...data.data.records]
					this.total = data.data.total;
				}
			},

		}
	}
</script>

<style lang="stylus" scoped>
	#safeAccess {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;

		.info-max-box {
			flex: 1;

			overflow: scroll;

			.for-box:nth-child(1) {
				border: none;
			}

			.for-box {
				background #fff;
				border-radius: 20rpx;
				margin: 20rpx;
				overflow hidden;

				.name-box {
					display flex;
					margin: 20rpx 0;

					view:nth-child(1) {
						height: 36rpx;
						text-align center;
						width: 100rpx;
						line-height: 36rpx;
						font-size: 20rpx;
						margin: 0 18rpx 0 23rpx;
					}

					view:nth-child(2) {
						flex: 1;
						font-size: 28rpx;
						margin-right: 20rpx;
					}

					.typeColor1 {
						border-radius: 6rpx;
						color: #F6A71D;
						background rgba(246, 167, 29, 0.2)
					}

					.typeColor2 {
						border-radius: 6rpx;
						color: #FF5555;
						background rgba(255, 85, 85, 0.2)
					}

					.typeColor3 {
						border-radius: 6rpx;
						color: #30A23D;
						background rgba(48, 162, 61, 0.2)
					}

					.typeColor4 {
						border-radius: 6rpx;
						color: #F6A71D;
						background rgba(246, 167, 29, 0.2)
					}
				}

				.time-box {
					display flex;
					height: 36rpx;
					margin: 20rpx 0;

					view:nth-child(1) {
						width: 100rpx;
						line-height: 36rpx;
						font-size: 20rpx;
						margin: 0 18rpx 0 23rpx;
					}

					view:nth-child(2) {
						flex: 1;
						font-size: 28rpx;
					}
				}
			}

			.get-null-box {
				height: 100rpx;
				line-height: 100rpx;
				color: #999;
				text-align center
			}
		}

		.bottom-button-box {
			border-radius: 20rpx;
			margin: 20rpx 50rpx;
			width: 650rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #0183FA;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align center;
		}
	}
</style>