FE-V2-XCX/pages_student/workbench/safeAccess/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 infoList" :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.subjectName}}准入申请</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 { listapply } from '@/api/index.js'
    export default {
        data() {
            return {
                //数据列表
                infoList:[],
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                }
            }
        },
        onLoad() {

        },
        onShow(){
            this.clearData();
            this.getList();
        },
        methods: {
            //清除
            clearData(){
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
            },
            //去准入详情
            goInfoPage(item){
                item.infoId = item.id;
                uni.navigateTo({
                    url:'/pages_student/workbench/safeAccess/applicationDetails?item='+encodeURIComponent(JSON.stringify(item))
                })
            },
            //去选择实验室
            goChooseALaboratory(){
				uni.navigateTo({
				    url:'/pages_student/workbench/safeAccess/newApplication'
				})
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                    // recordContent:"-1",
                    // userId:uni.getStorageSync('userId'),
                }
                const {data} = await listapply(obj)
                if(data.code==200){
					for(let i=0;i<data.rows.length;i++){
						// item.auditTime + ' 至 ' + item.validEndTime
						if(data.rows[i].auditTime){
							let leftTiem = data.rows[i].auditTime.split(' ');
							data.rows[i].auditTime = leftTiem[0];
						}
						if(data.rows[i].validEndTime){
							let rightTuem = data.rows[i].validEndTime.split(' ');
							data.rows[i].validEndTime = rightTuem[0];
						}
					}
                    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>
    #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>