125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
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>
|
|
|
|
<view v-for="(url, index) in imageUrl">
|
|
<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: {
|
|
},
|
|
components: {
|
|
RenderTemplate, RenderTemplate, CreateImageDataBycanvas
|
|
},
|
|
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(){
|
|
this.imageUrl.map(async (url, index)=> {
|
|
let imgRes = await this.$refs[`curCanvas${index}`][0].renderCanvasImg(url, this.paperWidth)
|
|
let res = await this.$refs.curPrint.callPrint({
|
|
imgRes,
|
|
paperWidth: this.paperWidth
|
|
})
|
|
})
|
|
},
|
|
autoConnectCallback(bl){
|
|
// 如果打印设备连接失败 需要显示打印设备弹框
|
|
this.printModel.show = !bl
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |