385 lines
9.8 KiB
Vue
385 lines
9.8 KiB
Vue
<template>
|
||
<view>
|
||
<!-- <view class="ipt" style="width: 90%; margin: 80rpx auto; margin-bottom: 20rpx;">
|
||
<uni-easyinput v-model="iptVal" placeholder="请输入车牌号"></uni-easyinput>
|
||
</view> -->
|
||
<view
|
||
class="tit"
|
||
style="
|
||
width: 100%;
|
||
height: 10%;
|
||
box-sizing: border-box;
|
||
padding-top: 10%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
letter-spacing: 2px;
|
||
"
|
||
>
|
||
二维码绑定
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
var barcode = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
iptVal: '',
|
||
name: '将二维码/条码放入框内，即可自动扫描', //要在扫码界面自定义的内容
|
||
tip: '我的二维码',
|
||
flash: false, //是否打开摄像头
|
||
bottomVisible: 1,// 1展示底部临时箱装箱，0不展示
|
||
boxTypeShow: '临时箱',
|
||
currentWebview: '',
|
||
code: '', // 箱码
|
||
type: '' ,// 箱子类型
|
||
typeId: '',
|
||
num: '',
|
||
parentId: ''
|
||
};
|
||
},
|
||
onLoad(params) {
|
||
this.typeId = params.typeId
|
||
this.num = params.num
|
||
this.parentId = params.parentId
|
||
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];
|
||
console.log(page);
|
||
// plus.navigator.setFullscreen(true);
|
||
let currentWebview = page.$getAppWebview();
|
||
this.currentWebview = currentWebview
|
||
this.createBarcode(currentWebview); //创建二维码窗口
|
||
this.createView(currentWebview); //创建操作按钮及tips界面
|
||
// #endif
|
||
},
|
||
// 扫码成功回调
|
||
async onmarked(type, result) {
|
||
let that = this
|
||
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;
|
||
}
|
||
const boxType = this.boxTypeShow === '标准箱' ? 2 : 1
|
||
console.log('result', this.iptVal, result);
|
||
const fixedRes = result.split('=')[1]
|
||
/* if (this.iptVal == '') {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入车牌号！',
|
||
success: () => {
|
||
barcode.close();
|
||
that.createBarcode(that.currentWebview)
|
||
}
|
||
})
|
||
} else { */
|
||
uni.navigateTo({
|
||
url: `/pages/qrcodeBindPage/qrcodeBindPage?code=${fixedRes}`,
|
||
success: () => {
|
||
that.iptVal = ''
|
||
barcode.close();
|
||
that.createBarcode(that.currentWebview)
|
||
}
|
||
})
|
||
// }
|
||
/* if (this.bottomVisible == 1) {
|
||
// 成功操作
|
||
uni.redirectTo({
|
||
url: `/pages/encasement/index?code=${result}&type=${boxType}`
|
||
});
|
||
} else {
|
||
const { code, type } = this
|
||
try {
|
||
await supplierEncasement({ purchaseSubCode: result, code, type })
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
} 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: '10%',
|
||
left: '0',
|
||
width: '100vw',
|
||
height: '90%',
|
||
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.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> |