yicangzongtai_app_240321/pages/task/task-list.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#999999"></navbar>
		<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"/>
				<!-- <u-waterfall v-model="dataList"> -->
				<!-- 	<template v-slot:left="{leftList}">
						<block v-for="(item, index) in leftList" :key="`left_${index}`">
							<task-list-item :task-obj="item" class="task-item-left" />
						</block>
					</template>
					<template v-slot:right="{rightList}">
						<block v-for="(item, index) in rightList" :key="`right_${index}`">
							<task-list-item :task-obj="item" class="task-item-left" />
						</block>
					</template>
				</u-waterfall> -->
			</view>
			<loadMore 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 {
				config: {
					back: true,
					title: '任务中心',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				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.dataList = [];
			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 => {
					if (res.code === 200) {
						this.dataList = this.dataList.concat(res.rows || []);
					};
					this.setLoadingStatus(this.$mUtil.pagination(res.total, this.pageNum, this.pageSize))
				}).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>