logpm/pagesHome/pages/OrderDetailsInTheStorage/OrderDetailsInTheStorage.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 头部 -->
		<template #head>
			<view class="header">
				<view class="bgimg">
					<image src="https://huo5you.oss-cn-chengdu.aliyuncs.com/other/pdaImages/pdaImages/bgby.png" mode="">
					</image>
				</view>
				<view class="header-container">
					<view class="">
						<text>
							订单号：
						</text>

						<text>
							{{details.pageInfo.orderCode}}
						</text>
					</view>

					<view class="flex-c-sb">
						<view class="">
							<text>入库数：</text>
							<text style="color: #12a6df;">{{details.pageInfo.scanNum}}</text>
						</view>

						<view class="">
							<text>总数：</text>
							<text>{{details.pageInfo.totalNum}}</text>
						</view>
					</view>
				</view>

				<view class="tabbar mb20">
					<block v-for="(item, index) in details.tabbarOption">
						<view :class="{'tabbar_item': true, active: index === details.tabbarStatus,  'flex-c-c': true}"
							@click="()=> handleTabbar(index)">
							<text>
								{{item.label}}
							</text>
						</view>
					</block>

					<view class="activeItem" :style="`transform: translateX(${100 * details.tabbarStatus}%);`">

					</view>
				</view>
			</view>

		</template>

		<!-- 主体 -->
		<template #body>
			<!-- 提货单件数 -->
			<view>
				<block v-for="(value, index) in details.data" :key="value.title">
					<view
						:class="{pullDownBox: true, notShow: details.tabbarStatus === 2 ? false: details.tabbarStatus === 0 ? value.scanNum === value.dataList.length: value.scanNum === 0 }">
						<view :class="{title: true, active: value.scanNum === value.dataList.length  }"
							@click="()=> handleIdnex(index)">
							<view class="flex-c-sb">
								<text class="mr10 ">
									{{value.title}}
								</text>

								<view class="flex-c-c">
									<text
										:class="{'tip': true, 'perform':  value.scanNum === value.dataList.length,'mr10': true}">
										{{value.scanNum === 0 ? '未扫' : value.scanNum < value.dataList.length ? '未扫完' : '已扫完'}}
									</text>

									<view :class="{'icon': true, 'active': details.activeIndex === index}">
										<u-icon name="arrow-up" color="#fff" size="28"></u-icon>
									</view>
								</view>
							</view>
							<view class="flex-c-sb mt20 rem-0-9">
								<text>未入：{{value.dataList.length - value.scanNum}} </text>
								<text>已入：{{value.scanNum}} </text>
								<text>总数： {{value.dataList.length}} </text>
							</view>

						</view>

						<view :class="{'container': true, 'active': details.activeIndex === index}">
							<block v-for="(item, index) in value.dataList" :key="value.id">

								<view
									:class="{
									'table-row': true, 
									'red': Number(item.packageStatus) !== 1, 
									'green': Number(item.packageStatus) === 1,
									'mb20': index!== value.dataList.length - 1, 
									notShow:details.tabbarStatus === 2 ? false: details.tabbarStatus === 1 ? item.packageStatus === 0: item.packageStatus === 1}">
									<view class=" table-row-item">
										<text>包条码：</text>
										<text>
											{{item.orderPackageCode}}
										</text>
									</view>

									<view class="table-row-item flex">
										<view class="flex1">
											<text>托盘：</text>
											<text>
												{{item.pallet || '暂无数据'}}
											</text>
										</view>

										<view class="">
											<text>仓库：</text>
											<text>
												{{item.warehouse || '暂无数据'}}
											</text>
										</view>
									</view>

									<view class="table-row-item">
										品类名：

										{{item.materialName || '暂无数据'}}
									</view>

									<view
										:class="{'table-tag': true, 'red': Number(item.packageStatus) !== 1, 'green': Number(item.packageStatus) === 1, flexnone: true}">
										{{Number(item.packageStatus) === 1 ? '已入库': '未入库' }}
									</view>
								</view>

							</block>
						</view>
					</view>
				</block>
			</view>
		</template>
	</BasicContainer>
</template>

<script lang="ts" setup>
	import {
		postDeliveryOrderCodeWarehouseDetail
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref } from "vue";
	import utils from '@/utils/utils.js'
	// 组件配置
	const option = reactive({
		// 标题
		title: '订单在库详情',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {
			details.data = []

			// 重置被选中数据
			initpage()

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

	let details = reactive({
		/** 提货批次列表 */
		data: [] as any[],
		/** 页面数据 */
		pageInfo: {} as any,
		activeIndex: 0,
		tabbarStatus: 0,
		tabbarOption: [
			{ label: '未入库' },
			{ label: '已入库' },
			{ label: '全部' },
		]
	})

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


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


	})

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

		await nextTick()
		basicContainer.value.startPullDownRefresh()

	})

	async function initpage() {
		try {
			const _submitData = {
				orderCode: details.pageInfo.orderCode
			}

			const res = await postDeliveryOrderCodeWarehouseDetail(_submitData)

			const { code, data } = res

			if (code !== 200 || utils.getObjType(data) !== 'object') return

			const { warehouse, unWarehouse } = data

			const _data = []

			// 已扫数
			let _scanNum = 0
			let _total = 0

			if (utils.getObjType(warehouse) === 'array') {

				_total += warehouse.length

				for (let i = 0; i < warehouse.length; i++) {
					const value = warehouse[i]

					_scanNum++

					let _item = null

					for (let index = 0; index < _data.length; index++) {
						const item = _data[index]

						if (value.thirdProduct === item.title) {
							_item = item
							break
						}
					}

					const _obj = {
						orderPackageCode: value.orderPackageCode,
						pallet: value.pallet,
						warehouse: value.warehouse,
						materialName: value.materialName,
						packageStatus: 1
					}

					// 是否存在该品类
					if (_item) {
						_item.dataList.push(_obj)
						_item.scanNum++
					} else {
						_data.push({ title: value.thirdProduct, dataList: [_obj], scanNum: 1 })
					}
				}
			}

			if (utils.getObjType(unWarehouse) === 'array') {
				_total += unWarehouse.length

				for (let i = 0; i < unWarehouse.length; i++) {
					const value = unWarehouse[i]

					let _item = null

					for (let index = 0; index < _data.length; index++) {
						const item = _data[index]

						if (value.thirdProduct === item.title) {
							_item = item
							break
						}
					}

					const _obj = {
						orderPackageCode: value.orderPackageCode,
						pallet: value.pallet,
						warehouse: value.warehouse,
						materialName: value.materialName,
						packageStatus: 0
					}

					// 是否存在该品类
					if (_item) {
						_item.dataList.unshift(_obj)
					} else {
						_data.push({ title: value.thirdProduct, dataList: [_obj], scanNum: 0 })
					}
				}
			}


			console.log('_data :>> ', _data);

			details.data = _data
			details.pageInfo.scanNum = _scanNum
			details.pageInfo.totalNum = _total

			details.activeIndex = 0

			if (details.tabbarStatus === 2) return
			for (let i = 0; i < details.data.length; i++) {
				const value = details.data[i]

				// 已入库
				if (details.tabbarStatus === 1) {
					if (value.scanNum === 0) continue
					details.activeIndex = i
					break
				}
				// 未入库
				else if (details.tabbarStatus === 0) {
					if (value.scanNum === value.dataList.length) continue
					details.activeIndex = i
					break
				}
			}

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


	const handleTabbar = (status : number) => {
		details.tabbarStatus = status
		details.activeIndex = 0

		if (status === 2) return
		for (let i = 0; i < details.data.length; i++) {
			const value = details.data[i]

			// 已入库
			if (status === 1) {
				if (value.scanNum === 0) continue
				details.activeIndex = i
				break
			}
			// 未入库
			else if (status === 0) {
				if (value.scanNum === value.dataList.length) continue
				details.activeIndex = i
				break
			}
		}
	}
	/** 触底加载 */
	// const reachDown = () => {
	// 	console.log('111 :>> ', 111);
	// 	details.page.pageNum += 1
	// 	if (details.page.total <= details.data.length) return uni.showToast({
	// 		title: '数据加载完毕',
	// 		icon: 'none'
	// 	})
	// 	initpage()
	// }
	/** 是否展开数据 */
	const handleIdnex = (index : number) => {
		details.activeIndex = index === details.activeIndex ? -1 : index
	}
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	.bgimg {
		position: absolute;
		z-index: 1;
		width: 100vw;
		top: -300upx;
		left: 0;

		image {
			width: 100%;
		}
	}

	.header {
		width: 100vw;
		padding-bottom: 20upx;
		background-color: #f5f5f6;
	}

	.header-container {
		position: relative;
		z-index: 9;
		margin: 20upx;
		padding: 40upx;
		background: #fff;
		font-size: 0.8rem;
		border-radius: 10upx;
		font-weight: bold;

		>view {
			&:first-child {
				margin-bottom: 30upx;
				font-size: 0.9rem;
			}
		}
	}

	// tabbar
	.tabbar {
		position: relative;
		z-index: 9;
		background-color: #fff;
		display: flex;
		height: 90upx;
		position: relative;
		border-radius: 10upx;
		margin: 0 20upx;
		overflow: hidden;

		.tabbar_item {
			flex: 1;
			transition: all 0.3s;

			text {
				position: relative;
				z-index: 10;
			}

			&.active {
				color: #fff;
			}
		}

		// 选中背景
		.activeItem {
			width: 33.33%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: var(--subjectColor);
			transition: all 0.3s;
		}
	}

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

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

	.table-row {
		background: #fff;
		font-size: 0.8rem;
		min-height: 60upx;
		position: relative;
		border-radius: 15upx;
		overflow: hidden;
		background: #F5F5F6;

		.table-row-item {
			padding: 10upx;
			box-sizing: border-box;
			word-break: break-all;
		}

		// 标签
		.table-tag {
			position: absolute;
			right: 0;
			top: 0;
			color: #fff;
			padding: 10upx 20upx;

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

			&.green {
				color: #1ba035;
				background-color: #edfef2;
			}
		}
	}

	.main_box {
		padding: 20upx;
		background-color: #fff;
		margin: 10upx;
	}

	// 下拉框
	.pullDownBox {
		margin: 0 20upx;
		margin-bottom: 20upx;
		border-radius: 10upx;
		overflow: hidden;

		>.title {
			font-family: serif;
			padding: 20upx;
			// background: var(--subjectColor);
			background-color: var(--errColor);
			color: #fff;
			font-weight: bold;

			&.active {
				background-color: var(--primaryColor);
			}

			.tip {
				font-weight: bold;
				font-size: 0.8rem;
				// background: #d79040;
				background-color: #fff;
				color: var(--errColor);
				padding: 10upx 20upx;
				border-radius: 10upx;

				&.perform {
					// color: var(--subjectColor);
					color: var(--primaryColor);
					background: #fff;
				}
			}

			.icon {
				transition: all 0.3s;

				&.active {
					transform: rotate(180deg);
				}
			}
		}

		>.container {
			background: #fff;
			padding: 0;
			height: 0;
			box-sizing: border-box;

			&.active {
				padding: 20upx;
				height: auto;
			}
		}
	}

	.notShow {
		display: none;
	}

	// 序号
	$serialNumberHeight: 1.4rem;

	.serialNumber {
		border: 4upx solid;
		min-width: $serialNumberHeight;
		height: $serialNumberHeight;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.7rem;
		box-sizing: border-box;
		font-weight: normal;
		font-size: 0.8rem;
		font-weight: bold;
		padding: 5upx;
	}
</style>