废话不多说直接上源码，如有不足，请留言
<template>
<div class="scan">
<header>
<p @click="closeScan">返回</p>
<span>请扫码二维码</span>
<p @click="scanImg">相册</p>
</header>
<div id="bcid">
<div style="height:40%"></div>
<p class="tip">...载入中...</p>
</div>
</div>
</template>
下面是js部分
<script type='text/ecmascript-6'>
let scan = null;
export default {
data() {
return {
codeUrl: ""
};
},
mounted() {
//跳转时自动开启
this.startRecognize();
},
methods: {
// 创建扫描控件
startRecognize() {
let that = this;
if (!window.plus) return;
scan = new plus.barcode.Barcode(
"bcid",
[plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13],
{
frameColor: "#009DE2",
scanbarColor: "#009DE2"
}
);
//scan.onmarked = onmarked;
// 开始扫描
//scan.start();
function onmarked(type, result, file) {
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, "");
that.codeUrl = result;
window.localStorage.codeUrl = result;
// alert(result);
//that.closeScan();
}
},
// 关闭返回
closeScan() {
if (!window.plus) return;
scan.close();
this.$router.push({ path: "/home" });
},
scanImg() {
// 从系统相册选择文件
if (!window.plus) return;
plus.gallery.pick(
function(path) {
// alert(path);
plus.barcode.scan(
path,
function(type, result) {
// alert("Scan success:(" + type + ")" + result);
window.localStorage.codeUrl2 = result;
},
function(e) {
console.log(e);
window.localStorage.codeUrl2 = e;
plus.nativeUI.alert("如果图片无法识别,请用扫码上传");
}
);
},
function(e) {
alert("取消选择图片");
},
{ filter: "image" }
);
}
}
};
</script>
下面是样式可以自行写
<style lang="scss">
.scan {
height: 100%;
#bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 1rem;
bottom: 0;
text-align: center;
color: #fff;
background: #ccc;
}
header {
position: absolute;
display: flex;
justify-content: space-between;
font-size: 16px;
color:#009DE2;
left: 0.3rem;
top: 0;
right: 0.3rem;
height: 1rem;
line-height: 1rem;
z-index: 2;
span{
color: #000;
}
}
}
</style>
觉得有用就关注点个赞吧，么么哒
