v3-lab-xcx/pages_basics/views/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>
							</view>
							<view class="list_li_b_t_b">{{item2.ruleRemark}}</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 {
		parseTime
	} from '@/component/public.js'
	import {
		gradingControl
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				infoList: {},
			}
		},
		onLoad() {

		},
		onShow() {
			this.clearData();
			this.getList();
		},
		methods: {
			goSafeAccess() {
				uni.navigateTo({
					url: '/pages_basics/views/gradingControl/gradingControlFinish',
				});
			},
			//清除
			clearData() {
				this.infoList = {};

			},
			//去添加页面
			goPageAdd(item, item2) {
				uni.navigateTo({
					url: '/pages_basics/views/gradingControl/gradingControlAdd?item=' + encodeURIComponent(JSON
						.stringify(item)) + '&item2=' + encodeURIComponent(JSON.stringify(item2))
				})
			},
			//滚动事件
			scrollGet() {
				this.getList();
			},
			//获取列表数据
			async getList() {
				let self = this;
				let obj = {

				}
				const {
					data
				} = await gradingControl(obj)
				if (data.code == 200) {
					data.data.forEach(function(item){
						item.detailList.forEach(function(item2){
							item2.endDate=parseTime(item2.endDate, "{y}-{m}-{d} {h}:{i}:{s}");
						})
					})

					self.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>