emis-sapp/components/tpx-bluetooth-native/tpx-bluetooth-native.vue

<template>
	<tpx-layout>
		<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="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">deviceId:</text>{{item.deviceId}}
							</view>
						</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"
import bluetoothTool from './nativeBlueTooth'

export default {
	computed: {
		conInfos() {
			let ary = [
				{ title: '蓝牙设备', desc: this.deviceId || '-' },
			]
			return ary
		},
	},
	watch: {
		deviceId(val){
			this.updateBlueSessionInfo()
		},
	},
	props:{
		
	},
	data () {
		let { deviceId } = getSessionBluetoothInfo()
		return {
			canvas_width: 240,
			canvas_height: 240,
			curTab: 0,
			searchLoading: false,
			isStateOn: false,
			devices: [],
			deviceId,
		}
	},
	async mounted () {
		// 初始化蓝牙模块
		await this.openBluetoothAdapter()
		// this.autoConnect()
	},
	unmounted() {
		this.stopDiscoveryPrinter()
		// this.closeBluetoothAdapter()
	},
	methods: { 
		updateBlueSessionInfo() {
			let { deviceId } = this
			setSessionBluetoothInfo({ deviceId })
		},
		// 自动连接历史蓝牙配置
		async autoConnect() {
			console.log("autoConnect start===========")
			let { deviceId, isStateOn } = this
			let conSta = false
			const _this = this
			// 判断是否有历史连接
			if(deviceId && isStateOn) {
				conSta = await this.connect(deviceId)
			} 
			console.log("=========当前蓝牙连接状态=======", conSta)
			// 连接不成功，打开蓝牙配置页面
			if(!conSta) {
				this.discoveryPrinter()
			}
			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)
				}
			}
			let isStateOn = false
			//#ifdef APP-PLUS
				await new Promise((resolve)=> {
					// 蓝牙
					bluetoothTool.init({
						listenBTStatusCallback: (state)=> {
							resolve(state == 'STATE_ON')
						},
						discoveryDeviceCallback: _this.onDiscoverDevice.bind(_this),
						discoveryFinishedCallback: function() {
							_this.msg = "搜索完成";
						},
						readDataCallback: function(dataByteArr) {
							// 读取蓝牙返回的数据
							/* if(_this.receiveDataArr.length >= 200) {
								_this.receiveDataArr = [];
							}
							_this.receiveDataArr.push.apply(_this.receiveDataArr, dataByteArr); */
						},
						connExceptionCallback: function(e) {
							_this.msg = "设备连接失败";
						}
					});
				})
			//#endif
			this.isStateOn = isStateOn
		},
		onDiscoverDevice(item = {}){
			const _this = this
			let { address: deviceId, name } = item
			console.log("监听寻找到新设备的事件---------------", item)
			if(
				name && deviceId
				&& (deviceId && _this.devices.map(t=> t.deviceId).indexOf(deviceId) == -1)
			) {			
				_this.devices.push({
					name,
					deviceId
				})
			}
		},
		// 开始搜寻附近的蓝牙外围设备
		async discoveryPrinter () {
			var _this = this
			_this.devices = []
			_this.searchLoading = true
			bluetoothTool.discoveryNewDevice();
			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
			// TODO
			//连接蓝牙
			let bl = await this.connect(this.deviceId)
		},
		async connect (deviceId) {
			var _this = this
			showLoading('正在连接设备')
			console.log("连接蓝牙 设备=====", deviceId)
			let bl = await new Promise((resolve)=> {
				bluetoothTool.connDevice(deviceId,(result) => {
					resolve(!!result)
				})
			})
			hideLoading()
			showToast(bl ? '连接成功！':'连接失败...')
			if(bl) {
				this.stopDiscoveryPrinter()
			}
			return bl
		},
		getConData() { 
			return { deviceId: this.deviceId, }
		},
		sendByteData(data) {
			let bl = bluetoothTool.sendByteData(data)
			return bl
		}
	}
}
</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>