v3-lab-xcx/pages_student/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}}准入申请</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>
            <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 '@/api/student/index.js'
    export default {
        data() {
            return {
				//列表请求参数
				queryParams: {
				  page: 1,
				  pageSize: 20,
				},
				total:0,
				dataList:[],
            }
        },
        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/accessApplication/applicationDetails?item='+encodeURIComponent(JSON.stringify(item))
                })
            },
            //去选择实验室
            goChooseALaboratory(){
				uni.navigateTo({
				    url:'/pages_student/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>