FE-lab-xcx/pages_safetyExamine/views/snapshotManage/snapshotList.vue

<!-- 随手拍-列表 -->
<template>
	<view class="examine">
		<view class="header">
			<view class="tabTitle_tow">
				<view class="tabTitle_tow_li" @tap="tabClickTow(index)" :key="index" v-for="(item,index) in tabTextTow">
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item}}</view>
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list_three">
				<view class="list_three_li" v-for="(item,index) in  dataList" :key="index"
					@click="handleClick(item,'detail')">
					<view class="list_three_li_t">
						<view class="list_three_li_t_l"></view>
						<view class="list_three_li_t_c">{{item.subName}}</view>
						<view class="list_three_li_t_r"></view>
					</view>
					<view class="list_three_li_m">
						<view class="list_three_li_m_t">{{item.hazardDescribe}}</view>
						<view class="list_three_li_m_b">
							<text class="blue_color" v-if="item.rectifyStatus==0">待整改</text>
							<text class="green_color" v-if="item.rectifyStatus==1">已整改</text>
							<text class="orange_color" v-if="item.rectifyStatus==2">暂无法整改</text>
							<text>{{item.deptName}}</text>
						</view>
					</view>
					<view class="list_three_li_b">
						<view class="list_three_li_b_l">
							<img src="@/pages_safetyExamine/images/icon_ssp_ry.png" />
							<text>上报人：{{item.createName}}</text>
						</view>
						<view class="list_three_li_b_r">{{item.timeFlag}}</view>
					</view>
				</view>
			</view>
			<img class="null-img" v-if="!dataList[0]" src="@/pages_safetyExamine/images/null-data-1.png">
		</scroll-view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		checkClapList,
		checkClapMylist
	} from '@/pages_safetyExamine/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
					rectifyStatus: 0,
				},
				tabTextTow: ['待整改', '已整改', '暂无法整改'],
				curTabTow: 0,
				form: {
					name: '',
					type: '校院巡查',
					startTime: '',
					endTime: '',
					inspectScope: [],
					tiemQuickList: [],
					scopeIndex: '',
					seleteListLab: [],
					patrolIndex: '',
					seleteListMember: [],
				},
				collegeList: [{
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, {
					name: '学院名称',
					type: false
				}, ],
				collegeIndex: 0,
				collegeArray: ['选择学院', '学院名称1', '学院名称2', '学院名称3', ],
				dataList: [],
			}
		},
		onLoad(option) {
			if (option.form) {
				this.form = JSON.parse(decodeURIComponent(option.form));
				console.log(this.form)
			}
			if (option.pageType) {
				this.pageType = option.pageType
				if (option.pageType == 1) {
					uni.setNavigationBarTitle({
						title: '随手拍管理'
					})
				} else if (option.pageType == 2) {
					uni.setNavigationBarTitle({
						title: '随手拍上报记录'
					})
				}
			}

		},
		onShow() {

		},
		mounted() {
			this.dataList = [];
			this.getList()
		},
		methods: {
			//顶部tab点击
			tabClickTow(index) {
				this.dataList = [];
				this.curTabTow = index;
				this.getData.pageNum = 1;
				this.getData.rectifyStatus = index;
				this.getList()
			},

			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.pageNum) {
					console.log('没有更多数据!')
				} else {
					setTimeout(function() {
						self.getData.pageNum += 1;
						self.getList();
					}, 1000)

				}
			},
			handleClick(item, doType) {
				let self = this;
				if (doType == 'subBtn') { //

				} else if (doType == 'detail') { //详情
					uni.navigateTo({
						url: '/pages_safetyExamine/views/snapshotManage/snapshotDetail?id=' + item.id +
							'&rectifyStatus=' + this.getData.rectifyStatus + '&pageType=' + this.pageType
					})
				}

			},
			async getList() {
				let _this = this;
				if (this.pageType == 1) { //随手拍管理
					const {
						data
					} = await checkClapList(this.getData);
					if (data.code == 200) {
						this.total = data.data.total;
						this.dataList = [...this.dataList, ...data.data.records]
					}
				} else if (this.pageType == 2) { //随手拍记录
					const {
						data
					} = await checkClapMylist(this.getData);
					if (data.code == 200) {
						this.total = data.data.total;
						this.dataList = [...this.dataList, ...data.data.records]
					}
				}

			},

		}
	}
</script>

<style lang="stylus" scoped>
	.examine {
		height: 100%;
		display flex;
		// padding: 0 30rpx;
		// box-sizing: border-box;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.blue_color {
			color: #0183FA;
			border: 1rpx solid #0183FA;
		}

		.red_color {
			color: #FF4545;
			border: 1rpx solid #FF4545;
		}

		.green_color {
			color: #1FA50D;
			border: 1rpx solid #1FA50D;
		}

		.orange_color {
			color: #FA8E1B;
			border: 1rpx solid #FA8E1B;
		}

		.gray_color {
			color: #A2A2A2;
			border: 1rpx solid #A2A2A2;
		}

		.null-img {
			display block;
			width: 276rpx;
			height: 321rpx;
			margin: 100rpx 0 0 274rpx;
		}

		.info-max-box {
			flex: 1;
			overflow: scroll;

			padding: 120rpx 0rpx 0;
			box-sizing: border-box;
		}

		/* 切换按钮 */
		.header {
			width: 100%;
			position: fixed;
			top: 0rpx;
			z-index: 100;

			.tabTitle_tow {
				width: 100%;
				height: 100rpx;
				background: #fff;
				display flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx solid #E0E0E0;

				.tabTitle_tow_li {
					flex: 1;
					position: relative;
					text-align center;

					.tabTitle_tow_text {
						display: inline-block;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 46rpx;
						position: relative;

						&.on {
							color: #0183FA;
						}
					}

					.tabTitle_tow_across {
						width: 50rpx;
						height: 4rpx;
						background: #0183FA;
						border-radius: 2rpx;
						margin-left: 38%;
						display none;

						&.on {
							display block;
						}
					}

				}
			}
		}

		.list_three {
			padding: 0 30rpx;
			box-sizing: border-box;

			.list_three_li {
				position: relative;
				width: 690rpx;
				height: 336rpx;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				.list_three_li_t {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;

					.list_three_li_t_l {
						position: absolute;
						left: -15rpx;
						top: 76rpx;
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						background: #F5F5F5;
						border-radius: 15rpx;
					}

					.list_three_li_t_c {
						width: 630rpx;
						height: 110rpx;
						position: absolute;
						left: 30rpx;
						top: 0;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 110rpx;
						border-bottom: 1rpx dashed #D8D8D8;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-right: 60rpx;
						box-sizing: border-box;
					}

					.list_three_li_t_r {
						position: absolute;
						right: -15rpx;
						top: 76rpx;
						width: 30rpx;
						height: 30rpx;
						background: #F5F5F5;
						border-radius: 15rpx;
					}
				}

				.list_three_li_m {
					position: absolute;
					top: 110rpx;
					left: 0;
					width: 690rpx;
					height: 158rpx;
					padding-left: 30rpx;
					box-sizing: border-box;

					.list_three_li_m_t {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						margin-top: 22rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.list_three_li_m_b {
						margin-top: 26rpx;

						>text:nth-of-type(1) {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							border-radius: 6rpx;
							padding: 0 20rpx;
							box-sizing: border-box;
							margin-right: 14rpx;
						}

						>text:nth-of-type(2) {
							display: inline-block;
							width: 380rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.list_three_li_b {
					height: 76rpx;
					width: 100%;
					position: absolute;
					top: 258rpx;
					left: 0;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.list_three_li_b_l {
						display: flex;
						justify-content: space-between;
						align-items: center;

						>img {
							width: 28rpx;
							height: 30rpx;
							margin-right: 14rpx;
						}

						>text {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 76rpx;
						}
					}

					.list_three_li_b_r {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 76rpx;
					}
				}

			}
		}

	}
</style>