<template>
<view>
<!-- 扫码页面 -->
<!-- #ifndef APP-PLUS -->
<view class="wrap">
<view class="u-tips-color">
请在app中打开
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
from: '',
barcode: null,
flash: false,
tip: '将取景框对准二维码/条码,即可自动扫描',
barcodeTypes: [plus.barcode.EAN13,plus.barcode.EAN8,plus.barcode.QR],
}
},
onShow() {
// 页面展示时,重新启动扫描检测
if (this.barcode) {
this.barcode.start()
}
},
onLoad(option) {
this.from = option.from
// #ifdef APP-PLUS
// plus.navigator.setFullscreen(true); //全屏
let currentWebview = this.$scope.$getAppWebview();
this.createBarcode(currentWebview)
this.createTipInfoView(currentWebview)
this.createFlashBarView(currentWebview)
// #endif
},
mounted() {
},
methods: {
/**
* 创建二维码
* @param {Object} currentWebview
*/
createBarcode(currentWebview) {
if (!this.barcode) {
this.barcode = plus.barcode.create('barcode', this.barcodeTypes, {
top: `0px`,
left: '0px',
height: `100%`,
width: '100%',
position: 'absolute',
background: '#06C263',
frameColor: '#06C263',
scanbarColor: '#06C263',
});
this.barcode.onmarked = this.onmarked;
this.barcode.setFlash(this.flash);
//此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理
//注意扫码区域需为正方形,否则影响扫码识别率
currentWebview.append(this.barcode);
}
this.barcode.start()
},
/**
* 创建提示信息
* @param {Object} currentWebview
*/
createTipInfoView(currentWebview) {
var top = ''
if (uni.getSystemInfoSync().platform == "ios") {
top = '77%'
} else {
top = '70%'
}
const content = new plus.nativeObj.View('content', {
top: '0px',
left: '0px',
height: '100%',
width: '100%'
},
[{
tag: 'font',
id: 'scanTips',
text: this.tip,
textStyles: {
size: '14px',
color: '#ffffff',
whiteSpace: 'normal'
},
position: {
top: top,
left: '10%',
width: '80%',
height: 'wrap_content'
}
}]);
currentWebview.append(content);
},
// 创建 开关灯按钮
createFlashBarView(currentWebview) {
var top = ''
if (uni.getSystemInfoSync().platform == "ios") {
top = '69%'
} else {
top = '62%'
}
const openImg = this.crtFlashImg('static/yellow-scanBar.png')
const closeImg = this.crtFlashImg('static/scanBar.png')
const scanBarVew = new plus.nativeObj.View('scanBarVew', {
top: top,
left: '40%',
height: '10%',
width: '20%',
},
closeImg);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(scanBarVew);
scanBarVew.addEventListener("click", (e) => { //点亮手电筒
this.flash = !this.flash;
if (this.flash) {
scanBarVew.draw(openImg);
} else {
scanBarVew.draw(closeImg)
}
if (this.barcode) {
this.barcode.setFlash(this.flash);
}
}, false)
},
crtFlashImg(imgsrc) {
return [{
tag: 'img',
id: 'scanBar',
src: imgsrc,
position: {
width: '28%',
left: '36%',
height: '30%'
}
}, {
tag: 'font',
id: 'font',
text: '轻触照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}]
},
// 扫码成功回调
onmarked(type, result) {
console.log('条码类型:' + type);
console.log('条码内容:' + result);
let data = {
from: this.from,
type: type,
code: result
}
uni.$emit("scan-"+this.from,data)
uni.navigateBack()
}
}
}
</script>
<style scoped>
.wrap {
height: calc(100vh);
/ #ifdef H5 /
height: calc(100vh - var(--window-top));
/ #endif /
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
1***@163.com (作者)
不知为何,又可以了-_-
2023-08-16 09:55
DCloud_iOS_WZT
回复 1***@163.com: 你再试试 有问题的话发一个示例给我
2023-08-16 11:19