v3-lab-xcx/pages_manage/accessQualification/accessQualification.vue

<!-- 准入资格证书 -->
<template>
    <view id="accessQualification">
		<view class="top-picker-max-box">
			<view class="top-picker-left-box">审核状态</view>
			<picker class="top-picker-right-box" @change="buttonChange"
			:range-key="'name'" :value="id" :range="buttonArray">
				<view>{{buttonArray[buttonArrayIndex].name}}</view>
			</picker>
		</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="@/images/basicsModules/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}}</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 '@/api/manage/index.js'
    export default {
        data() {
            return {
				//选项
				buttonArray:[
					{name:"全部",id:""},
					{name:"待审核",id:"0"},
					{name:"已通过",id:"2"},
					{name:"未通过",id:"1"},
				],
				buttonArrayIndex:0,
				auditStatus:"",
                //列表请求参数
				queryParams: {
				  page: 1,
				  pageSize: 20,
				},
				total:0,
				dataList:[],
				
            }
        },
        onLoad() {

        },
        onShow(){
			this.clearData();
            this.getList();
        },
		mounted() {
			
		},
        methods: {
			//清除
			clearData(){
				this.dataList = [];
				this.queryParams.page = 1;
			},
            //去详情页
            goPageInfo(item){
                uni.navigateTo({
                    url:'/pages_manage/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 = [];
					//通过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:82rpx;
				width:145rpx;
				text-align center;
			}
			.top-picker-right-box{
				margin-top:34rpx;
				width:586rpx;
				height:82rpx;
				border:1rpx solid #A2A2A2;
				line-height:82rpx;
				border-radius:6rpx;
				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>