payy-app/views/task/taskList.vue

<template>
	<view class="content">	
		<view class="handle-table">
			<view class="handle-table-list">
				<view class="item" 
					  v-for="item in items" 
					  :key="item.taskId"
					  @click="showTaskDetail(item)">
					<view class="cont">
						<view class="tag" :class="[formatTaskTage(item.taskTypeId)]">
							<text>{{item.taskTypeId|formatTaskType}}</text>
						</view>
						<view class="name">{{item.taskTitle}}</view>						
					</view>
					<view class="time">{{item.expectedEndTime|distanceTime}}</view>
				</view>	
				<uni-load-more :status="moreStatus" ></uni-load-more>
			</view>
		</view>	
    </view>
</template>

<script>
	import {distanceTime,deepClone} from '@/libs/index.js';
	import {taskType} from '@/libs/enum';
	
	import {getCheckTaskByPage} from '@/api/task'
	export default {
		filters:{
			distanceTime(val){
				return distanceTime(val)
			},
			formatTaskType(val){
				return taskType(val)
			}			
		},
		data() {
			return {
				items:[],
				total:0,
				page:1,
				limit:20,
				moreStatus:"more"
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			let page=this.page;
			let maxPgae=Math.ceil((this.total/this.limit));
			if(page>=maxPgae){
				this.moreStatus="no-more"
				return;
			}
			this.page++;
			this.getList()
		},
		methods: {
			getList(){
				let userInfo=uni.getStorageSync('accountInfo')
				if(userInfo){
					let executeAccountId=JSON.parse(userInfo).userId;
					getCheckTaskByPage({
						page:this.page,
						limit:this.limit,
						isWaiting:1,
						executeAccountId
					}).then((res)=>{
						if(res.total===0){
							this.moreStatus="no-more";
							return;
						}
						this.moreStatus="loading";
						this.total=res.total;
						let items=deepClone(this.items);
						this.items=items.concat(res.data);
					})			
				}
			},
			formatTaskTage(val){
				let type="";
				switch(val){
					case 1 :
						type="warn";
					break;
					// case 2 :
					// 	type="success";
					// break;	
					case 3 :
						type="purple";
					break;
					case 4 :
						type="danger";
					break;									
				}
				return type;
			},
			showTaskDetail(item){
				let riskPointId=item.riskPointId;
				uni.navigateTo({
					url:'/views/task/detail/detail?id='+item.taskId+'&riskPointId='+riskPointId
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		.handle-table{
			.item{
				background-color: #fff;
			}
		}
		padding-bottom: 100upx;
	}
</style>