assess-app/pages/task/task.vue

<template>
	<view class="total-page page-box page-env-20 scroll_content task-bg">
		<Nav :title="'任务'" :genre="1" :back="false" is_fixed></Nav>
		<view>
			<Search :placeholder="'客户姓名或电话'"></Search>
			<view style="height: 100rpx;">
				<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'28rpx'}"
					:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
					:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
			</view>
		</view>
    <task-ima-tab @setProductId="setProductId" :num-type="0"></task-ima-tab>
		<EnScroll ref="scroll" :navHeight="105" is_tabHeight @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
			<view v-if="current===1">
				<TaskItem :type="5" is_bottom :task-list="backlogList"></TaskItem>
			</view>
			<view v-else>
				<TaskItem :type="1" is_bottom :task-list="taskList"></TaskItem>
			</view>
		</EnScroll>
		<Tab :tab-index="1"></Tab>
	</view>
</template>
<script>
	// 任务列表
	import TaskItem from "@/common/task/task-item.vue";
	import TaskImaTab from "@/common/task/task_ima_tab.vue";
	import {
		getDayBacklogList,
		getTaskList
	} from "@/api/task";

	export default {
		components: {
			TaskImaTab,
			TaskItem,
		},
		data() {
			return {
				tabHeight: uni.getStorageSync('tab_height'),
				current: 0,
				swiperCurrent: 0,
				tabsList: [{
					name: '全部',
					dot_color: 'red',
					disabled: false,
					'id': 0,
				}, {
					name: '新进',
					dot_color: 'yellow',
					disabled: false,
					'id': 6,
				}, {
					'id': 1,
					name: '待办',
					dot_color: '',
					disabled: false
				}, {
					'id': 2,
					name: '完成',
					dot_color: '',
					disabled: false
				}, {
					'id': 3,
					name: '拒绝',
					dot_color: '',
					disabled: false
				}],
				selectStr: '',
				startDate: '',
				endDate: '',
				phone: '',
				name: '',
				productId: 0,
				stageId: [],
				departmentId: [],
				totalNum: 99999,
				taskList: [],
				page: 1,
				isAjax: false,
				backlogList: [],
			}
		},
		mounted() {
			this.startList()
		},
		methods: {
			setProductId(productId) {
				console.log('productId:' + productId)
				this.productId = productId
				this.startList()
			},
			startList() {
				if (this.current === 1) {
					this.getDayBacklogList()
				} else {
					this.totalNum = 999;
					this.taskList = [];
					this.page = 1;
					this.isAjax = false;
					this.getTaskReceiving();
				}

			},
			getDayBacklogList() {
        if (this.isAjax || (this.totalNum <= this.backlogList.length)) {
          return;
        }
				getDayBacklogList({
					'selectStr': this.selectStr
				}).then((res) => {
					if (res.code === 1) {
						this.backlogList = res.data.items
            this.totalNum = res.data.totalNum
					}
				})
			},
			getTaskReceiving() {
				if (this.isAjax || (this.totalNum <= this.taskList.length)) {
					return;
				}
				this.isAjax = true;
				getTaskList({
					'status': this.tabsList[this.current].id,
					'selectStr': this.selectStr,
					'phone': this.phone,
					'name': this.name,
					'productId': this.productId,
					'stageId': this.stageId,
					'departmentId': this.departmentId,
					'startDate': this.startDate,
					'endDate': this.endDate,
					'page': this.page,
				}).then((res) => {
					this.isAjax = false;
					if (res.code === 1) {
						this.totalNum = res.data.totalNum
						this.taskList.push(...res.data.items)
							++this.page;
					}
				})
			},
			tabsChange(index) {
				if (index !== this.current) {
					this.current = index;
          this.startList()
				}
			},
			// 下拉刷新
			onRefresh() {
				this.startList()
			},
			// 滚动到底部
			onScrollBottom() {

				if (this.current === 1) {
					this.getDayBacklogList()
				} else {
					this.getTaskReceiving();
				}

			},

		},
	}
</script>
<style lang="scss" scoped>

</style>