扫码盒检票业务

扫码盒检票业务

要实现的功能是-----扫码检票入园

需要的硬件是扫码盒或扫码枪，把二维码放在扫码盒上扫描，只要你的页面有个input并且有焦点，它就会自动输入扫码扫到的值，等于说是个键盘的道理

那么问题来了==》
页面上要有input，那么就要把它隐藏，怎么隐藏?
input只要有焦点，在移动端就会唤起软键盘，怎么阻止？

我先考虑的是解决键盘的问题 因为我觉得css样式对我来说可能更难

整了接近一天时间吧 办法用了几个 先把失败办法整理如下

一、首先当然是启动CSDN搜索

1.设置readonly属性，然后再用定时器移除

这个博主遇到的问题跟我是一样的 我以为用他的没问题 但是不行 一直在报错 无法使用setattribute 原因不明 之前在错误的地方调用了ref

查了才知道$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们

2.同样的思路改用document.activeElement来获取dom元素

没脾气，又改用document.activeElement获取获得焦点的dom元素来设置属性，这次更离谱，不管是设置还是移除，dom元素的属性永远打印的都是readonly为true，意思是移除属性不起效

3.document.activeElement.blur()

直接设置失去焦点，这个就跟禁用是一样的了，完全不符合需求

4.uni.hideKeyboard() 隐藏软键盘

uniapp官方api 确实可以隐藏 但是呢没有焦点了 还是不符合需求

反正uniapp目前来说确实太坑了 真的无语

附上官方的问答

https://ask.dcloud.net.cn/question/99190

评论区出现了两款插件，一个叫longyoung

这个价格 打扰了

最终解决问题的是uniapp官方分享的插件 keyboard-listener

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VC6M1uJ3-1607329463562)(C:\Users\MI\Desktop\12.7blog\1607328870(1)].jpg)

<template>
	<view class="checkin">
		<view class="head">
			<image src="../static/image/left.png" mode="" @tap="back()"></image>
			入园检票
		</view>

		<view class="content">	
            //监听keyup事件 因为扫码盒可以理解成键盘,每次输入都会触发此事件,enter则是最后输完的事件
			<keyboard-listener @keyup="onKey" @keyup.enter='checkId'></keyboard-listener>
			<text></text>
			<image src="../static/image/景区-入园检票.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import keyboardListener from '../components/keyboard-listener.vue'

	export default {
		data() {
			return {
				idNum: '',
				logs:[]
			}
		},
		components: {
			keyboardListener
		},
		onLoad() {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			onKey(event){
				console.log('event',event)
				if(this.logs.length < 18){//我的二维码一共是十八位，所以用length来判断,最后一次up事件输入的key是enter
					this.logs.push(event.key) //一共要走18次up事件，把每次的key推入数组
				}
				console.log('logs',this.logs)				
			},			
			checkId(){
					console.log("this.logs",this.logs)
					let str = this.logs.join(',')//转成字符串
					this.idNum = str.split(',').map(item => item.trim()).join('');//去掉字符串之间的逗号组成一整个字符串
					console.log('idNum', this.idNum)
					console.log('idNum长度', this.idNum.length)
				
					if (this.idNum.length == 18) {
						this.checkin()
					}
			},
			//核销检票
			checkin() {
				let orderNumbers = []
				orderNumbers.push(this.idNum)
				uni.request({
					url: this.$URL + '/merchant/goods_order/destroy',
					method: 'POST',
					data: {
						orderNumbers,
						destroy: 1,
						industryCategory: 4
					},
					header: {
						authorized: '',
						'Content-Type': 'application/json;charset=utf-8'
					},
					success: (res) => {
						console.log("核销订单res", res)
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "检票成功",
								duration: 5000,
								success() {
									setTimeout(() => {
										uni.reLaunch({
											url: './index'
										})
									}, 2000)
								}
							})

						} else {
							uni.showToast({
								icon: 'none',
								title: "检票失败,订单已失效",
								//失败后刷新本页面 清空输入值
								success() {
									console.log('检票失败,订单已失效')
									this.idNum = ''
								}
							})
						}
					}
				})
			}
		}
	}
</script>