hptwxMiniProgram/pages/task/task.vue

<template>
	<view class="container">
		<view class="item-list-wrap" v-if="total>0">
			<view class="item-list basics">
				<view class="basics-item" v-for="(item,idx) in items" :key="idx" @click="showDetail(item)">
					<view class="basics-title">{{item.taskTitle}}</view>
					<view class="basics-body">
						<view class="lf">
							<text class="time">{{item.expectedStartTime}}</text>
							<text class="user">{{item.handleAccountName||'微信用户'}}</text>							
						</view>
						<view class="status">{{taskStatus(item.status)}}</view>
					</view>						
				</view>				
			</view>								
		</view>
		<template v-else>
			<view class="isEmpty" >
				<p class="word">没有数据 ^_^ </p>
			</view>
		</template>
	</view>
</template>
<script>
	import { getTaskMyHandlingByList,handleCheckTask} from '@/api/aqpt/task.js'
	export default { 
		data() {
			return {
				conditions:{
					page:1,
					limit:15,					
				},
				total:0,
				items:[]
			}
		},
		onLoad() {
			this.init()			
		},
		methods: {	
			taskStatus(val){
			  const strs = ['待处理','已完成']
			  if (val === -1) {
				return '已撤消'
			  } else {return strs[val]}
			},
			init(){
				this.items=[]
				this.total=0
				this.conditions={
					limit:15,
					page:1
				}
				this.getData()
				this.clearDetail()
			},	
			getData(){
				getTaskMyHandlingByList(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')
				}				
			},
			async showDetail(item){
				let {data}=await handleCheckTask(item.taskId)
				if(this.isEmpty(data)){
					uni.showToast({
						icon:'none',
						title:"任务初始化失败"
					})
					return
				}
				let pageUrl="";
				if(data.checklistTypeId===1){
					pageUrl="/pages/app_views/hazard/index/index"
				}				
				if(data.checklistTypeId===2){
					pageUrl="/pages/app_views/checkList/index/index"				
				}
				if(data.checklistTypeId===3){
					pageUrl="/pages/app_views/satisfaction_evaluation/satisfaction_evaluation"
				}
				uni.navigateTo({
					url:`${pageUrl}?type=wait&id=${data.checklistId}&recordId=${item.taskId}`
				})	
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}			
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			if(this.total>=this.conditions.page*this.conditions.limit){
				this.conditions.page++
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding-bottom: 100rpx;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: #F5F6F8;	
}
.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;
		&.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;
					}
				}
			}			
		}
	}
}
</style>