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
4abd7fdc
Commit
4abd7fdc
authored
Apr 28, 2020
by
黄奎
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
页面修改
parent
df963540
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
505 additions
and
397 deletions
+505
-397
labelBar.vue
src/components/StoreDesign/labelBar.vue
+505
-397
No files found.
src/components/StoreDesign/labelBar.vue
View file @
4abd7fdc
<
style
>
<
style
>
.labelBar
.LB_content
{
.labelBar
.LB_content
{
margin-top
:
10px
;
margin-top
:
10px
;
}
}
.labelBar
.LB_divInner
{
.labelBar
.LB_divInner
{
display
:
flex
;
display
:
flex
;
color
:
#303133
;
color
:
#303133
;
}
}
.labelBar
.Label_mobile
{
.labelBar
.Label_mobile
{
width
:
404px
;
width
:
404px
;
height
:
736px
;
height
:
736px
;
border-radius
:
30px
;
border-radius
:
30px
;
...
@@ -14,7 +16,8 @@
...
@@ -14,7 +16,8 @@
padding
:
33px
12px
;
padding
:
33px
12px
;
margin-right
:
10px
;
margin-right
:
10px
;
}
}
.labelBar
.Label_Screen
{
.labelBar
.Label_Screen
{
border
:
2px
solid
#F3F5F6
;
border
:
2px
solid
#F3F5F6
;
height
:
670px
;
height
:
670px
;
width
:
380px
;
width
:
380px
;
...
@@ -22,7 +25,8 @@
...
@@ -22,7 +25,8 @@
position
:
relative
;
position
:
relative
;
background-color
:
#F7F7F7
;
background-color
:
#F7F7F7
;
}
}
.labelBar
.Label_Head
{
.labelBar
.Label_Head
{
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
left
:
0
;
left
:
0
;
...
@@ -33,7 +37,8 @@
...
@@ -33,7 +37,8 @@
font-weight
:
bolder
;
font-weight
:
bolder
;
text-align
:
center
;
text-align
:
center
;
}
}
.labelBar
.Label_foot
{
.labelBar
.Label_foot
{
position
:
absolute
;
position
:
absolute
;
bottom
:
0
;
bottom
:
0
;
left
:
0
;
left
:
0
;
...
@@ -42,42 +47,51 @@
...
@@ -42,42 +47,51 @@
display
:
flex
;
display
:
flex
;
flex-direction
:
row
;
flex-direction
:
row
;
}
}
.labelBar
.Label_foot
>
div
{
.labelBar
.Label_foot
>
div
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
flex-grow
:
1
;
flex-grow
:
1
;
flex-direction
:
column
;
flex-direction
:
column
;
}
}
.Label_Screen
.Label_foot
.nav-icon
{
.Label_Screen
.Label_foot
.nav-icon
{
height
:
20px
;
height
:
20px
;
width
:
20px
;
width
:
20px
;
}
}
.labelBar
.Label_Right
{
width
:
100%
;
.labelBar
.Label_Right
{
width
:
100%
;
}
}
.Label_RightTop
{
.Label_RightTop
{
background-color
:
#fff
;
background-color
:
#fff
;
}
}
.labelBar
.Label_title
{
.labelBar
.Label_title
{
padding
:
18px
20px
;
padding
:
18px
20px
;
border-bottom
:
1px
solid
#F3F3F3
;
border-bottom
:
1px
solid
#F3F3F3
;
}
}
.labelBar
.Label_RightBtm
{
margin-top
:
20px
;
.labelBar
.Label_RightBtm
{
margin-top
:
20px
;
background-color
:
#fff
;
background-color
:
#fff
;
}
}
.labelBar
.nav_Main
{
.labelBar
.nav_Main
{
display
:
flex
;
display
:
flex
;
justify-content
:
flex-start
;
justify-content
:
flex-start
;
}
}
.labelBar
.nav_IconContent
{
.labelBar
.nav_IconContent
{
display
:
flex
;
display
:
flex
;
flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
justify-content
:
flex-start
;
justify-content
:
flex-start
;
}
}
.labelBar
.nav_Add
{
.labelBar
.nav_Add
{
display
:
flex
;
display
:
flex
;
border
:
1px
dashed
#eeeeee
;
border
:
1px
dashed
#eeeeee
;
cursor
:
pointer
;
cursor
:
pointer
;
width
:
80px
;
width
:
80px
;
height
:
80px
;
height
:
80px
;
...
@@ -85,10 +99,12 @@
...
@@ -85,10 +99,12 @@
align-items
:
center
;
align-items
:
center
;
justify-content
:
center
;
justify-content
:
center
;
}
}
.labelBar
.nav-add-icon
{
.labelBar
.nav-add-icon
{
font-size
:
50px
;
font-size
:
50px
;
color
:
#eeeeee
;
color
:
#eeeeee
;
}
}
.labelBar
.bottom-icon
{
.labelBar
.bottom-icon
{
width
:
80px
;
width
:
80px
;
height
:
80px
;
height
:
80px
;
...
@@ -99,42 +115,51 @@
...
@@ -99,42 +115,51 @@
display
:
flex
;
display
:
flex
;
flex-direction
:
column
;
flex-direction
:
column
;
}
}
.labelBar
.btm_icon
{
.labelBar
.btm_icon
{
width
:
30px
;
width
:
30px
;
height
:
30px
;
height
:
30px
;
}
}
.Btm_ImgIcon
,
.btnCenter
{
.Btm_ImgIcon
,
.btnCenter
{
flex-grow
:
1
;
flex-grow
:
1
;
display
:
flex
;
display
:
flex
;
justify-content
:
center
;
justify-content
:
center
;
align-items
:
center
;
align-items
:
center
;
}
}
.labelBar
.nav_Action
{
display
:
flex
;
.labelBar
.nav_Action
{
display
:
flex
;
position
:
absolute
;
position
:
absolute
;
width
:
100%
;
width
:
100%
;
height
:
26px
;
height
:
26px
;
bottom
:
0
;
bottom
:
0
;
visibility
:
hidden
;
visibility
:
hidden
;
cursor
:
pointer
!important
;
cursor
:
pointer
!important
;
}
}
.nav_Action
span
{
.nav_Action
span
{
display
:
flex
;
display
:
flex
;
flex-grow
:
1
;
flex-grow
:
1
;
align-items
:
center
;
align-items
:
center
;
justify-content
:
center
;
justify-content
:
center
;
}
}
.bottom-icon
:hover
.nav_Action
{
.bottom-icon
:hover
.nav_Action
{
visibility
:
visible
;
visibility
:
visible
;
}
}
.labelBar
.labelBarIconImg
{
.labelBar
.labelBarIconImg
{
width
:
80px
;
width
:
80px
;
height
:
80px
;
height
:
80px
;
}
}
.labelBar
.labelBarIconImg
img
{
width
:
100%
;
.labelBar
.labelBarIconImg
img
{
height
:
100%
;
width
:
100%
;
height
:
100%
;
}
}
</
style
>
</
style
>
<
template
>
<
template
>
<div
class=
"labelBar"
>
<div
class=
"labelBar"
>
...
@@ -143,18 +168,20 @@
...
@@ -143,18 +168,20 @@
<div
class=
"LB_divInner"
>
<div
class=
"LB_divInner"
>
<div
class=
"Label_mobile"
>
<div
class=
"Label_mobile"
>
<div
class=
"Label_Screen"
>
<div
class=
"Label_Screen"
>
<div
class=
"Label_Head"
:style=
"
{color:TextColor,backgroundColor:BackColor}">这里是标题
</div>
<div
class=
"Label_Head"
:style=
"
{color:mallMsg.TopNavWordColor,backgroundColor:mallMsg.TopNavBgColor}">这里是标题
<div
class=
"Label_foot"
:style=
"
{backgroundColor:btmBackground}">
</div>
<div
v-for=
"(item,index) in msg.navObj"
:key=
"index"
@
click=
"getChecked(item)"
>
<div
class=
"Label_foot"
:style=
"
{backgroundColor:mallMsg.BottomNavBgColor}">
<div
v-for=
"(item,index) in mallMsg.BottomTagList"
:key=
"index"
@
click=
"getChecked(item)"
style=
"cursor:pointer;"
>
<div>
<div>
<img
class=
"nav-icon"
v-if=
"item.isActive"
:src=
"domainManager().ImageUrl+'/Static/'+item.c
heckedIcon"
alt=
""
>
<img
class=
"nav-icon"
v-if=
"item.IsActive"
:src=
"item.C
heckedIcon"
alt=
""
>
<img
class=
"nav-icon"
v-else
:src=
"domainManager().ImageUrl+'/Static/'+item.i
con"
alt=
""
>
<img
class=
"nav-icon"
v-else
:src=
"item.DefaultI
con"
alt=
""
>
</div>
</div>
<div
v-if=
"item.isActive"
:style=
"
{color:item.ckedText
Color}">
<div
v-if=
"item.IsActive"
:style=
"
{color:item.Checked
Color}">
{{
item
.
n
ame
}}
{{
item
.
TagN
ame
}}
</div>
</div>
<div
v-else
:style=
"
{color:item.tex
tColor}">
<div
v-else
:style=
"
{color:item.Defaul
tColor}">
{{
item
.
n
ame
}}
{{
item
.
TagN
ame
}}
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -165,13 +192,14 @@
...
@@ -165,13 +192,14 @@
<div
class=
"Label_title"
>
顶部标题栏
</div>
<div
class=
"Label_title"
>
顶部标题栏
</div>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form-item
label=
"文字颜色"
size=
"small"
>
<el-form-item
label=
"文字颜色"
size=
"small"
>
<el-radio-group
v-model=
"msg.textColor
"
@
change=
"changeColor"
>
<el-radio-group
v-model=
"mallMsg.TopNavWordType
"
@
change=
"changeColor"
>
<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-color-picker
size=
"small"
v-model=
"msg.titleBgColor"
@
change=
"getTopBgColort"
></el-color-picker>
<el-color-picker
size=
"small"
v-model=
"mallMsg.TopNavBgColor"
@
change=
"getTopBgColort"
>
</el-color-picker>
</el-form-item>
</el-form-item>
</el-form>
</el-form>
</div>
</div>
...
@@ -179,19 +207,20 @@
...
@@ -179,19 +207,20 @@
<div
class=
"Label_title"
>
底部标签栏
</div>
<div
class=
"Label_title"
>
底部标签栏
</div>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form-item
label=
"背景颜色"
size=
"small"
>
<el-form-item
label=
"背景颜色"
size=
"small"
>
<el-color-picker
size=
"small"
v-model=
"msg.btmBgColor"
@
change=
"getBtmBgColor"
></el-color-picker>
<el-color-picker
size=
"small"
v-model=
"mallMsg.BottomNavBgColor"
@
change=
"getBtmBgColor"
>
</el-color-picker>
</el-form-item>
</el-form-item>
<el-form-item
label=
"导航阴影效果"
size=
"small"
>
<el-form-item
label=
"导航阴影效果"
size=
"small"
>
<el-switch
v-model=
"msg.isShadow
"
></el-switch>
<el-switch
v-model=
"mallMsg.BottomNavIsShadow"
:active-value=
"1"
:inactive-value=
"0
"
></el-switch>
</el-form-item>
</el-form-item>
<el-form-item
label=
"底部导航图标"
size=
"small"
>
<el-form-item
label=
"底部导航图标"
size=
"small"
>
<div
class=
"nav_Main"
>
<div
class=
"nav_Main"
>
<div
class=
"nav_IconContent"
>
<div
class=
"nav_IconContent"
>
<div
class=
"bottom-icon"
v-for=
"(item,index) in msg.navObj
"
:key=
"index"
>
<div
class=
"bottom-icon"
v-for=
"(item,index) in mallMsg.BottomTagList
"
:key=
"index"
>
<div
class=
"Btm_ImgIcon"
>
<div
class=
"Btm_ImgIcon"
>
<img
class=
"btm_icon"
:src=
"domainManager().ImageUrl+'/Static/'+item.i
con"
alt=
""
>
<img
class=
"btm_icon"
:src=
"item.DefaultI
con"
alt=
""
>
</div>
</div>
<div
class=
"btnCenter"
>
{{
item
.
n
ame
}}
</div>
<div
class=
"btnCenter"
>
{{
item
.
TagN
ame
}}
</div>
<div
class=
"nav_Action"
>
<div
class=
"nav_Action"
>
<span
style=
"background: rgba(64, 158, 255, 0.9);"
@
click=
"EditInfo(item)"
>
编辑
</span>
<span
style=
"background: rgba(64, 158, 255, 0.9);"
@
click=
"EditInfo(item)"
>
编辑
</span>
<span
style=
"background: rgba(245, 108, 108, 0.9);"
@
click=
"delItem(index)"
>
删除
</span>
<span
style=
"background: rgba(245, 108, 108, 0.9);"
@
click=
"delItem(index)"
>
删除
</span>
...
@@ -205,6 +234,8 @@
...
@@ -205,6 +234,8 @@
</el-form-item>
</el-form-item>
</el-form>
</el-form>
</div>
</div>
<el-button
size=
"small"
type=
"primary"
@
click=
"saveMsg()"
>
保存
</el-button>
<el-button
size=
"small"
@
click=
"resetInfo()"
>
恢复默认
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -219,7 +250,7 @@
...
@@ -219,7 +250,7 @@
</el-tooltip>
</el-tooltip>
</div>
</div>
<div
class=
"labelBarIconImg"
>
<div
class=
"labelBarIconImg"
>
<img
v-if=
"addMsg.icon"
:src=
"domainManager().ImageUrl+'/Static/'+addMsg.i
con"
alt=
""
/>
<img
v-if=
"addMsg.DefaultIcon"
:src=
"addMsg.DefaultI
con"
alt=
""
/>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
</div>
</div>
</el-form-item>
</el-form-item>
...
@@ -230,21 +261,21 @@
...
@@ -230,21 +261,21 @@
</el-tooltip>
</el-tooltip>
</div>
</div>
<div
class=
"labelBarIconImg"
>
<div
class=
"labelBarIconImg"
>
<img
v-if=
"addMsg.checkedIcon"
:src=
"domainManager().ImageUrl+'/Static/'+addMsg.c
heckedIcon"
alt=
""
/>
<img
v-if=
"addMsg.CheckedIcon"
:src=
"addMsg.C
heckedIcon"
alt=
""
/>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"名称"
prop=
"n
ame"
>
<el-form-item
label=
"名称"
prop=
"TagN
ame"
>
<el-input
type=
"text"
v-model=
"addMsg.n
ame"
size=
"small"
class=
"w400"
maxlength=
"100"
/>
<el-input
type=
"text"
v-model=
"addMsg.TagN
ame"
size=
"small"
class=
"w400"
maxlength=
"100"
/>
</el-form-item>
</el-form-item>
<el-form-item
label=
"文字颜色"
prop=
"textColor"
>
<el-form-item
label=
"文字颜色"
prop=
"textColor"
>
<el-color-picker
size=
"small"
v-model=
"addMsg.tex
tColor"
></el-color-picker>
<el-color-picker
size=
"small"
v-model=
"addMsg.Defaul
tColor"
></el-color-picker>
</el-form-item>
</el-form-item>
<el-form-item
label=
"选中文字颜色"
prop=
"ckedTextColor"
>
<el-form-item
label=
"选中文字颜色"
prop=
"ckedTextColor"
>
<el-color-picker
size=
"small"
v-model=
"addMsg.ckedText
Color"
></el-color-picker>
<el-color-picker
size=
"small"
v-model=
"addMsg.Checked
Color"
></el-color-picker>
</el-form-item>
</el-form-item>
<el-form-item
label=
"导航链接"
prop=
"Url
"
>
<el-form-item
label=
"导航链接"
prop=
"TagLink
"
>
<el-input
v-model=
"addMsg.Url
"
class=
"w400"
size=
"small"
maxlength=
"100"
/>
<el-input
v-model=
"addMsg.TagLink
"
class=
"w400"
size=
"small"
maxlength=
"100"
/>
<el-button
plain
size=
"small"
>
选择链接
</el-button>
<el-button
plain
size=
"small"
>
选择链接
</el-button>
</el-form-item>
</el-form-item>
</el-form>
</el-form>
...
@@ -260,102 +291,125 @@
...
@@ -260,102 +291,125 @@
export
default
{
export
default
{
data
()
{
data
()
{
let
validataIcon
=
(
rule
,
value
,
callback
)
=>
{
let
validataIcon
=
(
rule
,
value
,
callback
)
=>
{
if
(
this
.
addMsg
.
i
con
==
''
)
{
if
(
this
.
addMsg
.
DefaultI
con
==
''
)
{
return
callback
(
new
Error
(
'请选择图标'
));
return
callback
(
new
Error
(
'请选择图标'
));
}
else
{
}
else
{
callback
();
callback
();
}
}
}
}
let
validataCkedIcon
=
(
rule
,
value
,
callback
)
=>
{
let
validataCkedIcon
=
(
rule
,
value
,
callback
)
=>
{
if
(
this
.
addMsg
.
c
heckedIcon
==
''
)
{
if
(
this
.
addMsg
.
C
heckedIcon
==
''
)
{
return
callback
(
new
Error
(
'请选择选中状态图标'
));
return
callback
(
new
Error
(
'请选择选中状态图标'
));
}
else
{
}
else
{
callback
();
callback
();
}
}
}
}
return
{
return
{
//文字颜色
mallMsg
:
{
TextColor
:
''
,
MallBaseId
:
0
,
BackColor
:
'rgb(255, 255, 255)'
,
TopNavWordType
:
1
,
//顶部标题文件颜色类型(0-白色,1-黑色)
//底部颜色
TopNavWordColor
:
"rgb(0, 0, 0)"
,
//顶部标题文字颜色
btmBackground
:
'rgb(255, 255, 255)'
,
TopNavBgColor
:
"rgb(255, 255, 255)"
,
//顶部导航栏背景颜色
BottomNavBgColor
:
"rgb(255, 255, 255)"
,
//底部导航栏背景颜色
BottomNavIsShadow
:
0
,
//导航底部是否开启阴影效果(0-未开启,1-开启)
BottomTagList
:
[],
//底部导航标签栏
},
//显示弹窗
//显示弹窗
isShowDialog
:
false
,
isShowDialog
:
false
,
msg
:{
//默认底部导航列表
//文字颜色
defaultTagList
:
[{
textColor
:
'2'
,
TagId
:
0
,
//标签Id
//选择的顶部背景色
TenantId
:
0
,
//商户Id
titleBgColor
:
'#FFFFFF'
,
MallBaseId
:
0
,
//小程序Id
//底部背景色
TagName
:
'首页'
,
btmBgColor
:
"#FFFFFF"
,
DefaultIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-index.png'
,
//是否导航阴影效果
CheckedIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-index.active.png'
,
isShadow
:
false
,
DefaultColor
:
'rgb(136, 136, 136)'
,
navObj
:[{
CheckedColor
:
'rgb(255, 69, 68)'
,
name
:
'我'
,
TagLink
:
""
,
//链接地址
icon
:
'nav-icon-user.png'
,
TagSort
:
1
,
//排序
checkedIcon
:
'nav-icon-user.active.png'
,
IsActive
:
true
textColor
:
'rgb(136, 136, 136)'
,
},
ckedTextColor
:
'rgb(255, 69, 68)'
,
{
isActive
:
true
TagId
:
0
,
//标签Id
},{
TenantId
:
0
,
//商户Id
name
:
'首页'
,
MallBaseId
:
0
,
//小程序Id
icon
:
'nav-icon-index.png'
,
TagName
:
'分类'
,
checkedIcon
:
'nav-icon-index.active.png'
,
DefaultIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-cat.png'
,
textColor
:
'rgb(136, 136, 136)'
,
CheckedIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-cat.active.png'
,
ckedTextColor
:
'rgb(255, 69, 68)'
,
DefaultColor
:
'rgb(136, 136, 136)'
,
isActive
:
false
CheckedColor
:
'rgb(255, 69, 68)'
,
},{
TagLink
:
""
,
//链接地址
name
:
'购物车'
,
TagSort
:
2
,
//排序
icon
:
'nav-icon-cart.png'
,
IsActive
:
false
checkedIcon
:
'nav-icon-cart.active.png'
,
},
textColor
:
'rgb(136, 136, 136)'
,
{
ckedTextColor
:
'rgb(255, 69, 68)'
,
TagId
:
0
,
//标签Id
isActive
:
false
TenantId
:
0
,
//商户Id
},{
MallBaseId
:
0
,
//小程序Id
name
:
'分类'
,
TagName
:
'购物车'
,
icon
:
'nav-icon-cat.png'
,
DefaultIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-cart.png'
,
checkedIcon
:
'nav-icon-cat.active.png'
,
CheckedIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-cart.active.png'
,
textColor
:
'rgb(136, 136, 136)'
,
DefaultColor
:
'rgb(136, 136, 136)'
,
ckedTextColor
:
'rgb(255, 69, 68)'
,
CheckedColor
:
'rgb(255, 69, 68)'
,
isActive
:
false
TagLink
:
""
,
//链接地址
}]
TagSort
:
3
,
//排序
IsActive
:
false
},
},
addMsg
:{
{
icon
:
''
,
TagId
:
0
,
//标签Id
checkedIcon
:
''
,
TenantId
:
0
,
//商户Id
name
:
''
,
MallBaseId
:
0
,
//小程序Id
textColor
:
'rgb(136, 136, 136)'
,
TagName
:
'我'
,
ckedTextColor
:
'rgb(255, 69, 68)'
,
DefaultIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-user.png'
,
//默认图片
Url
:
''
CheckedIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-user.active.png'
,
//激活状态图片
DefaultColor
:
'rgb(136, 136, 136)'
,
//默认字体颜色
CheckedColor
:
'rgb(255, 69, 68)'
,
//激活字体颜色
TagLink
:
""
,
//链接地址
TagSort
:
4
,
//排序
IsActive
:
false
}
],
addMsg
:
{
TagId
:
0
,
//标签Id
TenantId
:
0
,
//商户Id
MallBaseId
:
0
,
//小程序Id
TagName
:
''
,
DefaultIcon
:
''
,
//默认图片
CheckedIcon
:
''
,
//激活状态图片
DefaultColor
:
'rgb(136, 136, 136)'
,
//默认字体颜色
CheckedColor
:
'rgb(255, 69, 68)'
,
//激活字体颜色
TagLink
:
""
,
//链接地址
TagSort
:
1
,
//排序
IsActive
:
false
},
},
rules
:
{
rules
:
{
icon
:
[{
icon
:
[{
required
:
true
,
required
:
true
,
validator
:
validataIcon
,
validator
:
validataIcon
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
checkedIcon
:
[{
checkedIcon
:
[{
required
:
true
,
required
:
true
,
validator
:
validataCkedIcon
,
validator
:
validataCkedIcon
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
name
:
[{
TagName
:
[{
required
:
true
,
required
:
true
,
message
:
"请输入导航名称"
,
message
:
"请输入导航名称"
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
textColor
:
[{
textColor
:
[{
required
:
true
,
required
:
true
,
message
:
""
,
message
:
""
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
ckedTextColor
:
[{
ckedTextColor
:
[{
required
:
true
,
required
:
true
,
message
:
""
,
message
:
""
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
Url
:
[{
TagLink
:
[{
required
:
true
,
required
:
true
,
message
:
"请选择导航链接"
,
message
:
"请选择导航链接"
,
trigger
:
"blur"
trigger
:
"blur"
...
@@ -368,68 +422,122 @@
...
@@ -368,68 +422,122 @@
},
},
methods
:
{
methods
:
{
//点击切换
//点击切换
getChecked
(
item
)
{
getChecked
(
item
)
{
this
.
msg
.
navObj
.
forEach
(
x
=>
{
this
.
mallMsg
.
BottomTagList
.
forEach
(
x
=>
{
x
.
isActive
=
false
;
x
.
IsActive
=
false
;
})
})
item
.
isActive
=!
item
.
i
sActive
;
item
.
IsActive
=
!
item
.
I
sActive
;
},
},
//切换文字颜色
//切换文字颜色
changeColor
(
val
){
changeColor
(
val
)
{
console
.
log
(
val
,
'val'
)
if
(
this
.
mallMsg
.
TopNavWordType
==
0
)
{
if
(
val
==
1
){
this
.
mallMsg
.
TopNavWordColor
=
"#fff"
this
.
TextColor
=
"#fff"
}
else
{
}
else
{
this
.
mallMsg
.
TopNavWordColor
=
"rgb(0, 0, 0)"
this
.
TextColor
=
"rgb(0, 0, 0)"
}
}
},
},
//切换顶部背景色
//切换顶部背景色
getTopBgColort
(
val
)
{
getTopBgColort
(
val
)
{
this
.
BackColor
=
val
;
this
.
mallMsg
.
TopNavBgColor
=
val
;
},
},
//切换底部背景色
//切换底部背景色
getBtmBgColor
(
val
)
{
getBtmBgColor
(
val
)
{
this
.
btmBackground
=
val
;
this
.
mallMsg
.
BottomNavBgColor
=
val
;
},
},
//删除底部图标
//删除底部图标
delItem
(
index
)
{
delItem
(
index
)
{
this
.
msg
.
navObj
.
splice
(
index
,
1
);
this
.
mallMsg
.
BottomTagList
.
splice
(
index
,
1
);
},
},
//上传图标
//上传图标
UploadIcon
(){
UploadIcon
()
{
this
.
addMsg
.
DefaultIcon
=
""
;
},
},
//上传选中图标
//上传选中图标
UploadCkedIcon
(){
UploadCkedIcon
()
{
this
.
addMsg
.
CheckedIcon
=
""
;
},
},
//点击添加图标
//点击添加图标
addIconList
(){
addIconList
()
{
this
.
isShowDialog
=
true
;
this
.
isShowDialog
=
true
;
this
.
addMsg
.
icon
=
''
;
var
item
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
addMsg
))
this
.
addMsg
.
checkedIcon
=
''
;
this
.
mallMsg
.
BottomTagList
.
push
(
item
);
this
.
addMsg
.
name
=
''
;
this
.
EditInfo
(
item
);
this
.
addMsg
.
textColor
=
'rgb(136, 136, 136)'
;
this
.
addMsg
.
ckedTextColor
=
'rgb(255, 69, 68)'
;
this
.
addMsg
.
Url
=
''
;
},
},
//点击编辑
//点击编辑
EditInfo
(
item
)
{
EditInfo
(
item
)
{
this
.
addMsg
=
JSON
.
parse
(
JSON
.
stringify
(
item
))
;
this
.
addMsg
=
item
;
this
.
isShowDialog
=
true
;
this
.
isShowDialog
=
true
;
},
},
//提交数据
//提交数据
submitform
(
addMsg
)
{
submitform
(
addMsg
)
{
//提交创建、修改表单
//提交创建、修改表单
this
.
$refs
[
addMsg
].
validate
(
valid
=>
{
this
.
$refs
[
addMsg
].
validate
(
valid
=>
{
if
(
valid
)
{
if
(
valid
)
{
this
.
saveMsg
()
;
this
.
isShowDialog
=
false
;
}
else
{
}
else
{
return
false
;
return
false
;
}
}
});
});
},
},
//获取导航栏设置
getNavData
()
{
var
qMsg
=
{
isGetNav
:
1
,
MallBaseId
:
this
.
getLocalStorage
().
MallBaseId
};
this
.
apipost
(
"/api/Tenant/GetMiniPrograme"
,
qMsg
,
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
mallMsg
.
MallBaseId
=
res
.
data
.
data
.
MallBaseId
;
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
TopNavWordType
)
{
this
.
mallMsg
.
TopNavWordType
=
res
.
data
.
data
.
TopNavWordType
;
}
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
TopNavWordColor
)
{
this
.
mallMsg
.
TopNavWordColor
=
res
.
data
.
data
.
TopNavWordColor
;
}
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
TopNavBgColor
)
{
this
.
mallMsg
.
TopNavBgColor
=
res
.
data
.
data
.
TopNavBgColor
;
}
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
BottomNavBgColor
)
{
this
.
mallMsg
.
BottomNavBgColor
=
res
.
data
.
data
.
BottomNavBgColor
;
}
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
BottomNavIsShadow
)
{
this
.
mallMsg
.
BottomNavIsShadow
=
res
.
data
.
data
.
BottomNavIsShadow
;
}
this
.
mallMsg
.
BottomTagList
=
res
.
data
.
data
.
BottomTagList
;
if
(
this
.
mallMsg
.
BottomTagList
&&
this
.
mallMsg
.
BottomTagList
.
length
==
0
)
{
this
.
mallMsg
.
BottomTagList
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
defaultTagList
))
}
}
else
{
this
.
Info
(
res
.
data
.
message
);
}
})
},
},
mounted
()
{
//保存数据
saveMsg
()
{
if
(
this
.
mallMsg
.
BottomTagList
&&
this
.
mallMsg
.
BottomTagList
.
length
>
0
)
{
this
.
mallMsg
.
BottomTagList
.
forEach
((
item
,
index
)
=>
{
item
.
TagSort
=
Number
(
index
)
+
1
;
});
}
console
.
log
(
"this.mallMsg"
,
this
.
mallMsg
);
this
.
apipost
(
"/api/Tenant/SetMiniProgramMallTag"
,
this
.
mallMsg
,
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
Success
(
"操作成功!"
);
this
.
getNavData
();
}
else
{
this
.
Info
(
res
.
data
.
message
);
}
})
},
//重置
resetInfo
()
{
}
},
mounted
()
{
this
.
getNavData
();
}
}
};
};
</
script
>
</
script
>
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