aiot-app/pages/dispatchManage/taskWork/index.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="任务工单" @clickLeft="back"></uni-nav-bar>
		<template>
			<view class="tab-title">
				<view v-for="(item, index) in tabList" :key="index" class="tab-item"
					:class="index === pickTabIndex ? 'active' : ''" @click="changeChartsTab(index)">
					{{ item.label }}
					<text v-if="item.number > 0" class="title-red">{{ item.number }}</text>
				</view>
			</view>
			<view class="tab-title__placeholder"></view>
		</template>

		<OrderTask v-for="(item, index) in tabList" :key="index" v-show="index === pickTabIndex" :list="item.list"
			:type="tabList[index].value" :dictList='dictList'></OrderTask>
	</view>
</template>

<script>
	import OrderTask from './OrderTask.vue'
	import {
		logistictraklistnotePageListAPI
	} from '@/api/pda/dispatchManage/index.js'
	import {
		getByCode
	} from '@/api/pda/common.js'
	let [page, size, isEnd] = [1, 10, true]
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			OrderTask
		},
		computed: {

		},
		data() {
			return {
				tabList: [{
						value: 0,
						key: 0,
						label: '待接收',
						list: [],
						number: 0
					},
					{
						value: 1,
						key: 1,
						label: '执行中',
						list: [],
						number: 0
					},
					{
						value: 2,
						key: 2,
						label: '已完成',
						list: [],
						number: 0
					},
					{
						value: 4,
						key: 3,
						label: '已验收',
						list: [],
						number: 0
					}
				],
				pickTabIndex: 0,
				qrContent: null,
				barType: 0,
				userInfo: {},
				dictList: {
					logistic_delivery_type: []
				},

			}
		},
		onShow() {
			this.getFirstList()
			this.getStatus()

		},
		onReachBottom: function() {
			if (isEnd) {
				return
			}
			// 显示加载图标
			uni.showLoading({
				title: '数据加载中'
			})
			this.getMoreLists()
		},
		async created() {
			this.dictList.logistic_delivery_type = await getByCode('logistic_delivery_type')
			this.dictList.logistic_list_cost_type = await getByCode('logistic_list_cost_type')
			this.userInfo = uni.getStorageSync('userInfo')

		},
		methods: {
			getStatus() {
				logistictraklistnotePageListAPI({
					status: 0,
					pageNum: 1,
					size: 1,
					// userId: this.userInfo.userId
				}).then(res => {
					this.tabList[0].number = res.count
				})
				logistictraklistnotePageListAPI({
					status: 1,
					pageNum: 1,
					size: 1,
					// userId: this.userInfo.userId
				}).then(res => {
					this.tabList[1].number = res.count
				})
				logistictraklistnotePageListAPI({
					status: 2,
					pageNum: 1,
					size: 1,
					// userId: this.userInfo.userId
				}).then(res => {
					this.tabList[2].number = res.count
				})
				logistictraklistnotePageListAPI({
					status: 4,
					pageNum: 1,
					size: 1,
					// userId: this.userInfo.userI
				}).then(res => {
					this.tabList[3].number = res.count
				})
			},
			getFirstList: function() {
				page = 1
				isEnd = true
				this.getList()
			},
			getMoreLists: function() {
				//获取更多数据
				page++
				this.getList()
			},
			getList() {
				console.log(this.userInfo.userId)
				uni.showLoading({
					title: '数据加载中'
				})
				let params = {
					status: [this.tabList[this.pickTabIndex].value],
					pageNum: page,
					size,
					// userId: this.userInfo.userId
				}
				logistictraklistnotePageListAPI(params)
					.then(res => {
						if (page === 1) {
							this.tabList[this.pickTabIndex].list = res.list
						} else {
							this.tabList[this.pickTabIndex].list = [...this.tabList[this.pickTabIndex].list, ...res.list]
						}
						isEnd = this.tabList[this.pickTabIndex].list.length >= res.count
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
			},
			changeChartsTab(index) {
				this.pickTabIndex = index
				this.getFirstList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-title {
		position: fixed;
		z-index: 99;
		width: 100%;
		padding: 10rpx;
		// display: flex;
		// justify-content: space-between;
		height: $tab-height;
		line-height: $tab-height;
		background-color: #ffffff;
		border-bottom: 1px solid #f2f2f2;
		// box-sizing: border-box;
		white-space: nowrap;
		overflow: auto hidden;
		display: flex;

		&::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 10px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 1px;
		}

		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #535353;
		}

		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			background: #ededed;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			display: inline-block;
			font-size: 32rpx;
			color: $uni-text-color-grey;
		}

		.tab-item.active {
			color: $j-primary-border-green;
			border-bottom: 1px solid $j-primary-border-green;
		}

		.title-num {
			font-size: 26rpx;
		}

		.title-red {
			display: inline-block;
			font-size: 22rpx;
			padding: 0 10rpx;
			border-radius: 50rpx;
			color: #ffffff;
			background: red;
			line-height: 38rpx;
			position: absolute;
			top: 10rpx;
			min-width: 18rpx;
		}
	}
</style>