|
|
<template>
|
|
|
<view></view>
|
|
|
</template>
|
|
|
<script>
|
|
|
var barcode = null;
|
|
|
|
|
|
// import { supplierEncasement } from '@/apis/encasement';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
name: '将二维码放入框内，即可自动扫描', //要在扫码界面自定义的内容
|
|
|
tip: '',
|
|
|
flash: false, //是否打开摄像头
|
|
|
bottomVisible: 1, // 1展示底部临时箱装箱，0不展示
|
|
|
boxTypeShow: '临时箱',
|
|
|
currentWebview: '',
|
|
|
code: '', // 扫码参数
|
|
|
type: '' // 箱子类型
|
|
|
};
|
|
|
},
|
|
|
onLoad(d) {
|
|
|
// this.bottomVisible = d.bottomVisible;
|
|
|
this.code = d.code;
|
|
|
this.type = d.type;
|
|
|
this.initView();
|
|
|
},
|
|
|
onBackPress() {
|
|
|
// #ifdef APP-PLUS
|
|
|
// 返回时退出全屏
|
|
|
barcode.close();
|
|
|
plus.navigator.setFullscreen(false);
|
|
|
|
|
|
//跳转到首页
|
|
|
// #endif
|
|
|
},
|
|
|
onUnload() {
|
|
|
plus.navigator.setFullscreen(false);
|
|
|
},
|
|
|
methods: {
|
|
|
initView() {
|
|
|
// #ifdef APP-PLUS
|
|
|
var pages = getCurrentPages();
|
|
|
var page = pages[pages.length - 1];
|
|
|
// plus.navigator.setFullscreen(true); //全屏
|
|
|
let currentWebview = page.$getAppWebview();
|
|
|
this.currentWebview = currentWebview;
|
|
|
this.createBarcode(currentWebview); //创建二维码窗口
|
|
|
this.createView(currentWebview); //创建操作按钮及tips界面
|
|
|
// #endif
|
|
|
},
|
|
|
// uni.navigateBack返回上一个页面传参 返回A页
|
|
|
goPageA(idx) {
|
|
|
// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
|
|
|
let pages = getCurrentPages();
|
|
|
|
|
|
// 2. 上一页面实例
|
|
|
// 注意是length长度，所以要想得到上一页面的实例需要 -2
|
|
|
// 若要返回上上页面的实例就 -3，以此类推
|
|
|
let prevPage = pages[pages.length - 2];
|
|
|
|
|
|
// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
|
|
|
prevPage.$vm.getValue(idx);
|
|
|
|
|
|
// 4. 返回上一页面
|
|
|
uni.navigateBack({
|
|
|
delta: 1 // 返回的页面数
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 扫码成功回调
|
|
|
onmarked(type, result) {
|
|
|
var text = '未知: ';
|
|
|
switch (type) {
|
|
|
case plus.barcode.QR:
|
|
|
text = 'QR: ';
|
|
|
break;
|
|
|
case plus.barcode.EAN13:
|
|
|
text = 'EAN13: ';
|
|
|
break;
|
|
|
case plus.barcode.EAN8:
|
|
|
text = 'EAN8: ';
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
console.log('result', text, result);
|
|
|
|
|
|
try {
|
|
|
this.goPageA(result);
|
|
|
// await supplierEncasement({ purchaseSubCode: result, code, type });
|
|
|
// uni.navigateBack({
|
|
|
// delta: 1
|
|
|
// });
|
|
|
// uni.navigateTo({
|
|
|
// url: `/pages/richScan/richScan/richScan?code=${result}`
|
|
|
// });
|
|
|
} catch (error) {
|
|
|
console.log(error, 'errorerror');
|
|
|
// 如果调接口，有报错，关闭后重新创建二维码
|
|
|
barcode.close();
|
|
|
this.createBarcode(this.currentWebview); //创建二维码窗口
|
|
|
return;
|
|
|
}
|
|
|
// }
|
|
|
plus.navigator.setFullscreen(false);
|
|
|
barcode.close();
|
|
|
},
|
|
|
// 创建二维码窗口
|
|
|
createBarcode(currentWebview) {
|
|
|
barcode = plus.barcode.create('barcode', [plus.barcode.QR, plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.CODE128], {
|
|
|
top: '0',
|
|
|
left: '0',
|
|
|
width: '100%',
|
|
|
height: '100%',
|
|
|
scanbarColor: '#46B81E',
|
|
|
position: 'static',
|
|
|
frameColor: '#46B81E',
|
|
|
display: 'flex',
|
|
|
justifyContent: 'center',
|
|
|
alignItems: 'center'
|
|
|
});
|
|
|
barcode.onmarked = this.onmarked;
|
|
|
barcode.setFlash(this.flash);
|
|
|
currentWebview.append(barcode);
|
|
|
barcode.start();
|
|
|
},
|
|
|
// 创建操作按钮及tips
|
|
|
createView(currentWebview) {
|
|
|
// 创建返回原生按钮
|
|
|
var backVew = new plus.nativeObj.View(
|
|
|
'backVew',
|
|
|
{
|
|
|
top: '0px',
|
|
|
left: '0px',
|
|
|
height: '40px',
|
|
|
width: '100%'
|
|
|
},
|
|
|
[
|
|
|
{
|
|
|
tag: 'img',
|
|
|
id: 'backBar',
|
|
|
src: 'static/left.png', // 根据自己的图标修改下面的样式
|
|
|
position: {
|
|
|
top: '2px',
|
|
|
left: '3px',
|
|
|
width: '35px',
|
|
|
height: '35px'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
);
|
|
|
// 创建打开手电筒的按钮
|
|
|
var scanBarVew = new plus.nativeObj.View(
|
|
|
'scanBarVew',
|
|
|
{
|
|
|
top: '55%',
|
|
|
left: '40%',
|
|
|
height: '10%',
|
|
|
width: '20%'
|
|
|
},
|
|
|
[
|
|
|
{
|
|
|
tag: 'img',
|
|
|
id: 'scanBar',
|
|
|
src: 'static/flashlightClose.png',
|
|
|
position: {
|
|
|
width: '28%',
|
|
|
left: '36%',
|
|
|
height: '30%'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
tag: 'font',
|
|
|
id: 'font',
|
|
|
text: '轻触照亮',
|
|
|
textStyles: {
|
|
|
size: '10px',
|
|
|
color: '#ffffff'
|
|
|
},
|
|
|
position: {
|
|
|
width: '80%',
|
|
|
left: '10%'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
);
|
|
|
// 创建展示类内容组件
|
|
|
var content = new plus.nativeObj.View(
|
|
|
'content',
|
|
|
{
|
|
|
bottom: '20%',
|
|
|
left: '0px',
|
|
|
height: '80%',
|
|
|
width: '100%'
|
|
|
},
|
|
|
[
|
|
|
// {
|
|
|
// tag: 'font',
|
|
|
// id: 'scanTitle',
|
|
|
// text: '二维码',
|
|
|
// textStyles: {
|
|
|
// size: '18px',
|
|
|
// color: '#ffffff'
|
|
|
// },
|
|
|
// position: {
|
|
|
// top: '0px',
|
|
|
// left: '0px',
|
|
|
// width: '100%',
|
|
|
// height: '40px'
|
|
|
// }
|
|
|
// },
|
|
|
{
|
|
|
tag: 'font',
|
|
|
id: 'scanTips',
|
|
|
text: this.name,
|
|
|
textStyles: {
|
|
|
size: '14px',
|
|
|
color: '#ffffff',
|
|
|
whiteSpace: 'normal'
|
|
|
},
|
|
|
position: {
|
|
|
bottom: '10%',
|
|
|
left: '10%',
|
|
|
width: '80%',
|
|
|
height: 'wrap_content'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
tag: 'font',
|
|
|
id: 'scanTips2',
|
|
|
text: this.tip,
|
|
|
textStyles: {
|
|
|
size: '14px',
|
|
|
color: '#46B81E',
|
|
|
whiteSpace: 'normal'
|
|
|
},
|
|
|
position: {
|
|
|
bottom: '0%',
|
|
|
left: '10%',
|
|
|
width: '80%',
|
|
|
height: 'wrap_content'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
);
|
|
|
// var content2 = new plus.nativeObj.View('content2', {
|
|
|
// bottom: '0px',
|
|
|
// left: '0px',
|
|
|
// height: '10%',
|
|
|
// width: '100%'
|
|
|
// });
|
|
|
// content2.drawRect({ color: '#ffffff' }, { top: '0', left: '0px', width: '100%', height: '1px' });
|
|
|
// content2.drawText(this.boxTypeShow + '装箱', { top: '40%', left: '0px', width: '100%', height: 'wrap_content' }, { size: '18px', color: '#ffffff' }, 'btn');
|
|
|
// content2.addEventListener('click', e => {
|
|
|
// // 点击底部按钮，切换文案
|
|
|
// this.boxTypeShow = this.boxTypeShow === '标准箱' ? '临时箱' : '标准箱';
|
|
|
// // 重绘文案
|
|
|
// content2.drawText(this.boxTypeShow + '装箱', { top: '40%', left: '0px', width: '100%', height: 'wrap_content' }, { size: '18px', color: '#ffffff' }, 'btn');
|
|
|
// });
|
|
|
backVew.interceptTouchEvent(true);
|
|
|
scanBarVew.interceptTouchEvent(true);
|
|
|
currentWebview.append(content);
|
|
|
// currentWebview.append(content2);
|
|
|
// if (this.bottomVisible == 0) {
|
|
|
// content2.hide();
|
|
|
// }
|
|
|
currentWebview.append(scanBarVew); //创建手电筒
|
|
|
currentWebview.append(backVew);
|
|
|
backVew.addEventListener(
|
|
|
'click',
|
|
|
function(e) {
|
|
|
//返回按钮====跳转到首页
|
|
|
uni.switchTab({
|
|
|
url: '/pages/index'
|
|
|
});
|
|
|
// uni.navigateBack({
|
|
|
// delta: 1
|
|
|
// });
|
|
|
barcode.close();
|
|
|
plus.navigator.setFullscreen(false);
|
|
|
},
|
|
|
false
|
|
|
);
|
|
|
var temp = this;
|
|
|
scanBarVew.addEventListener(
|
|
|
'click',
|
|
|
function(e) {
|
|
|
//点亮手电筒
|
|
|
temp.flash = !temp.flash;
|
|
|
if (temp.flash) {
|
|
|
scanBarVew.draw([
|
|
|
{
|
|
|
tag: 'img',
|
|
|
id: 'scanBar',
|
|
|
src: 'static/flashlightOpen.png',
|
|
|
position: {
|
|
|
width: '28%',
|
|
|
left: '36%',
|
|
|
height: '30%'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
tag: 'font',
|
|
|
id: 'font',
|
|
|
text: '轻触关闭',
|
|
|
textStyles: {
|
|
|
size: '10px',
|
|
|
color: '#ffffff'
|
|
|
},
|
|
|
position: {
|
|
|
width: '80%',
|
|
|
left: '10%'
|
|
|
}
|
|
|
}
|
|
|
]);
|
|
|
} else {
|
|
|
scanBarVew.draw([
|
|
|
{
|
|
|
tag: 'img',
|
|
|
id: 'scanBar',
|
|
|
src: 'static/flashlightClose.png',
|
|
|
position: {
|
|
|
width: '28%',
|
|
|
left: '36%',
|
|
|
height: '30%'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
tag: 'font',
|
|
|
id: 'font',
|
|
|
text: '轻触照亮',
|
|
|
textStyles: {
|
|
|
size: '10px',
|
|
|
color: '#ffffff'
|
|
|
},
|
|
|
position: {
|
|
|
width: '80%',
|
|
|
left: '10%'
|
|
|
}
|
|
|
}
|
|
|
]);
|
|
|
}
|
|
|
if (barcode) {
|
|
|
barcode.setFlash(temp.flash);
|
|
|
}
|
|
|
},
|
|
|
false
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.navigation-box {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
height: 88rpx;
|
|
|
background-color: #ffffff;
|
|
|
width: 100%;
|
|
|
z-index: 100;
|
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 32rpx;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.back_but {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
}
|
|
|
|
|
|
//标题
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
color: #333333;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.right-biao {
|
|
|
width: 56rpx;
|
|
|
height: 18rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
