v3-lab-xcx/pages_basics/views/gradingControl/gradingControlFinish.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 dataList" :key="index">
					<view class="list_li_t">
						<!-- <view class="list_li_t_l" :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="goPageInfo(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=='季度管控'? 'lightBlue ': '',item2.ruleType=='半年管控'? 'deepPurple  ': '',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>
								<view class="list_li_t_rr"
									:class="item2.status==0?'list_li_t_rr_color_a':(item2.status==2?'list_li_t_rr_color_b':'')">
									{{item2.status==0?'未执行':(item2.status==2?'已执行':'')}}
								</view>
								<img class="list_li_b_t_t_img" src="@/pages_basics/images/icon_04.png">
							</view>
							<!-- <view class="list_li_b_t_b">{{item2.ruleRemark}}</view> -->
							<view class="list_li_b_t_b">截止执行时间：{{item2.endDate}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="get-null-box" v-if="getDataType">暂无更多数据</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		gradingControlFinish
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				queryParams: {
					page: 1,
					pageSize: 20,
				},
				total: 0,
				getDataType: null,
				dataList: [],
			}
		},
		onLoad() {

		},

		onShow() {
			//this.clearData();
			this.getList();
		},
		methods: {

			//清除
			clearData() {
				this.dataList = [];

			},
			//去详情页
			goPageInfo(item) {
				uni.navigateTo({
					url: '/pages_basics/views/gradingControl/gradingControlDetail?item=' + encodeURIComponent(JSON
						.stringify(item))
				})
			},
			//滚动事件
			scrollGet() {
				this.getList();
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},

			async getList() {
				let self = this;
				const {
					data
				} = await gradingControlFinish(this.queryParams);
				if (data.code == 200) {
					data.data.records.forEach(function(item) {
						item.detailList.forEach(function(item2) {
							item2.endDate = parseTime(item2.endDate, "{y}-{m}-{d}");
						})
					})
					if (self.queryParams.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
		}
	}
</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;
							flex: 1;
						}

						.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;
								flex: 1;
								justify-content flex-start;
								margin: 24rpx 0 18rpx 0;

								.list_li_b_t_t_n {
									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;
										flex: 1;
										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_t_rr {
									width: 100rpx;
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #999999;
									line-height: 28rpx;
									margin-right: 10rpx;
								}

								.list_li_t_rr_color_a {
									color: #FF4E00;
								}

								.list_li_t_rr_color_b {
									color: #14AE10;
								}

								/* 日管控 */
								.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);
								}

								/* 季管控 */
								.lightBlue {
									color: #81d3f8;
									background: rgba(129, 211, 248, 0.2);
								}

								/* 半年管控 */
								.deepPurple {
									color: #6565f1;
									background: rgba(101, 101, 241, 0.2);
								}



								/* 年管控 */
								.green {
									color: #11BA25;
									background: rgba(17, 186, 37, 0.2);
								}

								>img {
									width: 12rpx;
									height: 24rpx;
									margin-top: 2rpx;
								}
							}

							.list_li_b_t_b {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 48rpx;
								margin-bottom: 14rpx;
							}
						}

						.list_li_b_b {

							.list_li_b_b_t {
								display: flex;
								justify-content: flex-start;
								margin: 30rpx 0 18rpx;

								.list_li_b_b_t_n {
									width: 655rpx;
									display flex;
									justify-content flex-start;

									.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;
									}
								}

								>img {
									width: 12rpx;
									height: 24rpx;
								}

							}

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