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

<template>
	<tpx-layout>
		<template v-slot:header>
			<view class="blcok-white" style="margin-top: 0;padding-top: 0;padding-bottom: 0;">
				<view >
					<u-row custom-style="gap: 15rpx;">
						<u-button @click="discoveryPrinter">
							{{searchLoading?'搜索中...':'搜索设备'}}
							
						</u-button>
						<u-button @click="stopDiscoveryPrinter">停止搜索</u-button>
						<slot name="button"></slot>
					</u-row>
				</view>
				<view class="blcok-grey-sm">
					<u-row justify="between">
						<view>
							<text class="clr-sub pr-10">打印设备</text>
							<text class="clr-prm">{{deviceName || '-'}}</text>
						</view>
						<view class="clr-prm">{{isStateOn?'已连接':'未连接'}}</view>
					</u-row>
					<!-- <view class="mt-10">
						<text class="clr-sub pr-10">蓝牙地址</text>
						<text class="clr-prm">{{deviceId || '-'}}</text>
					</view> -->
				</view>
			</view>
		</template>
		
		<template v-slot:body>
			<view class="blcok-white" style="margin-top: 0;">
				<view >
					<view class="com-section font-28 pb-20">蓝牙设备列表</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>	
					<tpx-empty v-if="devices.length == 0" size="sm"></tpx-empty>
				</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: {
	},
	watch: {
		deviceId(val){
			this.updateBlueSessionInfo()
		},
	},
	props:{
		
	},
	data () {
		let { deviceId, deviceName } = getSessionBluetoothInfo()
		return {
			canvas_width: 240,
			canvas_height: 240,
			searchLoading: false,
			isStateOn: false, // 蓝牙连接状态
			devices: [],
			deviceId,
			deviceName
		}
	},
	async mounted () {
		// 初始化蓝牙模块
		await this.openBluetoothAdapter()
		// this.autoConnect()
	},
	unmounted() {
		this.stopDiscoveryPrinter()
		// this.closeBluetoothAdapter()
	},
	methods: { 
		updateBlueSessionInfo() {
			let { deviceId, deviceName } = this
			setSessionBluetoothInfo({ deviceId, deviceName })
		},
		// 自动连接历史蓝牙配置
		async autoConnect() {
			console.log("autoConnect start===========")
			let { deviceId } = this
			let conSta = false
			const _this = this
			// 判断是否有历史连接
			if(deviceId) {
				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)
				}
			}
			// 唤起蓝牙搜索权限
			await uniPromiseApi('startBluetoothDevicesDiscovery', { })
			uniPromiseApi('stopBluetoothDevicesDiscovery')
			// end 唤起蓝牙搜索权限
			
			//#ifdef APP-PLUS
				await new Promise((resolve)=> {
					// 蓝牙
					bluetoothTool.init({
						listenBTStatusCallback: (state)=> {
							resolve(state == 'STATE_ON')
						},
						discoveryDeviceCallback: _this.onDiscoverDevice.bind(_this),
						discoveryFinishedCallback: function() {
							// 搜索完成
						},
						readDataCallback: function(dataByteArr) {
							// 读取蓝牙返回的数据
							/* if(_this.receiveDataArr.length >= 200) {
								_this.receiveDataArr = [];
							}
							_this.receiveDataArr.push.apply(_this.receiveDataArr, dataByteArr); */
						},
						connExceptionCallback: function(e) {
							_this.showToast("蓝牙设备连接中断，请检查")
							// 设备连接失败
						}
					});
				})
			//#endif
		},
		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();
		},
		// 停止搜寻附近的蓝牙外围设备
		async stopDiscoveryPrinter () {
			this.searchLoading = false
			bluetoothTool.cancelDiscovery()
			return uniPromiseApi('stopBluetoothDevicesDiscovery')
		},
		// 断开蓝牙
		async closeBluetoothAdapter () {
			this.searchLoading = false
			return uniPromiseApi('closeBluetoothAdapter')
		},
		async handleSelectDeviceId (item) {
			this.deviceId = item.deviceId
			this.deviceName = item.name
			//连接蓝牙
			let bl = await this.connect(this.deviceId)
			if(bl) {
				this.$emit('onConnected')
			}
		},
		async connect (deviceId) {
			var _this = this
			showLoading('正在连接设备')
			console.log("连接蓝牙 设备=====", deviceId)
			_this.isStateOn = false
			let bl = await new Promise((resolve)=> {
				bluetoothTool.connDevice(deviceId,(result) => {
					console.log('bluetoothTool.connDevice result ====== ', result)
					let lb = !!result
					_this.isStateOn = lb
					resolve(lb)
				})
			})
			hideLoading()
			showToast(bl ? '连接成功！':'连接失败...')
			if(bl) {
				this.stopDiscoveryPrinter()
			}
			return bl
		},
		getConData() { 
			return { deviceId: this.deviceId, isStateOn: this.isStateOn }
		}
	}
}
</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>