logpm/pagesHome/pages/PickUpLotList/PickUpLotList.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 头部 -->
		<template #head>
			<view class="">
				<image class="header_bg" src="@/pagesHome/static/bgby.png"></image>

				<view class="header-container">
					<!-- 顶部背景 -->
					<view class="header">
						<view class="search_row">
							<input placeholder="请输入包条码" v-model='details.searchText' type="text" name="" id="">
							<view class="search_button" @click="handleSearch">
								确认
							</view>
						</view>

						<view class="header_row">
							<view>
								托盘码：{{details.pageInfo.trayCode || '暂无数据'}}
							</view>

							<view>
								托盘名称：{{details.pageInfo.trayName || '暂无数据'}}
							</view>
						</view>

						<view class="header_row">
							<view>
								打托方式：{{details.pageInfo.pageName || '暂无数据'}}
							</view>

							<view>
								名称：{{details.detauser.name || '暂无数据'}}
							</view>
						</view>

						<view class="header_row">
							<view>
								订单在托数：{{details.detauser.orderlNum || '暂无数据'}}
							</view>

							<view>
								订单总数：{{details.detauser.orderTotalNum || '暂无数据'}}
							</view>
						</view>

						<view class="header_row">
							<view>
								路线：{{details.pageInfo.lineNameTitle || '暂无数据'}}
							</view>
						</view>

						<view class="header_row">
							<view>
								批次号：{{details.pageInfo.billladingCode || '暂无数据'}}
							</view>
						</view>

						<view class="header_row">
							<view>
								备注：{{details.detauser.remark || '暂无数据'}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</template>

		<!-- 主体 -->
		<template #body>
			<u-divider text="订 单 列 表" textPosition="left"></u-divider>

			<!-- 提货单件数 -->
			<scroll-view class="scollView" scroll-y="true" :style="{height: details.height}"
				@scrolltolower="utils.debounce(reachDown, 500)">
				<block v-for="(item, index) in details.data" :key="item.id">
					<view @click="handleChooseStatus(index)"
						:class="{'list_container': true, 'active': details.chooseIndex === index}">
						<view class="list_row" @click="godetaillist(item)">
							订单号: {{item.dataCode || '暂无数据'}}
						</view>

						<view class="list_row">
							<view class="">
								总数：
								<text>
									{{item.orderTotalNum }}
								</text>
							</view>
							<view>
								已扫：
								<text style="color: #10d269;">
									{{item.scanNum }}
								</text>
							</view>
							<view class="">
								未扫：
								<text :style="{color: item.residueNum > 0? '#f00': '#000'}">
									{{item.residueNum }}
								</text>
							</view>
						</view>

						<!-- 状态标签 -->
						<view :class="{
								'list_tips': true, 
								'none':item.scanNum === 0, 
								'portion':item.scanNum < item.orderTotalNum && item.scanNum > 0,
								'all':item.scanNum === item.orderTotalNum}">
							{{details.type[item.scanNum ===item.orderTotalNum? 3: item.scanNum !==0?2: 1 ]|| '暂无状态数据'}}
						</view>
					</view>
				</block>

				<!-- 底部站位 -->
				<view class="footer">

				</view>
			</scroll-view>

			<!-- 底部站位 -->
			<!-- <view class="button_container">
				<view @click="handleConfirm">
					确认打托
				</view>
			</view> -->
		</template>

	</BasicContainer>

	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import {
		getBillladingList,
		postIncomingIncomingPackage,
		warehouseTrayTypeorderScanTrayCode
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref } from "vue";
	import utils from '@/utils/utils.js'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	// 组件配置
	const option = reactive({
		// 标题
		title: '提货批次',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {
			// 重置被选中数据
			details.chooseIndex = -1

			details.data = []
			details.page.pageNum = 1
			initpage()

			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => { return null },
		haveData: true,
		isEnd: false
	})

	let details = reactive({
		/** 提货批次列表 */
		data: [] as any[],
		/** 页面分页 */
		page: {
			pageSize: 10,
			pageNum: 1,
			total: 0
		},
		/** 被选中的元素的索引 */
		chooseIndex: -1,
		/** 提货状态 */
		type: {
			1: '未 扫', 2: '部分扫', 3: '齐 套',
		},
		/** 滚动区高度 */
		height: '80vh',
		/** 页面数据 */
		pageInfo: {} as any,
		/** 扫描的码值 */
		scancode: '',
		detauser: {},
		/** 输入框中的值 */
		searchText: ''
	})

	// 组件实例
	const basicContainer = ref()

	/** 扫描后执行的回调函数 */
	const scandata = async () => {
		const _code = details.scancode

		const _submitData = {
			orderPackageCode: _code,
			billladingId: details.pageInfo.id,
			incomingType: "1",
			trayCode: details.pageInfo.trayCode,
			trayType: details.pageInfo.trayType
		}

		const res = await postIncomingIncomingPackage(_submitData)

		const { code } = res
		if (code !== 200) return

		basicContainer.value.startPullDownRefresh()

		console.log('res :>> ', res);
	}

	onLoad((op) => {
		console.log('op :>> ', op);
		details.pageInfo = JSON.parse(op.pageInfo)

		// #ifdef APP
		utils.ttsspke('请扫描或输入托盘码')
		// #endif
	})

	onShow(async () => {
		// #ifdef APP
		// 初始化关闭监听
		uni.$off('scancodedate')

		uni.$on('scancodedate', (code) => {
			if (code) {
				details.scancode = code

				scandata()
			}
		})
		// #endif

		await nextTick()
		basicContainer.value.startPullDownRefresh()

		details.height = await utils.getViewDistanceFormTop('.scollView')
	})

	async function initpage() {
		try {
			const _submitData = {
				trayCode: details.pageInfo.trayCode,

			}

			const res = await warehouseTrayTypeorderScanTrayCode(_submitData)

			const { code, data } = res

			console.log('111 :>> ', 111);
			if (code !== 200) return

			if (res.data.isHasData == 1) {
				// details.datelist = res.data.data.list
				details.detauser = res.data.data

				for (let item of details.detauser.packageList) {
					item.scanNum = item.scanNum || 0
					item.orderTotalNum = item.orderTotalNum || 0
					item.residueNum = (item.orderTotalNum || 0) - (item.scanNum || 0)
				}

				details.data = details.detauser.packageList
			}
			// 无数据
			// else {
			// 	res.data.data.map(item => {
			// 		if (item.dictKey == details.trayType) {
			// 			details.trayCodevalue = item.dictValue
			// 		}
			// 	})
			// }

			// details.data = [...details.data, ...data.records]
			// details.page.total = data.total

			return null
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		} finally {
			return null
		}
	}

	/** 触底加载 */
	const reachDown = () => {
		console.log('111 :>> ', 111);
		details.page.pageNum += 1
		if (details.page.total <= details.data.length) return uni.showToast({
			title: '数据加载完毕',
			icon: 'none'
		})
		initpage()
	}

	async function godetaillist(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/OrderSortingDetailList/OrderSortingDetailList?orderCode='
				+ item.dataCode + '&trayCode='
				+ details.pageInfo.trayCode
		})
	}

	/** 输入包条码 */
	const handleSearch = () => {
		if (details.searchText === '') return uni.showToast({
			title: '请输入包条码',
			icon: 'none'
		})

		details.scancode = details.searchText
		scandata()
	}

	/** 元素激活状态 */
	const handleChooseStatus = (index : number) => {
		// details.chooseIndex = details.chooseIndex === index ? -1 : index
	}

	/** 确认 */
	const handleConfirm = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	// 顶部背景
	.header-container {
		position: relative;
	}

	// 头部背景
	.header_bg {
		position: absolute;
		width: 100%;
		top: -20upx;
	}

	// 头部
	.header {
		width: calc(100vw - 60upx);
		background: #fff;
		padding: 20upx;
		border-radius: 10upx;
		margin: 10upx 10upx 30upx;
		font-size: 0.8rem;



		// 搜索行
		.search_row {
			display: flex;
			align-items: center;

			input {
				margin-right: 20upx;
				background: #eee;
				flex: 1;
				padding: 10upx 20upx;
				border-radius: 5upx;
			}

			.search_button {
				padding: 10upx 30upx;
				background: var(--subjectColor);
				color: #fff;
				border-radius: 5upx;
			}
		}

		.header_row {
			margin-top: 10upx;
			display: flex;

			>view {
				flex: 1;
			}
		}
	}

	// 分割线
	:deep(.u-divider__text) {
		font-size: 1rem !important;
		color: var(--subjectColor) !important;
	}

	:deep(.u-line) {
		border-color: var(--subjectColor) !important;
	}

	// 列表容器
	.list_container {
		// 边框圆角
		$borderRadius: 5upx;

		position: relative;
		margin: 10upx;
		font-size: 0.8rem;
		background: #fff;
		padding: 10upx;
		border-radius: $borderRadius;
		box-shadow: 0 0 10px #eee, 3px 3px #eee;

		&.active {
			box-shadow: 0 0 10px var(--subjectColor), 3px 3px var(--subjectColor);
		}

		.list_row {
			margin: 10upx;
			display: flex;

			>view {
				flex: 1;
			}
		}

		.list_tips {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10upx 20upx;
			background: var(--subjectColor);
			color: #fff;
			border-top-right-radius: $borderRadius;

			&.none {
				color: #f8625a;
				background-color: #feeded;
			}

			&.portion {
				color: #fa8c16;
				background: #fef3e7;
			}

			&.all {
				color: #0086F1;
				background-color: #e5f2fd;
			}
		}
	}

	// 底部按钮
	.button_container {
		display: flex;
		justify-content: center;
		position: fixed;
		width: 100%;
		bottom: 40upx;
		left: 0;

		>view {
			width: 60vw;
			padding: 20upx;
			text-align: center;
			background: var(--subjectColor);
			border-radius: 5upx;
			color: #fff;
			box-shadow: 0 0 10px var(--subjectColor);
		}
	}

	// 底部站位
	.footer {
		height: 160upx;
	}
</style>