scanCode/pages/scan/Scan.nvue

<template>
	<view class="content">
		 <view style="width: 750rpx;flex: 1;position: relative;">
		 	<ly-hwscan ref="scanComponent" style="width: 750rpx;position: absolute;left: 0;top: 0;bottom: 0;" :scanSize="scanSize" :scanResultImage="scanResultImage" :showScanFrame="showScanFrame" :scanType="scanType" :showScanLine="showScanLine" :scanLineColor="scanLineColor" :lineAnimationDuration="lineAnimationDuration"
		 		:continue="scanContinue" @scanResult="scanResult" :sleepTime="sleep">
		 	</ly-hwscan>
		 	<view class="bg">
				<text class="scanTitle">Scan the QR code in the box</text>
		 		<!-- 这个是在识别区域的位置后续自定义扫码框都在这里面 大小需要和scanSize相同单位是px-->
				<!-- <view class="scan_frame"> -->
				<image class="scan_frame" src="../../static/scan.png"></image>
				<!-- </view> -->
		 		<!-- 扫码框下方图片按钮 -->
		 		<view class="scan_frame_bottom_btn">
		 			<image class="btn" src="../../static/flashLightOn.png" @click="lightOff()" v-if="flashLightFlag === true"></image>
					<image class="btn" src="../../static/flashLightOff.png" @click="lightOn()" v-if="flashLightFlag === false"></image>
					<image class="btn" src="../../static/album.png" @click="photoAlbum()"></image>
		 		</view>
		 	</view>
		 </view>
		
		<!-- <button  @click="scanCode()">扫码</button> -->
		
		<tn-button shape="round" backgroundColor="#01BEFF" fontColor="#080808" @click="jumpToPage('/pages/scan/Barcode')">跳转Barcode页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Book','history',{})">跳转Book页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Calendar','history',{})">跳转Calendar页面</tn-button>
				<tn-button shape="round" @clicksss="jumpToPage('/pages/scan/Contacts','history',{})">跳转Contacts页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Email','history',{})">跳转Email页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Location','history',{})">跳转Location页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Paypal','history',{})">跳转Paypal页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Product','history',{})">跳转Product页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Sms','history',{})">跳转Sms页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Tel','history',{})">跳转Tel页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Text','history',{})">跳转Text页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Url','history',{})">跳转Url页面</tn-button>
				<tn-button shape="round" @click="jumpToPage('/pages/scan/Wifi','history',{})">跳转Wifi页面</tn-button>
		
		<!-- <button type="primary" @click="clearData()">清空数据 </button>
		<button type="primary" @click="deleteTable()">删除数据表</button> -->
		
		<!-- <button  @click="writeToDb()">添加数据</button> -->
		<!-- <tn-button type="primary" @click="writeToDb()">添加数据</tn-button> -->
		<!-- <tn-toast ref="toast"></tn-toast> -->
	</view>
</template>

<script>
	import { openSqlite,executeSql,closedb} from "@/utils/database";
	const hwscan = uni.requireNativePlugin('LY-HWScan')
	export default {
		data() {
			return {
				title: 'Scan',
				tableName:"scan_code",
				// 识别区域size
				scanSize:{//单位px
				 width:250,
				 height:250
				},
				showScanLine:true,//显示扫码线
				scanLineColor:"#0186FF",//扫描线背景色
				lineAnimationDuration:"3",//扫描线动画时间
				showScanFrame:false,//显示测试扫描框 用于调试扫描区域
				scanResultImage: true, //是否返回扫描图片--默认不返回（仅Android有效）
				scanType: [],//设置可扫描的码制式
				scanContinue: false,
				sleep: 1,//连续扫描间隔
				code: "",
				path:'',//扫描图片
				flashLightFlag: true
			}
		},
		async onShow(){
			let that = this;
			//打开db
			await that.openSqlite();
			if(this.$refs.scanComponent){
				this.$refs.scanComponent.remoteResume();
			}
		},
		onHide() {
			let that = this;
			that.closedb();
			if(this.$refs.scanComponent){
				this.$refs.scanComponent.remotePause();
			}
		},
		onUnload() {
			// this.$refs.scanComponent.releaseAssets()
		},
		methods: {
			
			// 识别完成回调 ------ res.detail.data是组装好的数据
			scanResult(res) {
				console.log(res.detail.data)
				this.analyserCode(res.detail.data);
				// uni.navigateTo({
				// 	url:'./showSanResult?info='+JSON.stringify(res.detail.data)
				// })
				// hwscan.clearCacheWithFilePath(this.path,res=>{
				// 	uni.showToast({
				// 		title: res.result?"删除成功":"删除失败",
				// 		icon: 'none',
				// 		duration: 1500
				// 	})
				// })
				// uni.$emit("commonScanResult", {
				// 	result: res.detail.result,
				// 	path :this.path
				// });
				// uni.navigateBack()
			},
			
			analyserCode(res){
				let that = this;
				let result = JSON.parse(JSON.stringify(res))
				console.log('result',result)
				let type = result.scanType;
				console.log('type',type)
				if(type === 'contact_detail'){
					that.jumpToPage('/pages/scan/Contacts','scan',JSON.stringify(result))	
				}else if(type === 'email'){
					that.jumpToPage('/pages/scan/Email','scan',JSON.stringify(result))
				}else if(type === 3){
					that.jumpToPage('/pages/scan/Book','scan',JSON.stringify(result))
				}else if(type === 'tel_phone'){
					that.jumpToPage('/pages/scan/Tel','scan',JSON.stringify(result))
				}else if(type === 'article'){
					that.jumpToPage('/pages/scan/Product','scan',JSON.stringify(result))
				}else if(type === 'sms'){
					that.jumpToPage('/pages/scan/Sms','scan',JSON.stringify(result))
				}else if(type === 'text'){
					that.jumpToPage('/pages/scan/Text','scan',JSON.stringify(result))
				}else if(type === 'url'){
					that.jumpToPage('/pages/scan/Url','scan',JSON.stringify(result))	
				}else if(type === 'wifi'){
					that.jumpToPage('/pages/scan/Wifi','scan',JSON.stringify(result))
				}else if(type === 'location'){
					that.jumpToPage('/pages/scan/Location','scan',JSON.stringify(result))
				}else if(type === 'event_info'){
					that.jumpToPage('/pages/scan/Calendar','scan',JSON.stringify(result))
				}else if(type === 'isbn'){
					that.jumpToPage('/pages/scan/Barcode','scan',JSON.stringify(result))
				}
			},
			
			//暂停扫描
			pauseScan() { 
				this.$refs.scanComponent.pauseScan();
			},
			//恢复扫描
			resumeScan() { 
				this.$refs.scanComponent.resumeScan();
			},
			//跳相册
			photoAlbum() { 
				this.$refs.scanComponent.pictureScan();
			},
			//开启闪光灯
			lightOn() { 
				this.flashLightFlag = true
				this.$refs.scanComponent.switchLight();
			},
			//关闭闪光灯
			lightOff() { 
				this.flashLightFlag = false
				this.$refs.scanComponent.switchLight();
			},
			releaseAssets() {
				this.$refs.scanComponent.releaseAssets();
			},
			
			// 打开数据库
			async openSqlite(){
			    try{
			        let b = await openSqlite()
			        // uni.showToast({
			        //     title:"open db success",
			        //     icon:"none"
			        // })
					console.log('db打开了');
			    }catch(e){
			        console.error("open db error",e)
			    }
			},
			
			// 关闭数据库
			closedb(){
			    try{
			        closedb()
					console.log('db关闭了');
			    }catch(e){
			        console.error("close db error",e)
			    }
			
			},
			
			async clearData(){
			    try{
			        await executeSql("DELETE FROM scan_code")
			        uni.showToast({
			            title:"清除数据成功",
			            icon:"none"
			        });
			    }catch(e){
			        uni.showToast({
			            title:"清除数据报错，请查看控制台",
			            icon:"none"
			        });
			        console.error("清除数据报错",e)
			    }
			},
			
			async deleteTable(){
			    try{
			        await executeSql("drop table scan_code")
			        uni.showToast({
			            title:"删除数据表成功",
			            icon:"none"
			        })
			    }catch(e){
			        uni.showToast({
			            title:"删除数据表失败",
			            icon:"none"
			        })
			        console.error("删除数据表失败scan_code",e)
			    }
			
			},
			
			//根据扫码返回结果判断跳转到哪个指定页面
			jumpToPage(url,category,data){
				uni.navigateTo({
					url: url + '?data='+ data + '&category=' + category
				});
			},
			
			//mlkit扫码
			// scanCode(){
			// 	let that = this;
			// 	var mlscan = uni.requireNativePlugin("JY-MLScanSDK");
			// 	//console.log(mlscan) 
			// 	        mlscan.startScan(res=> {
			// 				that.analyserCode(res);
			// 	            // uni.showToast({
			// 	            //     icon:'none',
			// 	            //     title:JSON.stringify(res)
			// 	            // })
							
							
			// 	        })
			// },
			
		}
	}
</script>

<style lang="scss">

	// .content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// }
	
	.content {
		width: 750rpx;
		flex: 1;
		background-color: #ffffff;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.bg{
		width: 750rpx;
		flex: 1;
		background-color: #00ffffff;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn_view {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}
	// .scan_frame{
	// 	width: 300px;
	// 	height: 300px;
	// 	background-color: #00FFFFFF;
	// }
	.scanTitle {
		font-size: 36rpx;
		//margin-top: 50rpx;
		color: #ffffff;
	}
	
	.scan_frame {
		width: 450px; 
		height: 450px; 
	}
	.scan_frame_bottom_btn{
		position: absolute;
		display: flex;
		flex-direction: row;
		width: 750rpx;
		left: 0;
		margin-top: 300px;
		padding-left: 30px;
		padding-right: 30px;
		justify-content: space-between;
	}
	.btn{
		width: 100rpx;
		height: 100rpx;
		margin-top: 200rpx;
		background-color: #707070;
		border-radius: 100%;
	}
	
	

</style>