扫码盒获取微信支付宝付款码等信息的前端处理

<Row class="left-middle">
	<Col span="24" >
		<Form ref="formAdd" :model="formAdd" :label-width="80">
			<FormItem label="车票号" prop="newAddText">  
				<Input v-model.lazy="inputVal"  ref="inputDOM" clearable :maxlength="18" size="small" style="width:60%"  placeholder="请扫码录入车票号"/>
				<Button type="primary" size="small"  @click="inputFocus">
					&nbsp;扫码&nbsp;
				</Button>             
			</FormItem>
		</Form>
	</Col>
</Row>

    watch:{
        inputVal(curVal, oldVal) {
            // 实现input连续输入，只发一次请求
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                this.ticketQuery(curVal)
            }, 800);
        }
    },

  // 退票明细查询接口
        async ticketQuery(curVal){           
            try {
                if (curVal === '') {
                    return false;
                };
                if(this.inputVal === curVal) {
                    if(this.inputVal.includes('PT') || this.inputVal.includes('TK')) {
                        this.formRefund.ticketNum = this.inputVal.slice(2,18);
                    }else{
                        this.formRefund.ticketNum = this.inputVal.slice(0,16);
                    }
                    var params = {
                        appData: {              
                            ticketNo:this.formRefund.ticketNum 
                        }
                    };
                    const res = await api.ticketQuery(JSON.stringify(params));
                }
            } catch (err) {
              
            }
        },

扫码盒默认机制为窗口聚焦输入框获取值，为间隔性性获取值 例如每隔5ms获取一个长度的值 需要设置一个时间间隔拿到所有值，再去进行和后台交互。还有一种为websock后台推送，前台接收。

标签：支付宝,扫码,formRefund,微信,ticketQuery,curVal,inputVal,ticketNum
来源： https://blog.csdn.net/weixin_42265852/article/details/96477159