扫码

pages/queryLotInfo/index.vue

@@ -191,7 +191,8 @@
 				<view class="item-info uni-row"> <text class="label">检查员:</text>
 					<text class="label right ">{{ item['reviewerName'] }}</text>
 				</view>
-				<view v-if="item.processInspectionDetails && item.processInspectionDetails.length>0" v-for="(info, index) in item.processInspectionDetails" :key="index">
+				<view v-if="item.processInspectionDetails && item.processInspectionDetails.length>0"
+					v-for="(info, index) in item.processInspectionDetails" :key="index">
 					<view class="item-info uni-row">
 						<text class="label">检测项目:</text>
 						<text class="label right">{{ info['checkStandard']}}</text>
@@ -206,13 +207,16 @@
 					</view>
 				</view>
 				<!-- 拍照上传部分 -->
-						<view v-if="item.processInspectionPictureList && item.processInspectionPictureList.length>0" class="item-info uni-row">
-							<text class="label">拍照上传:</text>
-							<text class=" label right" >
-							<uni-file-picker v-model="item.processInspectionPictureList" :readonly="true"   return-type="array" :image-styles="imageStyles"  file-mediatype="image" class="my-files" ></uni-file-picker>
-							</text>
-						</view>
-						
+				<view v-if="item.processInspectionPictureList && item.processInspectionPictureList.length>0"
+					class="item-info uni-row">
+					<text class="label">拍照上传:</text>
+					<text class=" label right">
+						<uni-file-picker v-model="item.processInspectionPictureList" :readonly="true"
+							return-type="array" :image-styles="imageStyles" file-mediatype="image"
+							class="my-files"></uni-file-picker>
+					</text>
+				</view>
+
 				<view v-for="(data, index) in item.dayworkItemConsults" :key="index">
 					<view class="item-info uni-row">
 						<text class="label">咨询信息:</text>
@@ -306,16 +310,23 @@
 			</scroll-view>
 		</uni-drawer>
 	</scroll-view>
+	<!-- 	<view class="bottom-btn-container uni-row">
+		<button class="bottom-btn" @click="init()">扫码查询</button>
+	</view>
+	<dialog-selectLot ref="selectLotDialog" @submit="handleDoIt" /> -->
+
 	<view class="bottom-btn-container uni-row">
 		<button class="bottom-btn" @click="init()">扫码查询</button>
 	</view>
 	<dialog-selectLot ref="selectLotDialog" @submit="handleDoIt" />
+	<QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
 </template>
 
 <script setup>
 	import {
 		ref
 	} from 'vue'
+	import QrScanner from '../vueQrCode/index.vue'
 	import {
 		onLoad,
 		onReady,
@@ -342,6 +353,7 @@
 	const scrollTop = ref(0)
 	// scrollToId 默认值为空
 	const scrollToId = ref('')
+	const showQrCodeReader = ref(false);
 	const selectLotDialog = ref(null)
 	const selectedInfo = ref({})
 	const curProcessAfte = ref([])
@@ -356,9 +368,9 @@
 	const urlList = JSON.parse(uni.getStorageSync('baseUrl'))
 	const webHost = ref(urlList.baseUrl)
 	const imageStyles = {
-				width:50,
-				height:50
-			}
+		width: 50,
+		height: 50
+	}
 	// 查询主对象
 	let query = null
 	// 定义tab2的【SelectorQuery】对象
@@ -375,7 +387,8 @@
 	})
 
 	function init() {
-		handleScanCode()
+		showQrCodeReader.value = true;
+		// handleScanCode()
 	}
 	onReady(() => {
 		query = uni.createSelectorQuery().in(this)
@@ -397,76 +410,119 @@
 			}
 		})
 	})
-	//扫码
-	function handleScanCode() {
-		//引入原生插件
-		const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
-		if (mpaasScanModule) {
-			// 调用插件的 mpaasScan 方法
-			mpaasScanModule.mpaasScan({
-					// 扫码识别类型，参数可多选，qrCode、barCode，
-					// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
-					scanType: ["qrCode", "barCode"],
-					// 是否隐藏相册，默认false不隐藏
-					hideAlbum: false,
-				},
-				(ret) => {
-					console.log(ret);
-					let vehicleObj = {
-						carrierCode: ret.resp_result
-					};
-					if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
-						uni.showToast({
-							icon: "none",
-							title: "请扫载具码",
-							duration: 1000
-						})
-						return;
-					}
-					getDayworkCarrierByCarrierCode({
-						carrierCode: vehicleObj.carrierCode,
-					}).then(response => {
-						if (response.code == 200) {
-							if (response.data.length > 0) {
-								if (response.data.length > 1) {
-									selectLotDialog.value.open(response.data);
-								} else {
-									handleDoIt(response.data[0])
-								}
-							} else {
-								uni.showToast({
-									icon: 'none',
-									title: "该箱未绑定批次,请重新扫码",
-									duration: 2000
-								})
-							}
-						}
-					})
-				}
-			);
-		} else {
-			// 测试时用
-			getDayworkCarrierByCarrierCode({
-				carrierCode: '000762'
-			}).then(res => {
-				if (res.code == 200) {
-					if (res.data.length > 0) {
-						if (res.data.length > 1) {
-							selectLotDialog.value.open(res.data);
-						} else {
-							handleDoIt(res.data[0])
-						}
+
+	//H5扫码器回调
+	function onDecodeHandler(data) {
+		showQrCodeReader.value = false;
+		console.log(data);
+		let vehicleObj = {
+
+			carrierCode: data
+		};
+		if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
+			uni.showToast({
+				icon: "none",
+				title: "请扫载具码",
+				duration: 1000
+			})
+			return;
+		}
+		getDayworkCarrierByCarrierCode({
+			carrierCode: vehicleObj.carrierCode,
+		}).then(response => {
+			if (response.code == 200) {
+				if (response.data.length > 0) {
+					if (response.data.length > 1) {
+						selectLotDialog.value.open(response.data);
 					} else {
-						uni.showToast({
-							icon: 'none',
-							title: "该箱未绑定批次,请重新扫码",
-							duration: 2000
-						})
+						handleDoIt(response.data[0])
 					}
+				} else {
+					uni.showToast({
+						icon: 'none',
+						title: "该箱未绑定批次,请重新扫码",
+						duration: 2000
+					})
 				}
-			})
-		}
+			}
+		})
+	}
+
+
+	//H5扫码器关闭
+	function qrReaderClose() {
+		showQrCodeReader.value = false;
 	}
+	//扫码
+	// function handleScanCode() {
+	// 	//引入原生插件
+	// 	const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
+	// 	if (mpaasScanModule) {
+	// 		// 调用插件的 mpaasScan 方法
+	// 		mpaasScanModule.mpaasScan({
+	// 				// 扫码识别类型，参数可多选，qrCode、barCode，
+	// 				// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
+	// 				scanType: ["qrCode", "barCode"],
+	// 				// 是否隐藏相册，默认false不隐藏
+	// 				hideAlbum: false,
+	// 			},
+	// 			(ret) => {
+	// 				console.log(ret);
+	// 				let vehicleObj = {
+	// 					carrierCode: ret.resp_result
+	// 				};
+	// 				if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
+	// 					uni.showToast({
+	// 						icon: "none",
+	// 						title: "请扫载具码",
+	// 						duration: 1000
+	// 					})
+	// 					return;
+	// 				}
+	// 				getDayworkCarrierByCarrierCode({
+	// 					carrierCode: vehicleObj.carrierCode,
+	// 				}).then(response => {
+	// 					if (response.code == 200) {
+	// 						if (response.data.length > 0) {
+	// 							if (response.data.length > 1) {
+	// 								selectLotDialog.value.open(response.data);
+	// 							} else {
+	// 								handleDoIt(response.data[0])
+	// 							}
+	// 						} else {
+	// 							uni.showToast({
+	// 								icon: 'none',
+	// 								title: "该箱未绑定批次,请重新扫码",
+	// 								duration: 2000
+	// 							})
+	// 						}
+	// 					}
+	// 				})
+	// 			}
+	// 		);
+	// 	} else {
+	// 		// 测试时用
+	// 		getDayworkCarrierByCarrierCode({
+	// 			carrierCode: '000762'
+	// 		}).then(res => {
+	// 			if (res.code == 200) {
+	// 				if (res.data.length > 0) {
+	// 					if (res.data.length > 1) {
+	// 						selectLotDialog.value.open(res.data);
+	// 					} else {
+	// 						handleDoIt(res.data[0])
+	// 					}
+	// 				} else {
+	// 					uni.showToast({
+	// 						icon: 'none',
+	// 						title: "该箱未绑定批次,请重新扫码",
+	// 						duration: 2000
+	// 					})
+	// 				}
+	// 			}
+	// 		})
+	// 	}
+	// }
 
 	function handleDoIt(data) {
 		dayworkId.value = data.value
@@ -512,9 +568,10 @@
 			dayworkId: dayworkId.value
 		}).then(response => {
 			if (response.code == 200) {
-				response.data.forEach(item =>{
-					if(item.processInspectionPictureList && item.processInspectionPictureList.length>0){
-						item.processInspectionPictureList.forEach(i=>{
+				response.data.forEach(item => {
+					if (item.processInspectionPictureList && item.processInspectionPictureList.length >
+						0) {
+						item.processInspectionPictureList.forEach(i => {
 							i.url = webHost.value + i.url
 						})
 					}
@@ -724,13 +781,14 @@
 			background-color: #1684fc;
 		}
 	}
+
 	.my-files {
 		display: flex;
 		justify-content: center;
-		
+
 		:deep(.uni-file-picker__container) {
-		flex-direction: row;
-			
+			flex-direction: row;
+
 		}
 	}
 </style>

pages/vueQrCode/index.vue

@@ -0,0 +1,220 @@
+<template>
+	<div>
+		<QrStream :style="scannerStyle" @decode="handleDecode" @init="handleInit" @error="handleError">
+			<template v-if="showCloseButton">
+				<div class="qr-scanner-container">
+					<button class="close-view" style="padding-left: 9px !important;" @click="closeScanner">X</button>
+					<div class="qr-scanner">
+						<div class="box">
+							<div class="line"></div>
+							<div class="angle"></div>
+						</div>
+					</div>
+				</div>
+			</template>
+		</QrStream>
+	</div>
+</template>
+
+<script setup>
+	import {
+		ref,
+		defineExpose
+	} from 'vue'
+	import {
+		QrStream
+	} from 'vue3-qr-reader'
+
+	const emit = defineEmits(['decode', 'close'])
+
+	const scannerStyle = {
+		position: 'fixed',
+		top: 0,
+		left: 0,
+		width: '100vw',
+		height: '100vh',
+		zIndex: 9999,
+	}
+
+	const showCloseButton = ref(false)
+
+	const qrcodeData = ref(null)
+
+	const handleDecode = (data) => {
+		console.log('Decoded data:', data)
+		if (data) {
+			emit('decode', data)
+			qrcodeData.value = data
+		}
+
+	}
+
+	const closeScanner = () => {
+		showCloseButton.value = false;
+		emit('close')
+	}
+
+	const handleInit = async (promise) => {
+		console.log("打开扫码页面", promise);
+		try {
+			const {
+				capabilities
+			} = await promise
+			console.log('Camera capabilities:', capabilities)
+			showCloseButton.value = true
+		} catch (error) {
+			handleError(error)
+
+		}
+	}
+
+	const handleError = (error) => {
+		const errorMessages = {
+			NotAllowedError: '您需要授予相机访问权限',
+			NotFoundError: '这个设备上没有摄像头',
+			NotSupportedError: '所需的安全上下文(HTTPS、本地主机)',
+			NotReadableError: '相机被占用',
+			OverconstrainedError: '安装摄像头不合适',
+			StreamApiNotSupportedError: '此浏览器不支持流API',
+			InsecureContextError: '仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。',
+		}
+
+		const message = errorMessages[error.name] || 'ERROR: 摄像头错误'
+		message.error(message)
+		console.error(message)
+	}
+
+	defineExpose({
+		qrcodeData
+	})
+</script>
+
+<style lang="scss" scoped>
+	.qr-scanner-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		.close-view {
+			width: 30px;
+			height: 30px;
+			position: absolute;
+			top: 20px;
+			right: 20px;
+			border-radius: 50%;
+			background-color: #fff;
+			color: #000;
+			text-align: center;
+			line-height: 30px;
+			font-size: 20px;
+			cursor: pointer;
+			z-index: 1000000;
+		}
+	}
+
+	.qr-scanner {
+		background-image: linear-gradient(0deg,
+				transparent 24%,
+				rgba(32, 255, 77, 0.1) 25%,
+				rgba(32, 255, 77, 0.1) 26%,
+				transparent 27%,
+				transparent 74%,
+				rgba(32, 255, 77, 0.1) 75%,
+				rgba(32, 255, 77, 0.1) 76%,
+				transparent 77%,
+				transparent),
+			linear-gradient(90deg,
+				transparent 24%,
+				rgba(32, 255, 77, 0.1) 25%,
+				rgba(32, 255, 77, 0.1) 26%,
+				transparent 27%,
+				transparent 74%,
+				rgba(32, 255, 77, 0.1) 75%,
+				rgba(32, 255, 77, 0.1) 76%,
+				transparent 77%,
+				transparent);
+		background-size: 3rem 3rem;
+		background-position: -1rem -1rem;
+		width: 100%;
+		/* height: 100%; */
+		height: 100vh;
+		position: relative;
+		background-color: #1110;
+
+		/* background-color: #111; */
+	}
+
+	.qr-scanner .box {
+		width: 213px;
+		height: 213px;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		overflow: hidden;
+		border: 0.1rem solid rgba(0, 255, 51, 0.2);
+		/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
+	}
+
+	.qr-scanner .line {
+		height: calc(100% - 2px);
+		width: 100%;
+		background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
+		border-bottom: 3px solid #00ff33;
+		transform: translateY(-100%);
+		animation: radar-beam 2s infinite alternate;
+		animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
+		animation-delay: 1.4s;
+	}
+
+	.qr-scanner .box:after,
+	.qr-scanner .box:before,
+	.qr-scanner .angle:after,
+	.qr-scanner .angle:before {
+		content: '';
+		display: block;
+		position: absolute;
+		width: 3vw;
+		height: 3vw;
+
+		border: 0.2rem solid transparent;
+	}
+
+	.qr-scanner .box:after,
+	.qr-scanner .box:before {
+		top: 0;
+		border-top-color: #00ff33;
+	}
+
+	.qr-scanner .angle:after,
+	.qr-scanner .angle:before {
+		bottom: 0;
+		border-bottom-color: #00ff33;
+	}
+
+	.qr-scanner .box:before,
+	.qr-scanner .angle:before {
+		left: 0;
+		border-left-color: #00ff33;
+	}
+
+	.qr-scanner .box:after,
+	.qr-scanner .angle:after {
+		right: 0;
+		border-right-color: #00ff33;
+	}
+
+	@keyframes radar-beam {
+		0% {
+			transform: translateY(-100%);
+		}
+
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	uni-button {
+		padding-left: 9px !important;
+	}
+</style>