vuex项目扫码枪收款

一. 扫码枪工作原理

扫码枪会将扫到的数据带入到获取焦点的输入框中，并且触发输入框的enter回车事件

1.页面上要有一个输入框，并且是获取焦点状态，当然它是隐藏的看不到，我是把宽高设置为0，然后加上回车事件。

2.获取焦点的方法

Vue.nextTick(() => {
    this.$refs["barCodeInput"].focus();
});　　

3.执行回车事件

payCode(){
     //这里进行扫码枪扫码后的操作，调后台接口     
}

二、 项目使用实际代码　　

因为产品要求是不能展示出扫码枪的输入框的，所以使用的input 的hidden属性隐藏了输入框，监听onkeyup事件处理

代码如下：

扫码枪组件代码：

父组件处理数据代码：

html:

if="isShowScanner" ref="scannerTipDialog" @getScanCode="getScanCode" @closeScanner="closeScanner"/>

data () {
    isShowScanner: false, // 方便每次打开扫码枪弹框的时候会重新挂载，获取焦点
}

methods: {
    getScanCode (code,type) {
              console.log('扫码得到的数据',code,type)
              this.isShowScanner = false
              this.dialogLoading = true
              this.open({code, type})
            },
    closeScanner () {
              this.isShowScanner = false
            },

 /*
下面是事件处理函数，通过promise避免了回调地狱，可供以后写代码参考
promise 返回的reject() 数据处理都会被catch捕获到，展示出错误信息
promise 返回的resolve() 数据处理都会被try捕获到，函数继续往下执行
*/
async open(scanner){
                var payMode = null
                var order = null
                try {

                    //2. 查询对应的支付编号
                    payMode = await this.getPayModeByType(scanner.type)
                    console.log('==>>payMode', payMode)

                    // 3. 支付订单 
                    order = await this.payOrder(scanner)
                    console.log('==>>order', order)

                    // 4. 开卡
                    let open = await this.handleOpen(order)
                    this.dialogLoading = false
                    console.log('==>>handleOpen', open)
                   
                } catch(error){
                    this.dialogLoading = false;
                    console.log('==>>error', error)
                    if(error.code == this.errorTypes.scannerError.code) {
                        // 扫码枪扫描失败
                        this.$message({
                            type: 'error',
                            message: '扫码枪扫描失败，请重新提交并扫码'
                        })
                    } else if(error.code == this.errorTypes.payModeError.code){
                        // 获取支付方式失败
                        this.$message({
                            type: 'error',
                            message: '订单支付类型获取失败，请更换支付方式'
                        })
                    } else if(error.code == this.errorTypes.serverError.code){
                        // 订单支付失败
                        this.$message({
                            type: 'error',
                            message: '订单支付失败，请重新扫码'
                        })
                    } else if(error.code == this.errorTypes.payOrderError.code){
                        // 订单支付失败 需要反查
                        let param = {
                            subsystemCode: this.model.subsystemCode,
                            orderNum: error.outTradeNo
                        }
                        try{
                            let orderStatus = await this.queryOrderStatus(param)
                            console.log("===>orderStatus",orderStatus)
                            let open = await this.handleOpen(order)
                            console.log('==>>handleOpen', open)
                        } catch(e){
                            console.log('==>>e', e)
                            this.handleOpenFailed()
                        }
                    } else if(error.code == this.errorTypes.openMonthCardError.code){
                        // 月卡开卡失败处理
                        this.handleOpenFailed()
                    }
                }
            },
// 订单状态反查
            queryOrderStatus(param){
                let that = this
                return new Promise((resolve, reject) => {
                    getOrderStatus(param).then(res => {
                        if(res.respCode == 'success' 
                        && res.respData ){
                            if(res.respData.resultCode == 0){
                                if(res.respData.attributes && res.respData.attributes.tradeState == 'SUCCESS'){
                                    that.model.orderId = res.respData.attributes.orderNo
                                    resolve(res.respData)
                                } else {
                                    let e = Object.assign({}, this.errorTypes.payOrderError, {orderNo: res.respData.attributes.orderNo})
                                    reject(e)
                                }
                            } else {
                                reject(this.errorTypes.serverError)
                            }
                        } else {
                            reject(this.errorTypes.serverError)
                        }
                    }).catch(err => {
                        reject(this.errorTypes.serverError)
                    })
                })
            },
// 获取对用的支付方式
            getPayModeByType(type){
                return new Promise((resolve, reject) => {
                    getPayMode(type).then(res => {
                        this.tempPayMode = res.respData.itemKey
                        resolve(res.respData)
                    }).catch(e => {
                        reject(this.errorTypes.payModeError)
                    })
                })
                
            },
// 月卡开卡失败处理
            handleOpenFailed(){
                // 判断是否使用扫码枪支付
                if (this.payMode == this.offlinePay.itemKey){
                    this.model.payMode = this.tempPayMode
                }
                handleOpenPayFailed(this.model).then(res => {
                    var msg = "月卡开卡失败，请稍后重试";
                    this.$message({
                        message: msg,
                        type: "success",
                        duration: 5000
                    });
                    this.cancel()
                }).catch(err => {
                    this.$message({
                        type: 'warning',
                        message: '系统错误，请稍后再试'
                    })
                })
            },
//支付订单
            payOrder(scanner){
                let that = this
                return new Promise((resolve, reject) => {
                     // 获取车牌号码
                    let carNos = that.model.personCars.map(e => {
                      return e.carNo
                    }).join(',')
                    that.orderParam.carNo = carNos
                    that.orderParam.subsystemCode = that.model.subsystemCode
                    that.orderParam.ysMoney = that.model.ysMoney
                    that.orderParam.ssMoney = that.model.ssMoney
                    that.orderParam.newBeginTime = that.model.beginTime
                    that.orderParam.newEndTime = that.model.endTime
                    that.orderParam.authCode = scanner.code
                    that.orderParam.payChannel = scanner.type
                    payParkServiceOrder(that.orderParam).then(res => {
                        if(res.respCode == 'success' 
                        && res.respData){ //需要细分失败类型
                            that.orderParam.id = res.respData.id
                            that.orderParam.outTradeNo = res.respData.outTradeNo
                            if(res.respData.payStatus == '1'){
                                that.model.orderId = res.respData.outTradeNo
                                resolve(res.respData)
                            } else if(res.respData.payStatus == '0'){
                                let e = Object.assign({}, this.errorTypes.payOrderError, {outTradeNo: res.respData.outTradeNo})
                                reject(e)
                            } else if(res.respData.payStatus == '-2'){
                                reject(this.errorTypes.serverError)
                            }
                        } else {
                            reject(this.errorTypes.serverError)
                        }
                    }).catch(err => {
                        reject(this.errorTypes.serverError)
                    })
                })
            },  
                  
}    

参考：

基于VUE的插件，实现无需输入框得情况下网页监听扫码枪扫码结果

本地测试html文件：

  hidden value="" placeholder="请输入优惠券码/扫描优惠券码" onBlur="blur" onkeyup="getDetail()">