WeChatAppH5/pages/task/task-list.vue

<template>
	<view class="">
		<nav-bar title="任务中心" goBack />
		<view class="page-content">
			<view class="task-record">
				<view class="record-item" @click.stop="$u.route('/pages/task/ranking')">
					<image class="record-item-icon" src="./static/task-rank.png" mode="aspectFit"></image>
				</view>
				<view class="record-item" @click.stop="$u.route('/pages/task/my-task')">
					<image class="record-item-icon" src="./static/my-task.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="task-list">
				<task-list-item :dataList="dataList" ref="taskListRef" />
			</view>
			<uni-load-more v-if="dataList.length > 0 || loadingStatus === 'loading' " :status="loadingStatus" />
			<view class="empty-data" v-if="(!dataList || dataList.length===0) && loadingStatus=== 'noMore' ">
				<EmptyDate />
			</view>
		</view>
	</view>
</template>

<script>
	import taskListItem from "./components/task-list-item.vue"
	import {
		getTaskList_Api
	} from "@/api/task.js"
	export default {
		components: {
			taskListItem
		},

		data() {
			return {
				dataList: [],
				pageNum: 0,
				pageSize: 10,
				loadingStatus: ''
			}
		},
		onShow() {
			// if(this.dataList && this.dataList.length > 0){
			// 	try{
			// 		this.$refs.taskListRef.refresh()
			// 	}catch(e){
			// 		//TODO handle the exception
			// 	}
			// }
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			if (this.loadingStatus === "more") {
				this.getTaskList();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			// getTaskList(){
			// 	getTaskList_Api().then(res => {})
			// }
			init() {
				this.dataList = [];
				this.pageNum = 0;
				this.pageSize = 10;
				this.loadingStatus = '';
				this.getTaskList();
			},
			getTaskList() {
				if (this.loadingStatus === 'noMore' || this.loadingStatus === 'loading') return
				this.loadingStatus = 'loading';
				this.pageNum++;
				getTaskList_Api({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					taskStatus: 2
				}).then(res => {
					const t_o = 300;
					setTimeout(() => {
						if (res.code === 200) {
							this.dataList = this.dataList.concat(res.rows || []);
						};
						this.setLoadingStatus(this.$mUtil.pagination(res.total, this.pageNum, this
							.pageSize))
					} , this.dataList.length === 0 ? t_o : 1)
				}).catch(err => {
					this.setLoadingStatus("noMore")
				})
			},
			setLoadingStatus(status) {
				setTimeout(() => {
					this.loadingStatus = status
				}, 300)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	@import "./common.scss";
	$padd_: 30rpx;

	.page-content {
		width: 100%;
		padding: 30rpx;

		.task-record {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: stretch;

			.record-item {
				width: 320rpx;
				height: 135rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.task-list {
			padding: 30rpx 0 0;
		}
	}
</style>