uni-App 扫描二维码

蔚落 2022-11-17 11:29 363阅读 0赞

<template>
    
    	<view>
    		
    		
    		<view class="wrap">
    			<view class="u-tips-color">
    				请在app中打开
    			</view>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				barcode: null,
    				flash: false,
    				tip: '将二维码放入框中，即可自动扫描',
    			}
    		},
    		onShow() { 
    			// 页面展示时，重新启动扫描检测
    			if (this.barcode) { 
    				this.barcode.start()
    			}
    		},
    		onLoad(params) { 
    			const { 
    				tip
    			} = params
    			if (tip) { 
    				this.tip = tip
    			}
    			// #ifdef APP-PLUS
    			plus.navigator.setFullscreen(true); //全屏
    			let currentWebview = this.$scope.$getAppWebview();
    			this.createBarcode(currentWebview)
    			this.createTipInfoView(currentWebview)
    			this.createFlashBarView(currentWebview)
    			// #endif
    		},
    		mounted() { 
    
    		},
    		methods: { 
    			/**
    			 * 创建二维码
    			 * @param { Object} currentWebview
    			 */
    			createBarcode(currentWebview) { 
    				if (!this.barcode) { 
    					this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], { 
    						top: `0px`,
    						left: '0px',
    						height: `100%`,
    						width: '100%',
    						position: 'absolute',
    						background: '#FFCC00',
    						frameColor: '#FFCC33',
    						scanbarColor: '#FFCC33',
    					});
    					this.barcode.onmarked = this.onmarked;
    					this.barcode.setFlash(this.flash);
    					//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理  
    					//注意扫码区域需为正方形，否则影响扫码识别率  
    					currentWebview.append(this.barcode);
    				}
    				this.barcode.start()
    			},
    
    			/**
    			 * 创建提示信息
    			 * @param { Object} currentWebview
    			 */
    			createTipInfoView(currentWebview) { 
    				const content = new plus.nativeObj.View('content', { 
    						top: '0px',
    						left: '0px',
    						height: '100%',
    						width: '100%'
    					},
    					[{ 
    						tag: 'font',
    						id: 'scanTips',
    						text: this.tip,
    						textStyles: { 
    							size: '14px',
    							color: '#ffffff',
    							whiteSpace: 'normal'
    						},
    						position: { 
    							top: '90px',
    							left: '10%',
    							width: '80%',
    							height: 'wrap_content'
    						}
    					}]);
    				currentWebview.append(content);
    
    			},
    			// 创建 开关灯按钮
    			createFlashBarView(currentWebview) { 
    
    				const openImg = this.crtFlashImg('static/yellow-scanBar.png')
    				const closeImg = this.crtFlashImg('static/scanBar.png')
    				const scanBarVew = new plus.nativeObj.View('scanBarVew', { 
    						top: '65%',
    						left: '40%',
    						height: '10%',
    						width: '20%',
    					},
    					closeImg);
    				scanBarVew.interceptTouchEvent(true);
    
    				currentWebview.append(scanBarVew);
    
    				scanBarVew.addEventListener("click", (e) => {  //点亮手电筒
    					this.flash = !this.flash;
    					if (this.flash) { 
    						scanBarVew.draw(openImg);
    					} else { 
    						scanBarVew.draw(closeImg)
    					}
    					if (this.barcode) { 
    						this.barcode.setFlash(this.flash);
    					}
    				}, false)
    			},
    			crtFlashImg(imgsrc) { 
    				return [{ 
    					tag: 'img',
    					id: 'scanBar',
    					src: imgsrc,
    					position: { 
    						width: '28%',
    						left: '36%',
    						height: '30%'
    					}
    				}, { 
    					tag: 'font',
    					id: 'font',
    					text: '轻触照亮',
    					textStyles: { 
    						size: '10px',
    						color: '#ffffff'
    					},
    					position: { 
    						width: '80%',
    						left: '10%'
    					}
    				}]
    			},
    			// 扫码成功回调
    			onmarked(type, result) { 
    				console.log('条码类型：' + type);
    				console.log('条码内容：' + result);
    				// 业务代码
    				// 核对扫描结果
    				// 判断是否是正确的格式
    				// 不正确则跳转到 错误页面
    					
    			}
    
    		}
    	}
    </script>
    
    <style scoped>
    	.wrap { 
    		height: calc(100vh);
    		/* #ifdef H5 */
    		height: calc(100vh - var(--window-top));
    		/* #endif */
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    	}
    </style>