hptwxMiniProgram/pages/history/history.vue

<template>
	<view class="history-container">
		<view class="tabs">
			<view class="tab" :class="tabIdx===3?'active':''" @click="tabclick(3)">满意度评价</view>	
			<view class="tab" :class="tabIdx===2?'active':''" @click="tabclick(2)">隐患记录</view>						
			<view class="tab" :class="tabIdx===1?'active':''" @click="tabclick(1)">安全巡检</view>
			<view class="tab" :class="tabIdx===4?'active':''" @click="tabclick(4)">危险源</view>	
		</view>
		<view class="item-list-wrap" v-if="total>0">
			<view class="item-list basics" v-if="tabIdx===1||tabIdx===4">
				<view class="basics-item" v-for="(item,idx) in items" :key="idx" @click="showDetail(item)">
					<view class="basics-title">{{item.checklistTitle}}</view>
					<view class="basics-body">
						<view class="lf">
							<text class="time">{{item.recordTime}}</text>
							<text class="user">{{item.accountName||'微信用户'}}</text>							
						</view>
						<view class="status">{{checklistStatus(item.status)}}</view>
					</view>						
				</view>				
			</view>
			<view class="item-list basics danger" v-if="tabIdx===2">
				<view class="basics-item" v-for="(danger,dangerIdx) in items" :key="dangerIdx" @click="linkTo(danger)">
					<view class="basics-title">{{danger.dangerTitle}}</view>
					<view class="basics-body">
						<view class="lf">
							<text class="time">{{danger.dangerDeadLine}}</text>
							<text class="user">{{danger.curAccountName}}</text>							
						</view>
						<view class="status">{{dangerStatus(danger.status)}}</view>
					</view>						
				</view>				
			</view>		
			<view class="item-list satisfaction" v-if="tabIdx===3">
				<view class="uni-table">
					<view class="uni-table-tr">
						<view class="uni-table-th">姓名</view>
						<view class="uni-table-th" style="80px;text-align:right;">评分</view>	
					</view>
					<view class="uni-table-tr" v-for="(item,index) in items" :key="index"  @click="showDetail(item)">
						<view class="uni-table-td">{{item.accountName||'微信用户'}}</view>
						<view class="uni-table-td" style="80px;text-align:right;">{{item.score===null?'--':item.score}}</view>	
					</view>
				</view>
			</view>								
		</view>
		<template v-else>
			<view class="isEmpty" >
				<p class="word">没有数据 ^_^ </p>
			</view>
		</template>
	</view>
</template>
<script>
	import {getDangerByPage} from '@/api/aqpt/dangerApi.js'
	import { getchecklistByPage} from '@/api/aqpt/checklistPoint.js'
	export default { 
		data() {
			return {
				conditions:{
					page:1,
					limit:15,					
				},
				total:0,
				items:[],
				tabIdx:3
			}
		},
		onShow() {
			this.init()
		},
		onLoad() {
			uni.$on('type',(tabIdx)=>{
				if(tabIdx){
					this.tabIdx=tabIdx					
					// this.tabclick(tabIdx)
				}
			})
		},
		methods: {	
			dangerStatus(i) {
			  if (i >= 0) {
			    const strs = ['待提交','待评审','待整改','待验收','已完成']
			    return strs[i]
			  } else {
			    return '已撤销'
			  }
			},
			checklistStatus(val){
				if(val===-1)return "巡检异常"
				const strs = ['未开始','未完成','完成']
				return strs[val]
			},
			dangerLevelFilter(val){
				let levels=['未知','一般隐患','重大隐患'];
				return levels[val]
			},
			init(){
				this.items=[]
				this.total=0
				this.conditions={
					limit:15,
					page:1
				}
				this.getData()
				this.clearDetail()
			},	
			tabclick(tabIdx){
				this.tabIdx=tabIdx
				this.init()
			},
			getData(){
				if(this.tabIdx===2){
					getDangerByPage(this.conditions).then((res)=>{
						let items=JSON.parse(JSON.stringify(this.items))
						this.items=items.concat(res.data)
						this.total=res.total
					})				
				}
				if(this.tabIdx===1||this.tabIdx===3||this.tabIdx===4){
					let checklistTypeId=undefined;
					let enums={1:2,3:3,4:1}
					getchecklistByPage({
						...this.conditions,
						checklistTypeId:enums[this.tabIdx]
					}).then((res)=>{
						let items=JSON.parse(JSON.stringify(this.items))
						this.items=items.concat(res.data)
						this.total=res.total
					})
				}
			},
			changePageNumber({type,current}){
				this.conditions.page=current
				this.getData()
			},
			clearDetail(){
				if(uni.getStorageSync('detail-info')){
				  uni.removeStorageSync('detail-info')
				}				
			},
			linkTo(item){
				uni.setStorageSync('detail-info',item)
				uni.navigateTo({
					url:'/pages/history/detail/detail'
				})
			},
			showDetail(item){
				let pageUrl="";
				if(this.tabIdx===1){
					pageUrl="/pages/app_views/checkList/index/index"				
				}
				if(this.tabIdx===3){
					pageUrl="/pages/app_views/satisfaction_evaluation/satisfaction_evaluation"
				}
				if(this.tabIdx===4){
					pageUrl="/pages/app_views/hazard/index/index"
				}
				uni.navigateTo({
					url:`${pageUrl}?type=history&id=${item.checklistId}&recordId=${item.recordId}`
				})	
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}			
		},
		onUnload() {
			uni.$off('type')
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			if(this.total>=this.conditions.page*this.conditions.limit){
				this.conditions.page++
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
.history-container{
	padding-bottom: 100rpx;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: #F5F6F8;	
	.tabs{
		overflow-x: auto;
		display: flex;
	    background-color: #fff;	
		border-radius: 16rpx;
		.tab{
			height: 88rpx;
			line-height: 88rpx;
			display: inline-block;
			padding: 0 32rpx;
			flex-shrink: 0;
			font-size: 28rpx;
			color: #35364F;
			&.active{
				font-size: 34rpx;
				color: #4D73FF;
				font-weight: 700;
			}
		}
	}
}
.isEmpty{
	width: 100%;
	height: 100vh;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzkgODYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjM4Ljg1JSIgeTE9IjAlIiB4Mj0iNjEuMTUlIiB5Mj0iMTAwJSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZDRkNGRCIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNFRUVGRjMiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCUiIHkxPSI5LjUlIiB5Mj0iOTAuNSUiPjxzdG9wIHN0b3AtY29sb3I9IiNGQ0ZDRkQiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRTlFQkVGIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGlkPSJjIiBkPSJNMCAwaDE3djM2SDB6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTM5LjUgODZDNjEuMzE1IDg2IDc5IDgzLjkxIDc5IDgxLjMzM1M1Ny4zMTUgNzggMzUuNSA3OCAwIDc4Ljc1NiAwIDgxLjMzM0MwIDgzLjkxMSAxNy42ODUgODYgMzkuNSA4NnoiIGZpbGw9IiNGN0Y4RkMiLz48cGF0aCBmaWxsPSIjRTVFN0U5IiBkPSJNMTMgNDVoNDBMNDIgNThIMnpNNjUuNTUxIDI5Ljk4bC0xNi4zMTMtNy42MDctMi44NDEtNS43MzggMTYuMzEzIDcuNjA3eiIvPjxwYXRoIGZpbGw9IiNFREVFRjIiIGQ9Ik02NS41NTEgMjkuOThsLTM0LjQ0LTE2LjA1OS0xNS4yMTQgMzIuNjI3IDM0LjQ0IDE2LjA2eiIvPjxwYXRoIGZpbGw9InVybCgjYSkiIHRyYW5zZm9ybT0icm90YXRlKDI1IDI3LjQ0NiAtNDMuNDE2KSIgZD0iTTM4IDdoMTd2MzZIMzh6Ii8+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTE1LjcwNSA2LjczN2wxNS40MDcgNy4xODQgMTUuNjQ2LS40MjctMTUuNDA3LTcuMTg1eiIvPjxwYXRoIGZpbGw9InVybCgjYikiIGQ9Ik0xMyA0NWg0MHYzNkgxM3oiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MyA0NSkiPjxtYXNrIGlkPSJkIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNjIi8+PC9tYXNrPjx1c2UgZmlsbD0iI0UwRTNFOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTcgMCkiIHhsaW5rOmhyZWY9IiNjIi8+PHBhdGggZmlsbD0iI0Q1RDdERSIgbWFzaz0idXJsKCNkKSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjQgMCkiIGQ9Ik03IDBoMTdsLTQgMTgtMjAtMnoiLz48L2c+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTcwIDQ1SDUzbDkgMTNoMTd6Ii8+PC9nPjwvc3ZnPg==);
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	background-color: #fff;
	/* #ifndef MP-WEIXIN */
		height: calc( 100vh - 100px);	
	/* #endif */
	.word{
		width: 100%;
		text-align: center;
		position: absolute;
		top: 80vh;
		left: 0;
		color: #999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}
}
	
.item-list-wrap{
	padding: 0 20rpx;
	background-color: #F5F6F8;
	margin-top: 18rpx;
	.item-list{
		background-color: #fff;
	    border-radius: 16rpx;	
		overflow: hidden;
		.chat-custom-right{
			.chat-custom-text{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 28rpx;
				color: #666666;					
			}
			.bottom{
				text-align: right;
				padding-top: 10rpx;	
				.status{
					font-size: 28rpx;
					line-height: 1;
					display: inline-block;				
					border: 1px solid #13ce66;
					color: #13ce66;
					padding: 8rpx 10rpx;
					border-radius: 4rpx;
				}
				.level{
					line-height: 1;
					display: inline-block;	
					font-size: 28rpx;
					color: #666666;		
				    margin-left: 10rpx;		
					border: 1px solid transparent;
					padding: 8rpx 10rpx;
					border-radius: 4rpx;				
					&-1{
						color:#13ce66 ;
						border-color: #13ce66;
					}
					&-2{
						color: red;
						border-color: red;				
					}
				}			
			}
	
		}
		&.basics{
			background-color: #F5F6F8;	
			.basics-item{
				padding:30rpx 40rpx ;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				background-color: #fff;	
				.basics-title{
					font-size: 32rpx;
					line-height: 48rpx;
					font-weight: 500;
					color: #212121;
				}
				.basics-body{
					display: flex;
					align-items: center;
					padding-top: 32rpx;
					.lf{
						flex: 1;
						.time{
							font-size: 24rpx;
							line-height: 48rpx;
							color: #999999;
							padding-left: 34rpx;
							background-position: center left; 
							background-repeat: no-repeat;
							background-size: 24rpx 24rpx;
							background-image: url('/static/time.png');
						}
						.user{
							margin-left:24rpx ;
							font-size: 24rpx;
							line-height: 48rpx;
							color: #999999;
							padding-left: 34rpx;
							background-position: center left;
							background-repeat: no-repeat;
							background-size: 24rpx 24rpx;
							background-image: url('/static/user.png');
						}
					}
					.status{
						font-size: 28rpx;
						line-height: 48rpx;
						color: #4D73FF;
					}
				}
			}			
		}
		&.satisfaction{
			padding: 10rpx 24rpx;
			&::v-deep{
				.uni-table-td,.uni-table-th{
					border: 0;
				}
			}
		}
	}
}
.custom-item-footer{
	.name{
		font-size: 30rpx;
		color: #333;
		text-align: right;
	}
	.status{
		font-size: 26rpx;
		color: #666;
		text-align: right;
		padding-top: 10rpx;
	}
}
</style>