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

<template>
	<!-- 打印预览 -->
	<tpx-dialog
		v-model:show="previewModel.show"
		@onClose="handleCloseModal"
		custom-style="width: 600rpx;padding: 10rpx;"
		title="打印预览"
	>	
		<view style="height: calc(75vh);">
			<tpx-layout>
				<template v-slot:header></template>
				<template v-slot:body>
					<view v-for="(imgUrl, index) in imageUrl" class="mb-20">
						<u-row justify="center" @click="handlePreview(index)">
							<image :src="imgUrl" mode="widthFix" style="max-width: 100%;"></image>
						</u-row>
					</view>
				</template>
				<template v-slot:footer>
					<view class="blcok-white-noradius">
						<u-row>
							<u-button @click="confirmPrint" :disabled="allImgRes.length == 0" 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>
	
	<view v-for="(url, index) in canvImages">
		<create-image-data-bycanvas :ref="`curCanvas${index}`"></create-image-data-bycanvas>
	</view>
	
</template> 

<script>

import RenderTemplate from "./render-template-native"
import { promiseTimeout } from "@/common/untool"
import CreateImageDataBycanvas from "./create-image-data-bycanvas"

export default {
	props:{
		
	},
	computed: {
		// ！！！注意 canvas预览图 必须用不同变量，否则获取不到imgdata
		canvImages(){
			return [...this.imageUrl]
		}
	},
	components: {
		RenderTemplate, RenderTemplate, CreateImageDataBycanvas
	},
	data () {
		return {
			previewModel: { show: false },
			printModel: { show: false },
			imageUrl: [],
			paperWidth: 600,
			show: false,
			allImgRes: []
		}
	},
	mounted () {
		// Test
		// this.startPrint({ imageUrl: 'https://image-c.weimobwmc.com/ol-6NoX9/ed4f6d5da41f4606811aa8018e2918da.jpg', paperWidth: this.paperWidth })
	},
	unmounted() {
		
	},
	methods: {
		handleCloseModal(){
		},
		handlePreview(index){
			uni.previewImage({
				urls: this.imageUrl,
				current:index
			})
		},
		async startPrint({ imageUrl, paperWidth } = {}, preview = true) {
			this.imageUrl = [] // 每次打印前，清空历史数据
			this.allImgRes = []
			// 默认先做预览
			if(imageUrl.length > 0) {
				if(!Array.isArray(imageUrl)){
					imageUrl = [imageUrl]
				}
				this.imageUrl = imageUrl
				this.paperWidth = paperWidth || this.paperWidth
				if(preview) {
					this.previewModel.show = true
				}
				await promiseTimeout(450) // 保证页面节点渲染出来
				await this.setAllImgRes()
				!preview && this.confirmPrint()
			} else {
				this.showToast('缺少打印内容')
			}
		},
		setAllImgRes(){
			let that = this
			let allRes = this.imageUrl.map((url, index)=> {
				// ！！！注意：必须修改。 canvas渲染的图必须修改url，否则渲染不出来
				url = `${url}?t=${new Date().valueOf()}`
				return this.$refs[`curCanvas${index}`][0].renderCanvasImg(url, this.paperWidth)
			})
			return Promise.all(allRes).then((imgsRes)=> {
				that.allImgRes = imgsRes
				return imgsRes
			})
		},
		async confirmPrint(){
			let res = await this.$refs.curPrint.callPrint({
				imgsRes: this.allImgRes,
				paperWidth: this.paperWidth
			})
		},
		autoConnectCallback(bl){
			// 如果打印设备连接失败 需要显示打印设备弹框
			this.printModel.show = !bl
		}
	}
}
</script>

<style scoped lang="scss">
	
</style>