提交 7711251b authored 作者: lihuihui's avatar lihuihui

update

上级 9fa915f2
...@@ -122,6 +122,9 @@ export default { ...@@ -122,6 +122,9 @@ export default {
} }
}, },
mounted() { mounted() {
if (this.$route.query.id) {
this.changeStyle()
}
this.setToolOption() this.setToolOption()
}, },
methods: { methods: {
......
<template> <template>
<aside class="app-aside"> <aside :class="$route.path === '/template/update' ? 'app-aside none' : 'app-aside'">
<nav class="nav"> <nav class="nav">
<el-menu :default-active="defaultActive" :router="true"> <el-menu :default-active="defaultActive" :router="true">
<template v-for="(item, index) in menuList"> <template v-for="(item, index) in menuList">
...@@ -63,6 +63,9 @@ export default { ...@@ -63,6 +63,9 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.none {
display: none;
}
.app-aside { .app-aside {
position: sticky; position: sticky;
top: 0; top: 0;
......
<template> <template>
<div class="edit-cert-box"> <div class="edit-cert-box">
<div @click="toImage">111</div> <!-- <div @click="toImage">111</div> -->
<div class="tool-left"> <div class="tool-left">
<div style="padding-right: 20px; border-right: 1px solid #e3e3e3"> <div style="padding-right: 20px; border-right: 1px solid #e3e3e3">
<editStyle @data="changeStyle" :data="certBoxEditStyle"></editStyle> <editStyle @data="changeStyle" :data="certBoxEditStyle"></editStyle>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<div class="tool-right"> <div class="tool-right">
<div :style="certBoxEditStyle.style" id="edit-dom-1" ref="imageTofile"> <div :style="certBoxEditStyle.style" :class="!isParamsShow && 'active'" id="edit-dom-1" ref="imageTofile">
<template v-for="item in certElement"> <template v-for="item in certElement">
<div <div
:style="item.style" :style="item.style"
...@@ -87,6 +87,9 @@ import { getParamsList } from '../api' ...@@ -87,6 +87,9 @@ import { getParamsList } from '../api'
import drag from '@/utils/drag.js' import drag from '@/utils/drag.js'
import { uploadBlob } from '@/utils/blob' import { uploadBlob } from '@/utils/blob'
export default { export default {
props: {
data: { type: Object }
},
components: { components: {
editStyle editStyle
}, },
...@@ -109,8 +112,7 @@ export default { ...@@ -109,8 +112,7 @@ export default {
title: '证书设置', title: '证书设置',
tool: [ tool: [
{ name: 'proportionWidth', value: 1, option: [1, 20, 1] }, { name: 'proportionWidth', value: 1, option: [1, 20, 1] },
{ name: 'proportionHeight', value: 1, option: [1, 20, 1] }, { name: 'proportionHeight', value: 1, option: [1, 20, 1] }
{ name: 'bgColor', value: '#ffffff' }
], ],
style: '' style: ''
}, },
...@@ -123,7 +125,17 @@ export default { ...@@ -123,7 +125,17 @@ export default {
}, },
computed: {}, computed: {},
mounted() { mounted() {
document.querySelector('.app-aside').style.display = 'none' console.log(this.data, '123')
if (this.$route.query.id) {
this.certElement = this.data.certElement
this.$nextTick(() => {
this.certElement.forEach(item => {
console.log(item, 'itemtiem')
this.dragInit(item.id, item)
})
})
this.certBoxEditStyle = this.data.certBoxEditStyle
}
document.onclick = () => { document.onclick = () => {
if (this.certElement.length && this.isShowFlag) { if (this.certElement.length && this.isShowFlag) {
this.certElement.map(item => { this.certElement.map(item => {
...@@ -138,7 +150,7 @@ export default { ...@@ -138,7 +150,7 @@ export default {
methods: { methods: {
// 提交 // 提交
submit() { submit() {
// 过去dom颜色 // 获取dom颜色
const getRgb = (dom, name) => { const getRgb = (dom, name) => {
const getColor = getComputedStyle(dom)[name] const getColor = getComputedStyle(dom)[name]
return getColor return getColor
...@@ -151,11 +163,10 @@ export default { ...@@ -151,11 +163,10 @@ export default {
const bgDomRgb = getRgb(bgDom, 'backgroundColor') const bgDomRgb = getRgb(bgDom, 'backgroundColor')
// 提交的参数 // 提交的参数
const params = { const params = {
elements: [{ elements: [],
// end 吧截图插入
}],
bg_width: bgDom.offsetWidth, bg_width: bgDom.offsetWidth,
bg_height: bgDom.offsetHeight, bg_height: bgDom.offsetHeight,
info: JSON.stringify({ certElement: this.certElement, certBoxEditStyle: this.certBoxEditStyle }),
bg_color: JSON.stringify({ r: bgDomRgb[0], g: bgDomRgb[1], b: bgDomRgb[2] }) bg_color: JSON.stringify({ r: bgDomRgb[0], g: bgDomRgb[1], b: bgDomRgb[2] })
} }
// 让动态变量隐藏,为了html2canvas截图 // 让动态变量隐藏,为了html2canvas截图
...@@ -167,28 +178,56 @@ export default { ...@@ -167,28 +178,56 @@ export default {
this.certElement.map(item => { this.certElement.map(item => {
if (item.type === 2) { if (item.type === 2) {
const domRgb = getRgb(document.getElementById(item.id), 'color') const domRgb = getRgb(document.getElementById(item.id), 'color')
const fontF = {
songti: 'RuiZiChaoPaiYanWeiSongJian-Shan-ZhunCu(REEJI-SwallowGB-Flash-Medium)-2.ttf',
heiti: 'No.164-ShangShouJianZhengTi-2.ttf',
kaiti: 'AaBanRuoKaiShu-2.ttf',
hangkai: 'JiZiJingDianFangSongJianFan-Shan(GEETYPE-FangSongGBT-Flash)-2.ttf'
}
params.elements.push({ params.elements.push({
type: 'dynamic_text', type: 'dynamic_text',
index: findTool(item.tool, 'zIndex').value, index: findTool(item.tool, 'zIndex').value + '',
key: item.value, key: item.value,
widht: findTool(item.tool, 'width').value, width: findTool(item.tool, 'width').value + '',
height: findTool(item.tool, 'height').value, height: findTool(item.tool, 'height').value + '',
dst_x: item.left, dst_x: item.left + '',
dst_y: item.top, dst_y: item.top + '',
font: findTool(item.tool, 'fontFamily').value, font: fontF[findTool(item.tool, 'fontFamily').value],
size: findTool(item.tool, 'fontSize').value, size: findTool(item.tool, 'fontSize').value + '',
color: JSON.stringify({ r: domRgb[0], g: domRgb[1], b: domRgb[2] }), color: { r: domRgb[0], g: domRgb[1], b: domRgb[2] },
line_height: findTool(item.tool, 'fontLineH').value, line_height: findTool(item.tool, 'fontLineH').value + '',
font_weight: findTool(item.tool, 'fontWeight').value, font_weight: findTool(item.tool, 'fontWeight').value,
underline: !!(findTool(item.tool, 'fontUnderline').value !== 'none'), underline: !!(findTool(item.tool, 'fontUnderline').value !== 'none'),
align: findTool(item.tool, 'align').value angle: '0',
align: findTool(item.tool, 'align').value + ''
}) })
} }
item.show = false item.show = false
return item return item
}) })
this.toImage() setTimeout(() => {
console.log(params, 'params') this.toImage(res => {
const dom = document.getElementById('edit-dom-1')
const index = params.elements.findIndex(item => item.type === 'image')
const findItem = this.certElement.find(item => item.type === 0)
const paramElements = {
type: 'image',
key: res,
width: dom.offsetWidth,
height: dom.offsetHeight,
dst_x: 0,
dst_y: 0,
index: findItem ? findTool(findItem.tool, 'zIndex').value + '' : 1
}
if (index !== -1) {
params.elements[index] = paramElements
} else {
params.elements.push(paramElements)
}
params.elements = JSON.stringify(params.elements)
this.$emit('submit', params)
})
}, 500)
}, },
// 删除工具 // 删除工具
deleteEdit(data) { deleteEdit(data) {
...@@ -196,17 +235,16 @@ export default { ...@@ -196,17 +235,16 @@ export default {
this.certElement.splice(index, 1) this.certElement.splice(index, 1)
}, },
// html生成图片 // html生成图片
toImage() { toImage(callback) {
html2canvas(this.$refs.imageTofile, { html2canvas(this.$refs.imageTofile, {
width: document.getElementById('edit-dom-1').offsetWidth,
backgroundColor: null, backgroundColor: null,
useCORS: true useCORS: true
}).then(canvas => { }).then(canvas => {
// const url = canvas.toDataURL('image/png') canvas.toBlob(blob => {
// this.htmlUrl = url
canvas.toBlob(function (blob) {
uploadBlob(blob).then(res => { uploadBlob(blob).then(res => {
console.log(res)
this.toCanvasImg = res this.toCanvasImg = res
callback(res)
}) })
}) })
}) })
...@@ -348,8 +386,13 @@ export default { ...@@ -348,8 +386,13 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
// 初始化拖拽 // 初始化拖拽
dragInit(id) { dragInit(id, item) {
const dom = document.getElementById(id) const dom = document.getElementById(id)
console.log(id, 'dom')
if (item) {
dom.style.top = item.top + 'px' || 0
dom.style.left = item.left + 'px' || 0
}
this.$nextTick(() => { this.$nextTick(() => {
drag(dom, document.getElementById('#edit-dom-1'), res => { drag(dom, document.getElementById('#edit-dom-1'), res => {
dom.style.top = res.top dom.style.top = res.top
...@@ -383,7 +426,11 @@ export default { ...@@ -383,7 +426,11 @@ export default {
position: relative; position: relative;
border: 1px solid rgb(227, 227, 227); border: 1px solid rgb(227, 227, 227);
overflow: hidden; overflow: hidden;
background: #ffffff; // background: #ffffff;
box-sizing: border-box;
&.active {
border: none;
}
.text { .text {
position: absolute; position: absolute;
top: 0; top: 0;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论