heshanApp/pages_watch/healthMonitoring/scanCode.vue

<template>
	<view></view>
</template>
<script>
	var barcode = null;
	import { premissionCheck } from "@/js_sdk/wa-permission/permission.js"
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				height: 0,
				albumVewWidth: 0,
				flash: false, //是否打开摄像头
				currentWebview: '',
				typeFun: '',
				isShowCamera:false
			};
		},
		onLoad(option) {
			  this.typeFun = option.typeFun || ''
			  this.height = this.statusBarHeight + 44
			  this.albumVewWidth = uni.getSystemInfoSync().windowWidth - 70;
			
			// #ifdef APP-PLUS
			
			   if(!this.$isAgreePrivacy()) {
			   	   uni.showToast({title: "请同意隐私政策",icon: "none"});
			   	   return;
			   }	
			   
			   this.requestPressmition();
			
			// #endif
			
			
		},
		onBackPress() {
			// #ifdef APP-PLUS
			// 返回时退出全屏
			if(barcode){
				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) {
					uni.compressImage({
					  src: path,
					  quality: 100,
					  width:'100px',
					  height:'auto',
					  success: res => {
					    console.log(res)
						_this.scanImg(res.tempFilePath)
					  },
					  fail: err =>{
					  	uni.showToast({
					  		title: "识别失败",
					  		icon: "none",
					  		position: 'top',
					  		duration: 2000
					  	})
					  	barcode.start(); //识别失败后ios会卡住，重启扫码
					  }
					})
				}, function(e) {
					//用户取消选择
					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会卡住，重启扫码
				});
			},
			isDevInfo(qr) {
			  let o;
			  try { o = typeof qr === 'string' ? JSON.parse(qr) : qr; } catch { return false; }
			
			  return (
			    o &&                                      // 是对象
			    Object.keys(o).length === 1 &&           // 只有1个顶层key
			    o.dev_info &&                             // 存在dev_info
			    typeof o.dev_info.model  === 'string' &&
			    typeof o.dev_info.ble    === 'string' &&
			    typeof o.dev_info.version=== 'string' &&
			    typeof o.dev_info.imei   === 'string'
			  );
			},
			// 扫码成功回调
			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,encodeURIComponent(result));
					const trimmed = decodeURIComponent(encodeURIComponent(result)).trim().replace(/\0+$/,'');
					const scanInfo = this.typeFun == 'getIndexScanCode' ? result : JSON.parse(trimmed)
					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: "请扫描正确的二维码"+ typeof result,
						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) {
				if(!this.isShowCamera){
					return;
				}
				// , 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);
				if(this.isShowCamera){
					currentWebview.append(content);
					currentWebview.append(scanBarVew);
				}

				currentWebview.append(backVew);
				backVew.addEventListener("click", function(e) { //返回按钮
					uni.navigateBack({
						delta: 1
					});
					barcode.close();
					plus.navigator.setFullscreen(false);
				}, false);
				
				
				if(this.isShowCamera){
					currentWebview.append(albumVew);
					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)
								
				}
			},
			async requestPressmition(){
				let result = await premissionCheck("CAMERA_EXTERNAL_STORAGE");
				console.log("premission result:"+result);
				if(result == 1) {
					this.isShowCamera=true;
				}
					
				this.initView();
				
			},
		
		},
	};
</script>

<style lang="scss" scoped>
	
</style>