logpm/pagesHome/pages/onLoadOrderDetails/onLoadOrderDetails2.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 头部 -->
		<template #head>
			<view class="header-container">
				<view class="">
					<text>
						订单号：
					</text>

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

				<view class="">
					已扫 / 总数：{{details.pageInfo.scanNum + '/' + details.pageInfo.totalNum}}
				</view>
			</view>
		</template>

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

			<view class="table-row title">
				<view class="table-row-item">
					包条码
				</view>
				<view class="table-row-item">
					品类名
				</view>
				<view class="table-row-item">
					状态
				</view>
				<view class="table-row-item">
					异常
				</view>
			</view>
			<!-- 提货单件数 -->
			<scroll-view class="scollView" scroll-y="true" :style="{height: details.height}"
				@scrolltolower="utils.debounce(reachDown, 500)">

				<view class="table-row">

				</view>

				<block v-for="(item, index) in details.data" :key="item.id">
					<view class="table-row">
						<view class="table-row-item">
							{{item.orderPackageCode}}
						</view>
						<view class="table-row-item">
							{{item.name || '暂无数据'}}
						</view>
						<view class="table-row-item">
							{{Number(item.packageStatus) === 1 ? '已扫': '未扫' }}
						</view>
						<view class="table-row-item">
						</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: 20,
			/** 当前页码 */
			pageNum: 1,
			/** 总数 */
			total: 0
		},
		/** 滚动区高度 */
		height: '80vh',
		/** 页面数据 */
		pageInfo: {} as any,
	})

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


			details.data = data
			// 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()
	}
</script>

<style lang="scss" scoped>
	.header-container {
		margin: 20upx;
		padding: 20upx;
		background: #fff;
		font-size: 0.8rem;

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

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

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

	.table-row {
		display: flex;
		background: #fff;
		font-size: 0.8rem;
		text-align: center;
		min-height: 60upx;

		&.title {
			background: var(--subjectColor);
			color: #fff;
			width: 100%;
			position: absolute;
			z-index: 9;

			.table-row-item {
				border-color: #fff;
			}
		}

		.table-row-item {
			box-sizing: border-box;
			border-left: 2upx solid #959595;
			padding: 10upx 5upx;
			word-break: break-all;
			border-top: 2upx solid #959595;

			&:nth-child(1) {
				width: 40%;
			}

			&:nth-child(2) {
				width: 35%;
			}

			&:nth-child(3) {
				width: 15%;
			}

			&:nth-child(4) {
				width: 10%;
				border-right: 2upx solid #959595;
			}
		}
	}
</style>