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">
					<view class="imgBack">
						<image class="btnLight" src="../../static/flashLightOn.png" @click="lightOff()" v-if="flashLightFlag === true"></image>
						<image class="btnLight" src="../../static/flashLightOff.png" @click="lightOn()" v-if="flashLightFlag === false"></image>
					</view>
					<view class="imgBack">
						<image class="btnAlbum" src="../../static/album.png" @click="photoAlbum()"></image>
					</view>
		 		</view>
		 	</view>
		 </view>
		
		<!-- <button  @click="scanCode()">扫码</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 { isTable,executeSql,openSqlite,closedb } from "@/utils/database";
	import permision from "@/js_sdk/wa-permission/permission.js"
	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,
				hasPermission: false
			}
		},
		 async onShow(){
			let that = this;
			if(that.$refs.scanComponent){
				setTimeout(function(){
					that.$refs.scanComponent.remoteResume();
				},300);
			}
			if (!that.hasPermission) {
				console.log('进入了判断scan权限',that.hasPermission)  
				//判断是否有权限
				await that.requestAndroidPermission('android.permission.CAMERA')
			}
			//TODO 有权限就是扫码页面，没权限跳转到权限提示
			// else{
			// 	console.log('scan权限状态已变更为true，进入扫码页',that.hasPermission)  
			// 	//that.jumpToRights('/pages/scan/Scan');
			// }
			
		},
		onLoad(){
			let that = this;
			//打开db
			that.openSqlite();
			//初始化，创建表
			that.createTable();
		},
		onHide() {
			let that = this;
			if(that.$refs.scanComponent){
				that.$refs.scanComponent.remotePause();
			}
			
			//that.hasPermission = false;
		},
		onUnload() {
			let that = this;
			// this.$refs.scanComponent.releaseAssets()
			that.closedb();
		},
		methods: {
			
			//判断是否有相机权限
			async requestAndroidPermission(permisionID) {
				let that = this;
			    var result = await permision.requestAndroidPermission(permisionID)
			    	console.log('scan判断权限结果',result) 
				that.hasPermission = true;
				if (result == 0) {
					//无权限，跳转到引导打开权限
					that.jumpToRights('/pages/rights/RightsOpen');
			    }else if(result == -1) {
					//禁止权限，跳转到权限设置页面
					 that.jumpToRights('/pages/rights/RightsSetting');
			    }else{
					//有权限,跳转到扫码界面
					that.jumpToRights('/pages/scan/Scan');
				}
			},
			
			// 识别完成回调 ------ 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 createTable(){
			    let sql = this.createTableSql_outbound()
			    try{
			        let exist = await isTable(this.tableName)
			        console.log("表是否存在",exist)
			        if(!exist){
			            let res = await executeSql(sql)
			            console.log("新增表scancode",res)
			        }else{
						console.log("表scancode已存在")
			        }
			    }catch(e){
			        uni.showToast({
			            title:"create table error",
			            icon:"none"
			        })
			        console.error("新增表报错scancode",e)
			    }
			},
			
			//创建表语句
			createTableSql_outbound(){
			    return "CREATE TABLE IF NOT EXISTS `scan_code` (" +
			        "  `id` INTEGER PRIMARY KEY AUTOINCREMENT," +
			        "  `category` varchar(50) DEFAULT NULL ," +
			        "  `content` text DEFAULT NULL ," +
			        "  `createTime` datetime DEFAULT CURRENT_TIMESTAMP ," +
			        "  `updateTime` datetime DEFAULT NULL default(datetime('now','localtime'))" +
			        "); "
			},
			
			// 打开数据库
			async openSqlite(){
			    try{
			        let b = await openSqlite()
					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
				});
			},
			
			//跳转到授权设置页面(type: 0->非tabbar页面；1->tabbar页面)
			jumpToRights(url,type){
				uni.switchTab({
					url: url
				})
			},
			
			//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;
		/* #ifndef APP-PLUS-NVUE */
		background-color: #00ffffff;
		/* #endif */
		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: 500vh; 
		height: 500vh; 
		margin-right: 10vh;
	}
	.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;
		
	}
	.btnLight{
		width: 40vh;
		height: 40vh;
		margin-left: 6vh;
		margin-top: 6vh;
	}
	
	.btnAlbum{
		width: 30vh;
		height: 30vh;
		margin-left: 10vh;
		margin-top: 10vh;
	}
	
	.imgBack{
		width: 50vh;
		height: 50vh;
		background-color: #000000;
		border-radius: 100%;
		margin-top: 100vh;
	}
	
	

</style>