hbj_app/pages/richScan/indexScan/indexScan.vue

<template>
	<view></view>
</template>
<script>
var barcode = null;

// import { supplierEncasement } from '@/apis/encasement';
export default {
	data() {
		return {
			name: '将二维码放入框内，即可自动扫描', //要在扫码界面自定义的内容
			tip: '',
			flash: false, //是否打开摄像头
			bottomVisible: 1, // 1展示底部临时箱装箱，0不展示
			boxTypeShow: '临时箱',
			currentWebview: '',
			code: '', // 扫码参数
			type: '' // 箱子类型
		};
	},
	onLoad(d) {
		// this.bottomVisible = d.bottomVisible;
		this.code = d.code;
		this.type = d.type;
		this.initView();
	},
	onBackPress() {
		// #ifdef APP-PLUS
		// 返回时退出全屏
		barcode.close();
		plus.navigator.setFullscreen(false);

		//跳转到首页
		// #endif
	},
	onUnload() {
		plus.navigator.setFullscreen(false);
	},
	methods: {
		initView() {
			// #ifdef APP-PLUS
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			// plus.navigator.setFullscreen(true); //全屏
			let currentWebview = page.$getAppWebview();
			this.currentWebview = currentWebview;
			this.createBarcode(currentWebview); //创建二维码窗口
			this.createView(currentWebview); //创建操作按钮及tips界面
			// #endif
		},
		//  uni.navigateBack返回上一个页面传参 返回A页
		goPageA(idx) {
			// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
			let pages = getCurrentPages();

			// 2. 上一页面实例
			// 注意是length长度，所以要想得到上一页面的实例需要 -2
			// 若要返回上上页面的实例就 -3，以此类推
			let prevPage = pages[pages.length - 2];

			// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
			prevPage.$vm.getValue(idx);

			// 4. 返回上一页面
			uni.navigateBack({
				delta: 1 // 返回的页面数
			});
		},

		// 扫码成功回调
		onmarked(type, result) {
			var text = '未知: ';
			switch (type) {
				case plus.barcode.QR:
					text = 'QR: ';
					break;
				case plus.barcode.EAN13:
					text = 'EAN13: ';
					break;
				case plus.barcode.EAN8:
					text = 'EAN8: ';
					break;
			}

			console.log('result', text, result);

			try {
				this.goPageA(result);
				// await supplierEncasement({ purchaseSubCode: result, code, type });
				// uni.navigateBack({
				// 	delta: 1
				// });
				// uni.navigateTo({
				// 	url: `/pages/richScan/richScan/richScan?code=${result}`
				// });
			} catch (error) {
				console.log(error, 'errorerror');
				// 如果调接口，有报错，关闭后重新创建二维码
				barcode.close();
				this.createBarcode(this.currentWebview); //创建二维码窗口
				return;
			}
			// }
			plus.navigator.setFullscreen(false);
			barcode.close();
		},
		// 创建二维码窗口
		createBarcode(currentWebview) {
			barcode = plus.barcode.create('barcode', [plus.barcode.QR, plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.CODE128], {
				top: '0',
				left: '0',
				width: '100%',
				height: '100%',
				scanbarColor: '#46B81E',
				position: 'static',
				frameColor: '#46B81E',
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center'
			});
			barcode.onmarked = this.onmarked;
			barcode.setFlash(this.flash);
			currentWebview.append(barcode);
			barcode.start();
		},
		// 创建操作按钮及tips
		createView(currentWebview) {
			// 创建返回原生按钮
			var backVew = new plus.nativeObj.View(
				'backVew',
				{
					top: '0px',
					left: '0px',
					height: '40px',
					width: '100%'
				},
				[
					{
						tag: 'img',
						id: 'backBar',
						src: 'static/left.png', // 根据自己的图标修改下面的样式
						position: {
							top: '2px',
							left: '3px',
							width: '35px',
							height: '35px'
						}
					}
				]
			);
			// 创建打开手电筒的按钮
			var scanBarVew = new plus.nativeObj.View(
				'scanBarVew',
				{
					top: '55%',
					left: '40%',
					height: '10%',
					width: '20%'
				},
				[
					{
						tag: 'img',
						id: 'scanBar',
						src: 'static/flashlightClose.png',
						position: {
							width: '28%',
							left: '36%',
							height: '30%'
						}
					},
					{
						tag: 'font',
						id: 'font',
						text: '轻触照亮',
						textStyles: {
							size: '10px',
							color: '#ffffff'
						},
						position: {
							width: '80%',
							left: '10%'
						}
					}
				]
			);
			// 创建展示类内容组件
			var content = new plus.nativeObj.View(
				'content',
				{
					bottom: '20%',
					left: '0px',
					height: '80%',
					width: '100%'
				},
				[
					// {
					// 	tag: 'font',
					// 	id: 'scanTitle',
					// 	text: '二维码',
					// 	textStyles: {
					// 		size: '18px',
					// 		color: '#ffffff'
					// 	},
					// 	position: {
					// 		top: '0px',
					// 		left: '0px',
					// 		width: '100%',
					// 		height: '40px'
					// 	}
					// },
					{
						tag: 'font',
						id: 'scanTips',
						text: this.name,
						textStyles: {
							size: '14px',
							color: '#ffffff',
							whiteSpace: 'normal'
						},
						position: {
							bottom: '10%',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					},
					{
						tag: 'font',
						id: 'scanTips2',
						text: this.tip,
						textStyles: {
							size: '14px',
							color: '#46B81E',
							whiteSpace: 'normal'
						},
						position: {
							bottom: '0%',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					}
				]
			);
			// var content2 = new plus.nativeObj.View('content2', {
			// 	bottom: '0px',
			// 	left: '0px',
			// 	height: '10%',
			// 	width: '100%'
			// });
			// content2.drawRect({ color: '#ffffff' }, { top: '0', left: '0px', width: '100%', height: '1px' });
			// content2.drawText(this.boxTypeShow + '装箱', { top: '40%', left: '0px', width: '100%', height: 'wrap_content' }, { size: '18px', color: '#ffffff' }, 'btn');
			// content2.addEventListener('click', e => {
			// 	// 点击底部按钮，切换文案
			// 	this.boxTypeShow = this.boxTypeShow === '标准箱' ? '临时箱' : '标准箱';
			// 	// 重绘文案
			// 	content2.drawText(this.boxTypeShow + '装箱', { top: '40%', left: '0px', width: '100%', height: 'wrap_content' }, { size: '18px', color: '#ffffff' }, 'btn');
			// });
			backVew.interceptTouchEvent(true);
			scanBarVew.interceptTouchEvent(true);
			currentWebview.append(content);
			// currentWebview.append(content2);
			// if (this.bottomVisible == 0) {
			// 	content2.hide();
			// }
			currentWebview.append(scanBarVew); //创建手电筒
			currentWebview.append(backVew);
			backVew.addEventListener(
				'click',
				function(e) {
					//返回按钮====跳转到首页
					uni.switchTab({
						url: '/pages/index'
					});
					// uni.navigateBack({
					// 	delta: 1
					// });
					barcode.close();
					plus.navigator.setFullscreen(false);
				},
				false
			);
			var temp = this;
			scanBarVew.addEventListener(
				'click',
				function(e) {
					//点亮手电筒
					temp.flash = !temp.flash;
					if (temp.flash) {
						scanBarVew.draw([
							{
								tag: 'img',
								id: 'scanBar',
								src: 'static/flashlightOpen.png',
								position: {
									width: '28%',
									left: '36%',
									height: '30%'
								}
							},
							{
								tag: 'font',
								id: 'font',
								text: '轻触关闭',
								textStyles: {
									size: '10px',
									color: '#ffffff'
								},
								position: {
									width: '80%',
									left: '10%'
								}
							}
						]);
					} else {
						scanBarVew.draw([
							{
								tag: 'img',
								id: 'scanBar',
								src: 'static/flashlightClose.png',
								position: {
									width: '28%',
									left: '36%',
									height: '30%'
								}
							},
							{
								tag: 'font',
								id: 'font',
								text: '轻触照亮',
								textStyles: {
									size: '10px',
									color: '#ffffff'
								},
								position: {
									width: '80%',
									left: '10%'
								}
							}
						]);
					}
					if (barcode) {
						barcode.setFlash(temp.flash);
					}
				},
				false
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.navigation-box {
	position: fixed;
	top: 0;
	height: 88rpx;
	background-color: #ffffff;
	width: 100%;
	z-index: 100;
	border-bottom: 1rpx solid #eeeeee;
	display: flex;
	justify-content: space-between;
	padding: 32rpx;
	align-items: center;
	box-sizing: border-box;

	.back_but {
		width: 40rpx;
		height: 40rpx;
	}

	//标题
	.title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
	}

	.right-biao {
		width: 56rpx;
		height: 18rpx;
	}
}
</style>