SmartStorage/pages/qrcodeBinding/qrcodeBinding.vue

385 lines
9.8 KiB
Vue
Raw Permalink Normal View History

2024-03-13 17:55:34 +08:00
<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',
2024-04-22 13:18:44 +08:00
width: '100vw',
2024-03-13 17:55:34 +08:00
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>