uu

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

@@ -15,15 +15,15 @@
 				<view class="blcok-grey-sm">
 					<u-row justify="between">
 						<view>
-							<text class="clr-sub pr-10">蓝牙设备</text>
+							<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">
+					<!-- <view class="mt-10">
 						<text class="clr-sub pr-10">蓝牙地址</text>
 						<text class="clr-prm">{{deviceId || '-'}}</text>
-					</view>
+					</view> -->
 				</view>
 			</view>
 		</template>

components/tpx-bluetooth-print/render-template-native.vue

@@ -1,8 +1,5 @@
 <template>
 	<tpx-bluetooth-native ref="curBlueTooth">
-		<template v-slot:button>
-			<u-button @click="handlePrint" type="primary">打印</u-button>
-		</template>
 		<template v-slot:content>
 			<view class="canvas-con">
 				<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
@@ -43,7 +40,7 @@ export default {
 			imgData: '',
 			percentage: 0, // 打印进度 
 			imageUrl: '',
-			paperWidth: 480,
+			paperWidth: 560,
 		}
 	},
 	mounted () {
@@ -65,7 +62,7 @@ export default {
 				}
 				let prtInstance = tanexPrinterUniSdk.createInstance()
 				prtInstance.init(that.canvasHeight)
-				prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
+				// prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
 				prtInstance.addBitmapByEG(0, 0, that.imgData)
 				prtInstance.setPagePrint()
 				let commond = prtInstance.getPrintCmd()
@@ -74,7 +71,6 @@ export default {
 				that.showToast('数据发送成功，如果无法打印请重连设备重试')
 				// await that.loadPrintProcess()
 				// printModule.printTestSimple(deviceId)
-				
 			})
 		},
 		// 模拟打印进度, 用于加载进度条
@@ -152,12 +148,14 @@ export default {
 		// 给外部调用api，打印自定义图
 		async callPrint({ paperWidth, imageUrl } = {}) {
 			try{
-				this.paperWidth = paperWidth
+				this.paperWidth = paperWidth || this.paperWidth
 				if(this.imageUrl != imageUrl || !this.imgData) {
 					this.imageUrl = imageUrl
 					await this.renderCanvasImg(this.imageUrl);
 				}
 				let conSta = await this.$refs.curBlueTooth.autoConnect()
+				this.$emit('autoConnectCallback', conSta)
+				
 				if(conSta) {
 					await this.handlePrint() 
 					return true

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

@@ -1,10 +1,6 @@
 <template>
 	<tpx-bluetooth ref="curBlueTooth">
-		<template v-slot:button>
-			<u-button @click="handlePrint" type="primary">确认打印</u-button>
-		</template>
 		<template v-slot:content>
-			<view class="pt-20 pb-10">打印内容</view>
 			<view class="canvas-con">
 				<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
 			</view>			
@@ -43,7 +39,7 @@ export default {
 			percentage: 0, // 打印进度 
 			threshold: 200, // 阈值(值越大,图片打印越深)
 			imageUrl: '',
-			paperWidth: 480,
+			paperWidth: 560,
 		}
 	},
 	mounted () {
@@ -167,6 +163,7 @@ export default {
 					await this.renderCanvasImg(this.imageUrl);
 				}
 				let conSta = await this.$refs.curBlueTooth.autoConnect()
+				this.$emit('autoConnectCallback', conSta)
 				if(conSta) {
 					await this.handlePrint()
 					return true
@@ -185,8 +182,8 @@ export default {
 	}
 	/*图片隐藏到窗口外*/
 	canvas {
-		// position: absolute;
+		position: absolute;
-		// z-index: -999;
+		z-index: -999;
-		// top: -999px;
+		top: -999px;
 	}
 </style>

components/tpx-bluetooth-print/tpx-bluetooth-print.vue

@@ -1,22 +1,45 @@
 <template>
-	<template v-if="type == 'modal'">
+	
-		<tpx-dialog 
+	<!-- 打印预览 -->
-			v-model:show="show"
+	<tpx-dialog
-			@onClose="handleCloseModal"
+		v-model:show="previewModel.show"
-			custom-style="width: 600rpx;padding: 10rpx;"
+		@onClose="handleCloseModal"
-			title="打印"
+		custom-style="width: 600rpx;padding: 10rpx;"
-		>	
+		title="打印预览"
-			<view style="height: calc(75vh);">
+	>	
-				<render-template ref="curPrint"></render-template>
+		<view style="height: calc(75vh);">
-			</view>
+			<tpx-layout>
-		</tpx-dialog>
+				<template v-slot:header></template>
-		
+				<template v-slot:body>
-	</template>
+					<view v-for="(imgUrl, index) in imageUrl" class="mb-20">
-	<template v-else>
+						<u-row justify="center" @click="handlePreview(index)">
-		<template >
+							<image :src="imgUrl" mode="widthFix" style="max-width: 100%;"></image>
-			<render-template ref="curPrint"></render-template>
+						</u-row>
-		</template>
+					</view>
-	</template>
+				</template>
+				<template v-slot:footer>
+					<view class="blcok-white-noradius">
+						<u-row>
+							<u-button @click="confirmPrint" type="primary" size="large" shape="square"
+								custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;margin: 0 10rpx;">确认打印</u-button>
+						</u-row>
+					</view>
+				</template>
+			</tpx-layout>
+		</view>
+	</tpx-dialog>
+	
+	<!-- 打印+蓝牙连接 -->
+	<tpx-dialog
+		v-model:show="printModel.show"
+		@onClose="handleCloseModal"
+		custom-style="width: 600rpx;padding: 10rpx;"
+		title="打印设备"
+	>	
+		<view style="height: calc(75vh);">
+			<render-template ref="curPrint" @autoConnectCallback="autoConnectCallback"></render-template>
+		</view>
+	</tpx-dialog>
 	
 </template> 
 
@@ -27,22 +50,19 @@ import { promiseTimeout } from "@/common/untool"
 
 export default {
 	props:{
-		type: {
+		
-			default () {
-				return 'modal'
-			}
-		},
 	},
 	computed: {
-		
 	},
 	components: {
 		RenderTemplate, RenderTemplate
 	},
 	data () {
 		return {
-			imageUrl: '',
+			previewModel: { show: false },
-			paperWidth: 480,
+			printModel: { show: false },
+			imageUrl: [],
+			paperWidth: 560,
 			show: false,
 		}
 	},
@@ -55,24 +75,39 @@ export default {
 	},
 	methods: {
 		handleCloseModal(){
-			this.$emit('update:show', false)
-			this.$emit('onClose')
 		},
-		async startPrint({ imageUrl, paperWidth } = {}) {
+		handlePreview(index){
+			uni.previewImage({
+				urls: this.imageUrl,
+				current:index
+			})
+		},
+		async startPrint({ imageUrl, paperWidth } = {}, preview = true) {
+			// 默认先做预览
 			if(imageUrl.length > 0) {
-				if(Array.isArray(imageUrl)){
+				if(!Array.isArray(imageUrl)){
-					imageUrl = imageUrl[0]
+					imageUrl = [imageUrl]
 				}
 				this.imageUrl = imageUrl
 				this.paperWidth = paperWidth || this.paperWidth
-				this.show = true
+				if(preview) {
-				let res = await this.$refs.curPrint.callPrint({
+					this.previewModel.show = true
-					imageUrl,
+				} else {
-					paperWidth: this.paperWidth
+					this.confirmPrint()
-				})
+				}
 			} else {
 				this.showToast('缺少打印内容')
 			}
+		},
+		async confirmPrint(){
+			let res = await this.$refs.curPrint.callPrint({
+				imageUrl: this.imageUrl[0],
+				paperWidth: this.paperWidth
+			})
+		},
+		autoConnectCallback(bl){
+			// 如果打印设备连接失败 需要显示打印设备弹框
+			this.printModel.show = !bl
 		}
 	}
 }