FE-lab-xcx/pages_manage/views/accessQualification/accessQualification.vue

<!-- 准入资格证书 -->
<template>
	<view id="accessQualification">
		<view class="top-picker-max-box">
			<input class="top-picker-input-box" type="text" 
			v-model="queryParams.searchValue" placeholder="申请人/实验室名称/房间号" maxlength="20">
			<picker class="top-picker-right-box" @change="buttonChange" 
				:range-key="'name'" :value="id" :range="buttonArray">
				<view>{{buttonArray[buttonArrayIndex].name}}</view>
			</picker>
			<view class="top-picker-left-box" @click="getButton()">搜索</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="for-big-box" v-for="(item,index) in dataList" :key="index">
				<view class="for-time-p">{{item.titleCreatTime}}</view>
				<img class="for-back-img" :src="imagesUrl('commonality/for_min_bg.png')">
				<view class="for-list-box" @click="goPageInfo(minItem)" v-for="(minItem,indexTwo) in item.subList"
					:key="indexTwo">
					<view class="min-for-box-one">
						<view
							:class="minItem.auditStatus==1?'titleType1':(minItem.auditStatus==0?'titleType2':(minItem.auditStatus==2?'titleType3':''))">
							{{minItem.auditStatus==1?'未通过':(minItem.auditStatus==0?'待审核':(minItem.auditStatus==2?'已通过':''))}}
						</view>
						<view>{{minItem.subName}}{{minItem.roomNum?'('+minItem.roomNum+')':''}}</view>
					</view>
					<view class="min-for-box-two">
						<view></view>
						<view>申请人：{{minItem.userName}}</view>
						<view>{{minItem.creatTime}}</view>
					</view>
				</view>
			</view>
			<view class="get-null-box" v-if="getData.nullDataType">暂无更多数据</view>
		</scroll-view>
		<view class="tip">请联系管理员开通<text>白名单</text>来获取实验室准入资格</view>
	</view>
</template>
<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		laboratoryAppletAuditListByApply
	} from '@/pages_manage/api/index.js'
	export default {
		data() {
			return {
				//选项
				buttonArray: [{
						name: "全部",
						id: ""
					},
					{
						name: "待审核",
						id: "0"
					},
					{
						name: "已通过",
						id: "2"
					},
					{
						name: "未通过",
						id: "1"
					},
				],
				buttonArrayIndex: 0,
				auditStatus: "",
				//列表请求参数
				queryParams: {
					searchValue:'',
					page: 1,
					pageSize: 20,
				},
				total: 0,
				dataList: [],

			}
		},
		onLoad() {
			
		},
		onShow() {
			this.clearData();
			this.getList();
		},
		mounted() {

		},
		methods: {
			getButton(){
				this.clearData();
				this.getList();
			},
			//清除
			clearData() {
				this.dataList = [];
				this.queryParams.page = 1;
			},
			//去详情页
			goPageInfo(item) {
				uni.navigateTo({
					url: '/pages_manage/views/accessQualification/accessQualificationInfo?item=' + encodeURIComponent(
						JSON.stringify(item))
				})
			},
			//滚动事件
			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)

				}

			},
			//选择
			buttonChange(e) {
				// this.clearData()
				this.buttonArrayIndex = e.detail.value;
				this.$set(this, 'auditStatus', this.buttonArray[this.buttonArrayIndex].id);
				// this.getList();
			},
			//获取列表数据
			async getList() {
				let self = this;
				this.$set(this.queryParams, 'auditStatus', this.auditStatus)
				const {
					data
				} = await laboratoryAppletAuditListByApply(this.queryParams);
				if (data.code == 200) {
					//定义一个空数组
					let newArr = [];
					if(data.data.records){
						//通过forEach循环数组
						data.data.records.forEach((item, i) => {
							item.creatTime = parseTime(item.creatTime, "{h}:{i}")
							let index = -1;
							//然后在跑到这里筛选 根据不同的时间放置不同的数组    some（）用来查找数组中是否存在某个值  如果存在 就return true
							let isExists = newArr.some((newItem, j) => {
								if (item.titleCreatTime == newItem.titleCreatTime) {
									index = j;
									return true;
								}
							})
							//代码是先跑这里的if条件判读  
							if (!isExists) {
								newArr.push({
									titleCreatTime: item.titleCreatTime,
									subList: [item]
								})
							} else {
								newArr[index].subList.push(item);
							}
						})
					}
					this.dataList = [...this.dataList, ...newArr]
					this.total = data.data.total;
				}
			},


		}
	}
</script>

<style lang="stylus" scoped>
	#accessQualification {
		height: 100%;

		display flex;
		flex-direction column;

		.top-picker-max-box {
			height: 100rpx;
			display flex;
			height: 150rpx;
			background #fff;
			overflow hidden;
			margin-bottom: 15rpx;

			.top-picker-left-box {
				margin-top: 34rpx;
				line-height: 84rpx;
				height:84rpx;
				text-align: center;
				width: 120rpx;
				border-radius:6rpx;
				background-color: #0183fa;
				color:#fff;
				margin-left:20rpx;
			}

			.top-picker-input-box {
				margin-top: 34rpx;
				width: 350rpx;
				height: 82rpx;
				border: 1rpx solid #A2A2A2;
				line-height: 82rpx;
				border-radius: 6rpx;
				margin-left:30rpx;
				padding:0 20rpx;
				view {
					padding: 0 20rpx;
					color: #999999;
				}
			}
			.top-picker-right-box {
				margin-top: 34rpx;
				width: 140rpx;
				height: 82rpx;
				border: 1rpx solid #A2A2A2;
				line-height: 82rpx;
				border-radius: 6rpx;
				margin-left:20rpx;

				view {
					padding: 0 20rpx;
					color: #999999;
				}
			}
		}

		.top-max-box {
			height: 100rpx;
			display flex;
			background #fff;
			margin-bottom: 20rpx;

			.top-button-box {
				width: 200rpx;
				padding-top: 3rpx;

				view:nth-child(1) {
					font-size: 30rpx;
					text-align center;
					color: #333;
					line-height: 95rpx;
				}

				view:nth-child(2) {
					width: 100rpx;
					height: 5rpx;
					margin: 0 auto;
				}

				.colorA {
					color: #0183FA !important;
				}

				.backA {
					background: #0183FA;
				}
			}
		}

		.info-max-box {
			flex: 1;

			overflow: scroll;

			.for-big-box:last-child {
				margin-bottom: 180rpx;
			}

			.for-big-box {
				margin: 0 20rpx 20rpx;
				overflow hidden;
				border-radius: 20rpx;
				// border-bottom-left-radius :20rpx;
				// border-bottom-right-radius :20rpx;
				background #fff;

				.for-time-p {
					background #fff;
					line-height: 57rpx;
					font-size: 30rpx;
					padding: 14rpx 22rpx 0;
					// border-top-left-radius:20rpx;
					// border-top-right-radius:20rpx;
				}

				.for-back-img {
					height: 30rpx;
					width: 710rpx;
				}

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

				.for-list-box {
					border-top: 1rpx solid #E0E0E0;
					margin: 0 24rpx;
					padding: 20rpx 0;

					.min-for-box-one {
						display: flex;

						view {
							height: 36rpx;
							line-height: 36rpx;
							margin: 10rpx 0;
						}

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

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

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

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

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

					.min-for-box-two {
						display: flex;

						view {
							height: 36rpx;
							line-height: 36rpx;
							margin: 10rpx 0;
						}

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

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

						view:nth-child(3) {
							font-size: 26rpx;
						}
					}
				}
			}

			.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;
		}

		.tip {
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1rpx solid #e0e0e0;
			background: #fff;
			font-size: 30rpx;
			color: #333;
			text-align center;

			>text {
				color: red;
			}
		}
	}
</style>