SmartStorage/pages/QRIn/QRIn.vue

387 lines
9.9 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="ipt" style="width: 90%; margin: 80rpx auto; margin-bottom: 20rpx;">
<uni-easyinput v-model="iptVal" placeholder="请输入车牌号"></uni-easyinput>
</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: '',
manageType: '',
taskId: '',
createBy: '',
scanType: ''
};
},
onLoad(params) {
console.log(params);
const {
typeId,
num,
parentId,
manageType,
taskId,
createBy,
scanType
} = params
this.typeId = typeId
this.num = num
this.parentId = parentId
this.manageType = manageType
this.taskId = taskId
this.createBy = createBy
this.scanType = scanType
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/scanReceive/scanReceive?typeId=${this.typeId}&num=${this.num}&parentId=${this.parentId}&carCode=${this.iptVal}&code=${fixedRes}&manageType=${this.manageType}&taskId=${this.taskId}&createBy=${this.createBy}&scanType=${this.scanType}`,
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: '12%',
left: '0',
width: '100vw',
height: '88%',
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>