app-hl/pages/task-list/index.vue

<template>
	<view class="task-list">
		<view class="menu">
			<uni-segmented-control :current="currentIndex" :values="menuList" @clickItem="handleMenuChange"
				:styleType="menuObj.styleType" :activeColor="menuObj.activeColor">
			</uni-segmented-control>
		</view>
	<!-- 	<view class="search">
			<uni-search-bar v-model="keyword" @blur="onSearch" @clear="onClear" cancelButton="false"
				placeholder="请输入搜索内容">
			</uni-search-bar>
		</view>	 -->  
		<view class="dataList">
			<view v-for="(item,index) in dataList" :key="index">
				  <task-card :info="item" :idx="index"></task-card>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
	</view>
</template>
<script>
	import { getToken } from '@/utils/auth'
	import taskCard from '@/components/task-card/task-card.vue'
	import {
		taskListApi
	} from '@/api/task-list'
	export default {
		name: "Task-list",
		components: {
			taskCard
		},
		data() {
			return {
				menuList: ['已接单', '进行中', '已完成'],
				currentIndex: 0,
				menuObj: {
					activeColor: '#007aff',
					styleType: 'button',
					current: 1
				},
				pageNo: 1,
				pageSize: 10,
				isLoadMore:false,  //是否加载中
				loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				dataList: [],
				mapStatus: [
					{
						id: 0,
						name: 'RECEIVED'
					},
					{
						id: 1,
						name: 'PROCESSING'
					},
					{
						id: 2,
						name: 'FINISHED'
					}
				],
				keyword: ''
			}
		},
		computed: {
			isLogin() {
				return !!getToken()
			}
		},
		onLoad(option) {
			this.status = option.status || 'RECEIVED'
			const obj = this.mapStatus.find(e => e.name == option.status)
			this.currentIndex = obj.id
		},
		onShow() {
			if (!this.isLogin) {
				uni.navigateTo({ url: '/pages/login' })
			} else {
				this.getData()
			}
		},
		onReachBottom() {
			  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.isLoadMore = true
					this.pageNo +=1
					this.getData()
			  }
		},
		methods: {
			handleMenuChange(e) {
				if (this.currentIndex !== e.currentIndex) {
					const obj = {
						0: 'RECEIVED',
						1: 'PROCESSING',
						2: 'FINISHED'
					}
					this.status = obj[e.currentIndex]
					this.currentIndex = e.currentIndex
					this.dataList = []
					this.pageNo = 1
					this.getData()
				}
			},
			onSearch() {
				this.getData(this.keyword)
			},
			onClear() {},
			// 获取列表数据
			getData(val= '') {
				const _this = this
				_this.isLoadMore = true
				
				const taskType = this.$store.state.user.userInfo.produceGroupType
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					taskType,
					status: this.status
				}
				taskListApi(params).then(res => {
					const { code, data, msg } = res
					if (data.list.length) {
						data.list.forEach(e => {
							e.status = this.status
						})
						this.dataList.push(...data.list)
						
						if (data.list < this.pageSize) {
							this.loadStatus = 'nomore'
							this.isLoadMore = true
							
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					}
				}).catch(error => {
					this.isLoadMore = false
					if (this.pageNo >1) {
						this.pageNo -=1
					}
					reject(error)
				})
			}

		}
	}
</script>

<style lang="scss">
	.task-list {
		.menu {
			margin: 10px 14px;
		}

		.search {
			margin: 10px 4px;
		}

		.dataList {
			width: 100%;
		}
	}
</style>