移动端开发vue使用Barcode实现二维码、条形码扫码
实现效果1进入页面执行扫码功能activated () {const self = thisif (window.plus) {self.plusReady()} else {document.addEventListener('plusready', self.plusReady, false)}docum...
·
实现效果
0 HTML
<template>
<div class="content">
<header>
<section class="head_goback" @click="goback">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/>
</svg>
</section>
<section class="title_head ellipsis">
<span class="title_text">扫描设备</span>
</section>
</header>
<div class="Detail">
<div id="code">
<div style="width:16rem;height:12.8rem; background-color: #000; margin: 15% auto 5%; text-align: center"></div>
</div>
<p style="text-align: center">将二维码放入框内,即可自动扫描</p>
<div style="text-align: center" class="sweep" @click="sweep">开始扫码</div>
<div style="text-align: center" class="start" @click="next">识别失败,手动录入</div>
</div>
</div>
</template>
Tips:引包
npm install vue-awesome-mui -save
在main.js放入:
import Mui from 'vue-awesome-mui'
Vue.use(Mui)
1进入页面执行扫码功能
activated () {
const self = this
if (window.plus) {
self.plusReady()
} else {
document.addEventListener('plusready', self.plusReady, false)
}
document.addEventListener('DOMContentLoaded', function () {
// alert('DOMLoaded')
self.domready = true
self.plusReady()
}, false)
setTimeout(function () {
self.sweep() // 扫码函数
}, 1000)
},
methods:{
//创建
plusReady () {
const self = this
// 获取窗口
self.scan = new plus.barcode.Barcode('code')
self.scan.onmarked = self.onmarked
},
// 开始扫码
sweep () {
const self = this
self.scan.start()
},
onmarked (type, result) {
let t = this
var text = '未知: '
switch (type) {
case plus.barcode.QR:
type = 'QR'
break
case plus.barcode.EAN13:
type = 'EAN13'
break
case plus.barcode.EAN8:
type = 'EAN8'
break
default:
type = '其他' + type
break
}
result = result.replace(/\n/g, '')
if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {
plus.nativeUI.confirm(result, function (i) {
if (i.index == 0) {
// self.back() // 返回上个页面
plus.runtime.openURL(result)
console.log(result) // 扫出来的值
t.scan.close() //扫码成功后关闭扫码
t.$router.push({path: 'Info', query: {id: result}}) // 跳转到对应的页面
} else {
// self.back() // 返回上个页面
console.log(result)
t.scan.close()
window.localStorage.scan = result
t.$router.push({path: 'Info', query: {id: result}})
}
}, '', ['打开', '取消'])
} else {
// self.back() // 返回上个页面
console.log(result)
}
}
}
Css
<style scoped lang="less">
.content{
background-color: #000;
color: white;
height: 100vh;
overflow: hidden;
header{
background-color: #000;
height: 2.00533rem;
width: 100%;
text-align: center;
line-height: 2.00533rem;
display: flex;
/*position: fixed;*/
top:0;
z-index: 99999;
/deep/ .head_goback{
padding-top: 0.1rem;
width: 0.6rem;
height: 0.8533rem;
padding-left: 0.2rem;
}
/deep/ .title_head{
width: 92%;
text-align: center;
color: white;
font-size: 0.8533rem;
letter-spacing: 2px;
}
}
.Detail{
width: 96%;
margin: 0 auto;
.session{
.name{
margin: 0.4rem 0;
font-size: 0.4rem;
color: #333333;
font-weight: bold;
}
.useTutorials{
background-color: #3998F7;
border-radius: 5px;
}
.desc{
margin: 0.4rem 0;
font-size: 0.4rem;
color: #333333;
.title{
font-weight: bold;
}
.intro{
margin-top: 0.1rem;
}
}
}
p{
font-size: 0.72rem;
}
.sweep{
text-align: center;
margin: 0.1rem auto;
width:13.8667rem;
height:1.7067rem;
display: flex;
justify-content: center;
align-items: center;
border-radius:1.024rem;
font-size: 0.768rem;
position: relative;
z-index: 9999;
color: white;
background:#FF8C99;
box-shadow:0px 6px 9px 0px rgba(255, 140, 153, 0.57);
margin-top: 2rem;
}
}
.start{
text-align: center;
margin: 0 auto;
width:13.8667rem;
height:1.7067rem;
display: flex;
justify-content: center;
align-items: center;
border-radius:1.024rem;
font-size: 0.768rem;
background:white;
border: 2px solid rgba(255, 169, 163, 1);
color: rgba(255, 169, 163, 1);
margin-top: 0.64rem;
}
}
</style>
Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!
更多推荐
已为社区贡献16条内容
所有评论(0)