uniappshell/pages/index/detail/detail.vue

<template>
	
	<view class="index-detail-page">
		<view class="container">
			<view class="tab-cont">
				<view class="part" v-if="type==='task'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">待处理</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">已完成</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(-1,3)">已撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="item in taskList" :key="item.taskId">
							<view class="title">
								<view class="name">{{item.taskTitle}}</view>
								<view class="state">{{taskStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{taskPriority(item.taskPriority)}}</text>
								<text class="tag">{{item.taskCatTitle}}</text>
								<text class="tag">{{taskType(item.taskTypeId)}}</text>
							</view>
							<view class="time">
								预期结束时间：{{item.expectedEndTime}}
							</view>
							<view class="bottom">
								<view class="user">
									<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
									处理人：{{item.handleAccountName}}
								</view>		
								<view class="hand-time">
									{{item.launchTime}}
								</view>																
							</view>
						</view>
					</view>
				</view>
				<view class="part" v-if="type==='alert'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">待处理</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">已处理</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(-1,3)">已撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="item in alertList" :key="item.alertId">
							<view class="title">
								<view class="name">{{item.alertTitle}}</view>
								<view class="state">{{alertStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{alertLevel(item.alertLevel)}}</text>
							</view>
							<view class="time">
								发生时间：{{item.alertTime}}
							</view>
							<view class="bottom">
								<view class="user">
									<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
									处理人：{{item.handleAccountName}}
								</view>		
								<view class="hand-time">
									{{item.handleTime}}
								</view>																
							</view>
						</view>
					</view>
				</view>
				<view class="part" v-if="type==='danger'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">待处理</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">我提交</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(1,3)">我处理</view>
						<view class="tab-item" :class="activeTab===4?'active':''" @click="tabChange(-1,4)">我撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="item in dangerList" :key="item.dangerId">
							<view class="title">
								<view class="name">{{item.dangerTitle}}</view>
								<view class="state">{{dangerStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{dangerLevel(item.dangerLevel)}}</text>
								<text class="tag">{{item.dangerCatTitle}}</text>
							</view>
							<view class="time">
								预期结束时间：{{item.dangerDeadLine}}
							</view>
							<view class="bottom">
								<view class="user">
									<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
									处理人：{{item.curAccountName}}
								</view>		
								<view class="hand-time">
									{{item.submitTime}}
								</view>																
							</view>
						</view>
					</view>
				</view>
			</view>										
		</view>
		<template v-if="total<1">
			<view class="isEmpty" >
				<p class="word">没有数据 ^_^ </p>
			</view>
		</template>
	</view>
</template>

<script>
	import { getAlertByPage } from '@/api/aqpt/alertApi.js';
	import { getDangerByPage } from '@/api/aqpt/dangerApi.js';
	import { getTaskByPage } from '@/api/aqpt/taskApi.js';
	import{
		taskStatus,taskPriority,taskType,
		alertLevel,alertStatus,
		dangerStatus,dangerLevel,
	} from '@/libs/enum.js';	
	export default {
		data() {
			return {
				type:undefined,
				activeTab:1,
				user:{},
			    conditions: {
					page: 1,
					limit: 10,
					status:0
			    },
				total:0,
				alertList:[],
				dangerList:[],
				taskList:[]			
			}
		},
		onLoad({type,name}) {
			this.type=type
			let user=uni.getStorageSync('accountInfo');
			this.user=user
			uni.setNavigationBarTitle({
				title:`${name||'详情'}`
			})
			this.getData()
		},
		methods: {
			taskStatus,taskPriority,taskType,
			alertLevel,alertStatus,
			dangerStatus,dangerLevel,
			getData(){
				if(this.type==='task'){
					this.getTaskByPage()
				}
				if(this.type==='danger'){
					delete this.conditions.status
					this.getDangerByPage()
				}				
				if(this.type==='alert'){
					this.getAlertByPage()
				}
			},
			getAlertByPage(){
				getAlertByPage(this.conditions).then((res)=>{
					this.alertList=res.data
					this.total=res.total
				})				
			},
			getDangerByPage(){
				getDangerByPage(this.conditions).then((res)=>{
					this.dangerList=res.data
					this.total=res.total
				})				
			},
			getTaskByPage(){
				getTaskByPage(this.conditions).then((res)=>{
					this.taskList=res.data
					this.total=res.total
				})				
			},
			tabChange(value,index){
				this.activeTab=index
				if(this.type==='task'){
					this.conditions.status=value
				}
				if(this.type==='danger'){
					  if (value === 1) {
						this.conditions.curAccountId = this.user.userId
					  } else if (value === 2) {
						this.conditions.submitAccountId = this.user.userId
					  } else if (value === 3) {
						this.conditions.handleAccountId = this.user.userId
					  } else if (value === 4) {
						this.conditions.submitAccountId = this.user.userId
						this.conditions.status = -1
					  }
				}				
				if(this.type==='alert'){
					this.conditions.status=value
				}	
				this.getData()
			},
			onPullDownRefresh() {				
				this.activeTab=1,
			    this.conditions= {page: 1,limit: 10},
				this.total=0,
				this.alertList=[]
				this.dangerList=[]
				this.taskList=[]	
				this.getData()
			},
			onReachBottom() {
				if(this.total>=this.conditions.page*this.conditions.limit){
					this.conditions.page++
					this.getData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-detail-page {
		min-height: 100vh;
		padding-bottom: 100rpx;
		background-color: rgba(245, 246, 248, 1);
		.container{	
			padding: 0 32rpx;
			.tab-cont{				
				.part{
					.tab{
						display: flex;
						align-items: center;
						padding-bottom: 10rpx;
						overflow-x: auto;
						.tab-item{
							display: inline-block;
							padding: 16rpx 20rpx;
							background-color: #fff;
							text-align: center;      
							flex-shrink: 0;
							line-height: 1;
							font-size: 32rpx;
							color: #333;
							border: 1px solid #eaeaea;
							box-sizing: border-box;
							border-left: 0;
							&.active{
								background-color: #1e80ff;
								color: #fff;
								border-color: #1e80ff;
							}
						}
					}
					.part-cont{
						.item{
							background-color: #fff;
							border-radius: 12rpx;
							margin-top: 16rpx;
							padding: 24rpx 20rpx;
							.title{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.name{
									font-size: 36rpx;
									color: rgba(0, 0, 0, 0.8);
								}
								.state{
									font-size: 32rpx;
									color: rgba(250, 139, 55, 1);
								}
							}
							.tags{
								padding-top: 24rpx;
								.tag{
									background: rgba(245, 246, 248, 1);	
									font-size: 20rpx;
									margin-left: 10rpx;
									padding: 10rpx 20rpx;
									&:nth-child(1){
										color: rgba(234, 130, 89, 1);
										background: rgba(251, 241, 237, 1);
									}
								}
							}
							.time{
																padding-top: 20rpx;
								font-size: 28rpx;									
								color:rgba(241, 57, 57, 0.8);
							}
							.bottom{
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-top: 20rpx;
								.user{
									display: flex;
									align-items: center;
									font-size: 24rpx;
									color: rgba(0, 0, 0, 1);
									.avatar{
										width: 44rpx;
										margin-right: 10rpx;
									}
								}
								.hand-time{
									font-size: 24rpx;
									color: rgba(0, 0, 0, 1);
								}
							}							
						}
					}
				}
			}
		}
		.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;
			}
		}		
	}

</style>