一，使用的插件：vue-qrcode-reader
官网：
https://gruhn.github.io/vue-qrcode-reader/demos/Simple.html
二，我在项目中使用;
项目代码：
<template>
<div class="scan">
<div class="scan-back" @click="handleBack()">
<img :src="require('@/assets/images/qrcodeScanner-delete.png')" alt="">
</div>
<div class="scan-content">
<p class="scan-error" v-if="error">{
{
error?'暂不支持扫一扫':''}}</p>
<p class="scan-error" v-if="error">{
{
error}}</p>
<qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
</div>
</div>
</template>
<script>
import {
QrcodeStream } from 'vue-qrcode-reader'
export default {
name: 'qrcodeScanner',
components: {
QrcodeStream
},
data () {
return {
error: ''
}
},
methods: {
/**
* 返回
*/
handleBack () {
this.$router.go(-1)
},
onDecode (result) {
if (!result) {
return
}
let params = {
TXCODE: 'ST0074',
qrCode: result
}
this.ajax('get', params, res => {
if (res.data.SUCCESS === 'Y') {
//对于我这个项目，应该跳转到龙支付的页面,并且将二维码得到的参数带入
this.$notify({
message: '应该跳转到龙支付页面',
type: 'success',
duration: 500,
});
} else {
this.$notify({
message: res.data.ERRMSG,
type: 'warning',
duration: 500,
});
}
}, err => {
console.log(err) }, this.$baseAPIs.server3rd)
},
async onInit (promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
this.error = "ERROR: you need to grant camera access permisson"
} else if (error.name === 'NotFoundError') {
this.error = "ERROR: no camera on this device"
} else if (error.name === 'NotSupportedError') {
this.error = "ERROR: secure context required (HTTPS, localhost)"
} else if (error.name === 'NotReadableError') {
this.error = "ERROR: is the camera already in use?"
} else if (error.name === 'OverconstrainedError') {
this.error = "ERROR: installed cameras are not suitable"
} else if (error.name === 'StreamApiNotSupportedError') {
this.error = "ERROR: Stream API is not supported in this browser"
}else{
this.error=error
}
console.log(this.error)
}
}
}
}
</script>
<style scoped>
.scan {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.scan-back {
position: absolute;
top: 5vw;
left: 5vw;
z-index: 1;
}
.scan-back img {
width: 52px;
}
.scan-content {
height: 100%;
}
.scan-error {
margin-top: 10vh;
color: #a0a0a0;
font-size: 36px;
}
</style>