aiot-app/pages/pda/picking/index/index.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="领料" background-color="#157A2C" color="#fff"
			@clickLeft="back" right-icon="scan" @clickRight="HandlScanCode">
		</uni-nav-bar>

		<view class="top-wrapper">
			<view class="tab_box rx-sc">
				<view class="tab_item" :class="{active: tabType == 1}" @click="handTab(1)">生产工单列表</view>
				<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">领料工单列表</view>
			</view>
			
			<view class="nav_box rx-sc" v-if='tabType == 1'>
				<view class="nav_item " :class="{active: navType == 1}" @click="handNav(1)">未领料</view>
				<view class="nav_item"  :class="{active: navType == 2}" @click="handNav(2)">已领料</view>
			</view>
		</view>

		<view class="list_box">
			<u-list @scrolltolower="scrolltolower" v-if="tabType == 1">
				
                <pickCard :List="dataList"> </pickCard>
			</u-list>

		</view>

		<view class="bottom-wrapper">
			5555
		</view>
	</view>
</template>

<script>
	import pickCard from '../components/pickCard.vue'
	import {
		workorderPage
	} from '@/api/pda/workOrder.js'
	let [isEnd] = [false]
	
	export default {
		components: {
			pickCard
		},
		data() {
			return {
				tabType: 1,
				navType: 1,
				
				page: 1,
				size: 5,
				dataList: [],
				
			}
		},
		
		onShow() {
			this.getList()
		},
		
		methods: {


		async getList() {
				let params = {
					pageNum: this.page,
					size: this.size,
					status: [4, 5, 6, 7],
					
				}

				isEnd = false
				const res = await workorderPage(params)
				console.log(res)

				if (params.page === 1) {
					this.dataList = []
				}

				this.dataList.push(...res.list)
				isEnd = this.dataList.length >= res.count

			},
			

			handTab(type) {
				if (type != this.tabType) {
					this.tabType = type
				}
			},
			
			handNav(type) {
				if (type != this.navType) {
					this.navType = type
				}
			},
			

			scrolltolower() {
				if (isEnd) return
				this.page++
				this.getList()
			},


			// 相机扫码
			HandlScanCode() {
				let _this = this
				uni.scanCode({
					success: function(res) {
						console.log(res)
					}
				})
				//_this.Scancodedate('res')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}


	.tab_box {
		width: 100%;
		height: 68rpx;
		background: #fff;

		.tab_item {
			height: 68rpx;
			line-height: 68rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
			color: #979C9E;

		}

		.active {
			box-sizing: border-box;
			border-bottom: 6rpx solid $theme-color;
			color: $theme-color;
		}


	}

.nav_box{
	padding: 6rpx 32rpx;
	.nav_item{
		font-size: 28rpx;
		font-weight: 400;
		color: $theme-color;
		background: #F0F8F2;
		margin-right: 16rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ACD4B5;

	}
	
	
	
	.active{
		background: $theme-color;;
		border: 2rpx solid  $theme-color;;
		color: #FFF;
	}
}

	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}
	}
</style>