emis-app/components/tpx-bluetooth-print/render-template.vue

<template>
	<tpx-bluetooth ref="curBlueTooth"></tpx-bluetooth>
	
	<tpx-dialog type="type-dialog" title="打印中" :show="percentage">
		<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;">
			<view>
				<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress>
				<view class="pt-20">正在发送数据, 请勿退出页面, 如果卡住了请重连打印机重试</view>
			</view>
		</u-row>
	</tpx-dialog>
	
</template> 

<script>
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo, promiseTimeout } from "@/common/untool"
import * as canvasUtil from "@/common/canvasUtil"
import * as printJob from './print/printJob'

export default {
	props:{
		
	},
	computed: {
		
	},
	data () {
		return {
			imgRes: {},
			percentage: 0, // 打印进度 
			threshold: 200, // 阈值(值越大,图片打印越深)
			paperWidth: 560,
		}
	},
	mounted () {
		this.initData()
	},
	unmounted() {
	},
	methods: {
		async initData() {
			
		},
		// 打印
		handlePrint(){
			const that = this
			let data = this.$refs.curBlueTooth.getConData()
			console.log("打印组件选中数据：data=====", data)
			let { deviceId, serviceId, characteristicId } = data
			return new Promise((resolve, reject)=> {
				let { bl } = that.checkPrintParam()
				if(!bl) {
					return reject('打印参数校验不通过')
				} 
				const opt = {
				    ...{ deviceId, serviceId, characteristicId },
				    onProgress: (percentage) => {
						console.log("打印进度====", percentage)
				        that.percentage = percentage
				    },
				    lasterSuccess: () => {
						that.percentage = 0
						hideLoading()
				        uni.showModal({
				            title: '提示',
				            content: '数据已发送完，请检查打印的内容是否正常',
				            showCancel: false,
				            confirmText: '好的',
				        });
						resolve()
				    },
					onError: (e)=> {
						that.percentage = 0
						showToast(`打印异常`)
						hideLoading()
						reject(e)
					}
				}
				
				//打印图片
				printJob.printImage(
				    opt,
				    // 将图片数据转成位图数据
				    printJob.overwriteImageData({
				        threshold: that.threshold,
				        imageData: that.imgRes.imgData,
				        width: that.imgRes.width,
				        height: that.imgRes.height,
				    }),
				);
			})
		},
		checkPrintParam() {
			let msg = '', bl = false
			let { deviceId, serviceId, characteristicId } = this.$refs.curBlueTooth.getConData()
			!this.imgRes.imgData && (msg = '打印内容不能为空，请重试')
			if(!msg && !(deviceId && serviceId && characteristicId)) {
				msg = '请选选择打印设备'
			}
			msg && (showToast(msg))
			return {
				msg,
				bl: !msg
			}
		},
		// 给外部调用api，打印自定义图
		async callPrint({ paperWidth, imgRes } = {}) {
			try{
				this.paperWidth = paperWidth
				this.imgRes = imgRes
				let conSta = await this.$refs.curBlueTooth.autoConnect()
				this.$emit('autoConnectCallback', conSta)
				if(conSta) {
					await this.handlePrint()
					return true
				}
			} catch(e){
				console.error("callPrint error=====", e)
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.canvas-con{
		width: 100%;
		overflow: auto;
	}
	/*图片隐藏到窗口外*/
	canvas {
		position: absolute;
		z-index: -999;
		top: -999px;
	}
</style>