防抖

pages/changeBox/index.vue

@@ -1,4 +1,6 @@
 <template>
+	<view v-if="isMaskShow" class="mask">
+	</view>
 	<view class='container'>
 		<view class='content'>
 			<view class='title uni-row'>
@@ -87,6 +89,8 @@
 	const discardVehicleList = ref([])
 	const abanonmentList = ref([])
 	const showQrCodeReader = ref(false);
+	// 在数据中定义一个变量来控制遮罩层的显示
+	const isMaskShow = ref(false);
 
 	let dayWorkInfo = store.dayworkInfo;
 	onMounted(() => {
@@ -366,51 +370,51 @@
 	//H5扫码器回调
 	function onDecodeHandler(data) {
 		showQrCodeReader.value = false;
-	let vehicleObj = {
-		carrierCode: data
-	};
-	console.log("扫码验证数据", vehicleObj);
-	if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
-		uni.showToast({
-			icon: "none",
-			title: "请扫载具码"
-		})
-		return;
-	}
-	for (let i = 0; i < newBindList.value.length; i++) {
-		if (newBindList.value[i].carrierCode === vehicleObj.carrierCode) {
+		let vehicleObj = {
+			carrierCode: data
+		};
+		console.log("扫码验证数据", vehicleObj);
+		if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
 			uni.showToast({
 				icon: "none",
-				title: "载具已存在"
+				title: "请扫载具码"
 			})
 			return;
 		}
-	}
-	const checkData = {
-		...dayWorkInfo,
-		dayworkCarriers: newBindList.value,
-		newCarrierCode: vehicleObj.carrierCode
-	}
-	console.log("dayWorkInfo", dayWorkInfo);
-	checkCarrierNew(checkData).then(response => {
-		if (response.code == 200) {
-			newBindList.value.push(response.data);
-		} else {
+		for (let i = 0; i < newBindList.value.length; i++) {
+			if (newBindList.value[i].carrierCode === vehicleObj.carrierCode) {
+				uni.showToast({
+					icon: "none",
+					title: "载具已存在"
+				})
+				return;
+			}
+		}
+		const checkData = {
+			...dayWorkInfo,
+			dayworkCarriers: newBindList.value,
+			newCarrierCode: vehicleObj.carrierCode
+		}
+		console.log("dayWorkInfo", dayWorkInfo);
+		checkCarrierNew(checkData).then(response => {
+			if (response.code == 200) {
+				newBindList.value.push(response.data);
+			} else {
+				uni.showToast({
+					icon: 'none',
+					title: response.msg
+				})
+				return;
+			}
+		}).catch(err => {
 			uni.showToast({
 				icon: 'none',
-				title: response.msg
+				title: '箱码检测检测错误' + err.message
 			})
-			return;
-		}
-	}).catch(err => {
-		uni.showToast({
-			icon: 'none',
-			title: '箱码检测检测错误' + err.message
 		})
-	})
 	}
-	
-	
+
+
 	//H5扫码器关闭
 	function qrReaderClose() {
 		showQrCodeReader.value = false;
@@ -442,8 +446,14 @@
 				return
 			}
 		}
+		isMaskShow.value = true
+		uni.showLoading({
+			title: '加载中'
+		});
 		if (carrierRejectList.length > 0 && newBindList.value.length > 0) {
 			addCarrierReject(carrierRejectList).then((response) => {
+				isMaskShow.value = false
+				uni.hideLoading();
 				if (response.code == 200) {
 					uni.showToast({
 						icon: 'success',
@@ -460,6 +470,8 @@
 		// console.log("dayWorkInfo", dayWorkInfo);
 		dayWorkInfo.dayworkCarriers = newBindList.value;
 		saveDayWork(dayWorkInfo).then(res => {
+			isMaskShow.value = false
+			uni.hideLoading();
 			if (res.code === 200) {
 				uni.showToast({
 					icon: 'success',
@@ -586,6 +598,25 @@
 		font-weight: bold;
 	}
 
+	/* 遮罩层样式 */
+	.mask {
+		position: fixed;
+		/* 固定定位，覆盖整个屏幕 */
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.3);
+		/* 黑色背景，透明度30% */
+		display: flex;
+		justify-content: center;
+		/* 水平居中 */
+		align-items: center;
+		/* 垂直居中 */
+		z-index: 5;
+		/* 确保遮罩层在其他元素之上 */
+	}
+
 	// .btn {
 	// 	position: fixed;
 	// 	top: 940rpx;