APP/pages/common/addScan/ScanEquip.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;
						
							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>