logpm/pagesHome/pages/loadingRetention/loadingRetention.vue

<template>
	<!-- <u-navbar title="配送客户扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
	<u-navbar title="装车滞留" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="hedtopt">
		<view class="typto">
			<view>配车类型：{{items.type_name}}</view>
			<view>配车状态：{{items.vehicleStatus_name}}</view>
		</view>
		<view class="typto">
			<view>车牌号：{{items.vehicleName}}</view>
			<view>司机：{{items.driverName}}</view>
		</view>
		<view class="typto">
			<view>装卸班组：{{items.loadingTeamName}}</view>
			<view>备货是否完成：{{items.isstock}}</view>
		</view>
		<view class="kehupeison">
			<view>
				<view>配送客户数</view>
				<view>{{items.customersNumber}}</view>
			</view>
			<view>
				<view>订单总数</view>
				<view>{{ordernumber}}</view>
			</view>
			<view>
				<view>计划件数</view>
				<view>{{deliveryNumber}}</view>
			</view>
			<view>
				<view>装车件数</view>
				<view>{{scannedNumber}}</view>
			</view>
			<view>
				<view>滞留数</view>
				<view>{{scannedNumber}}</view>
			</view>
		</view>
	</view>
	<!-- tabBar选项卡 -->
	<view class="tabBar">
		<view :class="{'tabBar-item': true, 'active': tabBarCode === 1}" @click="handleTabBarCode(1)">
			定制/库存品
		</view>
		<view :class="{'tabBar-item': true, 'active': tabBarCode === 2}" @click="handleTabBarCode(2)">
			零担
		</view>
	</view>
	<scroll-view class="scoolv" scroll-y="true">

	</scroll-view>
	<view class="button_container">
		<view class="button_item" @click="showPopUp">
			整托滞留
		</view>
	</view>
	<tiplist ref="tiplists"></tiplist>
	<saomiao2></saomiao2>
	<!-- 整托滞留弹窗 -->
	<PopUp ref='PopUpMask'>
		<view class="main">
			123
		</view>
	</PopUp>
</template>

<script lang="ts" setup>
	import {
		deliverycustom,
		deliveryloadingscan,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { computed, reactive, ref, toRefs } from "vue";
	let details = reactive({
		id: '',
		renderList: [],
		items: {} as any,
		scancode: '',
		authbuts: uni.getStorageSync('authbuts'),
		tabBarCode: 1,
		// 整托滞留弹窗显示
		showTrayRetention: true
	})
	const tiplists = ref(null)
	const PopUpMask = ref(null)
	onLoad((op) => {
		details.id = op.id
		details.items = JSON.parse(op.item)
	})
	onHide(() => {
		uni.$off('scancodedate')
		console.log("uni", uni)
	})
	onShow(() => {
		initpage()
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			initpage()
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})
	const ordernumber = computed(() => {
		let num = 0
		details.renderList.map(item => {
			num += Number(item.ordNub)
		})
		return num
	})
	const deliveryNumber = computed(() => {
		let num = 0
		details.renderList.map(item => {
			num += Number(item.reservationNum)
		})
		return num
	})
	const scannedNumber = computed(() => {
		let num = 0
		details.renderList.map(item => {
			num += Number(item.loadingNub)
		})
		return num
	})

	async function scandata() {
		let loadingId = uni.getStorageSync('checkvehicle').id
		let data = {
			deliveryId: details.id,
			loadingId,
			type: 1,
			barcode: details.scancode
		}
		let res = await deliveryloadingscan(data)
		console.log(res);
		if (res.code == 200) {

		}
	}
	async function initpage() {
		let data = {
			id: details.id
		}
		let response = await deliverycustom(data)
		if (response.code !== 200) return
		details.renderList = response.data.records
	}

	// 改变选项卡激活状态
	function handleTabBarCode(code : number) {
		tabBarCode.value = code
	}

	/**
	 * 显示整托滞留弹出层
	 */
	const showPopUp = () => {
		console.log('PopUpMask :>> ', PopUpMask);
		PopUpMask.value.setDetails({
			// 显示弹出层
			showPopUp: true,
			confirmText: '确定整托',
			height: '60%',
			title: '整托滞留',
			success() {
				console.log('123 :>> ', 123);
			}
		})
	}

	const { items, renderList, tabBarCode } = toRefs(details)
</script>

<style lang="scss" scoped>
	$subjectColor: #D3832A;

	.scoolv {
		width: 100%;
		height: 60vh;
		margin-top: 20upx;
	}

	.hedtopt {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #ffffff;
		padding: 36upx 32upx;
		box-sizing: border-box;

		.typto {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 20upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				flex: 1;
			}
		}

		.kehupeison {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20upx;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28upx;
				font-weight: 400;
				color: #092C4D;

				&:nth-of-type(1) {
					>view:nth-of-type(2) {
						color: #092C4D;
					}
				}

				&:nth-of-type(2) {
					>view:nth-of-type(2) {
						color: #0086F1;
					}
				}

				&:nth-of-type(3) {
					>view:nth-of-type(2) {
						color: #3AD8BC;
					}
				}

				&:nth-of-type(4) {
					>view:nth-of-type(2) {
						color: #FA8C16;
					}
				}

				>view:nth-of-type(2) {
					font-size: 36upx;
					font-weight: 400;
					color: #092C4D;
					margin-top: 20upx;
				}
			}
		}
	}

	// tabBar选项卡
	.tabBar {
		display: flex;
		justify-content: space-evenly;
		background-color: #fff;
		margin-top: 10upx;
		margin-bottom: 10upx;

		&-item {
			position: relative;
			flex: 1;
			flex-basis: 0;
			padding: 20upx 0;
			text-align: center;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				display: block;
				width: 0;
				box-sizing: border-box;
				border: 1upx solid $subjectColor;
				transition: all 0.5s;
			}

			&.active {
				color: $subjectColor;

				&::after {
					left: 0;
					width: 100%;
				}
			}
		}
	}

	// 按钮容器
	.button_container {
		position: fixed;
		width: 100vw;
		bottom: 10upx;
		display: flex;
		justify-content: space-around;

		.button_item {
			padding: 10upx 30upx;
			border: 1upx solid $subjectColor;
			border-radius: 10upx;
			color: $subjectColor;
		}
	}

	// 弹窗
</style>