vue外接扫码枪如何实现
原理
扫码枪读取数据会触发键盘事件，所以可以通过监听keydown事件获取数据；
数据读取完毕会触发enter键，可以以此判断扫码结束；
由于扫码枪触发键盘事件耗时极少，可以通过时间间隔判断是手动输入或是扫码；
此处直接对监听数据进行处理，也可使用input框读取数据进行处理；
代码实现
//html
<template>
<div class="home_cash">
<div class="home_cash_area">
<div class="left_cash_area">
<el-card class="box-card">
<div class="cash_card_body">
<div class="cash_tittle">
<span class="cart">购物车</span>
</div>
<div class="line-area">
<div class="line"></div>
</div>
<el-table :data="tableData" height="92%" style="width: 100%;font-size: 26px;" size="default">
<el-table-column prop="id" label="序号" width="99" align="center"/>
<el-table-column prop="name" label="商品名称" min-width="200" max-width="359" align="center">
<template #default="{ row }">
<span>{{ row.name }} </span>
</template>
</el-table-column>
<el-table-column prop="price" label="单价" min-width="180" align="center">
<template #default="{ row }">
<span>{{ row.price }} </span>
</template>
</el-table-column>
<el-table-column prop="num" label="数量" width="190" align="center">
<template #default="{ row }">
<el-input-number v-model="row.num" :min="1" :max="999999999" @change="handleChangeNum"/>
</template>
</el-table-column>
<el-table-column prop="allprice" label="小计" min-width="199" align="center">
<template #default="{ row }">
<span>{{ Number(row.price) * Number(row.num) }} </span>
</template>
</el-table-column>
<el-table-column width="99" align="center">
<template #default="{ row }">
<span>
<i class="el-icon-circle-close" @click="delCommodity(row)"></i>
</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
<div class="right_commit_area">
<el-card>
<div class="commit_card_body">
<div class="commit_heji">
<span class="commit_heji_title">合计:</span>
<span class="commit_heji_num">{{ allPriceAndNUm }}</span>
<span class="commit_heji_title">$</span>
</div>
<div class="commit_jiesuan">
<span class="commit_jiesuan_title">结算方式</span>
</div>
<div class="choose_pay_channel">
<div class="pay_channel"
:class="actchoose== 1 ? 'pay_channel_act' : 'pay_channel_noact'"
@click="choosePayChannel(1)"
>
<div class="pay_channel_left">
<img src="/img/code-full.png" style="margin-right: 10px; width: 27px;height: 27px">
<span class="big-title">扫码支付</span>
<span class="lt-title">(手机扫码)</span>
</div>
<div class="pay_channel_right" v-if="actchoose ==1">
<img src="/img/xuanzhong.png" style="margin-right: 10px; width: 27px;height: 27px">
</div>
</div>
<div class="pay_channel"
:class="actchoose== 2 ? 'pay_channel_act' : 'pay_channel_noact'"
@click="choosePayChannel(2)">
<div class="pay_channel_left">
<img src="/img/ly_huiyuanka.png" style="margin-right: 10px; width: 27px;height: 27px">
<span class="big-title">会员卡支付</span>
<span class="lt-title">(刷会员卡)</span>
</div>
<div class="pay_channel_right" v-if="actchoose ==2">
<img src="/img/xuanzhong.png" style="margin-right: 10px; width: 27px;height: 27px">
</div>
</div>
</div>
</div>
</el-card>
</div>
</div>
<!-- 用户扫码支付的二维码弹窗 -->
<el-dialog
v-model="dialogVisible"
width="600px"
align-center
center
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
>
<div class="dig_pay_qrcode">
<div class="dig_pay_qrcode_title">
请使用微信扫描二维码支付!
</div>
<div class="dig_pay_qrcode_qrcode">
<!-- 在这个区域使用vueqr生成二维码 -->
<QRCode size="400" error-level="M" :value="qrCodeUrl"/>
</div>
<div class="dig_pay_qrcode_tips">
支付成功请等待系统确认
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="danger" @click="cancelQRPay()">
取消支付
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>//css
<style scoped lang="scss">
.home_cash {
width: 100%;
height: 100%;
.home_cash_area {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: flex-start;
.left_cash_area {
width: 70%;
height: 100%;
.box-card {
width: 100%;
height: 100%;
.cash_card_body {
width: 100%;
height: 85vh;
.cash_tittle {
height: 50px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
.cart {
margin-left: 5px;
height: 24px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 24px;
color: #222222;
line-height: 20px;
}
}
.line-area {
width: 100%;
height: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
.line {
width: 95%;
height: 1px;
background: #F0F0F0;
}
}
}
}
}
.right_commit_area {
width: 29%;
height: 100%;
.commit_card_body {
width: 100%;
height: 78vh;
.commit_heji {
margin-top: 75px;
width: 386px;
height: 41px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
.commit_heji_title {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 42px;
color: #000000;
}
.commit_heji_num {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 42px;
color: #ff0000;
}
}
.commit_jiesuan {
margin-top: 85px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
.commit_jiesuan_title {
height: 24px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 24px;
color: #000000;
}
}
.choose_pay_channel {
margin-top: 20px;
height: 250px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: space-evenly;
align-items: flex-start;
.pay_channel_act {
border: 1px solid #009CFF;
}
.pay_channel_noact {
border: 1px solid #DADADA;
}
.pay_channel {
width: 100%;
height: 80px;
background: #FFFFFF;
border-radius: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
.pay_channel_left {
margin-left: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-end;
justify-content: center;
align-items: flex-end;
img {
margin-right: 10px;
width: 27px;
height: 27px;
}
.big-title {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 24px;
color: #000000;
}
.lt-title {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #999999;
}
}
.pay_channel_right {
margin-right: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
align-items: center;
img {
}
}
}
}
.pay_info_area {
margin-top: 30px;
width: 100%;
height: 30vh;
.pay_qrcode {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.pay_vip {
width: 100%;
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: flex-start;
.pay_vip_line {
margin-top: 20px;
.pay_vip_line_lable {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 24px;
color: #000000;
}
.pay_vip_line_vaule {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 24px;
color: #000000;
}
}
}
}
}
}
}
.dig_pay_qrcode {
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
align-items: center;
.dig_pay_qrcode_title {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 42px;
color: #000000;
}
.dig_pay_qrcode_qrcode {
width: 400px;
height: 400px;
}
.dig_pay_qrcode_tips {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 32px;
color: #ff0000;
}
}
}
</style>{, , , , , } ;
{} ;
{, } ;
{} {} ;
{} ;
QRCode {
: ,
: {
: QRCode,
},
() {
= ({
: ..userInfos.., : ..userInfos..,
: ,
: ,
: [
],
: [], : ,
: ,
: ,
: ,
: ,
: });
= (() => {
.(, ..userInfos.)
..userInfos.;
});
= (item) => {
.(, item)
..(..(item), );
.(, .)
();
};
= (() => {
(());
});
= () => {
();
};
= (index) => {
(index == ) {
;
}
.= index;
();
};
= () => {
.(, .)
(.).((res) => {
.(, res)
(res.) {
.(, res.)
.= ;
.= + .+ + res.;
}
}).(e => {
(() => {
.= ;
}, )
.(, e)
});
};
= () => {
.= ;
.= ;
};
= () => {
= ;
(= ; < ..; ++) {
+= (.[].) * (.[].);
}
.= ;
.console.(, .)
};
= (item) => {
.(, item)
();
};
= (e) => {
(.) {
.= e.;
} (e.) {
.= e.;
}
(e.=== ) {
(..< ) ; (.); .= ;
.= ;
;
}
.= ().();
(!.&& !.) {
.= []; ..(e.);
}
(.&& .&& .- .> ) {
.= []; ..(e.);
} (.&& .) {
..(e.);
}
.= .;
.= .;
}
= (code) => {
(code.== ) {
.(, code);
(.== ) {
;
}
(.== ) {
;
}
} (code.== ) {
.(, code);
(.!= ) {
;
}
(code.());
} {
.(, code);
.(, code.());
}
}
= (code) => {
.(, code);
(code).((res) => {
.(, res);
(res.!== ) {
= {
: res..,
: res..goodsTitle,
: res..goodsPrice,
: ,
: ,
};
(..(item => item.=== .) !== -) {
..(item => {
(item.=== .) {
item.++;
}
});
();
;
}
..();
();
.(, .)
} {
.({
: (, , [
(, {: }, ),
]),
})
}
})
}
(() => {
.= (e) => {
(e);
};
();
}
);
(() => {
.= ;
});
(() => ., () => {
.console.(, .)
();
});
{
,
,
,
,
,
,
,
,
,
,
,
...(),
};
},
};
