Vue.js Vuejs和vue qrcode读取器添加蜂鸣扫描
您好，我使用库视图qrcode阅读器进行qrcode扫描。我试图添加一个蜂鸣扫描，但我不觉得图书馆做这种事情。所以我手动做了这件事，但它也不起作用Vue.js Vuejs和vue qrcode读取器添加蜂鸣扫描,vue.js,Vue.js,您好，我使用库视图qrcode阅读器进行qrcode扫描。我试图添加一个蜂鸣扫描，但我不觉得图书馆做这种事情。所以我手动做了这件事，但它也不起作用 <template> <div class="container" id="app"> <router-link class="waves-effect waves-light btn" to="/livreur"><i class="material-icons">arrow_ba
<template>
<div class="container" id="app">
<router-link class="waves-effect waves-light btn" to="/livreur"><i class="material-icons">arrow_back</i>
</router-link>
<div class="row center">
<span v-if="errors" class="card-panel white-text red darken-1"><strong>{{ errors }}</strong></span>
</div>
<div class="row infos">
<span v-if="infos" class="card-panel white-text green green-1"><strong>Email & SMS envoyé à {{ infos.firstname }} {{ infos.lastname }}</strong></span>
</div>
<br/>
<div class="row">
<qrcode-stream @decode="onDecode"></qrcode-stream>
</div>
</div>
</template>
<script>
var attributes = {
setting: {
soundSrc: '/sounds/beep.mp3'
}
}
export default {
name: 'prepa',
data () {
return {
infos: '',
errors: '',
success: ''
}
},
methods: {
onDecode (decodedString) {
var audio = new Audio(attributes.setting.soundSrc)
audio.play()
this.$http.get('/orders/delivery/prepa/' + decodedString, {headers: {Authorization: `Bearer ${localStorage.token}`}})
.then(request => this.trackingInfos(request))
.catch((request) => this.trackingFail(request))
},
trackingInfos (req) {
if (req.data.error) {
return this.trackingFail(req)
}
this.errors = ''
this.infos = req.data.datas
this.save()
},
trackingFail (req) {
if (req.data.error) {
this.errors = req.data.error
}
},
save () {
this.$http.post('/order_histories', {
location: this.infos.city,
status: '/api/order_statuses/' + this.$preparation,
User: '/api/users/' + localStorage.userId,
orderId: '/api/orders/' + this.infos.orderId,
headers: {Authorization: `Bearer ${localStorage.token}`}
})
.then(request => this.successPrepa(request))
.catch(() => this.failPrepa())
},
successPrepa (req) {
if (req.data.error) {
return this.failPrepa(req)
}
this.errors = ''
this.success = req.status
},
failPrepa (req) {
if (req.data.error) {
this.errors = req.data.error
}
}
}
}
</script>
箭背
{{errors}}
电子邮件和短信特使{{infos.firstname}{{infos.lastname}
变量属性={
设置：{
soundSrc:“/sounds/beep.mp3”
}
}
导出默认值{
名称：“prepa”，
数据（）{
返回{
信息：“”，
错误：“”，
成功：“”
}
},
方法：{
onDecode（解码字符串）{
var audio=新音频（attributes.setting.soundSrc）
音频播放
这个.http.get（'/orders/delivery/prepa/'+decodedString，{headers:{Authorization:`Bearer${localStorage.token}}}}）
.then（请求=>此.trackingInfo（请求））
.catch（（请求）=>此.trackingFail（请求））
},
跟踪FOS（要求）{
if（请求数据错误）{
返回此。trackingFail（req）
}
这是。错误=“”
this.infos=req.data.datas
这个。save（）
},
跟踪失败（req）{
if（请求数据错误）{
this.errors=req.data.error
}
},
保存（）{
此.http.post（“/order_histories”{
地点：this.infos.city，
状态：'/api/order_statuses/'+此.$preparation，
用户：'/api/users/'+localStorage.userId，
orderId:'/api/orders/'+this.infos.orderId，
标头：{Authorization:`Bearer${localStorage.token}`}
})
.then（请求=>this.successPrepa（请求））
.catch（（）=>this.failPrepa（））
},
successPrepa（请求）{
if（请求数据错误）{
返回此。failPrepa（req）
}
这是。错误=“”
this.success=req.status
},
失效准备程序（req）{
if（请求数据错误）{
this.errors=req.data.error
}
}
}
}