Commit c5768522 authored by 张海景's avatar 张海景

update:修改上下机和投料、反冲料加上半屏扫码功能

parent c8a659d8
<template>
<view>
<!-- 扫码页面 -->
<view style="position:fixed;width: 500px; height: 100%; bottom: 0;"></view>
</view>
</template>
<script>
export default {
name: 'AppScan',
data() {
return {
barcode: null,
flash: false,
tip: '将二维码放入框中,即可自动扫描',
}
},
onShow() {
// 页面展示时,重新启动扫描检测
if (this.barcode) {
console.log('onShow')
// this.barcode.start()
}
},
async mounted() {
try{
// plus.navigator.setFullscreen(true); //全屏
// 创建相机
let currentWebview = this.$mp.page.$getAppWebview();
this.createBarcode(currentWebview)
// this.createTipInfoView(currentWebview)
this.createFlashBarView(currentWebview)
}catch(error){
console.log(error)
}
},
methods: {
/**
* 创建二维码
* @param {Object} currentWebview
*/
createBarcode(currentWebview) {
if (!this.barcode) {
//条码类型常量数组,默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型(注意:设置支持的条码类型越多,扫描识别速度可能将会降低)
this.barcode = plus.barcode.create('barcode', [plus.barcode.QR,plus.barcode.CODABAR,plus.barcode.UPCA,plus.barcode.CODE39,plus.barcode.CODE93,plus.barcode.CODE128], {
top: '38px',
left: '0px',
height: '87%',
width: '500px',
position: 'absolute',
background: '#808080',
frameColor: '#fff',
scanbarColor: '#FFCC33',
filters:[0,7,5,8,9,10]
});
this.barcode.onmarked = this.onmarked;
this.barcode.setFlash(this.flash);
//此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理
//注意扫码区域需为正方形,否则影响扫码识别率
currentWebview.append(this.barcode);
}
console.log('createBarcode')
this.barcode.start()
},
closed() {
this.barcode.close()
},
/**
* 创建提示信息
* @param {Object} currentWebview
*/
createTipInfoView(currentWebview) {
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: '90px',
left: '10%',
width: '80%',
height: 'wrap_content'
}
}]);
currentWebview.append(content);
},
// 创建 开关灯按钮
createFlashBarView(currentWebview) {
const openImg = this.crtFlashImg('static/yellow-scanBar.png')
const closeImg = this.crtFlashImg('static/scanBar.png')
const scanBarVew = new plus.nativeObj.View('scanBarVew', {
top: '70%',
left: '15%',
height: '16%',
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: '12px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}]
},
// 扫码成功回调
onmarked(type, result) {
this.barcode.cancel()
this.$emit('getCode',result)
// 3秒后再次执行扫码
setTimeout(()=>{
console.log('onmarked')
this.barcode.start()
},2000)
}
},
}
</script>
<style scoped lang="scss"></style>
import permision from "./lib/permisionCameraAuth.js";
export default {
data() {
return {
isIos: false,
}
},
onLoad() {
// #ifdef APP-PLUS
this.isIos = (plus.os.name == "iOS")
// #endif
},
methods: {
// 查询相机权限
async getCameraAuth() {
let bol = false
if (this.isIos) {
bol = permision.judgeIosPermissionCamera()
} else {
var result = await permision.requestAndroidPermission('android.permission.CAMERA')
if (result == 1) {
bol = true
}
}
return bol
},
// app拒绝授权相机
refusedCameraAuth() {
uni.showModal({
title: "",
content: "您已禁止授权应用相机权限,如需使用请在设置中授权",
cancelText: "取消",
confirmText: "前往授权",
confirmColor: "#02A8E6",
showCancel: true,
success: (res) => {
if (res.confirm) {
this.openCameraAuth()
}
},
});
},
// app去授权
openCameraAuth() {
permision.gotoAppPermissionSetting()
},
},
}
\ No newline at end of file
.wx-scan-content {
height: 270px;
position: relative;
.cover-view-box {
width: 650rpx;
height: 150px;
position: relative;
z-index: 5;
margin: 100rpx auto 60rpx;
// 四个角边框
.scan-border {
background-color: #fff;
position: absolute;
}
.scan-verLine {
width: 3px;
height: 13px;
}
.scan-horLine {
width: 13px;
height: 3px;
}
// 左上角
.scan-left-top {
left: 0;
top: 0;
}
// 左下角
.scan-left-bottom {
left: 0;
bottom: 0;
}
// 右上角
.scan-right-top {
right: 0;
top: 0;
}
// 右下角
.scan-right-bottom {
right: 0;
bottom: 0;
}
// 相机中上下移动的线条
.scan-animation {
width: 240px;
height: 2px;
margin: 0 auto;
background-color: #fff;
border-radius: 50%;
}
}
.scan-cameraCon {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
.scan-camera {
width: 100% !important;
height: 100% !important;
position: relative;
}
}
}
\ No newline at end of file
/**
* 本模块封装了Android、iOS的相机权限判断、打开应用权限设置界面
*/
var isIos
// #ifdef APP-PLUS
isIos = (plus.os.name == "iOS")
// #endif
// Android权限查询
function requestAndroidPermission(permissionID) {
return new Promise((resolve, reject) => {
plus.android.requestPermissions(
[permissionID], // 理论上支持多个权限同时查询,但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
function(resultObj) {
var result = 0;
for (var i = 0; i < resultObj.granted.length; i++) {
var grantedPermission = resultObj.granted[i];
console.log('已获取的权限:' + grantedPermission);
result = 1
}
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
var deniedPresentPermission = resultObj.deniedPresent[i];
console.log('拒绝本次申请的权限:' + deniedPresentPermission);
result = 0
}
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
var deniedAlwaysPermission = resultObj.deniedAlways[i];
console.log('永久拒绝申请的权限:' + deniedAlwaysPermission);
result = -1
}
resolve(result);
},
function(error) {
console.log('申请权限错误:' + error.code + " = " + error.message);
resolve({
code: error.code,
message: error.message
});
}
);
});
}
// ios判断相机权限是否开启
function judgeIosPermissionCamera() {
var result = false;
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
console.log("authStatus:" + authStatus);
if (authStatus == 3) {
result = true;
console.log("相机权限已经开启");
} else {
console.log("相机权限没有开启");
}
plus.ios.deleteObject(AVCaptureDevice);
return result;
}
// 跳转到应用的权限页面
function gotoAppPermissionSetting() {
if (isIos) {
var UIApplication = plus.ios.import("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import("NSURL");
var setting2 = NSURL2.URLWithString("app-settings:");
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
// console.log(plus.device.vendor);
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass("android.provider.Settings");
var Uri = plus.android.importClass("android.net.Uri");
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
module.exports = {
requestAndroidPermission: requestAndroidPermission,
judgeIosPermissionCamera: judgeIosPermissionCamera,
gotoAppPermissionSetting: gotoAppPermissionSetting,
}
\ No newline at end of file
......@@ -38,28 +38,28 @@ export default {
{
name: 'toolCode',
label: '刀模版sn码',
width: 130
width: 80
},
{
name: 'toolName',
label: '刀模版名称',
width: 130
width: 80
},
{
name: 'itemName',
label: '物料名称',
width: 130
width: 80
},
{
name: 'upDate',
label: '上机时间',
width: 140
width: 130
},
{
name: 'downDate',
label: '下机时间',
width: 140
width: 130
}
],
};
......@@ -127,17 +127,18 @@ export default {
}
},
handleScancode(type) {
uni.scanCode({
success: (res) => {
console.log(res, 'res7778888');
this.$u.api.dModel.tmToolMachinesScancode({ type, sn: res.result }).then((res) => {
// console.log(res, 'res333')
if (res.code === 200) {
this.$emit('action');
}
});
}
});
this.$emit('scan', type)
// uni.scanCode({
// success: (res) => {
// console.log(res, 'res7778888');
// this.$u.api.dModel.tmToolMachinesScancode({ type, sn: res.result }).then((res) => {
// // console.log(res, 'res333')
// if (res.code === 200) {
// this.$emit('action');
// }
// });
// }
// });
},
toggleAllSelection(checked, arr) {
this.tableSelectData = arr;
......
This diff is collapsed.
<template>
<view class="page">
<view class="title">扫码结果</view>
<view class="result_list">
<view v-for="(item, index) in list" :key="index" class="result_li">
{{ item }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
webView: null,
barcode: null,
list: []
};
},
mounted() {
setTimeout(() => {
this.createBarcode();
}, 10000);
},
methods: {
// 扫码成功回调
onmarked(type, result) {
// 【步骤4】将扫码结果添加到 list 里
console.log(result);
this.list.push(result);
// 【步骤5】1秒后再重新开启扫码
setTimeout(() => {
this.barcode.start();
}, 1000);
},
// 创建窗口和扫码控件
createBarcode() {
// 【步骤1】判断有没有创建过 webview 容器,如果没有就执行创建操作
if (!this.webView) {
this.webView = plus.webview.open('', 'barCodeBox', {
top: '60px',
width: '100%',
height: '400px'
});
}
// 【步骤2】判断有没有创建过 扫码框,如果没有就执行创建操作
if (!this.barcode) {
this.barcode = plus.barcode.create(
'barcode',
[
plus.barcode.QR,
plus.barcode.EAN13,
plus.barcode.EAN8,
plus.barcode.AZTEC,
plus.barcode.DATAMATRIX,
plus.barcode.UPCA,
plus.barcode.UPCE,
plus.barcode.CODABAR,
plus.barcode.CODE39,
plus.barcode.CODE93,
plus.barcode.CODE128,
plus.barcode.ITF,
plus.barcode.PDF417
], // 只扫二维码
{
top: '0px',
left: '0px',
width: '100%',
height: '400px',
position: 'static',
scanbarColor: '#f1c01f',
frameColor: '#c0ff01'
}
);
this.barcode.onmarked = this.onmarked; // 扫码结果回调函数
// 【步骤3】将扫码框添加到 webview 里
plus.webview.getWebviewById('barCodeBox').append(this.barcode);
}
this.barcode.start(); // 开始扫码
}
}
};
</script>
<style>
.page {
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 200px 20rpx 0;
}
.title {
font-size: 50rpx;
color: #333;
}
.result_list {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding-top: 20rpx;
}
.result_li {
box-sizing: border-box;
margin-bottom: 20rpx;
padding: 10rpx 20rpx;
border: 1px solid #7298c8;
border-radius: 10rpx;
font-size: 40rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment