v3-lab-xcx/pages_safetyExamine/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="@/images/basicsModules/null-data-1.png">
	</scroll-view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {checkClapList,checkClapMylist} from '@/api/apiDemo/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/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>