You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
7.0 KiB
218 lines
7.0 KiB
<template> |
|
<view class="menu-div"> |
|
<view v-if="template.imageBg" class="workspace" :style="'width:' + template.scaleWidth + 'upx;height:' + template.scaleHeight + 'upx;background: url(' + baseUrl + '/' +template.imageBg + ');backgroundSize:' + template.scaleWidth + 'upx ' + template.scaleHeight + 'upx;'"> |
|
<view v-for="(citem, index) in items" :key="index" :style="'position: absolute;top:' + citem.y + 'upx;left:' + citem.x + 'upx;z-index:' + index + ';width:' + citem.width + 'upx;height:' + citem.height + 'upx;white-space:pre;'"> |
|
<view class="template-item" :style="citem.style"> |
|
<text :style="citem.itemType == 'qrcode' ? 'background: #FFFFFF;position:absolute;width:100%;top:'+citem.height+'upx;text-align:'+citem.align+';font-size:'+citem.fontSize+'upx;letter-spacing:'+citem.wordSpace+'upx;font-family:'+citem.fontFamily : ''" v-cloak>{{citem.itemType == 'qrcode' ? citem.style.itemText : citem.itemText}}</text> |
|
</view> |
|
</view> |
|
<view class="qrimg"> |
|
<tki-qrcode v-if="ifShow" ref="qrcode" :val="val" :size="size" :unit="unit" :onval="onval" :loadMake="loadMake" |
|
:usingComponents="true" @result="qrR" /> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
getTemplate |
|
} from '@/api/index/index' |
|
|
|
import tkiQrcode from 'tki-qrcode/components/tki-qrcode/tki-qrcode.vue' |
|
import webSocket from '@/utils/weSocket1.js' |
|
|
|
var baseUrl = 'https://fsb.biutag.com:9900/ukeer-pc'; |
|
|
|
var wid = document.body.clientWidth |
|
|
|
export default { |
|
components:{tkiQrcode}, |
|
data() { |
|
return { |
|
id: '6fdfec14-8a86-4ae5-9c3a-8a098fe08726', |
|
baseUrl: 'https://fsb.biutag.com:9900/ukeer-pc', |
|
template: { |
|
templateId: '', |
|
name: '', |
|
imageBg: '', |
|
imageReal: '', |
|
realWidth: 0, |
|
realHeight: 0, |
|
scaleWidth: 450, |
|
scaleHeight: 600, |
|
scale: 0, |
|
bl: '' |
|
}, |
|
ifShow: true, |
|
items: [], |
|
val: '', // 要生成的二维码值 |
|
size: 100, // 二维码大小 |
|
unit: 'upx', // 单位 |
|
onval: true, // val值变化时自动重新生成二维码 |
|
loadMake: true, // 组件加载完成后自动生成二维码 |
|
src: '' ,// 二维码生成后的图片地址或base64 |
|
wxcode: undefined, |
|
codeObj: [] |
|
} |
|
}, |
|
mounted() {}, |
|
onLoad(e) { |
|
this.id = e.id |
|
this.bl = this.template.scaleWidth / 750 |
|
console.log(this.bl) |
|
// this.bl = 1 |
|
this.getTemplate() |
|
webSocket.getWebSocket(this) |
|
}, |
|
methods: { |
|
getTemplate() { |
|
let query = { |
|
id: this.id |
|
} |
|
let vm = this |
|
getTemplate(query).then(res => { |
|
var qrcodeTemplate = res.data; |
|
vm.bl = qrcodeTemplate.scaleWidth / 750 |
|
vm.template.templateId = qrcodeTemplate.templateId; |
|
vm.template.name = qrcodeTemplate.templateName; |
|
vm.template.imageReal = qrcodeTemplate.imageReal; |
|
vm.template.imageBg = qrcodeTemplate.imageBg; |
|
vm.template.realWidth = qrcodeTemplate.realWidth; |
|
vm.template.realHeight = qrcodeTemplate.realHeight; |
|
vm.template.scaleWidth = qrcodeTemplate.scaleWidth / vm.bl; |
|
vm.template.scaleHeight = qrcodeTemplate.scaleHeight / vm.bl; |
|
vm.template.scale = qrcodeTemplate.scale; |
|
vm.imageBg = baseUrl + "/" + qrcodeTemplate.imageBg; |
|
|
|
for (var i = 0; i < qrcodeTemplate.elementList.length; i++) { |
|
var item = qrcodeTemplate.elementList[i]; |
|
var itemdefalut = {}; |
|
itemdefalut.x = item.elementX / vm.bl; |
|
itemdefalut.y = item.elementY / vm.bl; |
|
itemdefalut.width = item.elementWidth / vm.bl; |
|
itemdefalut.height = item.elementHeight / vm.bl; |
|
itemdefalut.fontBold = item.fontWeight == "true" ? true : false; |
|
itemdefalut.orgFields = item.orgFields ? item.orgFields.split(',') : []; |
|
itemdefalut.addrFields = item.addrFields ? item.addrFields.split(',') : []; |
|
itemdefalut.fontFamily = item.fontFamily; |
|
itemdefalut.fontSize = item.fontSize / vm.bl; |
|
itemdefalut.fontColor = item.fontColor ? item.fontColor : ''; |
|
itemdefalut.align = item.align; |
|
itemdefalut.wordSpace = item.wordSpace; |
|
itemdefalut.qrcodeType = item.qrcodeType; |
|
itemdefalut.qrcodeUrl = item.qrcodeUrl; |
|
|
|
if (item.imageUrl) { |
|
itemdefalut.imageUrl = item.imageUrl; |
|
vm.qrImage = item.imageUrl; |
|
} |
|
|
|
itemdefalut.codeType = item.codeType; |
|
itemdefalut.itemText = item.itemText; |
|
itemdefalut.itemType = item.itemType; |
|
// let style = this.getItemStyle(0,itemdefalut) |
|
itemdefalut['style'] = this.getItemStyle(i,itemdefalut) |
|
this.items.push(itemdefalut); |
|
} |
|
}) |
|
}, |
|
getItemStyle: function(index, item) { |
|
let vm = this |
|
const style = { |
|
borderColor: (index == this.currIndex ? '#FF0000' : '#CFCFCF'), |
|
width: item.width + 'upx', |
|
height: item.height + 'upx' |
|
}; |
|
|
|
if ((item.itemType == 'qrcode' && item.qrcodeUrl) || (item.itemType == 'image' && item.imageUrl)) { |
|
style.background = 'url(' + (item.qrcodeUrl || item.imageUrl) + ')' |
|
style.backgroundSize = '100% 100%' |
|
style.backgroundRepeat = 'no-repeat'; |
|
} |
|
|
|
if (item.itemType == 'qrcode' && item.qrcodeUrl){ |
|
style.background = 'url(' + item.qrcodeUrl + ')' |
|
let itemTextBlack = item.itemText |
|
style['itemText'] = item.itemText |
|
style['itemTextBlack'] = itemTextBlack |
|
style['imageUrl'] = 'url(' + item.imageUrl + ')' |
|
this.codeObj[this.codeObj.length] = style |
|
} |
|
|
|
if ((item.itemType == 'code' || item.itemType == 'org' || item.itemType == 'address' || item.itemType == 'text') && |
|
item.itemText) { |
|
style.color = item.fontColor; |
|
style.textAlign = item.align; |
|
style.fontFamily = item.fontFamily; |
|
style.fontWeight = item.fontBold ? 'bold' : ''; |
|
style.lineHeight = item.height + 'upx' |
|
style.fontSize = item.fontSize + 'upx' |
|
style.letterSpacing = item.wordSpace + 'upx' |
|
|
|
} |
|
return style; |
|
}, |
|
workspaceStyle: function() { |
|
let vm = this |
|
const template = this.template; |
|
if (!template.imageBg) { |
|
return {}; |
|
} |
|
return { |
|
backgroundRepeat: 'no-repeat', |
|
width: template.scaleWidth / vm.bl + 'upx', |
|
height: template.scaleHeight + 'upx', |
|
background: 'url(' + baseUrl + '/' + template.imageBg + ')', |
|
backgroundSize: template.scaleWidth / vm.bl + 'upx ' + template.scaleHeight / vm.bl + 'upx' |
|
}; |
|
}, |
|
qrR(res){ |
|
this.wxcode = res |
|
if(this.val != ''){ |
|
for (var i = 0; i < this.codeObj.length; i++) { |
|
this.codeObj[i].background = 'url(' + this.wxcode + ')' |
|
this.codeObj[i].itemText = '扫码支付' |
|
console.log(this.codeObj[i]) |
|
} |
|
} |
|
}, |
|
getWxCode(code){ |
|
if(code != undefined && code != this.val){ |
|
this.val = code |
|
} |
|
if(code == undefined){ |
|
for (var i = 0; i < this.codeObj.length; i++) { |
|
this.val = '' |
|
this.codeObj[i].background = this.codeObj[i].imageUrl |
|
this.codeObj[i].itemText = this.codeObj[i].itemTextBlack |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.menu-div { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.workspace { |
|
width: 100%; |
|
position: relative; |
|
backgroundRepeat: 'no-repeat'; |
|
} |
|
|
|
.template-item { |
|
background-size: 100% 100% !important; |
|
white-space:pre; |
|
} |
|
|
|
.qrimg { |
|
opacity: 0; |
|
width: 0; |
|
height: 0; |
|
} |
|
</style>
|
|
|