Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
ElectricitySheep
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄媛媛
ElectricitySheep
Commits
803c6dd3
Commit
803c6dd3
authored
Apr 30, 2020
by
黄奎
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
新增页面
parent
b5c2f892
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
624 additions
and
437 deletions
+624
-437
customPoster.vue
src/components/StoreDesign/customPoster.vue
+618
-431
PictureCheck.vue
src/components/common/PictureCheck.vue
+6
-6
No files found.
src/components/StoreDesign/customPoster.vue
View file @
803c6dd3
<
style
>
<
style
>
.custom_Header
{
.custom_Header
{
padding
:
0
20px
;
padding
:
0
20px
;
height
:
56px
;
height
:
56px
;
line-height
:
56px
;
line-height
:
56px
;
background-color
:
#fff
;
background-color
:
#fff
;
margin-bottom
:
15px
;
margin-bottom
:
15px
;
}
}
.custom_Main
{
display
:
flex
;
.custom_Main
{
display
:
flex
;
}
}
.custom_mobile_box
{
.custom_mobile_box
{
width
:
400px
;
width
:
400px
;
height
:
740px
;
height
:
740px
;
padding
:
35px
11px
;
padding
:
35px
11px
;
...
@@ -19,27 +21,31 @@
...
@@ -19,27 +21,31 @@
display
:
flex
;
display
:
flex
;
flex-direction
:
column
;
flex-direction
:
column
;
}
}
.custom_bg_box
{
.custom_bg_box
{
position
:
relative
;
position
:
relative
;
border
:
1px
solid
#e2e3e3
;
border
:
1px
solid
#e2e3e3
;
width
:
750px
;
width
:
750px
;
height
:
1334px
;
height
:
1334px
;
zoom
:
0.5
;
zoom
:
0.5
;
}
}
.custom_bg_pic
{
background
:
url('../../assets/img/customBg.jpg')
no-repeat
;
.custom_bg_pic
{
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
background-size
:
100%
100%
;
background-size
:
100%
100%
;
background-position
:
center
;
background-position
:
center
;
}
}
.custom_AppImage
{
background
:
url('../../assets/img/default_qr_code.png')
no-repeat
;
.custom_AppImage
{
background
:
url('../../assets/img/default_qr_code.png')
no-repeat
;
background-size
:
cover
;
background-size
:
cover
;
background-position
:
center
center
;
background-position
:
center
center
;
position
:
absolute
;
position
:
absolute
;
}
}
.custom_formBody
{
.custom_formBody
{
padding
:
20px
35%
20px
20px
;
padding
:
20px
35%
20px
20px
;
background-color
:
#fff
;
background-color
:
#fff
;
margin-bottom
:
20px
;
margin-bottom
:
20px
;
...
@@ -50,7 +56,8 @@
...
@@ -50,7 +56,8 @@
display
:
flex
;
display
:
flex
;
flex-direction
:
column
;
flex-direction
:
column
;
}
}
.custom_component
{
.custom_component
{
width
:
100px
;
width
:
100px
;
height
:
100px
;
height
:
100px
;
cursor
:
pointer
;
cursor
:
pointer
;
...
@@ -64,7 +71,8 @@
...
@@ -64,7 +71,8 @@
justify-content
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
flex-direction
:
column
;
}
}
.ccustom_itemremove
{
.ccustom_itemremove
{
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
right
:
0
;
right
:
0
;
...
@@ -72,34 +80,40 @@
...
@@ -72,34 +80,40 @@
width
:
28px
;
width
:
28px
;
height
:
28px
;
height
:
28px
;
}
}
.custom_bottom
{
.custom_bottom
{
border
:
1px
solid
#EBEEF5
;
border
:
1px
solid
#EBEEF5
;
background-color
:
#FFF
;
background-color
:
#FFF
;
color
:
#303133
;
color
:
#303133
;
-webkit-transition
:
.3s
;
-webkit-transition
:
.3s
;
transition
:
.3s
;
transition
:
.3s
;
border-radius
:
4px
;
border-radius
:
4px
;
margin-top
:
35px
;
margin-top
:
35px
;
}
}
.customShareBtn
{
.customShareBtn
{
position
:
absolute
!important
;
position
:
absolute
!important
;
bottom
:
-52px
;
bottom
:
-52px
;
left
:
0
;
left
:
0
;
}
}
.customShareBtn
.el-button--small
{
padding
:
9px
25px
;
.customShareBtn
.el-button--small
{
padding
:
9px
25px
;
}
}
.Custom_active
{
border
:
1px
solid
#7BBDFC
;
.Custom_active
{
border
:
1px
solid
#7BBDFC
;
}
}
.custom_headerImg
{
background
:
url('../../assets/img/storeDesign/default_head.png')
no-repeat
;
.custom_headerImg
{
background
:
url('../../assets/img/storeDesign/default_head.png')
no-repeat
;
background-size
:
cover
;
background-size
:
cover
;
background-position
:
center
center
;
background-position
:
center
center
;
border-radius
:
50%
;
border-radius
:
50%
;
position
:
absolute
;
position
:
absolute
;
}
}
.poster_bg_box
{
.poster_bg_box
{
position
:
relative
;
position
:
relative
;
border
:
2px
solid
#e2e3e3
;
border
:
2px
solid
#e2e3e3
;
width
:
750px
;
width
:
750px
;
...
@@ -107,18 +121,21 @@
...
@@ -107,18 +121,21 @@
zoom
:
0.5
;
zoom
:
0.5
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
.poster_User
{
.poster_User
{
margin-top
:
96px
;
margin-top
:
96px
;
margin-bottom
:
64px
;
margin-bottom
:
64px
;
}
}
.poster_User
img
{
.poster_User
img
{
height
:
90px
;
height
:
90px
;
width
:
90px
;
width
:
90px
;
border-radius
:
50%
;
border-radius
:
50%
;
margin-left
:
24px
;
margin-left
:
24px
;
display
:
block
;
display
:
block
;
}
}
.poster_User
div
{
.poster_User
div
{
background
:
#f1f1f1
;
background
:
#f1f1f1
;
padding
:
0
24px
;
padding
:
0
24px
;
height
:
54px
;
height
:
54px
;
...
@@ -126,14 +143,16 @@
...
@@ -126,14 +143,16 @@
margin-left
:
24px
;
margin-left
:
24px
;
border-radius
:
30px
;
border-radius
:
30px
;
}
}
.poster_goodImg
{
.poster_goodImg
{
margin
:
0
auto
;
margin
:
0
auto
;
height
:
702px
;
height
:
702px
;
width
:
702px
;
width
:
702px
;
overflow
:
hidden
;
overflow
:
hidden
;
border-radius
:
16px
16px
0
0
;
border-radius
:
16px
16px
0
0
;
}
}
.goodsone_bg
{
.goodsone_bg
{
height
:
310px
;
height
:
310px
;
margin
:
0
auto
;
margin
:
0
auto
;
width
:
702px
;
width
:
702px
;
...
@@ -141,33 +160,39 @@
...
@@ -141,33 +160,39 @@
background
:
#ffffff
;
background
:
#ffffff
;
border-radius
:
0
0
16px
16px
;
border-radius
:
0
0
16px
16px
;
}
}
.goods-name
{
.goods-name
{
padding
:
28px
0
;
padding
:
28px
0
;
font-size
:
34px
;
font-size
:
34px
;
color
:
#353535
;
color
:
#353535
;
}
}
.goods_price
{
.goods_price
{
padding-top
:
50px
;
padding-top
:
50px
;
color
:
#ff4544
;
color
:
#ff4544
;
}
}
.goods_remark
{
.goods_remark
{
margin-top
:
28px
;
margin-top
:
28px
;
color
:
#999999
;
color
:
#999999
;
font-size
:
28px
;
font-size
:
28px
;
}
}
.goodsone_bg
img
{
.goodsone_bg
img
{
height
:
230px
;
height
:
230px
;
width
:
230px
;
width
:
230px
;
margin-left
:
auto
;
margin-left
:
auto
;
display
:
block
;
display
:
block
;
border-radius
:
50%
;
border-radius
:
50%
;
}
}
.custom_Second
{
.custom_Second
{
height
:
750px
;
height
:
750px
;
width
:
750px
;
width
:
750px
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
.custom_SecondBG
{
.custom_SecondBG
{
background-image
:
url('../../assets/img/storeDesign/style-two-end.png')
;
background-image
:
url('../../assets/img/storeDesign/style-two-end.png')
;
background-repeat
:
no-repeat
;
background-repeat
:
no-repeat
;
background-size
:
100%
100%
;
background-size
:
100%
100%
;
...
@@ -178,19 +203,22 @@
...
@@ -178,19 +203,22 @@
top
:
-40px
;
top
:
-40px
;
padding
:
0
24px
;
padding
:
0
24px
;
}
}
.cuSecond_goodsName
{
.cuSecond_goodsName
{
font-size
:
34px
;
font-size
:
34px
;
color
:
#353535
;
color
:
#353535
;
padding-top
:
40px
;
padding-top
:
40px
;
}
}
.customSecond_user
{
.customSecond_user
{
height
:
96px
;
height
:
96px
;
width
:
96px
;
width
:
96px
;
border-radius
:
50%
;
border-radius
:
50%
;
margin-left
:
24px
;
margin-left
:
24px
;
display
:
block
;
display
:
block
;
}
}
.CusSecondRemark
{
.CusSecondRemark
{
height
:
52px
;
height
:
52px
;
width
:
100%
;
width
:
100%
;
padding
:
0
24px
;
padding
:
0
24px
;
...
@@ -200,19 +228,22 @@
...
@@ -200,19 +228,22 @@
border-radius
:
30px
;
border-radius
:
30px
;
margin-bottom
:
70px
;
margin-bottom
:
70px
;
}
}
.Second_qrcode
{
.Second_qrcode
{
height
:
230px
;
height
:
230px
;
width
:
230px
;
width
:
230px
;
display
:
block
;
display
:
block
;
margin-left
:
auto
;
margin-left
:
auto
;
}
}
.three_User
img
{
.three_User
img
{
height
:
97px
;
height
:
97px
;
width
:
97px
;
width
:
97px
;
border-radius
:
50%
;
border-radius
:
50%
;
margin-left
:
35px
;
margin-left
:
35px
;
display
:
block
;
display
:
block
;
}
}
.app-style-three
.three_User
div
:after
{
.app-style-three
.three_User
div
:after
{
content
:
""
;
content
:
""
;
background-repeat
:
no-repeat
;
background-repeat
:
no-repeat
;
...
@@ -222,82 +253,96 @@
...
@@ -222,82 +253,96 @@
width
:
24px
;
width
:
24px
;
display
:
inline-block
;
display
:
inline-block
;
margin-left
:
8px
;
margin-left
:
8px
;
}
}
.cusThree_name
{
.cusThree_name
{
font-size
:
34px
;
font-size
:
34px
;
padding-top
:
28px
;
padding-top
:
28px
;
color
:
#353535
;
color
:
#353535
;
}
}
.cusThree_price
{
.cusThree_price
{
padding-top
:
28px
;
padding-top
:
28px
;
color
:
#ff4544
;
color
:
#ff4544
;
}
}
.cusThree_qrcode
{
.cusThree_qrcode
{
width
:
702px
;
width
:
702px
;
border-top
:
1px
solid
#c9c9c9
;
border-top
:
1px
solid
#c9c9c9
;
height
:
278px
;
height
:
278px
;
margin
:
0
auto
;
margin
:
0
auto
;
margin-top
:
24px
;
margin-top
:
24px
;
}
}
.cusThree_qrcode
div
{
.cusThree_qrcode
div
{
margin-top
:
20px
;
margin-top
:
20px
;
margin-left
:
24px
;
margin-left
:
24px
;
font-size
:
28px
;
font-size
:
28px
;
color
:
#353535
;
color
:
#353535
;
}
}
.app-style-four
.user
{
.app-style-four
.user
{
margin-top
:
35px
;
margin-top
:
35px
;
margin-bottom
:
35px
;
margin-bottom
:
35px
;
}
}
.app-style-four
.user
img
{
.app-style-four
.user
img
{
height
:
90px
;
height
:
90px
;
width
:
90px
;
width
:
90px
;
border-radius
:
50%
;
border-radius
:
50%
;
margin-left
:
24px
;
margin-left
:
24px
;
display
:
block
;
display
:
block
;
}
}
.app-style-four
.user
div
{
.app-style-four
.user
div
{
background
:
#f1f1f1
;
background
:
#f1f1f1
;
padding
:
0
24px
;
padding
:
0
24px
;
height
:
54px
;
height
:
54px
;
color
:
#4b4b4b
;
color
:
#4b4b4b
;
margin-left
:
24px
;
margin-left
:
24px
;
border-radius
:
30px
;
border-radius
:
30px
;
}
}
.app-style-four
.four-box
{
.app-style-four
.four-box
{
height
:
1150px
;
height
:
1150px
;
background-color
:
#FFFFFF
;
background-color
:
#FFFFFF
;
margin
:
0
auto
;
margin
:
0
auto
;
width
:
702px
;
width
:
702px
;
border-radius
:
16px
;
border-radius
:
16px
;
padding
:
0
24px
;
padding
:
0
24px
;
}
}
.app-style-four
.goods-name
{
.app-style-four
.goods-name
{
font-size
:
34px
;
font-size
:
34px
;
padding-top
:
26px
;
padding-top
:
26px
;
color
:
#353535
;
color
:
#353535
;
}
}
.app-style-four
.price
{
.app-style-four
.price
{
padding-top
:
60px
;
padding-top
:
60px
;
color
:
#ff4544
;
color
:
#ff4544
;
}
}
.app-style-four
.goods-image
{
.app-style-four
.goods-image
{
height
:
650px
;
height
:
650px
;
width
:
650px
;
width
:
650px
;
margin-top
:
60px
;
margin-top
:
60px
;
}
}
.app-style-four
.qrcode
img
{
.app-style-four
.qrcode
img
{
height
:
150px
;
height
:
150px
;
width
:
150px
;
width
:
150px
;
margin-top
:
25px
;
margin-top
:
25px
;
}
}
.app-style-four
.qrcode
div
{
.app-style-four
.qrcode
div
{
margin-top
:
22px
;
margin-top
:
22px
;
margin-bottom
:
26px
;
margin-bottom
:
26px
;
font-size
:
24px
;
font-size
:
24px
;
color
:
#999999
;
color
:
#999999
;
}
}
.poster-style-box
{
.poster-style-box
{
cursor
:
pointer
;
cursor
:
pointer
;
display
:
inline-block
;
display
:
inline-block
;
border
:
1px
solid
#E2E2E2
;
border
:
1px
solid
#E2E2E2
;
...
@@ -306,19 +351,22 @@
...
@@ -306,19 +351,22 @@
width
:
160px
;
width
:
160px
;
margin
:
5px
;
margin
:
5px
;
padding
:
0
5px
;
padding
:
0
5px
;
}
}
.custom_rightCheck
.el-radio
{
height
:
32px
;
.custom_rightCheck
.el-radio
{
height
:
32px
;
line-height
:
32px
;
line-height
:
32px
;
}
}
.custom_grid
{
.custom_grid
{
flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
height
:
100px
;
height
:
100px
;
width
:
100%
;
width
:
100%
;
background
:
#E6F4FF
;
background
:
#E6F4FF
;
border
:
1px
solid
#b8b8b8
;
border
:
1px
solid
#b8b8b8
;
}
}
.poster-pic-box
{
.poster-pic-box
{
cursor
:
pointer
;
cursor
:
pointer
;
display
:
inline-block
;
display
:
inline-block
;
border
:
1px
solid
#E2E2E2
;
border
:
1px
solid
#E2E2E2
;
...
@@ -327,8 +375,9 @@
...
@@ -327,8 +375,9 @@
width
:
112px
;
width
:
112px
;
margin
:
5px
;
margin
:
5px
;
padding
:
0
5px
;
padding
:
0
5px
;
}
}
.customSecond_btmdiv
{
.customSecond_btmdiv
{
border-top
:
1px
solid
#E3E3E3
;
border-top
:
1px
solid
#E3E3E3
;
position
:
absolute
;
position
:
absolute
;
bottom
:
0
;
bottom
:
0
;
...
@@ -336,7 +385,8 @@
...
@@ -336,7 +385,8 @@
z-index
:
999
;
z-index
:
999
;
padding
:
10px
;
padding
:
10px
;
width
:
100%
;
width
:
100%
;
}
}
</
style
>
</
style
>
<
template
>
<
template
>
<div
class=
"customPoster"
>
<div
class=
"customPoster"
>
...
@@ -344,37 +394,43 @@
...
@@ -344,37 +394,43 @@
<el-tabs
v-model=
"activeName"
@
tab-click=
"handleClick"
>
<el-tabs
v-model=
"activeName"
@
tab-click=
"handleClick"
>
<el-tab-pane
label=
"分销海报"
name=
"1"
></el-tab-pane>
<el-tab-pane
label=
"分销海报"
name=
"1"
></el-tab-pane>
<el-tab-pane
label=
"商品海报"
name=
"2"
></el-tab-pane>
<el-tab-pane
label=
"商品海报"
name=
"2"
></el-tab-pane>
<el-tab-pane
label=
"专题海报"
name=
"3"
></el-tab-pane
>
<!--
<el-tab-pane
label=
"专题海报"
name=
"3"
></el-tab-pane>
--
>
</el-tabs>
</el-tabs>
</div>
</div>
<template
v-if=
"checkIndex==1"
>
<template
v-if=
"checkIndex==1"
>
<div
class=
"custom_Main"
>
<div
class=
"custom_Main"
>
<div
class=
"custom_mobile_box"
>
<div
class=
"custom_mobile_box"
>
<div
class=
"custom_bg_box"
>
<div
class=
"custom_bg_box"
>
<div
class=
"custom_bg_pic"
>
<div
class=
"custom_bg_pic"
:style=
"
{ backgroundImage:'url('+ShareMsg.PosterBgImg+')'}">
<div
class=
"custom_headerImg"
v-if=
"ShareMsg[0].isShow==1"
:style=
"
{left:ShareMsg[0].leftMargin+'px',
<div
class=
"custom_headerImg"
v-if=
"ShareMsg.IsShowHead==0"
width:ShareMsg[0].size+'px',height:ShareMsg[0].size+'px',top:ShareMsg[0].upMargin+'px'}">
</div>
:style=
"
{left:ShareMsg.HeadPaddingLeft+'px',
width:ShareMsg.HeadSize+'px',height:ShareMsg.HeadSize+'px',top:ShareMsg.HeadPaddingTop+'px'}">
</div>
</div>
</div>
<span
ref=
"nameSpan"
style=
"position:absolute;display:inline-block;"
v-if=
"ShareMsg[1].isShow==1"
:style=
"
{left:ShareMsg[1].leftMargin+'px',
<span
ref=
"nameSpan"
style=
"position:absolute;display:inline-block;"
v-if=
"ShareMsg.IsShowNick==0"
fontSize:ShareMsg[1].size+'px',top:ShareMsg[1].upMargin+'px',color:ShareMsg[1].nameColor}">用户昵称
</span>
:style=
"
{left:ShareMsg.NickPaddingLeft+'px',
<div
class=
"custom_AppImage"
v-if=
"ShareMsg[2].isShow==1"
:style=
"
{left:ShareMsg[2].leftMargin+'px',
fontSize:ShareMsg.NickSize+'px',top:ShareMsg.NickPaddingTop+'px',color:ShareMsg.NickColor}">用户昵称
</span>
width:ShareMsg[2].size+'px',height:ShareMsg[2].size+'px',top:ShareMsg[2].upMargin+'px',
<div
class=
"custom_AppImage"
v-if=
"ShareMsg.IsShowQrCode==0"
:style=
"
{left:ShareMsg.QrCodePaddingLeft+'px',
'borderRadius':ShareMsg[2].ShapeStyle==1?'50%':'0%'}">
</div>
width:ShareMsg.QrCodeSize+'px',height:ShareMsg.QrCodeSize+'px',top:ShareMsg.QrCodePaddingTop+'px',
'borderRadius':ShareMsg.QrCodeType==0?'50%':'0%'}">
</div>
</div>
</div>
</div>
</div>
<div
class=
"custom_formBody"
>
<div
class=
"custom_formBody"
>
<div
style=
"margin-bottom:15px;"
>
<div
style=
"margin-bottom:15px;"
>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"建议尺寸:750 * 1334"
placement=
"top"
>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"建议尺寸:750 * 1334"
placement=
"top"
>
<el-button
size=
"mini"
>
更换背景图
</el-button>
<el-button
size=
"mini"
>
更换背景图
</el-button>
</el-tooltip>
</el-tooltip>
</div>
</div>
<div
flex=
"wrap:wrap"
>
<div
flex=
"wrap:wrap"
>
<div
class=
"custom_component"
v-for=
"(item,index) in ShareMsg"
:key=
"index"
:class=
"
{'Custom_active':item.isActive==1}" @click="getCHecked(item,index)">
<div
class=
"custom_component"
v-for=
"(item,index) in ShareTabs"
:key=
"index"
<img
v-if=
"index==0"
src=
"../../assets/img/storeDesign/icon_head.png"
alt=
""
/>
:class=
"
{'Custom_active':item.isActive==1}" @click="getChecked(item,index)">
<img
v-else-if=
"index==1"
src=
"../../assets/img/storeDesign/icon_name.png"
alt=
""
/>
<img
v-if=
"index==0"
src=
"../../assets/img/storeDesign/icon_head.png"
alt=
""
/>
<img
v-else
src=
"../../assets/img/storeDesign/icon_qr_code.png"
alt=
""
/>
<img
v-else-if=
"index==1"
src=
"../../assets/img/storeDesign/icon_name.png"
alt=
""
/>
<img
v-else
src=
"../../assets/img/storeDesign/icon_qr_code.png"
alt=
""
/>
<div>
{{
item
.
name
}}
</div>
<div>
{{
item
.
name
}}
</div>
<img
class=
"ccustom_itemremove"
v-if=
"item.isShow==1"
@
click
.
stop=
"item.isShow=0,isShowShareIndex=0"
src=
"../../assets/img/storeDesign/icon_delete.png"
alt=
""
/>
<img
class=
"ccustom_itemremove"
v-if=
"item.isShow==0"
@
click
.
stop=
"deleteItem(item,index),isShowShareIndex=0"
src=
"../../assets/img/storeDesign/icon_delete.png"
alt=
""
/>
</div>
</div>
</div>
</div>
<div
class=
"custom_bottom"
>
<div
class=
"custom_bottom"
>
...
@@ -382,13 +438,15 @@
...
@@ -382,13 +438,15 @@
<div
class=
"el-card__header"
>
头像设置
</div>
<div
class=
"el-card__header"
>
头像设置
</div>
<el-form
label-width=
"20%"
style=
"padding:20px;"
>
<el-form
label-width=
"20%"
style=
"padding:20px;"
>
<el-form-item
label=
"大小"
size=
"small"
>
<el-form-item
label=
"大小"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[0].size"
@
change=
"getCodeMax(ShareMsg[0].size,0)"
:max=
"300"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.HeadSize"
@
change=
"getCodeMax(ShareMsg.HeadSize,0)"
:max=
"300"
show-input
>
</el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"上边距"
size=
"small"
>
<el-form-item
label=
"上边距"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[0].upMargin
"
:max=
"headerMaxTop"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.HeadPaddingTop
"
:max=
"headerMaxTop"
show-input
></el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"左边距"
size=
"small"
>
<el-form-item
label=
"左边距"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[0].leftMargin
"
:max=
"headerMaxLeft"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.HeadPaddingLeft
"
:max=
"headerMaxLeft"
show-input
></el-slider>
</el-form-item>
</el-form-item>
</el-form>
</el-form>
</
template
>
</
template
>
...
@@ -396,16 +454,17 @@
...
@@ -396,16 +454,17 @@
<div
class=
"el-card__header"
>
昵称设置
</div>
<div
class=
"el-card__header"
>
昵称设置
</div>
<el-form
label-width=
"20%"
style=
"padding:20px;"
>
<el-form
label-width=
"20%"
style=
"padding:20px;"
>
<el-form-item
label=
"大小"
size=
"small"
>
<el-form-item
label=
"大小"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[1].size"
@
change=
"getCodeMax(ShareMsg[1].size,1)"
:max=
"80"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.NickSize"
@
change=
"getCodeMax(ShareMsg.NickSize,1)"
:max=
"80"
show-input
>
</el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"上边距"
size=
"small"
>
<el-form-item
label=
"上边距"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[1].upMargin
"
:max=
"nickNameTop"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.NickPaddingTop
"
:max=
"nickNameTop"
show-input
></el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"左边距"
size=
"small"
>
<el-form-item
label=
"左边距"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[1].leftMargin
"
:max=
"nickNameLeft"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.NickPaddingLeft
"
:max=
"nickNameLeft"
show-input
></el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"颜色"
size=
"small"
>
<el-form-item
label=
"颜色"
size=
"small"
>
<el-color-picker
v-model=
"ShareMsg[1].name
Color"
></el-color-picker>
<el-color-picker
v-model=
"ShareMsg.Nick
Color"
></el-color-picker>
</el-form-item>
</el-form-item>
</el-form>
</el-form>
</
template
>
</
template
>
...
@@ -413,25 +472,27 @@
...
@@ -413,25 +472,27 @@
<div
class=
"el-card__header"
>
二维码设置
</div>
<div
class=
"el-card__header"
>
二维码设置
</div>
<el-form
label-width=
"20%"
style=
"padding:20px;"
>
<el-form
label-width=
"20%"
style=
"padding:20px;"
>
<el-form-item
label=
"样式"
size=
"small"
>
<el-form-item
label=
"样式"
size=
"small"
>
<el-radio-group
v-model=
"ShareMsg[2].ShapeStyl
e"
>
<el-radio-group
v-model=
"ShareMsg.QrCodeTyp
e"
>
<el-radio
:label=
"1
"
>
圆形
</el-radio>
<el-radio
:label=
"0
"
>
圆形
</el-radio>
<el-radio
:label=
"2
"
>
方形
</el-radio>
<el-radio
:label=
"1
"
>
方形
</el-radio>
</el-radio-group>
</el-radio-group>
</el-form-item>
</el-form-item>
<el-form-item
label=
"大小"
size=
"small"
>
<el-form-item
label=
"大小"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[2].size"
@
change=
"getCodeMax(ShareMsg[2].size,2)"
:max=
"300"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.QrCodeSize"
@
change=
"getCodeMax(ShareMsg.QrCodeSize,2)"
:max=
"300"
show-input
>
</el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"上边距"
size=
"small"
>
<el-form-item
label=
"上边距"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[2].upMargin
"
:max=
"maxTwocodeTop"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.QrCodePaddingTop
"
:max=
"maxTwocodeTop"
show-input
></el-slider>
</el-form-item>
</el-form-item>
<el-form-item
label=
"左边距"
size=
"small"
>
<el-form-item
label=
"左边距"
size=
"small"
>
<el-slider
v-model=
"ShareMsg[2].leftMargin
"
:max=
"maxTwocodeLeft"
show-input
></el-slider>
<el-slider
v-model=
"ShareMsg.QrCodePaddingLeft
"
:max=
"maxTwocodeLeft"
show-input
></el-slider>
</el-form-item>
</el-form-item>
</el-form>
</el-form>
</
template
>
</
template
>
</div>
</div>
<div
class=
"customShareBtn"
>
<div
class=
"customShareBtn"
>
<el-button
size=
"small"
type=
"primary
"
>
保存
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"SetFenXiaoPoster()
"
>
保存
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -440,13 +501,13 @@
...
@@ -440,13 +501,13 @@
<div
class=
"custom_Main"
>
<div
class=
"custom_Main"
>
<div
class=
"custom_mobile_box"
>
<div
class=
"custom_mobile_box"
>
<div
class=
"poster_bg_box"
>
<div
class=
"poster_bg_box"
>
<template
v-if=
"p
ostersMsg.PosterStyle==1"
>
<template
v-if=
"goodsP
ostersMsg.PosterStyle==1"
>
<div
flex=
"dir:left cross:center"
class=
"poster_User"
>
<div
flex=
"dir:left cross:center"
class=
"poster_User"
>
<img
src=
"../../assets/img/storeDesign/default_head.png"
alt=
""
/>
<img
src=
"../../assets/img/storeDesign/default_head.png"
alt=
""
/>
<div
flex=
"dir:left cross:center main-center"
>
用户昵称向您推荐一个好物
</div>
<div
flex=
"dir:left cross:center main-center"
>
用户昵称向您推荐一个好物
</div>
</div>
</div>
<div
class=
"poster_goodImg"
>
<div
class=
"poster_goodImg"
>
<PictureCheck
:pictureNum=
"postersMsg.pictureNum
"
></PictureCheck>
<PictureCheck
:GoodsImgCount=
"goodsPostersMsg.GoodsImgCount
"
></PictureCheck>
</div>
</div>
<div
flex=
"dir:left cross:center"
class=
"goodsone_bg"
>
<div
flex=
"dir:left cross:center"
class=
"goodsone_bg"
>
<div
flex=
"dir:top main:center"
>
<div
flex=
"dir:top main:center"
>
...
@@ -457,12 +518,12 @@
...
@@ -457,12 +518,12 @@
</div>
</div>
<div
class=
"goods_remark"
>
长按识别小程序码进入
</div>
<div
class=
"goods_remark"
>
长按识别小程序码进入
</div>
</div>
</div>
<img
src=
"../../assets/img/default_qr_code.png"
alt=
""
/>
<img
src=
"../../assets/img/default_qr_code.png"
alt=
""
/>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"p
ostersMsg.PosterStyle==2"
>
<
template
v-else-if=
"goodsP
ostersMsg.PosterStyle==2"
>
<div
class=
"custom_Second"
>
<div
class=
"custom_Second"
>
<PictureCheck
:pictureNum=
"postersMsg.pictureNum
"
></PictureCheck>
<PictureCheck
:GoodsImgCount=
"goodsPostersMsg.GoodsImgCount
"
></PictureCheck>
</div>
</div>
<div
class=
"custom_SecondBG"
>
<div
class=
"custom_SecondBG"
>
<div
class=
"cuSecond_goodsName"
>
商品名称|商品名称
</div>
<div
class=
"cuSecond_goodsName"
>
商品名称|商品名称
</div>
...
@@ -473,7 +534,7 @@
...
@@ -473,7 +534,7 @@
<div
flex=
"dir:left cross:center"
style=
"margin-top: 90px;"
>
<div
flex=
"dir:left cross:center"
style=
"margin-top: 90px;"
>
<div
flex=
"dir:top"
>
<div
flex=
"dir:top"
>
<div
flex=
"dir:left cross:center"
style=
"margin:96px 0 15px 0;"
>
<div
flex=
"dir:left cross:center"
style=
"margin:96px 0 15px 0;"
>
<img
class=
"customSecond_user"
src=
"../../assets/img/storeDesign/default_head.png"
alt=
""
/>
<img
class=
"customSecond_user"
src=
"../../assets/img/storeDesign/default_head.png"
alt=
""
/>
<div
style=
"color:#353535;margin-left:26px;"
>
用户昵称
</div>
<div
style=
"color:#353535;margin-left:26px;"
>
用户昵称
</div>
</div>
</div>
<div
flex=
"dir-left main:center cross:center"
class=
"CusSecondRemark"
>
<div
flex=
"dir-left main:center cross:center"
class=
"CusSecondRemark"
>
...
@@ -485,7 +546,7 @@
...
@@ -485,7 +546,7 @@
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"p
ostersMsg.PosterStyle==3"
>
<
template
v-else-if=
"goodsP
ostersMsg.PosterStyle==3"
>
<div
class=
"app-style-three"
>
<div
class=
"app-style-three"
>
<div
flex=
"dir:left cross:center"
class=
"three_User"
style=
"margin:40px 0 38px 0;"
>
<div
flex=
"dir:left cross:center"
class=
"three_User"
style=
"margin:40px 0 38px 0;"
>
<img
src=
"../../assets/img/storeDesign/default_head.png"
>
<img
src=
"../../assets/img/storeDesign/default_head.png"
>
...
@@ -497,7 +558,7 @@
...
@@ -497,7 +558,7 @@
</div>
</div>
</div>
</div>
<div
style=
"width:680px;height:680px;margin:0 auto;"
>
<div
style=
"width:680px;height:680px;margin:0 auto;"
>
<PictureCheck
:pictureNum=
"postersMsg.pictureNum"
></PictureCheck>
<PictureCheck
:GoodsImgCount=
"goodsPostersMsg.GoodsImgCount"
></PictureCheck>
</div>
</div>
<div
flex=
"dir:top cross:center"
>
<div
flex=
"dir:top cross:center"
>
<div
class=
"cusThree_name"
>
商品名称|商品名称
</div>
<div
class=
"cusThree_name"
>
商品名称|商品名称
</div>
...
@@ -507,11 +568,11 @@
...
@@ -507,11 +568,11 @@
</div>
</div>
</div>
</div>
<div
flex=
"dir:left cross:center main:center"
class=
"cusThree_qrcode"
>
<div
flex=
"dir:left cross:center main:center"
class=
"cusThree_qrcode"
>
<img
src=
"../../assets/img/default_qr_code.png"
style=
"width:230px;height:230px;"
alt=
""
/>
<img
src=
"../../assets/img/default_qr_code.png"
style=
"width:230px;height:230px;"
alt=
""
/>
<div>
长按识别小程序码 即可查看
</div>
<div>
长按识别小程序码 即可查看
</div>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"p
ostersMsg.PosterStyle==4"
>
<
template
v-else-if=
"goodsP
ostersMsg.PosterStyle==4"
>
<div
class=
"app-style-four"
>
<div
class=
"app-style-four"
>
<div
flex=
"dir:left cross:center"
class=
"user"
><img
src=
"../../assets/img/storeDesign/default_head.png"
>
<div
flex=
"dir:left cross:center"
class=
"user"
><img
src=
"../../assets/img/storeDesign/default_head.png"
>
<div
flex=
"dir:left cross:center main-center"
>
<div
flex=
"dir:left cross:center main-center"
>
...
@@ -525,7 +586,7 @@
...
@@ -525,7 +586,7 @@
<div
style=
"font-size: 56px; line-height: 1;"
>
160
</div>
<div
style=
"font-size: 56px; line-height: 1;"
>
160
</div>
</div>
</div>
<div
class=
"goods-image"
>
<div
class=
"goods-image"
>
<PictureCheck
:pictureNum=
"postersMsg.pictureNum
"
></PictureCheck>
<PictureCheck
:GoodsImgCount=
"goodsPostersMsg.GoodsImgCount
"
></PictureCheck>
</div>
</div>
<div
flex=
"cross:center dir:top"
class=
"qrcode"
>
<div
flex=
"cross:center dir:top"
class=
"qrcode"
>
<img
src=
"../../assets/img/default_qr_code.png"
alt=
""
>
<img
src=
"../../assets/img/default_qr_code.png"
alt=
""
>
...
@@ -540,41 +601,41 @@
...
@@ -540,41 +601,41 @@
<div
class=
"custom_rightCheck"
style=
"padding:30px 0 50px;"
>
<div
class=
"custom_rightCheck"
style=
"padding:30px 0 50px;"
>
<el-form
label-width=
"100px"
>
<el-form
label-width=
"100px"
>
<el-form-item
label=
"海报样式"
>
<el-form-item
label=
"海报样式"
>
<el-radio-group
v-model=
"p
ostersMsg.PosterStyle"
style=
"width:345px;"
>
<el-radio-group
v-model=
"goodsP
ostersMsg.PosterStyle"
style=
"width:345px;"
>
<div
class=
"poster-style-box"
@
click=
"p
ostersMsg.PosterStyle=1"
>
<div
class=
"poster-style-box"
@
click=
"goodsP
ostersMsg.PosterStyle=1"
>
<el-radio
:label=
"1"
>
样式一
</el-radio>
<el-radio
:label=
"1"
>
样式一
</el-radio>
<img
src=
"../../assets/img/storeDesign/check1.png"
alt=
""
>
<img
src=
"../../assets/img/storeDesign/check1.png"
alt=
""
>
</div>
</div>
<div
class=
"poster-style-box"
@
click=
"p
ostersMsg.PosterStyle=2"
>
<div
class=
"poster-style-box"
@
click=
"goodsP
ostersMsg.PosterStyle=2"
>
<el-radio
:label=
"2"
>
样式二
</el-radio>
<el-radio
:label=
"2"
>
样式二
</el-radio>
<img
src=
"../../assets/img/storeDesign/check2.png"
alt=
""
>
<img
src=
"../../assets/img/storeDesign/check2.png"
alt=
""
>
</div>
</div>
<div
class=
"poster-style-box"
@
click=
"p
ostersMsg.PosterStyle=3"
>
<div
class=
"poster-style-box"
@
click=
"goodsP
ostersMsg.PosterStyle=3"
>
<el-radio
:label=
"3"
>
样式三
</el-radio>
<el-radio
:label=
"3"
>
样式三
</el-radio>
<img
src=
"../../assets/img/storeDesign/check3.png"
alt=
""
>
<img
src=
"../../assets/img/storeDesign/check3.png"
alt=
""
>
</div>
</div>
<div
class=
"poster-style-box"
@
click=
"p
ostersMsg.PosterStyle=4"
>
<div
class=
"poster-style-box"
@
click=
"goodsP
ostersMsg.PosterStyle=4"
>
<el-radio
:label=
"4"
>
样式四
</el-radio>
<el-radio
:label=
"4"
>
样式四
</el-radio>
<img
src=
"../../assets/img/storeDesign/check4.png"
alt=
""
>
<img
src=
"../../assets/img/storeDesign/check4.png"
alt=
""
>
</div>
</div>
</el-radio-group>
</el-radio-group>
</el-form-item>
</el-form-item>
<el-form-item
label=
"商品图数量"
>
<el-form-item
label=
"商品图数量"
>
<el-radio-group
v-model=
"postersMsg.pictureNum
"
style=
"width:450px;"
>
<el-radio-group
v-model=
"goodsPostersMsg.GoodsImgCount
"
style=
"width:450px;"
>
<div
class=
"poster-pic-box"
@
click=
"postersMsg.pictureNum
=1"
>
<div
class=
"poster-pic-box"
@
click=
"goodsPostersMsg.GoodsImgCount
=1"
>
<el-radio
:label=
"1"
>
一张
</el-radio>
<el-radio
:label=
"1"
>
一张
</el-radio>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
style=
"height: 50%; width: 100%;"
></div>
<div
style=
"height: 50%; width: 100%;"
></div>
</div>
</div>
</div>
</div>
<div
class=
"poster-pic-box"
@
click=
"postersMsg.pictureNum
=2"
>
<div
class=
"poster-pic-box"
@
click=
"goodsPostersMsg.GoodsImgCount
=2"
>
<el-radio
:label=
"2"
>
二张
</el-radio>
<el-radio
:label=
"2"
>
二张
</el-radio>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
style=
"height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 100%;"
></div>
<div
style=
"height: 50%; width: 100%;"
></div>
</div>
</div>
</div>
</div>
<div
class=
"poster-pic-box"
@
click=
"postersMsg.pictureNum
=3"
>
<div
class=
"poster-pic-box"
@
click=
"goodsPostersMsg.GoodsImgCount
=3"
>
<el-radio
:label=
"3"
>
三张
</el-radio>
<el-radio
:label=
"3"
>
三张
</el-radio>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
style=
"height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
...
@@ -582,19 +643,23 @@
...
@@ -582,19 +643,23 @@
<div
style=
"height: 50%; width: 50%;"
></div>
<div
style=
"height: 50%; width: 50%;"
></div>
</div>
</div>
</div>
</div>
<div
class=
"poster-pic-box"
@
click=
"postersMsg.pictureNum
=4"
>
<div
class=
"poster-pic-box"
@
click=
"goodsPostersMsg.GoodsImgCount
=4"
>
<el-radio
:label=
"4"
>
四张
</el-radio>
<el-radio
:label=
"4"
>
四张
</el-radio>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"
>
</div>
<div
style=
"height: 50%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%;"
></div>
<div
style=
"height: 50%; width: 50%;"
></div>
</div>
</div>
</div>
</div>
<div
class=
"poster-pic-box"
@
click=
"postersMsg.pictureNum
=5"
>
<div
class=
"poster-pic-box"
@
click=
"goodsPostersMsg.GoodsImgCount
=5"
>
<el-radio
:label=
"5"
>
五张
</el-radio>
<el-radio
:label=
"5"
>
五张
</el-radio>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
flex=
"dir:left"
class=
"custom_grid"
>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"
>
</div>
<div
style=
"height: 33.3%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 33.3%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 16.6%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
<div
style=
"height: 16.6%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"
></div>
...
@@ -606,7 +671,7 @@
...
@@ -606,7 +671,7 @@
</el-form>
</el-form>
</div>
</div>
<div
class=
"customSecond_btmdiv"
>
<div
class=
"customSecond_btmdiv"
>
<el-button
size=
"small"
type=
"primary
"
>
保存
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"SetGoodPosterModule()
"
>
保存
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -622,107 +687,229 @@
...
@@ -622,107 +687,229 @@
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
activeName
:
'1'
,
activeName
:
'1'
,
checkIndex
:
1
,
checkIndex
:
1
,
//二维码最大上边距
//二维码最大上边距
maxTwocodeTop
:
0
,
maxTwocodeTop
:
0
,
//二维码最大左边距
//二维码最大左边距
maxTwocodeLeft
:
0
,
maxTwocodeLeft
:
0
,
//昵称最大上边距
//昵称最大上边距
nickNameTop
:
0
,
nickNameTop
:
0
,
//昵称最大左边距
//昵称最大左边距
nickNameLeft
:
0
,
nickNameLeft
:
0
,
//头像最大上边距
//头像最大上边距
headerMaxTop
:
0
,
headerMaxTop
:
0
,
//头像最大左边距
//头像最大左边距
headerMaxLeft
:
0
,
headerMaxLeft
:
0
,
//分销海报判断显示那一坨
//分销海报判断显示那一坨
isShowShareIndex
:
1
,
isShowShareIndex
:
1
,
ShareMsg
:[{
//分销默认背景图
isActive
:
1
,
sharePosterDefaultImg
:
this
.
domainManager
().
ImageUrl
+
'/Static/shareposterdefault.jpg'
,
isShow
:
0
,
ShareTabs
:
[{
name
:
'头像'
,
isActive
:
1
,
//大小
isShow
:
1
,
size
:
120
,
name
:
'头像'
,
//上边距
},
{
upMargin
:
20
,
isActive
:
0
,
//左边距
isShow
:
1
,
leftMargin
:
20
name
:
'昵称'
,
},{
},
{
isActive
:
0
,
isActive
:
0
,
isShow
:
0
,
isShow
:
0
,
name
:
'昵称'
,
name
:
'二维码'
,
//大小
size
:
40
,
//上边距
upMargin
:
60
,
//左边距
leftMargin
:
160
,
nameColor
:
'rgb(0, 0, 0)'
},{
isActive
:
0
,
isShow
:
1
,
//形状
ShapeStyle
:
1
,
name
:
'二维码'
,
//大小
size
:
162
,
//上边距
upMargin
:
1022
,
//左边距
leftMargin
:
76
}],
}],
//分销海报
ShareMsg
:
{
Id
:
0
,
TenantId
:
0
,
MallBaseId
:
0
,
PosterBgImg
:
""
,
//海报背景图
IsShowHead
:
0
,
//是否显示头像(0-显示,1-不显示)
HeadSize
:
0
,
//头像大小
HeadPaddingTop
:
0
,
//头像上间距
HeadPaddingLeft
:
0
,
//头像左间距
IsShowNick
:
0
,
//是否显示昵称(0-显示,1-不显示)
NickSize
:
0
,
//昵称大小
NickPaddingTop
:
0
,
//昵称上间距
NickColor
:
""
,
//昵称颜色
NickPaddingLeft
:
0
,
//昵称左间距
IsShowQrCode
:
0
,
//是否显示二维码(0-显示,1-不显示)
QrCodeSize
:
0
,
//二维码大小
QrCodePaddingTop
:
0
,
//二维码上间距
QrCodePaddingLeft
:
0
,
//二维码左间距
QrCodeType
:
0
,
//二维码形状(0-圆形,1-方形)
},
//商品海报msg
//商品海报msg
postersMsg
:{
goodsPostersMsg
:
{
PosterStyle
:
1
,
Id
:
0
,
pictureNum
:
1
PosterStyle
:
1
,
//海报样式
GoodsImgCount
:
1
}
}
};
};
},
},
created
()
{
created
()
{},
},
components
:
{
components
:
{
PictureCheck
,
PictureCheck
,
thematicPosters
thematicPosters
},
},
methods
:
{
methods
:
{
//切换
//切换
handleClick
(
tab
){
handleClick
(
tab
)
{
this
.
checkIndex
=
tab
.
name
;
this
.
checkIndex
=
tab
.
name
;
},
},
//点击切换
//点击切换
getC
Hecked
(
item
,
index
)
{
getC
hecked
(
item
,
index
)
{
this
.
ShareMsg
.
forEach
(
x
=>
{
this
.
ShareTabs
.
forEach
(
x
=>
{
x
.
isActive
=
0
;
x
.
isActive
=
0
;
})
})
item
.
isActive
=
1
;
item
.
isActive
=
1
;
item
.
isShow
=
1
;
item
.
isShow
=
0
;
this
.
isShowShareIndex
=
index
+
1
switch
(
index
)
{
case
0
:
this
.
ShareMsg
.
IsShowHead
=
item
.
isShow
;
break
;
case
1
:
this
.
ShareMsg
.
IsShowNick
=
item
.
isShow
;
break
;
case
2
:
this
.
ShareMsg
.
IsShowQrCode
=
item
.
isShow
;
break
;
}
this
.
isShowShareIndex
=
index
+
1
;
},
//删除选项
deleteItem
(
item
,
index
)
{
item
.
isShow
=
1
;
switch
(
index
)
{
case
0
:
this
.
ShareMsg
.
IsShowHead
=
item
.
isShow
;
break
;
case
1
:
this
.
ShareMsg
.
IsShowNick
=
item
.
isShow
;
break
;
case
2
:
this
.
ShareMsg
.
IsShowQrCode
=
item
.
isShow
;
break
;
}
},
},
//拉伸二维码尺寸动态设置最大值
//拉伸二维码尺寸动态设置最大值
getCodeMax
(
chicun
,
num
){
getCodeMax
(
chicun
,
num
)
{
if
(
num
==
0
){
if
(
num
==
0
)
{
this
.
headerMaxTop
=
1334
-
chicun
;
this
.
headerMaxTop
=
1334
-
chicun
;
this
.
headerMaxLeft
=
750
-
chicun
;
this
.
headerMaxLeft
=
750
-
chicun
;
}
else
if
(
num
==
1
){
}
else
if
(
num
==
1
)
{
this
.
nickNameTop
=
1334
-
chicun
;
this
.
nickNameTop
=
1334
-
chicun
;
this
.
nickNameLeft
=
750
-
chicun
;
this
.
nickNameLeft
=
750
-
chicun
;
}
else
{
}
else
{
this
.
maxTwocodeTop
=
1334
-
chicun
;
this
.
maxTwocodeTop
=
1334
-
chicun
;
this
.
maxTwocodeLeft
=
750
-
chicun
;
this
.
maxTwocodeLeft
=
750
-
chicun
;
}
},
//获取分销海报
GetFenXiaoPoster
()
{
this
.
apipost
(
"/api/Tenant/GetFenXiaoPoster"
,
{},
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
var
jsonData
=
res
.
data
.
data
;
if
(
jsonData
)
{
this
.
ShareMsg
.
Id
=
jsonData
.
Id
;
this
.
ShareMsg
.
PosterBgImg
=
jsonData
.
PosterBgImg
;
this
.
ShareMsg
.
IsShowHead
=
jsonData
.
IsShowHead
;
this
.
ShareMsg
.
HeadSize
=
jsonData
.
HeadSize
;
this
.
ShareMsg
.
HeadPaddingTop
=
jsonData
.
HeadPaddingTop
;
this
.
ShareMsg
.
HeadPaddingLeft
=
jsonData
.
HeadPaddingLeft
;
this
.
ShareTabs
[
0
].
isShow
=
this
.
ShareMsg
.
IsShowHead
;
this
.
ShareMsg
.
IsShowNick
=
jsonData
.
IsShowNick
;
this
.
ShareMsg
.
NickSize
=
jsonData
.
NickSize
;
this
.
ShareMsg
.
NickPaddingTop
=
jsonData
.
NickPaddingTop
;
this
.
ShareMsg
.
NickPaddingLeft
=
jsonData
.
NickPaddingLeft
;
this
.
ShareMsg
.
NickColor
=
jsonData
.
NickColor
;
this
.
ShareTabs
[
1
].
isShow
=
this
.
ShareMsg
.
IsShowNick
;
this
.
ShareMsg
.
IsShowQrCode
=
jsonData
.
IsShowQrCode
;
this
.
ShareMsg
.
QrCodeSize
=
jsonData
.
QrCodeSize
;
this
.
ShareMsg
.
QrCodePaddingTop
=
jsonData
.
QrCodePaddingTop
;
this
.
ShareMsg
.
QrCodePaddingLeft
=
jsonData
.
QrCodePaddingLeft
;
this
.
ShareMsg
.
QrCodeSize
=
jsonData
.
QrCodeSize
;
this
.
ShareMsg
.
QrCodeType
=
jsonData
.
QrCodeType
;
this
.
ShareTabs
[
2
].
isShow
=
this
.
ShareMsg
.
IsShowQrCode
;
}
else
{
this
.
ShareMsg
.
PosterBgImg
=
this
.
sharePosterDefaultImg
;
this
.
ShareMsg
.
IsShowHead
=
1
;
this
.
ShareMsg
.
HeadSize
=
120
;
this
.
ShareMsg
.
HeadPaddingTop
=
20
;
this
.
ShareMsg
.
HeadPaddingLeft
=
20
;
this
.
ShareMsg
.
IsShowNick
=
1
;
this
.
ShareMsg
.
NickSize
=
40
;
this
.
ShareMsg
.
NickPaddingTop
=
60
;
this
.
ShareMsg
.
NickPaddingLeft
=
160
;
this
.
ShareMsg
.
NickColor
=
"rgb(0, 0, 0)"
;
this
.
ShareMsg
.
IsShowQrCode
=
0
;
this
.
ShareMsg
.
QrCodeSize
=
162
;
this
.
ShareMsg
.
QrCodePaddingTop
=
1022
;
this
.
ShareMsg
.
QrCodePaddingLeft
=
76
;
this
.
ShareMsg
.
QrCodeSize
=
162
;
this
.
ShareMsg
.
QrCodeType
=
0
;
}
}
}
else
{
this
.
Info
(
res
.
data
.
message
);
}
})
},
//添加修改分销海报
SetFenXiaoPoster
()
{
this
.
apipost
(
"/api/Tenant/SetFenXiaoPoster"
,
this
.
ShareMsg
,
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
GetFenXiaoPoster
();
this
.
Success
(
res
.
data
.
message
);
}
else
{
this
.
Info
(
res
.
data
.
message
);
}
})
},
//获取商品海报
GetGoodPoster
()
{
this
.
apipost
(
"/api/Tenant/GetGoodPoster"
,
{},
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
var
jsonData
=
res
.
data
.
data
;
if
(
jsonData
)
{
this
.
goodsPostersMsg
.
Id
=
jsonData
.
Id
;
this
.
goodsPostersMsg
.
PosterStyle
=
jsonData
.
PosterStyle
;
this
.
goodsPostersMsg
.
GoodsImgCount
=
jsonData
.
GoodsImgCount
;
}
else
{
this
.
goodsPostersMsg
.
PosterStyle
=
1
;
this
.
goodsPostersMsg
.
GoodsImgCount
=
1
;
}
}
else
{
this
.
Info
(
res
.
data
.
message
);
}
})
},
//添加修改商品海报
SetGoodPosterModule
()
{
this
.
apipost
(
"/api/Tenant/SetGoodPosterModule"
,
this
.
goodsPostersMsg
,
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
GetGoodPoster
();
this
.
Success
(
res
.
data
.
message
);
}
else
{
this
.
Info
(
res
.
data
.
message
);
}
})
}
}
},
},
mounted
()
{
mounted
()
{
this
.
maxTwocodeTop
=
1334
-
this
.
ShareMsg
[
2
].
size
;
this
.
maxTwocodeTop
=
1334
-
this
.
ShareMsg
.
QrCodeSize
;
this
.
maxTwocodeLeft
=
750
-
this
.
ShareMsg
[
2
].
size
;
this
.
maxTwocodeLeft
=
750
-
this
.
ShareMsg
.
QrCodeSize
;
this
.
nickNameTop
=
1334
-
this
.
ShareMsg
[
1
].
size
;
this
.
nickNameTop
=
1334
-
this
.
ShareMsg
.
NickSize
;
this
.
nickNameLeft
=
750
-
this
.
ShareMsg
[
1
].
size
;
this
.
nickNameLeft
=
750
-
this
.
ShareMsg
.
NickSize
;
this
.
headerMaxTop
=
1334
-
this
.
ShareMsg
[
0
].
size
;
this
.
headerMaxTop
=
1334
-
this
.
ShareMsg
.
HeadSize
;
this
.
headerMaxLeft
=
750
-
this
.
ShareMsg
[
0
].
size
;
this
.
headerMaxLeft
=
750
-
this
.
ShareMsg
.
HeadSize
;
this
.
GetFenXiaoPoster
();
this
.
GetGoodPoster
();
}
}
};
};
</
script
>
</
script
>
src/components/common/PictureCheck.vue
View file @
803c6dd3
...
@@ -84,12 +84,12 @@
...
@@ -84,12 +84,12 @@
</
style
>
</
style
>
<
template
>
<
template
>
<div
class=
"app-style-multi-map"
>
<div
class=
"app-style-multi-map"
>
<template
v-if=
"
pictureNum
==1"
>
<template
v-if=
"
GoodsImgCount
==1"
>
<div
class=
"goods_one"
>
<div
class=
"goods_one"
>
<img
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
<img
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"
pictureNum
==2"
>
<
template
v-else-if=
"
GoodsImgCount
==2"
>
<div
flex=
"dir:left"
class=
"goods-two"
>
<div
flex=
"dir:left"
class=
"goods-two"
>
<div
class=
"el-image"
>
<div
class=
"el-image"
>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
...
@@ -99,7 +99,7 @@
...
@@ -99,7 +99,7 @@
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"
pictureNum
==3"
>
<
template
v-else-if=
"
GoodsImgCount
==3"
>
<div
flex=
"dir:left"
class=
"goods-three"
>
<div
flex=
"dir:left"
class=
"goods-three"
>
<div
class=
"el-image"
>
<div
class=
"el-image"
>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
...
@@ -112,7 +112,7 @@
...
@@ -112,7 +112,7 @@
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"
pictureNum
==4"
>
<
template
v-else-if=
"
GoodsImgCount
==4"
>
<div
flex=
"dir:left"
class=
"goods-four"
>
<div
flex=
"dir:left"
class=
"goods-four"
>
<div
class=
"el-image"
>
<div
class=
"el-image"
>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
...
@@ -128,7 +128,7 @@
...
@@ -128,7 +128,7 @@
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
template
v-else-if=
"
pictureNum
==5"
>
<
template
v-else-if=
"
GoodsImgCount
==5"
>
<div
flex=
"dir:left"
class=
"goods-five"
>
<div
flex=
"dir:left"
class=
"goods-five"
>
<div
class=
"el-image"
>
<div
class=
"el-image"
>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
<img
class=
"postimage_inner"
src=
"../../assets/img/storeDesign/goods-url.png"
alt=
""
/>
...
@@ -151,7 +151,7 @@
...
@@ -151,7 +151,7 @@
</template>
</template>
<
script
>
<
script
>
export
default
{
export
default
{
props
:
[
"
pictureNum
"
],
props
:
[
"
GoodsImgCount
"
],
data
()
{
data
()
{
return
{
return
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment