emis-app/components/tpx-bluetooth-print/tpx-bluetooth-print-preview.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">
						<!-- canvas绘图后再显示预览图 -->
						<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 v-if="showPrint" 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>
	
</template> 

<script>
	
import { promiseTimeout } from "@/common/untool"

export default {
	props:{
		showPrint: {
			default () {
				return false
			}
		},
	},
	computed: {
	},
	components: {
		
	},
	data () {
		return {
			previewModel: { show: false },
			imageUrl: []
		}
	},
	mounted () {
		// Test
		// this.startPrint({ imageUrl: 'https://image-c.weimobwmc.com/ol-6NoX9/ed4f6d5da41f4606811aa8018e2918da.jpg', paperWidth: this.paperWidth })
	},
	unmounted() {
		
	},
	methods: {
		handleCloseModal(){
			this.imageUrl = []
		},
		handlePreview(index){
			uni.previewImage({
				urls: this.imageUrl,
				current:index
			})
		},
		async showPreview({ imageUrl } = {}) {
			this.imageUrl = [] // 每次打印前，清空历史数据
			// 默认先做预览
			if(imageUrl.length > 0) {
				if(!Array.isArray(imageUrl)){
					imageUrl = [imageUrl]
				}
				this.imageUrl = imageUrl
				this.previewModel.show = true
			}
		},
		async confirmPrint(opt = { }){
			let { imageUrl, prtCmdData } = opt
			imageUrl = imageUrl || this.imageUrl || []
			prtCmdData = encodeURIComponent(prtCmdData || '')
			if(imageUrl.length == 0 && !prtCmdData) {
				this.showToast('缺少打印内容')
			} else {
				this.goto(`print/bluetoothPrinter?imageUrl=${imageUrl.join(",")}&prtCmdData=${prtCmdData}`)
			}
		},
	}
}
</script>

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