payy-app/views/danger/index.vue

<template>
	<view class="danger-wrap" >
		<view class="search-wrap">
			<uni-easyinput v-model="queryConditions.keywords"
			   suffixIcon="search" 
			   @confirm="search"
			   @iconClick="search"
			   placeholder="请输入隐患名称/关键字" trim />			
		</view>  
		<view class="tab-wrap">
			<view class="tab-item" @click="changeStatus('1')" 
				:class="tabIndex==='1'?'active':''">
				<text>我发起的</text>
			</view>
			<view class="tab-item" @click="changeStatus('2')"
				  :class="tabIndex==='2'?'active':''">
				<text>待处理</text>
			</view>	
			<view class="tab-item" @click="changeStatus('3')"
				  :class="tabIndex==='3'?'active':''">
				<text>已处理</text>
			</view>
			<view class="tab-item" @click="changeStatus('4')"
				  :class="tabIndex==='4'?'active':''">
				<text>已撤销</text>
			</view>					
		</view>
		<view class="search-cont">
			<roll-load :total="queryConditions.total" 
					   :size="queryConditions.limit"
					    :topBt="{show:false}"
						@lower="lower" 
				ref="roll-load" styles="height:calc(100vh - 99rpx )">
				<template v-slot:cont>
					<block></block>
					<uni-list>
						<uni-list-item v-for="(item,index) in dataList" 
							:key='item.dangerId' 
							:title="item.dangerTitle"
							:thumb="item.scenePhoto?item.scenePhoto:'userThumb'" 
							:note="getDesc(item)" thumb-size="lg"
							:rightText="item.taskInsTitle"
							:clickable=true @click="showDetailInfo(item)" showArrow>
						</uni-list-item>											
					</uni-list>
				</template>
			</roll-load>			
		</view>			 		
	</view>
</template>

<script>
	import RollLoad from '@/components/RollLoad/index.vue';
	import userThumb from '@/static/tabBar/mine.png';
	import { getMyHandlingDangerInsByPage } from '@/api/danger.js';
	export default {
		components: {
			RollLoad
		},
		data() {
			return {
				userThumb,
				scrollTop: 0,
				tabIndex:"1",
				old: {
					scrollTop: 0
				},
				pageNumber: 1,
				items: [],
				dataList: [],
				queryConditions: {
					page: 1,
					limit: 10,
					total: 0,
					keywords: ''
				}
			}
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			console.log('refresh');
			 
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			//跳转隐患详情页面
			showDetailInfo(item) {
				uni.navigateTo({
					url: `/views/danger/detail?id=${item.dangerId}&type=${item.formCode}`
				});
			},
			lower: function(e) {
				if (e.status) {
					this.queryConditions.page = e.pageNumber
					this.getList();
				}
			},		
			scroll: function(e) {
				console.log(e.detail.scrollTop)
				this.old.scrollTop = e.detail.scrollTop
			},
			//数据请求分页列表
			getList() {
				// 
				let accountInfo=uni.getStorageSync('accountInfo');
				let queryConditions=Object.assign(this.queryConditions);
					delete queryConditions.total;
				/*
					status--[1]待处理
					status--[-1]已撤销
					不传--已处理
				*/
				let tabIndex=this.tabIndex;
				if(accountInfo){//登录状态可以换取到用户id
					accountInfo=JSON.parse(accountInfo);
					let userId=accountInfo.userId;	
					if(tabIndex==='1'){
						//我发起的
						userId={
							submitAccountId:userId
						}
					}else if(tabIndex==='2'||tabIndex==='3'||tabIndex==='4'){
						//我参与的					
						if(tabIndex==='2'){
							userId={
								taskInsAccountId:userId,
								status:'1'
							}																		
						}else if(tabIndex==='3'){
							userId={
								handleAccountId:userId
							}
						}else{
							userId={
								submitAccountId:userId,
								status:'-1'
							}						
						}
					}
					queryConditions={...queryConditions,...userId}			
				}			   
				getMyHandlingDangerInsByPage(queryConditions).then((res) => {
					this.totalPage = Math.ceil(res.count / res.limit);
					this.dataList = res.data
				})
			},
			search(){
				this.getList();
			},
			changeStatus(status){
				this.tabIndex=status;
				this.queryConditions.keywords="";
				this.getList();
			},
			getDesc(item) {
				let lecel = item.dangerLevel == 1 ? "一般" : "重大";
				let dangerCatTitle=item.dangerCatTitle;
				let desc=`类别: ${dangerCatTitle};等级：${lecel};描述${item.dangerDesc}`
				return desc;			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.danger-wrap{
		background-color: #fff;
		position: relative;
		.tab-wrap{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.tab-item{
				width: 25%;
				height: 70upx;
				text-align: center;
				line-height: 70upx;
				cursor: pointer;
				&.active{
					background-color: #0081FF;
					color: #fff;
					transition: 0.3s;
				}
			}
		}
		.list {
			padding: 10upx 10upx;
			.item {
				border: 1px solid #ccc;
				margin-bottom: 10upx;
				padding: 5upx 5upx;
				border: 2px solid #dedede;
				border-radius: 15upx;
				box-shadow: 2px 2px 2px #aaaaaa;
				position: relative;
				.title {
					display: flex;
					justify-content: flex-start;
					padding-bottom: 10upx;

					.name {
						font-size: 30upx;
						padding-left: 10upx;
					}
				}
				.cont {
					color: #999999;
				}
				.more {
					height: 40upx;
					position: absolute;
					right: 10upx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					justify-content: center;
					align-items: center;
					.icon {
						width: 20upx;
						height: 20upx;
						background-color: red;
						padding-right: 10aaupx;
					}
				}
			}
		}		
	}
</style>