396 lines
8.0 KiB
Vue
396 lines
8.0 KiB
Vue
<template>
|
|
<view class="maincontent contentBg">
|
|
<uni-nav-bar class="nvbar" leftIcon="left" @clickLeft="navigatorBack">
|
|
<view slot="left">
|
|
<uni-icons type="back" size="23" color="#FFFFFF"></uni-icons>
|
|
</view>
|
|
<view slot="default" class="center uninavebartext">
|
|
{{Status.navbar.title}}
|
|
</view>
|
|
<view slot="right">
|
|
<view class="navbarRight center">
|
|
<view class="imgContent" @click.stop="handleRightClick(item,index)"
|
|
v-for="item,index in Status.navbar.icons">
|
|
<image class="img" :src="item.src" mode="aspectFit"></image>
|
|
<view class="baber" v-if="item.math">{{item.math>9?'9+':item.math}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</uni-nav-bar>
|
|
|
|
<view class="scanPanel center">
|
|
<image @click.stop="scan" class="img" src="/static/images/common/scan.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="txt">
|
|
对准二维码进行扫描
|
|
</view>
|
|
|
|
<view class="form">
|
|
|
|
<input class="formInput" type="text" v-model="formData.inputCode" placeholder="输入二维码内容"
|
|
placeholder-class="placeholder-class" cursor-spacing="30" cursor-color="#BBE600" />
|
|
|
|
<view class="btnOK" :class="{active:formData.inputCode}" @click.stop="addCode">确定</view>
|
|
</view>
|
|
|
|
|
|
<MsgBox ref="msgPop" />
|
|
|
|
<global-loading ref="loading" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/utils/request.js';
|
|
import {
|
|
showLoading,
|
|
hideLoading,
|
|
updateLoading
|
|
} from '@/utils/loading.js';
|
|
|
|
import {
|
|
MsgSuccess,
|
|
MsgError,
|
|
MsgClose,
|
|
MsgWarning,
|
|
showPop
|
|
} from '@/utils/MsgPops.js'
|
|
import Common from '@/utils/Common.js';
|
|
var eventChannel = null;
|
|
var these = null;
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
Status: {
|
|
navbar: {
|
|
icons: [{
|
|
src: '/static/images/common/scane.png',
|
|
callback: this.scan
|
|
}],
|
|
title: '扫码'
|
|
|
|
},
|
|
},
|
|
formData: {
|
|
inputCode: ''
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
these = this;
|
|
setTimeout(this.scan, 500)
|
|
|
|
},
|
|
methods: {
|
|
addCode() {
|
|
debugger;
|
|
if (!this.formData.inputCode) {
|
|
MsgWarning("请输入条码","确定", this);
|
|
return;
|
|
}
|
|
|
|
let macStr = this.formData.inputCode;
|
|
|
|
if (macStr.indexOf(':') == -1) {
|
|
macStr = macStr.replace(/(.{2})/g, '$1:').slice(0, -1);
|
|
}
|
|
//通过mac地址查询
|
|
let p1 = new Promise((resolve, reject) => {
|
|
|
|
request({
|
|
url: '/app/device/getDeviceInfoByDeviceMac',
|
|
method: 'GET',
|
|
data: {
|
|
deviceMac: macStr
|
|
}
|
|
}).then(res => {
|
|
|
|
console.log("获取设备信息", res);
|
|
if (res && res.code == 200) {
|
|
console.log("res=", res);
|
|
let data = res.data;
|
|
this.serverDevice = data;
|
|
if (data && data.id) {
|
|
resolve(data);
|
|
return;
|
|
}
|
|
|
|
}
|
|
reject(null);
|
|
}).catch(() => {
|
|
reject(null);
|
|
});
|
|
});
|
|
|
|
p1.then(dev => {
|
|
//蓝牙产品
|
|
this.qrCodeResult(macStr, false, 'ble');
|
|
}).catch(() => {
|
|
this.qrCodeResult(this.formData.inputCode, false, 'imei');
|
|
})
|
|
|
|
},
|
|
|
|
|
|
handleRightClick(item, s) {
|
|
if (item && item.callback) {
|
|
item.callback(item, s);
|
|
} else {
|
|
uni.showModal({
|
|
content: '敬请期待'
|
|
})
|
|
|
|
}
|
|
},
|
|
navigatorBack() {
|
|
uni.navigateBack();
|
|
},
|
|
qrCodeResult(cleanedResult, isConvert, type) { //条码文本，是否尝试解析，已知类型
|
|
|
|
|
|
let url = `/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(cleanedResult)}`;
|
|
try {
|
|
if (isConvert) {
|
|
let json = JSON.parse(cleanedResult);
|
|
if ('imei' in json) {
|
|
url =
|
|
`/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(json.imei)}`;
|
|
} else if ('blue' in json || 'ble' in json) {
|
|
if (json.ble) {
|
|
json.blue = json.ble;
|
|
}
|
|
if (json.blue) {
|
|
if (!json.blue.includes(':')) {
|
|
json.blue = json.blue.replace(
|
|
/(.{2})/g, '$1:')
|
|
.slice(0, -1)
|
|
}
|
|
}
|
|
|
|
url = `/pages/common/addBLE/LinkBle?mac=${encodeURIComponent(json.blue)}`;
|
|
}
|
|
} else {
|
|
if (type === 'imei') {
|
|
url = `/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(cleanedResult)}`;
|
|
} else {
|
|
url = `/pages/common/addBLE/LinkBle?mac=${encodeURIComponent(cleanedResult)}`;
|
|
}
|
|
}
|
|
|
|
} catch (ex) {
|
|
console.error("解析条码出现异常,", ex);
|
|
}
|
|
// 跳转并传递扫描结果
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
},
|
|
scan(item, s) {
|
|
debugger;
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
if (systemInfo.uniPlatform == 'web') {
|
|
MsgError("Web平台不支持此功能,请手工录入条码", "确定", these);
|
|
return;
|
|
}
|
|
|
|
uni.scanCode({
|
|
autoDecodeCharset: true,
|
|
autoZoom: true,
|
|
barCodeInput: true,
|
|
success: (res) => {
|
|
console.log('条码内容：', res);
|
|
let cleanedResult = res.result.trim();
|
|
this.qrCodeResult(cleanedResult, true, null);
|
|
},
|
|
fail: (err) => {
|
|
this.showMsg("扫码失败:" + err.errMsg, MsgType.error);
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scanPanel {
|
|
width: 100%;
|
|
height: 600rpx;
|
|
}
|
|
|
|
.scanPanel .img {
|
|
width: 350rpx;
|
|
height: 350rpx;
|
|
}
|
|
|
|
.txt {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
letter-spacing: 0px;
|
|
|
|
}
|
|
|
|
.form {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.formInput {
|
|
width: 90%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
background: rgba(42, 42, 42, 1);
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
text-indent: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
/deep/.placeholder-class {
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
}
|
|
|
|
.btnOK {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-family: 'PingFang SC';
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
letter-spacing: 5rpx;
|
|
}
|
|
|
|
.btnOK.active {
|
|
color: #AED600;
|
|
}
|
|
|
|
.navbarRight {
|
|
width: 40px;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.navbarRight .imgContent {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.navbarRight .imgContent:first-child {
|
|
|
|
width: 38rpx !important;
|
|
height: 38rpx !important;
|
|
margin-top: -2rpx;
|
|
}
|
|
|
|
.navbarRight .imgContent .baber {
|
|
position: absolute;
|
|
z-index: 100;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
right: -15rpx;
|
|
top: -15rpx;
|
|
border-radius: 50%;
|
|
background: #f12828;
|
|
color: #ffffff;
|
|
font-family: 'PingFang SC';
|
|
font-style: Regular;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
.navbarRight .imgContent .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.navbarRight .imgContent .img:last-child {
|
|
padding: 1rpx;
|
|
}
|
|
|
|
.nvbar {
|
|
top: 0px;
|
|
}
|
|
|
|
/deep/ .uni-navbar--fixed {
|
|
top: 0px;
|
|
}
|
|
|
|
.uninavebartext {
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
}
|
|
|
|
.footer .row {
|
|
width: 100%;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.inputContent {
|
|
width: calc(100% - 110rpx);
|
|
}
|
|
|
|
.footer .btn {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
background-color: #09a0f7;
|
|
color: #fff;
|
|
border-radius: 16rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
</style> |