logpm/pagesHome/pages/onLoadOrderDetails/onLoadOrderDetails.vue

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

			</view>
			<view class="header-container">
				<view class="">
					<text>
						订单号：
					</text>

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

				<view class="">
					<text>已扫 / 总数：</text>
					<text style="color: #12a6df;">{{details.pageInfo.scanNum}}</text> /
					<text>{{details.pageInfo.totalNum}}</text>
				</view>
			</view>
		</template>

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

			<!-- 提货单件数 -->
			<scroll-view class="scollView" scroll-y="true" :style="{height: details.height}">
				<block v-for="(value, index) in details.data" :key="value.title">
					<view class="pullDownBox">
						<view class="title flex-c-sb" @click="handleIdnex(index)">
							<view class="text flex-c-c">
								<text class="mr10 serialNumber">{{index + 1}}</text>

								<text class="mr10 ">
									{{value.title}}
								</text>

								<text> {{value.scanNum}} </text>
								<text class="ml10 mr10"> / </text>
								<text> {{value.dataList.length}} </text>
							</view>

							<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="{'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}">
									<view class="table-row-item">
										<text>包条码：</text>
										<text>
											{{item.orderPackageCode}}
										</text>
									</view>
									<view class="table-row-item">
										<text>品类名：</text>
										<text>
											{{item.materialName || '暂无数据'}}
										</text>
									</view>
									<view
										:class="{'table-tag': true, 'red': Number(item.packageStatus) !== 1, 'green': Number(item.packageStatus) === 1}">
										{{Number(item.packageStatus) === 1 ? '已 扫': '未 扫' }}
									</view>
								</view>
							</block>
						</view>
					</view>
				</block>
			</scroll-view>
		</template>
	</BasicContainer>
</template>

<script lang="ts" setup>
	import {
		postFindAdvanceDetailList
	} 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.page.pageNum = 1
			details.data = []

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

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

	let details = reactive({
		/** 提货批次列表 */
		data: [] as any[],
		/** 页面分页 */
		page: {
			/** 每页页数 */
			pageSize: 10,
			/** 当前页码 */
			pageNum: 1,
			/** 总数 */
			total: 0
		},
		/** 滚动区高度 */
		height: '80vh',
		/** 页面数据 */
		pageInfo: {} as any,
		activeIndex: 0
	})

	// 组件实例
	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()

		// 设置滚动区高度
		details.height = await utils.getViewDistanceFormTop('.scollView')
	})

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

			const res = await postFindAdvanceDetailList(_submitData)

			const { code, data } = res

			if (code !== 200) return

			const _data = []

			// 已扫数
			let _scanNum = 0

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

				if (Number(value.packageStatus) === 1) _scanNum++

				let _item = null

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

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

				// 是否存在该品类
				if (_item) {
					// _item.dataList.push(value)
					// 将未扫数据提在前方
					if (Number(value.packageStatus) === 1) {
						_item.dataList.push(value)
						_item.scanNum++
					}
					else _item.dataList.unshift(value)
				} else {
					_data.push({ title: value.thirdPackName, dataList: [value], scanNum: Number(value.packageStatus) === 1 ? 1 : 0 })
				}
			}

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

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

			if (_scanNum === data.length) utils.handleToast('订单已齐套')
			else utils.handleToast(_scanNum + '件')

			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()
	// }
	/** 是否展开数据 */
	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: ;
		width: 100vw;
		top: -150upx;
		left: 0;

		image {
			width: 100%;
		}
	}

	.header {
		height: 20upx;
	}

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

		>view {
			&:first-child {
				margin-bottom: 40upx;
			}
		}
	}

	: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;
		// margin-bottom: 10upx;
		border-radius: 15upx;
		overflow: hidden;
		background: #F5F5F6;

		.table-row-item {
			padding: 15upx;
			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);
			color: #fff;
			font-weight: bold;

			.tip {
				font-weight: normal;
				font-size: 0.8rem;
				background: #d79040;
				padding: 10upx 20upx;
				border-radius: 10upx;

				&.perform {
					color: var(--subjectColor);
					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;
			}
		}
	}

	// 序号
	$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>