FE-V2-XCX/pages/gradingControl/gradingControl.vue

<!-- 准入资格证书 -->
<template>
    <view id="accessQualification">
        <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list">
				<view class="list_li" v-for="(item,index) in infoList" :key="index">
					<view class="list_li_t">
						<view class="list_li_t_l" v-if="item.levelName" :style="'color:'+item.levelColor+';border-color:'+item.levelColor">{{item.levelName}}</view>
						<view class="list_li_t_c">{{item.subName}}</view>
						<view class="list_li_t_r">{{item.typeName}}</view>
					</view>
					<view class="list_li_b" >
						<view class="list_li_b_t" @tap="goPageAdd(item,item2)" v-for="(item2,index2) in item.detailList" :key="index2" :style="index2==(item.detailList.length-1)?'border:none;':'border-bottom :1px dashed #cccccc;'">
							<view class="list_li_b_t_t">
								<view class="list_li_b_t_t_n">
									<view class="list_li_b_t_t_l" :class="[item2.ruleType== '日管控' ? 'purple': '', item2.ruleType=='周管控'? 'blue': '',item2.ruleType=='月管控'? 'orange': '',item2.ruleType=='年管控'? 'green': '',]">{{item2.ruleType}}</view>
									<view class="list_li_b_t_t_c">{{item2.ruleName}}</view>
									<view class="list_li_b_t_t_r" v-if="item2.isExpired==1">(过期未完成)</view>
									<view class="list_li_b_t_t_rr" >{{item2.endDate}}</view>
								</view>
								<!-- <img class="list_li_b_t_t_img" src="@/images/icon_04.png" > -->
							</view >
							<view class="list_li_b_t_b">{{item2.ruleRemark}}</view>
						</view>
					
						<!-- <view class="list_li_b_b">
							<view class="list_li_b_b_t">
								<view class="list_li_b_b_t_l">月管控</view>
								<view class="list_li_b_b_t_r">一号规则一号规则</view>
							</view>
							<view class="list_li_b_b_b">内容描述内容描述内容描述内容描述内容描述内容描述 内容描述内容描述内容描述内容描述内容描述内容...</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="get-null-box" v-if="infoList.length==0">暂无更多数据</view>
        </scroll-view>
        <view class="bottom-button-box" @click="goSafeAccess">完成记录</view>
    </view>
</template>

<script>
    import { gradingControl } from '@/api/index.js'
    export default {
        data() {
            return {
                infoList:{},
            }
        },
        onLoad() {

        },
        onShow(){
            this.clearData();
            this.getList();
        },
        methods: {
			goSafeAccess(){
				uni.navigateTo({
					url: '/pages/gradingControl/gradingControlFinish',
				});
			},
            //清除
            clearData(){
                this.infoList = {};
            
            },
            //去添加页面
            goPageAdd(item,item2){
                uni.navigateTo({
                    url:'/pages/gradingControl/gradingControlAdd?item='+encodeURIComponent(JSON.stringify(item))+'&item2='+encodeURIComponent(JSON.stringify(item2))
                })
            },
            //滚动事件
            scrollGet(){
                this.getList();
            },
            //获取列表数据
            async getList(){
                let _this = this;
                let obj = {
                   
                }
                const {data} = await gradingControl(obj)
                if(data.code==200){
                   
					 _this.infoList=data.data;
                }

            },
        }
    }
</script>
 
<style lang="stylus" scoped>
    #accessQualification{
        height:100%;
        display flex
        flex-direction column
        .info-max-box{
            flex:1;
            overflow: scroll
			.for-big-box:last-child{
			    margin-bottom:180rpx;
			}
			/* 列表 */
			.list{
				padding 0 20rpx;
				box-sizing border-box;
				.list_li{
					height:auto;
					.list_li_t{
						height :80rpx;
						display flex;
						justify-content flex-start;
						align-items :center;
						.list_li_t_l{	
							width: 80rpx;
							height: 30rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #EE3A3A;
							line-height: 30rpx;
							border: 2rpx solid #EE3A3A;
							border-radius: 6rpx;
							text-align center;
						}
						.list_li_t_c{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 30rpx;
							margin 0 32rpx 0 16rpx;
						}
						.list_li_t_r{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 30rpx;
						}
					}
					.list_li_b{
						width 710rpx;
						height auto;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding :0 14rpx;
						box-sizing :border-box;
						.list_li_b_t{
							overflow :hidden;
							border-bottom :1rpx dashed #cccccc;
							.list_li_b_t_t{
								display flex;
								justify-content flex-start;
								margin :24rpx 0 18rpx 0;
								.list_li_b_t_t_n{
									flex:1;
									width:655rpx;
									display flex;
									justify-content flex-start;
									.list_li_b_t_t_l{
										width :100rpx;
										height :30rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										/* color: #0183FA; */
										line-height: 24rpx;
										/* background: rgba(1,131,250,0.2); */
										border-radius: 6rpx;
										text-align :center;
									}
									.list_li_b_t_t_c{
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #333333;
										line-height: 28rpx;
										margin :0 16rpx 0 12rpx;
									}
									.list_li_b_t_t_r{
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #EE3A3A;
										line-height: 24rpx;
									}
									.list_li_b_t_t_rr{
										flex:1;
										text-align:right;
										font-family: PingFang SC;
										font-weight: 500;
										color:#999;
										font-size: 24rpx;
										line-height: 24rpx;
									}
								}
								/* 日管控 */
								.purple{
									color: #AC20E0;
									background: rgba(172,32,224,0.2);
								}
								/* 周管控 */
								.blue{
									color: #0183FA;
									background: rgba(1,131,250,0.2);
								}
								/* 月管控 */
								.orange{
									color: #FA8801;
									background: rgba(250,136,1,0.2);
								}
								/* 年管控 */
								.green{
									color: #11BA25;
									background: rgba(17,186,37,0.2);
								}
								
								>img{
									width: 12rpx;
									height: 24rpx;
								}
							}
							.list_li_b_t_b{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 48rpx;
								margin-bottom :14rpx;
								display:block;
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
							}
						}
						.list_li_b_b{
							
							.list_li_b_b_t{
								display :flex;
								justify-content :flex-start;
								margin :30rpx 0 18rpx;
								.list_li_b_b_t_l{
									width :100rpx;
									height :30rpx;
									border-radius: 6rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FA8801;
									line-height: 30rpx;
									background :rgba(250,136,1,0.2);
									text-align :center;
									margin-right :12rpx;
								}
								.list_li_b_b_t_r{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
									line-height: 30rpx;
								}
							}
							.list_li_b_b_b{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 48rpx;
							}
						}
					}
				}
			}
			
			/*暂无数据*/
            .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>