yicangzongtai_app_240321/pages/task/my-task.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="pages-lable-box">
			<view class="pages-lable">
				<block v-for="(item , index ) in taskStatus">
					<view @click.stop="onSelect(item.value)"
						:class="['pages-lable-item' , activeTaskStatus === item.value ? 'active-lable-item' : '' ]">
						{{item.lable}}
					</view>
				</block>

			</view>
		</view>
		<view class="task-list-box">
			<task-list-item :dataList="dataList" showTaskStatus privateTask :task-tag="taskTag" />
			 
			<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 {
		getMyTask_Api
	} from "@/api/task.js"
	import taskListItem from "./components/task-list-item.vue"

	const app = getApp()
	export default {
		components: {
			taskListItem
		},
		data() {
			return {
				top: null,
				config: {
					back: true,
					title: '任务中心',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				activeTaskStatus: 1,
				taskStatus: [{
					value: 1,
					lable: '进行中'
				}, {
					value: 2,
					lable: '已完成'
				}, {
					value: 3,
					lable: '已过期'
				}],
				dataList: [],
				pageNum: 0,
				pageSize: 10,
				loadingStatus: '',
				taskTag: {
					name: '',
					color: "",
					bgColor: ''
				}
			}
		},
		onLoad() {
			const global = app.globalData
			this.top = global.navHeight + global.statusBarHeight + 'px'
			this.init()
		},
		onReachBottom() {
			if (this.loadingStatus === "more") {
				this.getMyTask();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		watch: {
			activeTaskStatus: {
				handler(newS, oldS) {
					switch (newS) {
						case 1:
							this.taskTag = {
								name: '进行中',
								color: "#FFFFFF",
								bgColor: '#0096B7'
							};
							break;
						case 2:
							this.taskTag = {
								name: '已完成',
								color: "#FFFFFF",
								bgColor: '#299E00'
							};
							break;
						case 3:
							this.taskTag = {
								name: '已过期',
								color: "#FFF",
								bgColor: '#474747'
							};
							break;
					}
				},
				immediate: true
			}
		},
		methods: {
			onSelect(val) {
				this.dataList = [];
				this.pageNum = 0;
				this.pageSize = 10;
				this.loadingStatus = '';
				this.activeTaskStatus = val;
				this.getMyTask();
			},
			init() {
				this.dataList = [];
				this.pageNum = 0;
				this.pageSize = 10;
				this.loadingStatus = '';
				this.activeTaskStatus = 1;
				this.getMyTask();
			},
			getMyTask() {
				if (this.loadingStatus === 'noMore' || this.loadingStatus === 'loading') return
				this.loadingStatus = 'loading';
				this.pageNum++;
				if (this.pageNum <= 1) {
					this.dataList = [];
				}
				getMyTask_Api({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					myTaskStatus: this.activeTaskStatus
				}).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 : 0)
				}).catch(err => {
					this.setLoadingStatus("noMore")
				})
			},
			setLoadingStatus(status) {
				setTimeout(() => {
					this.loadingStatus = status
				}, 100)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	@import "./common.scss";
	$padd_: 30rpx;

	.pages-lable-box {
		width: 100%;
		height: 94rpx;

		.pages-lable {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 5;
			width: 100%;
			height: 94rpx;
			padding: 0 $padd_;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			border-bottom: 1rpx solid #E6E6E6;
			background-color: #fff;

			.pages-lable-item {
				height: 100%;
				line-height: 94rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: Regular;
				color: #1a1a1a;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					height: 4rpx;
					border-radius: 2px;
				}
			}

			.active-lable-item {
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: Bold;
				color: #3bb7ce;

				&::before {
					background-color: #3bb7ce;
				}
			}
		}
	}

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