hptwxMiniProgram/pages/history/history.vue

<template>
	<view class="history-container">
		<view class="tabs">
			<view class="tab" :class="tabIdx===1?'active':''" @click="tabclick(1)">安全巡检</view>
			<view class="tab" :class="tabIdx===2?'active':''" @click="tabclick(2)">隐患记录</view>
			<view class="tab" :class="tabIdx===3?'active':''" @click="tabclick(3)">满意度评价</view>			
		</view>
		<view class="item-list" v-if="total>0">
			<view class="check" v-if="tabIdx===1">
				<uni-list :border="true">
					<uni-list-item v-for="(item,index) in items" :key="index" 
					:title="item.checklistTitle" 
					:note="item.recordTime" 
					:rightText="item.accountName"
					 @click="showDangerDetail(item)"
					 clickable/>
				</uni-list>			
			</view>
			<view class="check" v-if="tabIdx===2">
				<uni-list :border="true">
					<view class="item" v-for="(item,index) in items" :key="index">
					<uni-list-chat 
						:avatar-circle="true" 
						:title="item.dangerTitle" 
						:avatar="item.scenePhoto" 
						:note="item.curAccountName"
						 clickable @click="linkTo(item)">
							<view class="chat-custom-right">
								<text class="chat-custom-text">{{item.dangerDeadLine}}</text>
								<view class="bottom">
									<text class="status" :class="'status'+item.status">{{dangerStatus(item.status)}}</text>
									<text class="level" :class="'level-'+item.dangerLevel">{{dangerLevelFilter(item.dangerLevel)}}</text>
								</view>
							</view>				
						</uni-list-chat>					
					</view>
				</uni-list>			
			</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/openApi.js'
	export default { 
		data() {
			return {
				conditions:{
					page:1,
					limit:15,					
				},
				total:0,
				items:[],
				tabIdx:1
			}
		},
		onShow() {
			this.init()
		},
		onLoad() {
			uni.$on('type',(tabIdx)=>{
				if(tabIdx){
					this.tabclick(tabIdx)
				}
			})
		},
		methods: {	
			dangerStatus(i) {
			  if (i >= 0) {
			    const strs = ['待提交','待评审','待整改','待验收','已完成']
			    return strs[i]
			  } else {
			    return '已撤销'
			  }
			},
			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===1){
					getchecklistByPage(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===2){
					getDangerByPage(this.conditions).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'
				})
			},
			showDangerDetail(item){
				uni.navigateTo({
					url:`/pages/app_views/checkList/index/index?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;
	.tabs{
		padding: 10rpx 0;
		.tab{
			display: inline-block;
			padding: 10rpx 15rpx;
			background-color: #6e94ce;
			color: #fff;
			margin-left: 20rpx;
			&.active{
				background-color: #3384FF;
			}
		}
	}
}
.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{
	.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;				
				}
			}			
		}

	}
}
</style>