From f2babe0dd99458f5e13b734c712d14680fe555ab Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Fri, 10 May 2024 02:29:39 +0800
Subject: [PATCH] uu

---
 common/untool.js                 |   4 +-
 pages/print/bluetoothPrinter.vue | 340 +++++++++++++++++++------------
 2 files changed, 216 insertions(+), 128 deletions(-)

diff --git a/common/untool.js b/common/untool.js
index 9fee9ec..1770878 100644
--- a/common/untool.js
+++ b/common/untool.js
@@ -55,10 +55,10 @@ const confirmModal = (title) => {
 	})
 }
 
-const showLoading = ()=> {
+const showLoading = (title)=> {
 	uni.showLoading({
 		mask: true,
-		title: '加载中'
+		title: title || '加载中'
 	});
 }
 
diff --git a/pages/print/bluetoothPrinter.vue b/pages/print/bluetoothPrinter.vue
index a663785..75a3519 100644
--- a/pages/print/bluetoothPrinter.vue
+++ b/pages/print/bluetoothPrinter.vue
@@ -1,54 +1,123 @@
 <template>
-	<view>
-		<button @click="discoveryPrinter">搜索打印机</button>
-		<button @click="stopDiscoveryPrinter">停止搜索打印机</button>
-		<view>选中的设备：{{deviceId}}</view>
-		<view class="text-red">设备列表</view>
-		<radio-group @change="radioChange">
-			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in devices" :key="index"
-				v-if="item.name && item.deviceId"
-			>
-				<view>
-					<radio :value="item.deviceId" />{{item.name}}({{item.deviceId}})
+	<tpx-page>
+		<tpx-layout>
+			<template v-slot:header>
+				<view class="blcok-white">
+					<view >
+						<u-row custom-style="gap: 10rpx;">
+							<u-button @click="discoveryPrinter">搜索周边设备</u-button>
+							<u-button @click="stopDiscoveryPrinter">停止搜索</u-button>
+							<u-button @click="writeBLECharacteristicValue" type="primary" disabled="!(deviceId && !serviceId && characteristicId)">打印</u-button>
+						</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" @click="changeTab(index)">
+								<template v-slot:title>
+									<view class="clr-sub pl-20">{{item.title}}</view>
+								</template>
+								<template v-slot:desc>
+									<view class="mt-10 pl-20">{{item.desc}}</view>
+								</template>
+							</u-steps-item>
+						</u-steps>
+					</view>
 				</view>
-			</label>
-		</radio-group>
-		
-		<view class="text-red">设备服务列表</view>
-		<radio-group @change="radioChange2">
-			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in serverList" :key="index">
-				<view>
-					<radio :value="item.uuid" />{{item.uuid}}
+				
+			</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>
 				</view>
-			</label>
-		</radio-group>
-		
-		<view class="text-red">特征值</view>
-		<radio-group @change="radioChange3">
-			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in characteristics" :key="index">
-				<view>
-					<radio :value="item.uuid" />{{item.uuid}}(write:{{item.properties.write}} notify:{{item.properties.notify}} indicate:{{item.properties.indicate}})
-				</view>
-			</label>
-		</radio-group>
-		
-		<button @click="writeBLECharacteristicValue">打印</button>
-		<canvas canvas-id="shareCanvas" :style="{width:canvas_width+'px', height: canvas_height+'px'}"></canvas>
-	</view>
-</template>
+			</template>
+			<canvas canvas-id="shareCanvas" :style="{width:canvas_width+'px', height: canvas_height+'px'}"></canvas>
+		</tpx-layout>
+	</tpx-page>
+</template> 
 
 <script>
+import { showLoading, showToast, hideLoading }	from "@/common/untool"
 import PrinterJobs from './print/printerjobs.js'
 import * as printerUtil from './print/printerutil.js'
 import * as util from './print/util.js'
 
 export default {
-	name: 'xun_bluetoothPrint',
+	name: 'bluetoothPrint',
+	computed: {
+		conInfos() {
+			let ary = [
+				{ title: '蓝牙设备', desc: this.deviceId || '-' },
+				{ title: '服务', desc: this.serviceId || '-' },
+				{ title: '特征值', desc: this.characteristicId || '-' }
+			]
+			return ary
+		},
+	},
 	data () {
 		return {
 			canvasId: 'shareCanvas',
 			canvas_width: 240,
 			canvas_height: 240,
+			curTab: 0,
 			devices: [],
 			deviceId: '',
 			serverList: [],
@@ -62,6 +131,9 @@ export default {
 		this.openBluetoothAdapter()
 	},
 	methods: {
+		changeTab(type) {
+			this.curTab = type
+		},
 		openBluetoothAdapter () {
 			var _this = this
 			uni.openBluetoothAdapter({
@@ -70,15 +142,10 @@ export default {
 					if (!e.errCode) {
 						console.log('初始化完成')
 					} else if (e.errCode == 10001) {
-						uni.showToast({
-							icon: 'none',
-							title: '请打开手机蓝牙'
-						})
+						showToast('请打开手机蓝牙')
 					} else {
-						uni.showToast({
-							icon: 'none',
-							title: e.errMsg
-						})
+						console.log('openBluetoothAdapter：error=========', e.errMsg)
+						showToast(e.errMsg)
 					}
 				}
 			})
@@ -93,7 +160,7 @@ export default {
 					if (e.errMsg == "startBluetoothDevicesDiscovery:ok") {
 						// ArrayBuffer转16进度字符串示例
 						uni.onBluetoothDeviceFound(devices => {
-							console.log(devices)
+							console.log("========devices=====", devices)
 							_this.devices.push(devices.devices[0])
 						})
 					}
@@ -104,112 +171,123 @@ export default {
 		async stopDiscoveryPrinter () {
 			uni.stopBluetoothDevicesDiscovery()
 		},
-		radioChange (e) {
-			console.log(e)
-			this.deviceId = e.target.value
+		async handleSelectDeviceId (item) {
+			this.deviceId = item.deviceId
 			this.serviceId = ''
 			this.serverList = []
 			this.characteristics = []
 			this.characteristicId = ''
 			//连接蓝牙
-			this.connect()
+			await this.connect()
+			if(this.serverList?.length > 0) {
+				this.curTab = 1
+			} else {
+				showToast('该设备无服务，请检查配置或换一个设备连接')
+			}
 		},
-		radioChange2 (e) {
-			console.log(e)
-			this.serviceId = e.target.value
+		handleSelectService (item) {
+			this.serviceId = item.uuid
 			this.characteristics = []
 			this.characteristicId = ''
 			// 获取蓝牙特征值
-			setTimeout(() =>{
-				this.getBLEDeviceCharacteristics()
+			setTimeout(async () =>{
+				await this.getBLEDeviceCharacteristics()
+				if(this.characteristics?.length > 0) {
+					this.curTab = 2
+				} else {
+					showToast('该服务无特征值，请检查配置或换一个服务')
+				}
 			}, 500);
 		},
-		radioChange3 (e) {
-			console.log(e)
-			this.characteristicId = e.target.value
+		handleSelectChara (item) {
+			this.characteristicId = item.uuid
 		},
 		connect () {
 			var _this = this
-			uni.createBLEConnection({
-				deviceId: _this.deviceId,
-				complete (e) {
-					console.log("蓝牙连接回调=====", e)
-					if (!e.errCode) {
-						uni.showToast({
-							icon: 'none',
-							title: `蓝牙连接成功`
-						})
-						//获取蓝牙设备所有服务(service)。
-						setTimeout(()=> {
-							_this.getBLEDeviceServices()
-						}, 2000)
-					} else {
-						uni.showToast({
-							icon: 'none',
-							title: `连接设备失败:${e.errMsg}`
-						})
+			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
-			uni.getBLEDeviceServices({
-				// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
-				deviceId: _this.deviceId,
-				success:(res)=>{
-					console.log('device services:', res)
-					_this.serverList = res.services
-					// _this.serviceId = res.services[0].uuid;
-					console.log('serverId:', _this.serviceId)
-				},
-				fail:(e) =>{
-					uni.showToast({
-						icon: 'none',
-						title: `设备服务获取失败:${e.errMsg}`
-					})
-					console.log("getBLEDeviceServices - fail==============", e)
-				}
+			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
-			uni.getBLEDeviceCharacteristics({
-				// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
-				deviceId: _this.deviceId,
-				// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
-				serviceId:_this.serviceId,
-				success:(res)=>{
-					console.log('getBLEDeviceCharacteristics', res)
-					_this.characteristics = res.characteristics
-					// _this.characteristicId = res.characteristics[0].uuid
-				},
-				fail:(res)=>{
-					console.log(res)
-				}
+			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)
+					}
+				})
 			})
 		},
 		// 发送二进制数据
 		async writeBLECharacteristicValue(){
 			if (!this.deviceId) {
-				uni.showToast({
-					icon: 'none',
-					title: '请选择设备'
-				})
+				showToast('请选择设备')
 				return
 			}
 			if (!this.serviceId) {
-				uni.showToast({
-					icon: 'none',
-					title: '请选择设备服务'
-				})
+				showToast('请选择设备服务')
 				return
 			}
 			if (!this.characteristicId) {
-				uni.showToast({
-					icon: 'none',
-					title: '请选择特征值'
-				})
+				showToast('请选择特征值')
 				return
 			}
 			let pic_res = await this.renderPic();
@@ -344,13 +422,23 @@ export default {
 </script>
 
 <style scoped>
-* { font-size: 24rpx;}
-button { font-size: 28rpx;}
-.text-red { color: red; font-size: 28rpx;}
-
-/*二维码隐藏到窗口外*/
-canvas {
-	position: absolute;
-	top: -999rpx
-}
+	.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;
+		}
+	}
+	/*二维码隐藏到窗口外*/
+	canvas {
+		position: absolute;
+		top: -999rpx
+	}
 </style>
\ No newline at end of file