emis-app/pages/print/bluetoothPrinter.vue

<template>
	<tpx-page>
		<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>
							<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">
								<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>
				</view>
			</template>
		</tpx-layout>
		<canvas canvas-id="shareCanvas" :style="{width:canvas_width+'px', height: canvas_height+'px'}"></canvas>
	</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: '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,
			searchLoading: false,
			devices: [],
			deviceId: '',
			serverList: [],
			serviceId: '',
			characteristics: [],
			characteristicId: ''
		}
	},
	mounted () {
		// 初始化蓝牙模块
		this.openBluetoothAdapter()
	},
	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
			} 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)
					}
				})
			})
		},
		// 打印-发送二进制数据
		async writeBLECharacteristicValue(){
			let errmsg = ''
			if (!this.deviceId) {
				errmsg = '请选择设备'
			}
			if (!this.serviceId) {
				errmsg = '请选择设备服务'
			}
			if (!this.characteristicId) {
				errmsg = '请选择特征值'
			}
			if(errmsg){
				showToast(errmsg)
				return 
			}
			let pic_res
			try{
				pic_res = await this.renderPic();
				showToast('图片获取成功')
			}catch(e){
				showToast('图片获取失败')
			}
			let printerJobs = new PrinterJobs()
			var arr = [{
					title: '阿根廷车厘子',
					number: 20,
					price: '￥188.00'
				}, {
					title: '新鲜山竹',
					number: 38,
					price: '￥199.00'
				}]
			var arr2 = [{
				title: '平台消暑费',
				price: '9.99'
			},{
				title: '打包费',
				price: '2.00',
			}]
			printerJobs
			.print(`下单时间：2021-07-25 15:30:23`)
			.print(printerUtil.fillLine())
			.print('备注')
			.setSize(2, 2)
			.setBold(true)
			.print(`叫那位非常漂亮的小姐姐送来，其他人送来拒收`)
			.print(printerUtil.fillLine())
			.printQrcode(pic_res)
			// .setSize(1, 1)
			// .setBold(false)
			// .print(printerUtil.fillLine('*'))
			// .setAlign('lt')
			// .printArray(arr)
			// .print(printerUtil.fillAround('其它'))
			// .print(printerUtil.inline('平台随机立减', `-2.10`))
			// .print(printerUtil.inline('平台服务费', `-10.99`))
			// .printArray(arr2)
			// .print(printerUtil.fillLine())
			// .setAlign('rt')
			// .setSize(1, 2)
			// .setBold(true)
			// .print(`用户支付：￥99.99`)
			.print(printerUtil.fillLine())
			
			let buffer = printerJobs.buffer();
			console.log('buffer>>>',buffer)
			showLoading('正在打印')
			try{
				await this.printbuffs(buffer)
				hideLoading()
				showToast('打印成功')
			}catch(e){
				console.log('打印异常', e)
			}
		},
		printbuffs(buffer) {
			let _this = this
			return new Promise(async (resolve, reject)=> {
				// 1.并行调用多次会存在写失败的可能性
				// 2.建议每次写入不超过20字节
				// 分包处理，延时调用 
				const maxChunk = 20;
				for (let i = 0, j = 0, length = buffer.byteLength; i < length; i += maxChunk, j++) {
					let subPackage = buffer.slice(i, i + maxChunk <= length ? (i + maxChunk) : length);
					try{
						await _this.printbuff(subPackage)
					}catch(msg){
						console.log("printbuffs:异常==", msg)
						showToast('分段printbuff异常', msg)
						reject(msg)
						return
					}
				}
				resolve()
			})
		},
		getImageInfo(params = {}) {
			return new Promise((resolve, reject)=> {
				uni.canvasGetImageData({
					x: 0,
					y: 0,
					...params,
					success(res) {
						console.log("img====",res);
						if(res.data) {
							let data = util.zip_image(res)
							console.log("zip====", data);
							resolve(data);
						} else {
							showToast('获取图片信息异常:getImageInfo')
							reject('获取图片信息异常:getImageInfo')
						}
					}
				})
			})
			
		},
		renderPic() {
			let filePath = 'http://oss-emis.tanex56.com/sapp/sdg/hdbg.png' // TODO
			let that = this
			return new Promise((resolve, reject)=> {
				const cxt = uni.createCanvasContext(that.canvasId, that);
				let scla = 1
				uni.getImageInfo({
					src: filePath,
					success(res) {
						// that.canvasWidth = res.width * scla
						// that.canvasHeight = res.height * scla
						// console.log(res, that.canvasWidth, that.canvasHeight)
						cxt.drawImage(filePath, 0, 0, that.canvas_width, that.canvas_height);
						cxt.draw();
						that.$nextTick(async () => { //获取画布像素数据
							let data = await that.getImageInfo({ canvasId: that.canvasId, width: that.canvas_width, height: that.canvas_height, })
							resolve(data)
						})
					},
					fail(e) {
						reject(e)
						console.log(e)
					}
				})
			})
		},
		printbuff(buffer) {
			var _this = this
			return new Promise((resolve, reject)=> {
				uni.writeBLECharacteristicValue({
					// 这里的 deviceId 需要在 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
					deviceId: _this.deviceId,
					// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
					serviceId: _this.serviceId,
					// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
					characteristicId: _this.characteristicId,
					// 这里的value是ArrayBuffer类型
					value: buffer,
					success:(res)=> {
						console.log('writeBLECharacteristicValue success', res.errMsg)
						resolve()
					},
					fail:(res)=> {
						console.log('writeBLECharacteristicValue fail', res.errMsg)
						reject(res.errMsg)
					},
					complete (e) {
						console.log('writeBLECharacteristicValue complete', e)
					}
				})
			})
		}
	}
}
</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;
		}
	}
	/*二维码隐藏到窗口外*/
	canvas {
		position: absolute;
		top: -999rpx
	}
</style>