anKeYuan-vendingMachine/pages/scanCodePage.vue

<!-- H5 扫码页面 -->
<template>
	<view class="scanCodePage">
		<video id="video-canvas" autoplay :controls="false"></video>
		<!-- 扫码遮罩层（中间镂空） -->
		<view class="scan-overlay">
			<!-- 扫码框 -->
			<view class="scan-frame">
				<!-- 四角标记线 -->
				<view class="corner top-left"></view>
				<view class="corner top-right"></view>
				<view class="corner bottom-left"></view>
				<view class="corner bottom-right"></view>
				<!-- 扫描动画线 -->
				<view class="scan-line"></view>
			</view>
			<!-- 提示文字 -->
			<text class="scan-tip">将二维码放入框内，即可自动扫描</text>
		</view>
	</view>
</template>
<script>
	import {
		BrowserMultiFormatReader
	} from '@zxing/library';
	export default {
		data() {
			return {
				codeReader: null,
				deviceId: null,
			}
		},
		mounted() {
			this.initScanner();
		},
		methods: {
			async initScanner() {
				let self = this;
				const videoDom = document.getElementById('video-canvas').getElementsByTagName('video')[0];
				videoDom.id = 'zxing-video';
				this.codeReader = new BrowserMultiFormatReader();
				try {
					const devices = await this.codeReader.listVideoInputDevices();
					this.deviceId = devices[devices.length - 1].deviceId;
					this.startScanning();
				} catch (err) {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: "请启用摄像头权限",
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				}
			},
			startScanning() {
				let self = this;
				this.codeReader.decodeFromVideoDevice(
					this.deviceId,
					'zxing-video',
					(result, err) => {
						if (result) {
							self.codeReader.reset();
							self.inspectCode(result.text);
						}
					}
				);
			},
			inspectCode(result) {
				if (result.indexOf('mid') != -1 &&
					result.indexOf('sid') != -1 &&
					result.indexOf('pid') != -1 &&
					result.indexOf('pri') != -1) {
					this.getCommodityInfo(result);
				} else {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: "请扫描正确的二维码",
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				}
			},
			getCommodityInfo(result) {
				uni.navigateTo({
					url: '/pages/commodityInfo?q=' +
						encodeURIComponent(JSON.stringify(result))
				});
			},
		},
		beforeDestroy() {
			this.codeReader?.reset();
		}
	}
</script>
<style lang="stylus" scoped>
	.scanCodePage {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		::v-deep #video-canvas {
			height: 100%;
			width: 100%;

			.uni-video-cover {
				display: none;
			}
		}
		.scan-overlay {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 2;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  background: rgba(0, 0, 0, 0.6);
		  clip-path: polygon(
		    0% 0%, 100% 0%, 100% 100%, 0% 100%,
		    0% calc(50% - 240rpx),
		    calc(50% - 240rpx) calc(50% - 240rpx),
		    calc(50% - 240rpx) calc(50% + 240rpx),
		    calc(50% + 240rpx) calc(50% + 240rpx),
		    calc(50% + 240rpx) calc(50% - 240rpx),
		    0% calc(50% - 240rpx)
		  );
		}
		.scan-frame {
		  position: absolute;
		  width: 480rpx;
		  height: 480rpx;
		  border: 2rpx solid rgba(255, 255, 255, 0.3);
		  box-sizing: border-box;
		}
		.corner {
		  position: absolute;
		  width: 36rpx;
		  height: 36rpx;
		  border-color: #0183FA;
		  border-style: solid;
		  border-width: 0;
		}
		
		.top-left {
		  top: -2rpx;
		  left: -2rpx;
		  border-top-width: 6rpx;
		  border-left-width: 6rpx;
		}
		
		.top-right {
		  top: -2rpx;
		  right: -2rpx;
		  border-top-width: 6rpx;
		  border-right-width: 6rpx;
		}
		
		.bottom-left {
		  bottom: -2rpx;
		  left: -2rpx;
		  border-bottom-width: 6rpx;
		  border-left-width: 6rpx;
		}
		
		.bottom-right {
		  bottom: -2rpx;
		  right: -2rpx;
		  border-bottom-width: 6rpx;
		  border-right-width: 6rpx;
		}
		.scan-line {
		  position: absolute;
		  top: 0;
		  left: 20rpx;
		  right: 20rpx;
		  height: 3rpx;
		  background: linear-gradient(90deg, transparent, #0183FA, transparent);
		  animation: scan-move 2s linear infinite;
		}
		
		@keyframes scan-move {
		  0% {
		    top: 0;
		    opacity: 0;
		  }
		  10% {
		    opacity: 1;
		  }
		  90% {
		    opacity: 1;
		  }
		  100% {
		    top: 100%;
		    opacity: 0;
		  }
		}
		.scan-tip {
		  position: absolute;
		  bottom: calc(50% - 300rpx);
		  color: #fff;
		  font-size: 28rpx;
		  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
		}
	}
</style>