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

<template>
	<tpx-layout>
		<template v-slot:header>
			<view class="blcok-white">
				<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="handleSelectDeviceId(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 }	from "@/common/untool"

export default {
	computed: {
		conInfos() {
			let ary = [
				{ title: '蓝牙设备', desc: this.deviceId || '-' },
				{ title: '服务', desc: this.serviceId || '-' },
				{ title: '特征值', desc: this.characteristicId || '-' }
			]
			return ary
		},
	},
	watch: {
		deviceId(val){
			this.value.deviceId = val
			this.$emit('update:value', this.value)
		},
		serviceId(val){
			this.value.serviceId = val
			this.$emit('update:value', this.value)
		},
		characteristicId(val){
			this.value.characteristicId = val
			this.$emit('update:value', this.value)
		}
	},
	props:{
		value: {
			default () {
				return {}
			}
		},
	},
	data () {
		return {
			canvasId: 'shareCanvas',
			canvas_width: 240,
			canvas_height: 240,
			curTab: 0,
			searchLoading: false,
			devices: [],
			deviceId: this.value?.deviceId,
			serverList: [],
			serviceId: this.value?.deviceId,
			characteristics: [],
			characteristicId: this.value?.deviceId,
		}
	},
	mounted () {
		// 初始化蓝牙模块
		this.openBluetoothAdapter()
		// 自动搜索设备
		this.discoveryPrinter()
	},
	unmounted() {
		this.stopDiscoveryPrinter()
	},
	methods: {
		changeTab(type) {
			this.curTab = type
		},
		openBluetoothAdapter () {
			var _this = this
			uni?.openBluetoothAdapter?.({
				complete (e) {
					console.log(e);
					if (!e.errCode) {
						console.log('初始化完成')
					} else if (e.errCode == 10001) {
						showToast('请打开手机蓝牙')
					} else {
						console.log('openBluetoothAdapter：error=========', e.errMsg)
						showToast(e.errMsg)
					}
				}
			})
		},
		// 开始搜寻附近的蓝牙外围设备
		discoveryPrinter () {
			var _this = this
			_this.devices = []
			_this.searchLoading = true
			_this.curTab = 0
			uni?.startBluetoothDevicesDiscovery?.({
				complete (e) {
					console.log(e)
					if (e.errMsg == "startBluetoothDevicesDiscovery:ok") {
						// ArrayBuffer转16进度字符串示例
						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)
							}
						})
					}
				}
			})
		},
		// 停止搜寻附近的蓝牙外围设备
		async stopDiscoveryPrinter () {
			this.searchLoading = false
			uni.stopBluetoothDevicesDiscovery()
		},
		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
		},
		connect () {
			var _this = this
			console.log("连接蓝牙=====deviceId", _this.deviceId)
			showLoading('正在连接蓝牙')
			return new Promise((resolve)=> {
				uni.createBLEConnection({
					deviceId: _this.deviceId,
					complete (e) {
						hideLoading()
						console.log("蓝牙连接回调=====", e)
						if (e.errMsg == "createBLEConnection:ok") {
							showToast(`蓝牙连接成功`)
							//获取蓝牙设备所有服务(service)。
							setTimeout(async()=> {
								await _this.getBLEDeviceServices()
								resolve()
							}, 2000)
						} else {
							resolve()
							showToast(`连接设备失败:${e.errMsg}`)
						}
					}
				})
			})
		},
		getBLEDeviceServices(){
			var _this = this
			return new Promise((resolve)=> {
				showLoading('正在搜索服务')
				uni.getBLEDeviceServices({
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: _this.deviceId,
					success:(res)=>{
						hideLoading()
						resolve()
						console.log('device services:', res)
						_this.serverList = res.services
						// _this.serviceId = res.services[0].uuid;
						console.log('serverId:', _this.serviceId)
					},
					fail:(e) =>{
						hideLoading()
						resolve()
						this.serverList = []
						showToast(`设备服务获取失败:${e.errMsg}`)
						console.log("getBLEDeviceServices - fail==============", e)
					}
				})
			})
		},
		getBLEDeviceCharacteristics () {
			var _this = this
			return new Promise((resolve)=> {
				showLoading('正在搜索特征值')
				uni.getBLEDeviceCharacteristics({
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: _this.deviceId,
					// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
					serviceId:_this.serviceId,
					success:(res)=>{
						hideLoading()
						console.log('getBLEDeviceCharacteristics', res)
						_this.characteristics = res.characteristics
						resolve()
						// _this.characteristicId = res.characteristics[0].uuid
					},
					fail:(res)=>{
						hideLoading()
						resolve()
						console.log(res)
					}
				})
			})
		},
	}
}
</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>