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 infoList" :key="index">
			    <view class="for-time-p">{{item.creatTime}}</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.applyList" :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.subjectName}}</view>
					</view>
					<view class="min-for-box-two">
						<view></view>
						<view>申请人：{{minItem.userName}}</view>
						<view>{{minItem.hi}}</view>
					</view>
			    </view>
			</view>
            <view class="get-null-box" v-if="getData.nullDataType">暂无更多数据</view>
        </scroll-view>
		<view class="tip">请联系管理员开通<text>白名单</text>来获取实验室准入资格</view>
       <!-- <view class="bottom-button-box" @click="goSafeAccess">我的准入</view> -->
    </view>
</template>

<script>
    import { applyList } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
				//选项
				buttonArray:[
					{name:"全部",id:""},
					{name:"待审核",id:"0"},
					{name:"已通过",id:"2"},
					{name:"未通过",id:"1"},
				],
				buttonArrayIndex:0,
				auditStatus:"",
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                },
                infoList:[],
            }
        },
        onLoad() {

        },
        onShow(){
            this.clearData();
            this.getList();
        },
        methods: {
			goSafeAccess(){
				uni.navigateTo({
					url: '/pages_student/workbench/safeAccess/safeAccess',
				});
			},
            //清除
            clearData(){
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
            },
            //去详情页
            goPageInfo(item){
                // uni.navigateTo({
                //     url:'/pages_manage/workbench/accessQualification/accessQualificationInfo?item='+encodeURIComponent(JSON.stringify(item))+'&type='+encodeURIComponent(JSON.stringify(this.tabIndex))
                // })
                uni.navigateTo({
                    url:'/page_manage/accessQualification/accessQualificationInfo?item='+encodeURIComponent(JSON.stringify(item))
                })
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取头部数量数据
            async getTabData(){
                console.log("123")
                const {data} = await getApprovalCount()
                if(data.code == 200){
                    this.tabData = data.data;
                }
            },
			//选择
			buttonChange(e){
				this.buttonArrayIndex = e.detail.value;
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
				this.$set(this,'auditStatus',this.buttonArray[this.buttonArrayIndex].id);
				this.getList();
			},
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
					auditStatus:this.auditStatus
                }
                const {data} = await applyList(obj)
                if(data.code==200){
                    if(self.page==1){
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = data.rows;
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = data.rows;
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }else{
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows)
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows);
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }
                }

            },
        }
    }
</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>