assess-app/page_task/gain_task/gain_task.vue

<template>
	<view class="total-page page-box gain-task">
		<Nav :title="'领取任务'" :genre="1"></Nav>
		<view class="m-lr20 r-20">
			<!-- <TaskImgTab @setProductId="setProductId"></TaskImgTab> -->
			<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">
				<!-- <image class="wh-30" src="/static/img/task/vector.png" mode="scaleToFill" /> -->
			</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 TaskImgTab from "@/page_task/module/task_ima_tab.vue"
	import {
		getTaskReceiving,
		takeTask
	} from "@/api/task"
	import tools from "@/service/tools"

	export default {
		components: {
			// TaskImgTab,
			TaskItem
		},
		data() {
			return {
				current: 0,
				tabs: [{
					name: '新闻',
					icon: '/static/img/statistics/task-four.png'
				}, {
					name: '新闻新闻',
					icon: '/static/img/logo.png'
				}, {
					name: '新闻新',
					icon: '/static/img/logo.png'
				}, {
					name: '新闻新闻',
					icon: '/static/img/logo.png'
				}, {
					name: '新闻新闻',
					icon: '/static/img/logo.png'
				}, {
					name: '新闻',
					icon: '/static/img/logo.png'
				}, {
					name: '新闻新闻',
					icon: '/static/img/logo.png'
				}, {
					name: '新闻',
					icon: '/static/img/logo.png'
				}, ],
				taskList: [],
				page: 1,
				totalNum: 9999,
				isAjax: false,
				productId: 0
			}
		},
		mounted() {
			this.getTaskReceiving()
		},
		methods: {
			changeTab(index) {
				this.current = index
			},
			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>