assess-app/page_task/gain_task/gain_task.vue

<template>
	<view class="total-page page-box gain-task">
		<Nav :title="'领取任务'" :genre="1" is_fixed></Nav>
		<view class="m-lr20 r-20">
			<k-tabs-swiper class="r-20" v-model="current" :tabs="tabs" :field="'name'"   bgColor="#fff" color="#444444"
				activeColor="#10B261" fontSize="28rpx" :bold="true" :scroll="true" height="100rpx" lineHeight="10rpx"
				@change="changeTab" paddingItem="0 50rpx">
			</k-tabs-swiper>
		</view>
		<EnScroll ref="scroll" :navHeight="110" class="main" @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
			<TaskItem :type="2" :task-list="taskList" is_bottom @takeTask="setTakeTask"></TaskItem>
		</EnScroll>
	</view>
</template>

<script>
	import TaskItem from "@/common/task/task-item.vue"
  import {
    getTaskReceiving, getTaskType,
    takeTask
  } from "@/api/task"
	import tools from "@/service/tools"

	export default {
		components: {
			TaskItem
		},
		data() {
			return {
				current: 0,
				tabs: [
          {
            id: 0,
            name: '全部(0)',
            product_name: '全部',
            icon: '/static/img/task/task-all.png',
            num:0
          }
        ],
				taskList: [],
				page: 1,
				totalNum: 9999,
				isAjax: false,
				productId: 0
			}
		},
		mounted() {
			this.getTaskType()
			this.getTaskReceiving()
		},
		methods: {
      getTaskType() {
        getTaskType({'numType':1}).then(res => {
          if (res.code === 1) {
            res.data.forEach(item=>{
              item.name=item.product_name+'('+item.num+')'
              this.tabs[0].num+=item.num
              this.tabs[0].name=this.tabs[0].product_name+'('+ this.tabs[0].num+')'
              this.tabs.push(item)
            })
          }
        })
      },
			changeTab(index) {
				this.current = index
        console.log(index)
        this.setProductId(this.tabs[index].id)
			},
			setProductId(productId) {
				console.log('productId:' + productId)
				this.productId = productId
				this.startList()
			},
			// 下拉刷新
			startList() {
				this.taskList = [];
				this.page = 1
				this.totalNum = 99999
				this.getTaskReceiving()
			},
			async getTaskReceiving() {
				if (this.totalNum <= this.taskList.length) {
					return;
				}
				const res = await getTaskReceiving({
					'page': this.page,
					'productId': this.productId
				})
				if (res.code === 1) {
					this.totalNum = res.data.totalNum
					this.taskList.push(...res.data.items)
						++this.page
				}
			},
			setTakeTask(index) {
				console.log('index:' + index)
				this.taskList.splice(index, 1)
				uni.$emit('updateMemberInfo')
			},

			onRefresh() {
				uni.showLoading({
					title: '数据加载中'
				})
				setTimeout(() => {
					uni.showToast({
						title: '加载完成',
						icon: 'none'
					})
					this.$refs.scroll.onEndPulling()
					this.startList()
				}, 1000)
				console.log("下拉刷新");
			},
			// 滚动到底部
			onScrollBottom() {
				uni.showLoading({
					title: '数据加载中'
				})
				this.getTaskReceiving()
				setTimeout(() => {
					uni.showToast({
						title: '加载完成',
						icon: 'none'
					})
				}, 1000)
				console.log("到底部了");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gain-task {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background-image: url('https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
</style>