第一张是安卓 第二张是苹果的
代码如下
...载入中...
轻触照亮关闭扫码
/**
* h5+ 扫码功能实现
*/
let scan = null
export default {
name: 'Scan',
data() {
return {
fromRouter: '', // 进入扫码页面的上一个路由
barcodeBoo: false,
key: '',
flash: false,
barStyle: {
top: '0',
left: '0',
width: '100%',
height: '80%',
scanbarColor: '#1DA7FF',
position: 'fixed',
frameColor: '#1DA7FF'
}
}
},
mounted() {},
beforeDestroy() {
this.closeScan()
},
methods: {
setFlash() {
this.flash = !this.flash
if (scan) {
scan.setFlash(this.flash)
}
},
createRecognize(key) {
const temp = this
temp.key = key
temp.barcodeBoo = true
setTimeout(() => {
temp.startRecognize()
}, 1000)
},
// 创建扫描控件
// "vue-h5-plus": "^1.2.0",
/* eslint-enable */
startRecognize() {
const temp = this
if (!window.plus) return
// eslint-disable-next-line
plus.navigator.setFullscreen(true); //全屏
// temp.createView()
// eslint-disable-next-line
scan = new plus.barcode.Barcode('bcidBar',[plus.barcode.QR],temp.barStyle)
scan.onmarked = onmarked
// eslint-disable-next-line
plus.webview.currentWebview().append(scan)
scan.setFlash(temp.flash)
temp.startScan()
function onmarked(type, result, file) {
switch (type) {
// eslint-disable-next-line
case plus.barcode.QR:
type = 'QR'
break
// eslint-disable-next-line
case plus.barcode.EAN13:
type = 'EAN13'
break
// eslint-disable-next-line
case plus.barcode.EAN8:
type = 'EAN8'
break
default:
type = '其它' + type
break
}
result = result.replace(/\n/g, '')
}
},
// 开始扫描
startScan() {
if (!window.plus) return
scan.start()
},
// 关闭扫描
cancelScan() {
if (!window.plus) return
this.barcodeBoo = false
scan.cancel()
},
// 关闭条码识别控件
closeScan() {
if (!window.plus) return
// eslint-disable-next-line
plus.navigator.setFullscreen(false); //全屏
this.barcodeBoo = false
if(scan){
scan.close()
}
this.$emit('close', 'close', true)
},
}
}
.scan {
height: 100%;
#bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
color: #fff;
background: #ccc;
z-index: 9999;
pointer-events: none;
}
}
.flashButton {
z-index: 9999;
position: fixed;
top: 90%;
left: 20%;
}
.closeButton {
z-index: 9999;
position: fixed;
top: 90%;
right: 20%;
}