emis-app/components/tpx-bluetooth/tpx-bluetooth.vue

<template>
	<tpx-layout v-if="showConnectPage">
		<template v-slot:header>
			<view class="blcok-white" style="margin-top: 0;">
				<view >
					<u-row custom-style="gap: 10rpx;">
						<u-button @click="discoveryPrinter">
							{{searchLoading?'搜索中...':'搜索周边设备'}}
							
						</u-button>
						<u-button @click="stopDiscoveryPrinter">停止搜索</u-button>
						<slot name="button"></slot>
					</u-row>
				</view>
				<view class="">
					<view class="pt-10 pb-10">连接信息</view>
					<u-steps activeColor="#969799" :current="curTab" direction="column" dot="true">
						
						<u-steps-item v-for="(item, index) in conInfos">
							<template v-slot:title>
								<view @click="changeTab(index)" :class="`${index == curTab ? 'clr-prm' : 'clr-sub'} pl-20`">{{item.title}}</view>
							</template>
							<template v-slot:desc>
								<view @click="changeTab(index)" class="mt-10 pl-20">{{item.desc}}</view>
							</template>
						</u-steps-item>
					</u-steps>
				</view>
			</view>
		</template>
		
		<template v-slot:body>
			<view class="blcok-white">
				<view v-if="curTab == 0">
					<view class="pb-10">蓝牙设备列表</view>
					<template v-for="(item, index) in devices">
						<view @click="handleAutoSelectAllData(item)"  v-if="item.name.length>0"
							:key="index" :class="`list-item ${item.deviceId == deviceId?'list-item-active':''}`"
						>
							<u-row justify="between">
								<view class="font-weight">{{item.name }}</view>
							</u-row>
							<view>
								<text class="clr-sub">信号强度:</text> {{item.RSSI}}dBm ({{Math.max(100+item.RSSI,0)}}%)
							</view>
							<view>
								<text class="clr-sub">deviceId:</text>{{item.deviceId}}
							</view>
							<view >
								<text class="clr-sub">Service数量:</text> {{item.advertisServiceUUIDs.length || 0}}
							</view>
						</view>
					</template>	
				</view>
				
				<view v-if="curTab == 1">
					<view class="pb-10">服务列表</view>
					<template v-for="(item, index) in serverList" :key="index">
						<view @click="handleSelectService(item)"  
							:class="`list-item ${item.uuid == serviceId?'list-item-active':''}`"
						>
							<view>
								<text class="clr-sub">uuid:</text> {{item.uuid}}
							</view>
						</view>
					</template>	
				</view>
				
				<view v-if="curTab == 2">
					<view class="pb-10">特征值列表</view>
					<template v-for="(item, index) in characteristics" :key="index">
						<view @click="handleSelectChara(item)"  
							:class="`list-item ${item.uuid == characteristicId?'list-item-active':''}`"
						>
							<view>
								<text class="clr-sub">uuid:</text> {{item.uuid}}
							</view>
							
							<template v-if="item.properties">
								<view>
									<text class="clr-sub">write:</text> {{item.properties.write}}
								</view>
								<view>
									<text class="clr-sub">notify:</text> {{item.properties.notify}}
								</view>
								<view>
									<text class="clr-sub">indicate:</text> {{item.properties.indicate}}
								</view>
							</template>
						</view>
					</template>	
				</view>
				<slot name="content"></slot>
			</view>
		</template>
	</tpx-layout>
	
</template> 

<script>
import { showLoading, showToast, hideLoading, uniPromiseApi, promiseTimeout } from "@/common/untool"
import { getSessionBluetoothInfo, setSessionBluetoothInfo } from "@/session"

export default {
	computed: {
		conInfos() {
			let ary = [
				{ title: '蓝牙设备', desc: this.deviceId || '-' },
				{ title: '服务', desc: this.serviceId || '-' },
				{ title: '特征值', desc: this.characteristicId || '-' }
			]
			return ary
		},
	},
	watch: {
		deviceId(val){
			this.updateBlueSessionInfo()
		},
		serviceId(val){
			this.updateBlueSessionInfo()
		},
		characteristicId(val){
			this.updateBlueSessionInfo()
		}
	},
	props:{
		
	},
	data () {
		let { deviceId, serviceId, characteristicId } = getSessionBluetoothInfo()
		return {
			showConnectPage: true,
			curTab: 0,
			searchLoading: false,
			devices: [],
			deviceId,
			serverList: [],
			serviceId,
			characteristics: [],
			characteristicId,
		}
	},
	async mounted () {
		// 初始化蓝牙模块
		await this.openBluetoothAdapter()
		// this.autoConnect()
	},
	unmounted() {
		this.stopDiscoveryPrinter()
		// this.closeBluetoothAdapter()
	},
	methods: { 
		updateBlueSessionInfo() {
			let { deviceId, serviceId, characteristicId } = this
			setSessionBluetoothInfo({ deviceId, serviceId, characteristicId })
		},
		// 自动连接历史蓝牙配置
		async autoConnect() {
			console.log("autoConnect start===========")
			let { characteristicId, serviceId, deviceId } = this
			let conSta = false
			const _this = this
			// 判断是否有历史连接
			if(deviceId) {
				await this.handleAutoSelectAllData({ deviceId })
				conSta = !!_this.characteristicId // 判断是否有选中 characteristicId
			} 
			console.log("=========当前蓝牙连接状态=======", conSta)
			// 连接不成功，打开蓝牙配置页面
			if(!conSta) {
				this.showConnectPage = true
				// this.discoveryPrinter()
			} else {
				this.stopDiscoveryPrinter()
			}
			return conSta
		},
		changeTab(type) {
			this.curTab = type
		},
		async openBluetoothAdapter () {
			var _this = this
			const { res, err } = await uniPromiseApi('openBluetoothAdapter', { })
			if(err) {
				if (err.errCode == 10001) {
					showToast('请打开手机蓝牙')
				} else {
					showToast(err.errMsg)
				}
			}
		},
		// 开始搜寻附近的蓝牙外围设备
		async discoveryPrinter () {
			var _this = this
			_this.devices = []
			_this.searchLoading = true
			_this.curTab = 0
			const { res, err } = await uniPromiseApi('startBluetoothDevicesDiscovery', { })
			if(res) {
				// 打开搜索后，监听设备回调信息
				uni.onBluetoothDeviceFound(devices => {
					console.log("========devices=====", devices)
					let curDvs = devices?.devices?.[0] || {}
					// 过滤已经搜到的设备
					if(curDvs.deviceId && _this.devices.map(t=> t.deviceId).indexOf(curDvs.deviceId) == -1) {
						_this.devices.push(curDvs)
					}
				})
			}
			return { res, err }
		},
		// 停止搜寻附近的蓝牙外围设备
		async stopDiscoveryPrinter () {
			this.searchLoading = false
			return uniPromiseApi('stopBluetoothDevicesDiscovery')
		},
		// 断开蓝牙
		async closeBluetoothAdapter () {
			this.searchLoading = false
			return uniPromiseApi('closeBluetoothAdapter')
		},
		async handleSelectDeviceId (item) {
			this.deviceId = item.deviceId
			this.serviceId = ''
			this.serverList = []
			this.characteristics = []
			this.characteristicId = ''
			//连接蓝牙
			await this.connect()
			if(this.serverList?.length > 0) {
				this.curTab = 1
				this.stopDiscoveryPrinter()
			} else {
				showToast('该设备无服务，请检查配置或换一个设备连接')
			}
		},
		handleSelectService (item) {
			this.serviceId = item.uuid
			this.characteristics = []
			this.characteristicId = ''
			// 获取蓝牙特征值
			setTimeout(async () =>{
				await this.getBLEDeviceCharacteristics()
				if(this.characteristics?.length > 0) {
					this.curTab = 2
				} else {
					showToast('该服务无特征值，请检查配置或换一个服务')
				}
			}, 500);
		},
		handleSelectChara (item) {
			this.characteristicId = item.uuid
		},
		async connect () {
			var _this = this
			console.log("连接蓝牙=====deviceId", _this.deviceId)
			showLoading('正在连接蓝牙')
			let { res, err } =  await uniPromiseApi('createBLEConnection', { deviceId: _this.deviceId })
			hideLoading()
			if(res || err?.code == -1) {
				// code: -1 已连接
				res = res || err
				err = undefined
			}
			if(res) {
				showToast(`蓝牙连接成功`)
				await promiseTimeout(1500)
				// 获取蓝牙设备所有服务(service)。
				await _this.getBLEDeviceServices()
			}
			if(err) {
				showToast(`连接设备失败:${err.errMsg}`)
			}
			return { res, err }
		},
		async getBLEDeviceServices() {
			var _this = this
			let { res, err } = await uniPromiseApi('getBLEDeviceServices', {
				// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
				deviceId: _this.deviceId,
			})
			if(res) {
				_this.serverList = res.services
				console.log('serverId:', _this.serviceId)
			}
			if(err) {
				this.serverList = []
				showToast(`设备服务获取失败:${err.errMsg}`)
			}
			return { res, err }
		},
		async getBLEDeviceCharacteristics () {
			var _this = this
			let { res, err } = await uniPromiseApi('getBLEDeviceCharacteristics', {
				// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
				deviceId: _this.deviceId,
				// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
				serviceId:_this.serviceId,
			})
			if(res) {
				_this.characteristics = res.characteristics
			}
			return { res, err }
		},
		// 根据选择的deviceId自动匹配 serviceId, characteristicId
		async handleAutoSelectAllData(item) {
			console.log("handleAutoSelectAllData :item======", item)
			const _this = this
			await this.handleSelectDeviceId(item)
			
			if(this.serverList?.length > 0) {
				for(let i=0; i<_this.serverList?.length; i++) {
					let _serviceId = _this.serverList[i].uuid
					let charPms = await uniPromiseApi('getBLEDeviceCharacteristics', {
						deviceId: _this.deviceId,
						serviceId: _serviceId,
					})
					let { res, err } = charPms
					if(res) {
						let charItem = res.characteristics.filter(t=> {
							let { notify, indicate, write } = t.properties || {}
							// return write
							return (notify || indicate) && write
						})[0]
						if(charItem) {
							_this.serviceId = _serviceId
							_this.characteristicId = charItem.uuid
							break
						}
					}
				}
			}
		},
		getConData() { 
			return { deviceId: this.deviceId, serviceId: this.serviceId, characteristicId: this.characteristicId }
		}
	}
}
</script>

<style scoped lang="scss">
	.list-item {
		font-size: 26rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid #ddd;
		padding: 20rpx;
		background-color: #F6F6F6;
	}
	.list-item-active{
		border-color: #B12D29;
		&:last-child{
			margin-bottom: 0;
		}
	}
</style>