logpm/pagesHome/pages/billsList/billsList.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 头部 -->
		<template #head>
			<view class="header">
				请选择提货批次
			</view>
		</template>

		<!-- 主体 -->
		<template #body>
			<!-- 提货单件数 -->
			<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">
							提货批次: {{item.billladingCode || '暂无数据'}}
						</view>

						<view class="list_row">
							路线: {{item.lineNameTitle || '暂无数据'}}
						</view>

						<view class="list_row">
							<view class="">
								仓库名称：{{item.warehouseName || '暂无数据'}}
							</view>

							<view class="">
								承运商：{{item.carrierName || '暂无数据'}}
							</view>
						</view>

						<view class="list_row">
							<view class="">
								司机名字：{{item.driverName || '暂无数据'}}
							</view>

							<view class="">
								司机电话：{{item.driverPhone || '暂无数据'}}
							</view>
						</view>

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

						<!-- 状态标签 -->
						<view class="list_tips">
							{{details.type[Number(item.billladingStatus) ]|| '暂无状态数据'}}
						</view>
					</view>
				</block>

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

				</view>
			</scroll-view>

			<!-- 底部站位 -->
			<view class="button_container">
				<view @click="handleSkip">
					跳过
				</view>

				<view @click="handleConfirm">
					下一步
				</view>
			</view>
		</template>

	</BasicContainer>

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

<script lang="ts" setup>
	import {
		getBillladingList
	} 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: '已完成', 4: '已结算', 5: '已取消'
		},
		height: '80vh',
		pageInfo: {}
	})

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

	onLoad((op) => {
		details.pageInfo = op

		// // #ifdef APP
		// utils.ttsspke('请扫描或输入托盘码')
		// // #endif
	})
	onShow(async () => {
		// #ifdef APP
		// 初始化关闭监听
		uni.$off('scancodedate')
		// #endif

		await nextTick()
		basicContainer.value.startPullDownRefresh()

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

	async function initpage() {
		try {
			const res = await getBillladingList(details.page)

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

			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()
	}

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

	/** 跳过 */
	const handleSkip = () => {
		const jumpData = {
			...details.pageInfo,
		}

		uni.redirectTo({
			url: `/pagesHome/pages/PickUpLotList/PickUpLotList?pageInfo=${JSON.stringify(jumpData)}`
		})
	}

	/** 确认 */
	const handleConfirm = () => {
		if (details.chooseIndex === -1) return uni.showToast({
			title: '请选择一条提货数据',
			icon: 'none'
		})

		const _item = details.data[details.chooseIndex]

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

		const jumpData = {
			...details.pageInfo,
			id: _item.id,
			billladingCode: _item.billladingCode,
			lineNameTitle: _item.lineNameTitle
		}

		uni.redirectTo({
			url: `/pagesHome/pages/PickUpLotList/PickUpLotList?pageInfo=${JSON.stringify(jumpData)}`,
		})
	}
</script>

<style lang="scss" scoped>
	// 头部
	.header {
		padding: 10upx 10upx 30upx;
		font-size: 0.8rem;
	}

	// 列表容器
	.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;
		}
	}

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

		>view {
			padding: 15upx 60upx;
			background: var(--subjectColor);
			border-radius: 5upx;
			color: #fff;
			box-shadow: 0 0 10px var(--subjectColor);

			&:first-child {
				background-color: #bd3734;
				box-shadow: 0 0 10px #bd3734;
				margin-right: 40upx;
			}
		}
	}

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