dnyAppTruck/components/app-continue-scancode/app-continue-scancode.vue

<template>
	<view class="app-scan-container">

	</view>
</template>

<script>
	export default {
		name: "app-continue-scancode",
		data() {
			return {
				value: '',
				timer: null,
				barcode: null,
				scanCodes: [],
				viewContent: null,
				codeType: [
					plus.barcode.CODE128,
					plus.barcode.QR,
					plus.barcode.EAN13,
					plus.barcode.EAN8,
					plus.barcode.UPCA,
					plus.barcode.UPCE,
					plus.barcode.CODABAR,
					plus.barcode.CODE39,
					plus.barcode.CODE93,
					plus.barcode.ITF,
				]
			};
		},
		mounted() {
			//使用H5+原生界面控件，参考https://ask.dcloud.net.cn/article/35036
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			// plus.navigator.setFullscreen(true); //全屏
			const currentWebview = page.$getAppWebview();
			this.initBarcode(currentWebview)
			this.createView(currentWebview)
		},
		destroyed() {
			this.closeBarcode()
		},
		methods: {
			initBarcode(currentWebview) {
				this.barcode = plus.barcode.create('barcode', this.codeType, {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '300', //设置扫码框的高度
					position: 'static',
					scanbarColor: '#28E153',
					frameColor: '#28E153'
				});
				this.barcode.onmarked = this.onmarked;
				currentWebview.append(this.barcode);
				const res = uni.getSystemInfoSync();
				if (res.platform == 'android') {
					//安卓机
					this.barcode.start();
				}
			},
			placeBeep() {
				var innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = 'http://61.163.210.202:10992/erp_updates/beep.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res);
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				// innerAudioContext.onEnded(() => {
				//  innerAudioContext.destroy();
				// });
			},
			async onmarked(type, result) {
				//todo 播放音频
				//this.placeBeep();
				console.log('Success: type=' + type + ', result=' + result);
				if (!result) return this.barcode && this.barcode.start();
				this.timer = setTimeout(() => {
					this.barcode && this.barcode.start();
				}, 1000)
				this.$emit('scanHitERPCode', {
					code: result
				})
			},
			closeBarcode() {
				this.barcode && this.barcode.close();
				this.viewContent && this.viewContent.close()
				this.barcode = null
				this.viewContent = null
			},
			// 创建展示类内容组件
			createView(currentWebview) {
				this.viewContent = new plus.nativeObj.View(
					'content', {
						top: '230px',
						left: '0px',
						height: '130px',
						width: '100%'
					},
					[{
						tag: 'font',
						id: 'scanTips',
						text: '将订单二维码放入框中进行扫描',
						textStyles: {
							size: '16px',
							color: '#ffffff',
							whiteSpace: 'normal'
						},
						position: {
							top: '80px',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					}]
				);
				currentWebview.append(this.viewContent);
			}
		}
	}
</script>

<style scoped>
	.app-scan-container {
		height: 100%;
		overflow: hidden;
	}
</style>