146 lines
3.8 KiB
Vue
146 lines
3.8 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">
|
||
<!-- canvas绘图后再显示预览图 -->
|
||
<view v-if="allImgRes.length > 0">
|
||
<u-row justify="center" @click="handlePreview(index)">
|
||
<image :src="imgUrl" mode="widthFix" style="max-width: 100%;"></image>
|
||
</u-row>
|
||
</view>
|
||
</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: 560,
|
||
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
|
||
console.log("setAllImgRes len======", imgsRes.length)
|
||
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> |