Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
C
center-certificate
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
center-certificate
Commits
7711251b
提交
7711251b
authored
8月 18, 2022
作者:
lihuihui
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update
上级
9fa915f2
隐藏空白字符变更
内嵌
并排
正在显示
3 个修改的文件
包含
82 行增加
和
29 行删除
+82
-29
EditStyle.vue
src/components/base/EditStyle.vue
+3
-0
Aside.vue
src/components/layout/Aside.vue
+4
-1
stepTwo.vue
src/modules/template/components/stepTwo.vue
+75
-28
没有找到文件。
src/components/base/EditStyle.vue
浏览文件 @
7711251b
...
@@ -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
:
{
...
...
src/components/layout/Aside.vue
浏览文件 @
7711251b
<
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
;
...
...
src/modules/template/components/stepTwo.vue
浏览文件 @
7711251b
<
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
,
wid
ht
:
findTool
(
item
.
tool
,
'width'
).
value
,
wid
th
:
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
:
f
indTool
(
item
.
tool
,
'fontFamily'
).
value
,
font
:
f
ontF
[
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
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论