siyu_app/pages_watch/healthMonitoring/scanCode.vue

<template>
	<view></view>
</template>
<script>
	var barcode = null;
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				height: 0,
				albumVewWidth: 0,
				flash: false, //是否打开摄像头
				currentWebview: '',
				typeFun: ''
			};
		},
		onLoad(option) {
			this.typeFun = option.typeFun || ''
			this.height = this.statusBarHeight + 44
			this.albumVewWidth = uni.getSystemInfoSync().windowWidth - 70
			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
			},
			// 从相册中选择图片
			galleryImg() {
				let _this=this
				plus.gallery.pick(function(path) {
					_this.scanImg(path) //成功选择
				}, function(e) {
					//用户取消选择
					console.log("用户取消选择")
					barcode.start(); //开始扫码识别
				}, {
					filter: "image"
				});
			},
			// 从图片中扫码识别 
			scanImg(path) {
				let _this=this
				plus.barcode.scan(path, function(type, result) {
					_this.onmarked(type, result)
				}, function(e) {
					uni.showToast({
						title: "识别失败",
						icon: "none",
						position: 'top',
						duration: 2000
					})
					barcode.start(); //识别失败后ios会卡住，重启扫码
				});
			},
			// 扫码成功回调
			async 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;
					case plus.barcode.UPCA:
						text = 'UPCA: ';
						break;
					case plus.barcode.UPCE:
						text = 'UPCE: ';
						break;
				}
				try {
					console.log('扫描结果：', type,result);
					const scanInfo = this.typeFun == 'getIndexScanCode' ? result : JSON.parse(result)
					if(typeof scanInfo === 'object' && scanInfo !== null && Object.prototype.toString.call(scanInfo) === '[object Object]'&&scanInfo.hasOwnProperty('dev_info')) {
						uni.$emit(this.typeFun, scanInfo.dev_info || "")
						uni.navigateBack()
					} else if(scanInfo&&scanInfo.indexOf("https://userapp.his.cdwjyyh.com/bindcompanyuser")>-1){
						const companyUserId = this.getUrlParam(scanInfo).companyUserId
						uni.$emit(this.typeFun, companyUserId || "")
						uni.navigateBack()
					} else{
						console.log('请扫描正确的二维码')
					}
				} catch (error) {
					console.log('errorerror',error)
					uni.showToast({
						title: "请扫描正确的二维码",
						icon: "none",
						position: 'top',
						duration: 2000
					})
					// 如果调接口，有报错，关闭后重新创建二维码
					barcode.close();
					this.createBarcode(this.currentWebview); //创建二维码窗口
					return
				}
				plus.navigator.setFullscreen(false);
				barcode.close();
			},
			getUrlParam(url) {
				const queryStr = url.split('?')[1];
				if (!queryStr) {
				  return {};
				}
				const params = queryStr.split('&');
				const queryParams = {};
				params.forEach(param => {
				  const [key, value] = param.split('=');
				  queryParams[key] = value;
				});
				return queryParams;
			},
			// 创建二维码窗口
			createBarcode(currentWebview) {
				// , plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.UPCA,plus.barcode.UPCE, plus.barcode.CODE128
				barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
					top: '0',
					left: '0',
					width: '100%',
					height: '100%',
					scanbarColor: '#FF7700',
					position: 'static',
					frameColor: '#FF7700',
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center'
				});
				barcode.onmarked = this.onmarked;
				barcode.setFlash(this.flash);
				currentWebview.append(barcode);
				barcode.start();
			},
			// 创建操作按钮及tips
			createView(currentWebview) {
				let _this = this;
				// 创建导航栏
				var navBarbg = new plus.nativeObj.View('navBarbg', {
						top: '0',
						left: '0',
						height: this.height + 'px',
						width: '100%',
						backgroundColor: "#fff",
						display: 'flex',
						justifyContent: 'center',
						alignItems: 'center'
					},
					[{
						tag: 'font',
						id: 'scanTitle',
						text: _this.typeFun == 'getIndexScanCode' ?'扫描二维码':'扫描手表二维码',
						textStyles: {
							size: '18px',
							color: '#222222'
						},
						position: {
							top: uni.getSystemInfoSync().statusBarHeight + 'px',
							left: '0px',
							width: '100%',
							height: '44px'
						}
					}]
				);
				// 创建返回原生按钮
				var backVew = new plus.nativeObj.View('backVew', {
						top: this.statusBarHeight + 'px',
						left: '3px',
						width: '32px',
						height: '44px',
					},
					[{
						tag: 'img',
						id: 'backBar',
						src: 'static/images/pages_watch/icons/back_black_icon.png', // 根据自己的图标修改下面的样式
						position: {
							bottom: '6px',
							left: '0',
							width: '32px',
							height: '32px',
						}
					}]
				);
				// 创建相册按钮
				var albumVew = new plus.nativeObj.View('albumVew', {
						top: this.statusBarHeight + 'px',
						left: this.albumVewWidth + 'px',
						width: '70px',
						height: '44px',
					},
					[{
						tag: 'font',
						id: 'album',
						text: "相册",
						textStyles: {
							size: '16px',
							color: '#222222',
							whiteSpace: 'normal'
						},
					}]
				);
				// 创建打开手电筒的按钮
				var scanBarVew = new plus.nativeObj.View('scanBarVew', {
						top: '55%',
						left: '40%',
						height: '10%',
						width: '20%'
					},
					[{
							tag: 'img',
							id: 'scanBar',
							src: 'static/images/pages_watch/icons/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', {
						top: '0%',
						left: '0px',
						height: '78%',
						width: '100%'
					},
					[{
						tag: 'font',
						id: 'scanTips',
						text: _this.typeFun == 'getIndexScanCode'?"扫描二维码":"请扫描手表-设置-绑定二维码进行绑定",
						textStyles: {
							size: '14px',
							color: '#ffffff',
							whiteSpace: 'normal'
						},
						position: {
							bottom: '10%',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					}]);
				backVew.interceptTouchEvent(true);
				albumVew.interceptTouchEvent(true);
				scanBarVew.interceptTouchEvent(true);
				currentWebview.append(navBarbg);
				currentWebview.append(content);
				currentWebview.append(scanBarVew);
				currentWebview.append(backVew);
				currentWebview.append(albumVew);
				backVew.addEventListener("click", function(e) { //返回按钮
					uni.navigateBack({
						delta: 1
					});
					barcode.close();
					plus.navigator.setFullscreen(false);
				}, false);
				albumVew.addEventListener("click", function(e) { //相册按钮
					_this.galleryImg()
				}, false);
				var temp = this;
				scanBarVew.addEventListener("click", function(e) { //点亮手电筒
					temp.flash = !temp.flash;
					if (temp.flash) {
						scanBarVew.draw([{
								tag: 'img',
								id: 'scanBar',
								src: 'static/images/pages_watch/icons/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/images/pages_watch/icons/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>
	
</style>