APP/pages/common/addBLE/LinkBle.vue

<template>
	<view class="content">
		<view class="deviceDetail">
			<view class="imgContent">
				<image src="/static/images/BLEAdd/addBleDevice.png" class="titleIco" mode="aspectFit">
				</image>
			</view>
			<view class="deviceName">
				设备名:{{device.deviceName}}
			</view>
			<view class="deviceId">
				ID:{{device.deviceId}}
			</view>
			<view class="bound" v-bind:class="boundStatu">
				{{Statu.boundRemark}}
			</view>
		</view>
		<view class="btnLink" @click="Link()">
			连接
		</view>


	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import bleTool from '@/utils/BleHelper.js'
	var these = null;
	var eventChannel = null;
	var ble=null;
	export default {
		data() {
			return {
				Statu: {
					bound: null
				},
				device: {
					"deviceId": "",
					"name": "",
					"deviceName": "",
					"RSSI": -37,
					"localName": "",
					"advertisServiceUUIDs": [

					],
					"linkStatu": false,
					"macAddress": ""
				}
			}
		},
		computed: {
			boundStatu: function() {
				if (this.Statu.bound === null) {
					return "displayNone"
				}
				if (this.Statu.bound) {
					return "green"
				} else {
					return "red";
				}
			}
		},
		onLoad(option) {
			these = this;
			ble=bleTool.getBleTool();
			eventChannel = this.getOpenerEventChannel();
			eventChannel.on('LinkItem', function(data) {
				let f=ble.data.LinkedList.find((v)=>{
					return v.deviceId=data.deviceId;
				});
				if(f){
					these.device = f;
					console.log("获取到设备",f);
					these.initDevice();
				}else{
					console.log("未获取到设备");
				}
			})
		},
		methods: {
			initDevice: function() {
				request({
					url: 'app/device/getDeviceInfoByDeviceMac',
					method: 'GET',
					data: {						
						deviceMac: these.device.macAddress
					}
				}).then(res=>{
					console.log("获取设备信息",res);
				}).catch((ex)=>{
					console.log("获取设备出现异常:",ex);
				});
			},
			Link() {
				// 调用绑定设备接口
				
				let f=ble.data.LinkedList.find((v)=>{
					return v.deviceId=these.device.deviceId;
				});
				if(!f){
					these.Statu.bound = false;
					these.Statu.boundRemark = "蓝牙连接不成功";					
					return;
				}
				if(!f.macAddress){
					these.Statu.bound = false;
					these.Statu.boundRemark = "获取设备Mac地址异常";
					return;
				}
				these.Statu.bound = null;
				these.Statu.boundRemark = "";
				uni.showLoading({
					mask: true,
					title: "连接中..."
				})
				let promise = request({
					url: '/app/device/bind',
					method: 'POST',
					data: {
						deviceImei: '',
						deviceMac: these.device.macAddress,
						communicationMode: '1', //0是4g,1是蓝牙
					}
				});
				promise.then((res) => {
					console.log("1111" + JSON.stringify(res));
					if (res.code == 200) {					
						these.Statu.bound = true;
						these.Statu.boundRemark = "设备绑定成功!";
						uni.$emit("refreshDeviceList");
						setTimeout(()=>{
						uni.switchTab({
							url:"/pages/common/index/index"
						});	
						},500);						
					} else {
						these.Statu.bound = false;
						these.Statu.boundRemark = res.msg;
					}
				}).catch((ex) => {
					these.Statu.bound = false;
					these.Statu.boundRemark = '出现了未知的异常,操作失败';
				}).finally(() => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style>
	.content {
		background-color: #1d1d1d;
		color: #ffffffde;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		min-height: 100vh;
		height: auto;
		font-family: "PingFang SC";
	}

	.deviceDetail {
		margin: 200rpx auto;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.imgContent,
	.titleIco {
		width: 120rpx;
		height: 120rpx;
	}

	.deviceId {
		color: rgba(255, 255, 255, 0.87);
		font-size: 32rpx;

		line-height: 44rpx;
		letter-spacing: 0.14rpx;
		margin-top: 5rpx;
	}

	.btnLink {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		width: calc(100% - 60rpx);
		border-radius: 91px;
		height: 90rpx;
		background: rgba(187, 230, 0, 1);
		color: rgba(35, 35, 35, 1);


		font-size: 32rpx;
		line-height: 90rpx;
		letter-spacing: 12rpx;
		text-align: center;
	}

	.bound,
	.deviceName {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		letter-spacing: 0.14rpx;
		margin-top: 5rpx;
	}

	.displayNone {
		display: none !important;
	}

	.green {
		color: rgba(187, 230, 0, 1);
	}

	.red {
		color: rgba(245, 80, 80, 1);
	}
</style>