uniapp- PDA扫码

uniapp- PDA扫码

最近在开发中遇到需要接收PDA扫描的内容，使用input输入框进行接收值(扫描的结果进行后端请求)，发生错误以及从其他页面跳转回来后可以直接扫码接收。

1. html结构

uview的search组件
<u-search height="64rpx" 
	:inputStyle="{'paddingRight': '120rpx'}" placeholder="请输入订单号搜索或点击下方扫码" 
	:showAction="false" :animation="false" 
	:focus="isFocus" :clearabled="false" v-model="searchOrder"@search="handleSearch">
</u-search>

2. 因为需求需要返回当前页面后重新focus以及提供键盘可以输入，这里可以根据需要自行添加隐藏键盘等功能

export default {
		components: {
			ScanCode
		},
		data() {
			return {
				isFocus: true,
				searchOrder: '', //订单搜索记录
			}
		},
		onShow() {
			//每次调转focus input 清除内容
			this.restFocusData()
		},
		methods: {
			//用于聚焦input
			restFocusData() {
				this.isFocus = false
				this.$nextTick(() => {
					this.searchOrder = ''
					this.isFocus = true
				})
			},
			//扫描到的内容会在input中出现触发search事件这里直接调用后端接口即可
			handleSearch() {
				const searchInput = this.searchOrder.trim()
				if (!searchInput) {
					//这里再次进行强制聚焦input
					this.restFocusData()
					this.$common.errorToShow("请输入搜索内容")
					return 
				}
				//区分订单类型
				this.handleGetOrderPrefix(searchInput)
			},
			//扫码接口
			handleScanSuccess(scanRes) {
				console.log('扫码的结果', scanRes)
				if (!scanRes.result) {
					return this.$common.errorToShow("该条形码内容不存在")
				}
				//调用后盾接口获取的数据有误也可以再次调用
				//this.restFocusData()
			},
		}
	}
</script>