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" 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> 

<script>

import RenderTemplate from "./render-template-native"
import { promiseTimeout } from "@/common/untool"

export default {
	props:{
		
	},
	computed: {
	},
	components: {
		RenderTemplate, RenderTemplate
	},
	data () {
		return {
			previewModel: { show: false },
			printModel: { show: false },
			imageUrl: [],
			paperWidth: 480,
			show: false,
		}
	},
	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) {
			// 默认先做预览
			if(imageUrl.length > 0) {
				if(!Array.isArray(imageUrl)){
					imageUrl = [imageUrl]
				}
				this.imageUrl = imageUrl
				this.paperWidth = paperWidth || this.paperWidth
				if(preview) {
					this.previewModel.show = true
				} else {
					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
		}
	}
}
</script>

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