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
Hide 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
{
display
:
flex
;
.labelBar
.LB_divInner
{
color
:
#303133
;
display
:
flex
;
}
color
:
#303133
;
.labelBar
.Label_mobile
{
}
width
:
404px
;
height
:
736px
;
.labelBar
.Label_mobile
{
border-radius
:
30px
;
width
:
404px
;
background-color
:
#fff
;
height
:
736px
;
padding
:
33px
12px
;
border-radius
:
30px
;
margin-right
:
10px
;
background-color
:
#fff
;
}
padding
:
33px
12px
;
.labelBar
.Label_Screen
{
margin-right
:
10px
;
border
:
2px
solid
#F3F5F6
;
}
height
:
670px
;
width
:
380px
;
.labelBar
.Label_Screen
{
margin
:
0
auto
;
border
:
2px
solid
#F3F5F6
;
position
:
relative
;
height
:
670px
;
background-color
:
#F7F7F7
;
width
:
380px
;
}
margin
:
0
auto
;
.labelBar
.Label_Head
{
position
:
relative
;
position
:
absolute
;
background-color
:
#F7F7F7
;
top
:
0
;
}
left
:
0
;
width
:
376px
;
.labelBar
.Label_Head
{
height
:
60px
;
position
:
absolute
;
line-height
:
60px
;
top
:
0
;
font-size
:
18px
;
left
:
0
;
font-weight
:
bolder
;
width
:
376px
;
text-align
:
center
;
height
:
60px
;
}
line-height
:
60px
;
.labelBar
.Label_foot
{
font-size
:
18px
;
position
:
absolute
;
font-weight
:
bolder
;
bottom
:
0
;
text-align
:
center
;
left
:
0
;
}
width
:
376px
;
height
:
45px
;
.labelBar
.Label_foot
{
display
:
flex
;
position
:
absolute
;
flex-direction
:
row
;
bottom
:
0
;
}
left
:
0
;
.labelBar
.Label_foot
>
div
{
width
:
376px
;
display
:
flex
;
height
:
45px
;
align-items
:
center
;
display
:
flex
;
flex-grow
:
1
;
flex-direction
:
row
;
flex-direction
:
column
;
}
}
.Label_Screen
.Label_foot
.nav-icon
{
.labelBar
.Label_foot
>
div
{
height
:
20px
;
display
:
flex
;
width
:
20px
;
align-items
:
center
;
}
flex-grow
:
1
;
.labelBar
.Label_Right
{
flex-direction
:
column
;
width
:
100%
;
}
}
.Label_RightTop
{
.Label_Screen
.Label_foot
.nav-icon
{
background-color
:
#fff
;
height
:
20px
;
}
width
:
20px
;
.labelBar
.Label_title
{
}
padding
:
18px
20px
;
border-bottom
:
1px
solid
#F3F3F3
;
.labelBar
.Label_Right
{
}
width
:
100%
;
.labelBar
.Label_RightBtm
{
}
margin-top
:
20px
;
background-color
:
#fff
;
.Label_RightTop
{
}
background-color
:
#fff
;
.labelBar
.nav_Main
{
}
display
:
flex
;
justify-content
:
flex-start
;
.labelBar
.Label_title
{
}
padding
:
18px
20px
;
.labelBar
.nav_IconContent
{
border-bottom
:
1px
solid
#F3F3F3
;
display
:
flex
;
}
flex-wrap
:
wrap
;
justify-content
:
flex-start
;
.labelBar
.Label_RightBtm
{
}
margin-top
:
20px
;
.labelBar
.nav_Add
{
background-color
:
#fff
;
display
:
flex
;
}
border
:
1px
dashed
#eeeeee
;
cursor
:
pointer
;
.labelBar
.nav_Main
{
width
:
80px
;
display
:
flex
;
height
:
80px
;
justify-content
:
flex-start
;
margin-right
:
10px
;
}
align-items
:
center
;
justify-content
:
center
;
.labelBar
.nav_IconContent
{
}
display
:
flex
;
.labelBar
.nav-add-icon
{
flex-wrap
:
wrap
;
font-size
:
50px
;
justify-content
:
flex-start
;
color
:
#eeeeee
;
}
}
.labelBar
.bottom-icon
{
.labelBar
.nav_Add
{
width
:
80px
;
display
:
flex
;
height
:
80px
;
border
:
1px
dashed
#eeeeee
;
margin-right
:
10px
;
cursor
:
pointer
;
border
:
1px
solid
#eeeeee
;
width
:
80px
;
cursor
:
move
;
height
:
80px
;
position
:
relative
;
margin-right
:
10px
;
display
:
flex
;
align-items
:
center
;
flex-direction
:
column
;
justify-content
:
center
;
}
}
.labelBar
.btm_icon
{
width
:
30px
;
.labelBar
.nav-add-icon
{
height
:
30px
;
font-size
:
50px
;
}
color
:
#eeeeee
;
.Btm_ImgIcon
,
.btnCenter
{
}
flex-grow
:
1
;
display
:
flex
;
.labelBar
.bottom-icon
{
justify-content
:
center
;
width
:
80px
;
align-items
:
center
;
height
:
80px
;
}
margin-right
:
10px
;
.labelBar
.nav_Action
{
border
:
1px
solid
#eeeeee
;
display
:
flex
;
cursor
:
move
;
position
:
absolute
;
position
:
relative
;
width
:
100%
;
display
:
flex
;
height
:
26px
;
flex-direction
:
column
;
bottom
:
0
;
}
visibility
:
hidden
;
cursor
:
pointer
!important
;
.labelBar
.btm_icon
{
}
width
:
30px
;
.nav_Action
span
{
height
:
30px
;
display
:
flex
;
}
flex-grow
:
1
;
align-items
:
center
;
.Btm_ImgIcon
,
justify-content
:
center
;
.btnCenter
{
}
flex-grow
:
1
;
.bottom-icon
:hover
.nav_Action
{
display
:
flex
;
visibility
:
visible
;
justify-content
:
center
;
}
align-items
:
center
;
.labelBar
.labelBarIconImg
{
}
width
:
80px
;
height
:
80px
;
.labelBar
.nav_Action
{
}
display
:
flex
;
.labelBar
.labelBarIconImg
img
{
position
:
absolute
;
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
26px
;
}
bottom
:
0
;
visibility
:
hidden
;
cursor
:
pointer
!important
;
}
.nav_Action
span
{
display
:
flex
;
flex-grow
:
1
;
align-items
:
center
;
justify-content
:
center
;
}
.bottom-icon
:hover
.nav_Action
{
visibility
:
visible
;
}
.labelBar
.labelBarIconImg
{
width
:
80px
;
height
:
80px
;
}
.labelBar
.labelBarIconImg
img
{
width
:
100%
;
height
:
100%
;
}
</
style
>
</
style
>
<
template
>
<
template
>
<div
class=
"labelBar"
>
<div
class=
"labelBar"
>
<div
class=
"CommonHeader"
>
标签栏设置
</div>
<div
class=
"CommonHeader"
>
标签栏设置
</div>
<div
class=
"LB_content"
>
<div
class=
"LB_content"
>
<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>
<div
v-for=
"(item,index) in mallMsg.BottomTagList"
:key=
"index"
@
click=
"getChecked(item)"
<img
class=
"nav-icon"
v-if=
"item.isActive"
:src=
"domainManager().ImageUrl+'/Static/'+item.checkedIcon"
alt=
""
>
style=
"cursor:pointer;"
>
<img
class=
"nav-icon"
v-else
:src=
"domainManager().ImageUrl+'/Static/'+item.icon"
alt=
""
>
<div>
</div>
<img
class=
"nav-icon"
v-if=
"item.IsActive"
:src=
"item.CheckedIcon"
alt=
""
>
<div
v-if=
"item.isActive"
:style=
"
{color:item.ckedTextColor}">
<img
class=
"nav-icon"
v-else
:src=
"item.DefaultIcon"
alt=
""
>
{{
item
.
name
}}
</div>
<div
v-else
:style=
"
{color:item.textColor}">
{{
item
.
name
}}
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"Label_Right"
>
<div
v-if=
"item.IsActive"
:style=
"
{color:item.CheckedColor}">
<div
class=
"Label_RightTop"
>
{{
item
.
TagName
}}
<div
class=
"Label_title"
>
顶部标题栏
</div>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form-item
label=
"文字颜色"
size=
"small"
>
<el-radio-group
v-model=
"msg.textColor"
@
change=
"changeColor"
>
<el-radio
label=
"1"
>
白色
</el-radio>
<el-radio
label=
"2"
>
黑色
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label=
"背景颜色"
size=
"small"
>
<el-color-picker
size=
"small"
v-model=
"msg.titleBgColor"
@
change=
"getTopBgColort"
></el-color-picker>
</el-form-item>
</el-form>
</div>
<div
class=
"Label_RightBtm"
>
<div
class=
"Label_title"
>
底部标签栏
</div>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form-item
label=
"背景颜色"
size=
"small"
>
<el-color-picker
size=
"small"
v-model=
"msg.btmBgColor"
@
change=
"getBtmBgColor"
></el-color-picker>
</el-form-item>
<el-form-item
label=
"导航阴影效果"
size=
"small"
>
<el-switch
v-model=
"msg.isShadow"
></el-switch>
</el-form-item>
<el-form-item
label=
"底部导航图标"
size=
"small"
>
<div
class=
"nav_Main"
>
<div
class=
"nav_IconContent"
>
<div
class=
"bottom-icon"
v-for=
"(item,index) in msg.navObj"
:key=
"index"
>
<div
class=
"Btm_ImgIcon"
>
<img
class=
"btm_icon"
:src=
"domainManager().ImageUrl+'/Static/'+item.icon"
alt=
""
>
</div>
<div
class=
"btnCenter"
>
{{
item
.
name
}}
</div>
<div
class=
"nav_Action"
>
<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>
</div>
</div>
</div>
<div
class=
"nav_Add"
@
click=
"addIconList"
>
<i
class=
"el-icon-plus nav-add-icon"
></i>
</div>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
<div
v-else
:style=
"
{color:item.DefaultColor}">
{{
item
.
TagName
}}
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"Label_Right"
>
<!-- 导航菜单编辑 -->
<div
class=
"Label_RightTop"
>
<el-dialog
title=
"导航菜单编辑"
:visible
.
sync=
"isShowDialog"
width=
"800px"
>
<div
class=
"Label_title"
>
顶部标题栏
</div>
<el-form
:model=
"addMsg"
:rules=
"rules"
ref=
"addMsg"
label-width=
"120px"
>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
<el-form-item
label=
"图标"
prop=
"icon"
>
<el-form-item
label=
"文字颜色"
size=
"small"
>
<div>
<el-radio-group
v-model=
"mallMsg.TopNavWordType"
@
change=
"changeColor"
>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"建议尺寸:64*64"
placement=
"top-start"
>
<el-radio
:label=
"0"
>
白色
</el-radio>
<el-button
size=
"small"
@
click=
"UploadIcon"
>
选择文件
</el-button>
<el-radio
:label=
"1"
>
黑色
</el-radio>
</el-tooltip>
</el-radio-group>
</div>
</el-form-item>
<div
class=
"labelBarIconImg"
>
<el-form-item
label=
"背景颜色"
size=
"small"
>
<img
v-if=
"addMsg.icon"
:src=
"domainManager().ImageUrl+'/Static/'+addMsg.icon"
alt=
""
/>
<el-color-picker
size=
"small"
v-model=
"mallMsg.TopNavBgColor"
@
change=
"getTopBgColort"
>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
</el-color-picker>
</div>
</el-form-item>
</el-form-item>
</el-form>
<el-form-item
label=
"选择状态图标"
prop=
"checkedIcon"
>
</div>
<div>
<div
class=
"Label_RightBtm"
>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"建议尺寸:64*64"
placement=
"top-start"
>
<div
class=
"Label_title"
>
底部标签栏
</div>
<el-button
size=
"small"
@
click=
"UploadCkedIcon"
>
选择文件
</el-button>
<el-form
label-width=
"120px"
style=
"padding:20px 0;"
>
</el-tooltip>
<el-form-item
label=
"背景颜色"
size=
"small"
>
</div>
<el-color-picker
size=
"small"
v-model=
"mallMsg.BottomNavBgColor"
@
change=
"getBtmBgColor"
>
<div
class=
"labelBarIconImg"
>
</el-color-picker>
<img
v-if=
"addMsg.checkedIcon"
:src=
"domainManager().ImageUrl+'/Static/'+addMsg.checkedIcon"
alt=
""
/>
</el-form-item>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
<el-form-item
label=
"导航阴影效果"
size=
"small"
>
<el-switch
v-model=
"mallMsg.BottomNavIsShadow"
:active-value=
"1"
:inactive-value=
"0"
></el-switch>
</el-form-item>
<el-form-item
label=
"底部导航图标"
size=
"small"
>
<div
class=
"nav_Main"
>
<div
class=
"nav_IconContent"
>
<div
class=
"bottom-icon"
v-for=
"(item,index) in mallMsg.BottomTagList"
:key=
"index"
>
<div
class=
"Btm_ImgIcon"
>
<img
class=
"btm_icon"
:src=
"item.DefaultIcon"
alt=
""
>
</div>
<div
class=
"btnCenter"
>
{{
item
.
TagName
}}
</div>
<div
class=
"nav_Action"
>
<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>
</div>
</div>
</div>
</el-form-item>
</div>
<el-form-item
label=
"名称"
prop=
"name"
>
<div
class=
"nav_Add"
@
click=
"addIconList"
>
<el-input
type=
"text"
v-model=
"addMsg.name"
size=
"small"
class=
"w400"
maxlength=
"100"
/>
<i
class=
"el-icon-plus nav-add-icon"
></i>
</el-form-item>
</div>
<el-form-item
label=
"文字颜色"
prop=
"textColor"
>
</div>
<el-color-picker
size=
"small"
v-model=
"addMsg.textColor"
></el-color-picker>
</el-form-item>
</el-form-item>
<el-form-item
label=
"选中文字颜色"
prop=
"ckedTextColor"
>
<el-color-picker
size=
"small"
v-model=
"addMsg.ckedTextColor"
></el-color-picker>
</el-form-item>
<el-form-item
label=
"导航链接"
prop=
"Url"
>
<el-input
v-model=
"addMsg.Url"
class=
"w400"
size=
"small"
maxlength=
"100"
/>
<el-button
plain
size=
"small"
>
选择链接
</el-button>
</el-form-item>
</el-form>
</el-form>
<span
slot=
"footer"
class=
"dialog-footer"
>
</div>
<el-button
size=
"small"
@
click=
"isShowDialog = false"
>
取 消
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"saveMsg()"
>
保存
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"submitForm('addMsg')"
>
提交
</el-button>
<el-button
size=
"small"
@
click=
"resetInfo()"
>
恢复默认
</el-button>
</span>
</div>
</el-dialog>
</div>
</div>
</div>
<!-- 导航菜单编辑 -->
<el-dialog
title=
"导航菜单编辑"
:visible
.
sync=
"isShowDialog"
width=
"800px"
>
<el-form
:model=
"addMsg"
:rules=
"rules"
ref=
"addMsg"
label-width=
"120px"
>
<el-form-item
label=
"图标"
prop=
"icon"
>
<div>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"建议尺寸:64*64"
placement=
"top-start"
>
<el-button
size=
"small"
@
click=
"UploadIcon"
>
选择文件
</el-button>
</el-tooltip>
</div>
<div
class=
"labelBarIconImg"
>
<img
v-if=
"addMsg.DefaultIcon"
:src=
"addMsg.DefaultIcon"
alt=
""
/>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
</div>
</el-form-item>
<el-form-item
label=
"选择状态图标"
prop=
"checkedIcon"
>
<div>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"建议尺寸:64*64"
placement=
"top-start"
>
<el-button
size=
"small"
@
click=
"UploadCkedIcon"
>
选择文件
</el-button>
</el-tooltip>
</div>
<div
class=
"labelBarIconImg"
>
<img
v-if=
"addMsg.CheckedIcon"
:src=
"addMsg.CheckedIcon"
alt=
""
/>
<img
v-else
src=
"../../assets/img/default.png"
alt=
""
/>
</div>
</el-form-item>
<el-form-item
label=
"名称"
prop=
"TagName"
>
<el-input
type=
"text"
v-model=
"addMsg.TagName"
size=
"small"
class=
"w400"
maxlength=
"100"
/>
</el-form-item>
<el-form-item
label=
"文字颜色"
prop=
"textColor"
>
<el-color-picker
size=
"small"
v-model=
"addMsg.DefaultColor"
></el-color-picker>
</el-form-item>
<el-form-item
label=
"选中文字颜色"
prop=
"ckedTextColor"
>
<el-color-picker
size=
"small"
v-model=
"addMsg.CheckedColor"
></el-color-picker>
</el-form-item>
<el-form-item
label=
"导航链接"
prop=
"TagLink"
>
<el-input
v-model=
"addMsg.TagLink"
class=
"w400"
size=
"small"
maxlength=
"100"
/>
<el-button
plain
size=
"small"
>
选择链接
</el-button>
</el-form-item>
</el-form>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
size=
"small"
@
click=
"isShowDialog = false"
>
取 消
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"submitForm('addMsg')"
>
提交
</el-button>
</span>
</el-dialog>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
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
:
''
,
{
checkedIcon
:
''
,
TagId
:
0
,
//标签Id
name
:
''
,
TenantId
:
0
,
//商户Id
textColor
:
'rgb(136, 136, 136)'
,
MallBaseId
:
0
,
//小程序Id
ckedTextColor
:
'rgb(255, 69, 68)'
,
TagName
:
'我'
,
Url
:
''
DefaultIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-user.png'
,
//默认图片
},
CheckedIcon
:
this
.
domainManager
().
ImageUrl
+
'/Static/nav-icon-user.active.png'
,
//激活状态图片
rules
:{
DefaultColor
:
'rgb(136, 136, 136)'
,
//默认字体颜色
icon
:
[{
CheckedColor
:
'rgb(255, 69, 68)'
,
//激活字体颜色
required
:
true
,
TagLink
:
""
,
//链接地址
validator
:
validataIcon
,
TagSort
:
4
,
//排序
trigger
:
"blur"
IsActive
:
false
}],
}
checkedIcon
:
[{
],
required
:
true
,
addMsg
:
{
validator
:
validataCkedIcon
,
TagId
:
0
,
//标签Id
trigger
:
"blur"
TenantId
:
0
,
//商户Id
}],
MallBaseId
:
0
,
//小程序Id
name
:[{
TagName
:
''
,
required
:
true
,
DefaultIcon
:
''
,
//默认图片
message
:
"请输入导航名称"
,
CheckedIcon
:
''
,
//激活状态图片
trigger
:
"blur"
DefaultColor
:
'rgb(136, 136, 136)'
,
//默认字体颜色
}],
CheckedColor
:
'rgb(255, 69, 68)'
,
//激活字体颜色
textColor
:[{
TagLink
:
""
,
//链接地址
required
:
true
,
TagSort
:
1
,
//排序
message
:
""
,
IsActive
:
false
trigger
:
"blur"
},
}],
rules
:
{
ckedTextColor
:[{
icon
:
[{
required
:
true
,
required
:
true
,
message
:
""
,
validator
:
validataIcon
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
Url
:[{
checkedIcon
:
[{
required
:
true
,
required
:
true
,
message
:
"请选择导航链接"
,
validator
:
validataCkedIcon
,
trigger
:
"blur"
trigger
:
"blur"
}],
}],
}
TagName
:
[{
required
:
true
,
message
:
"请输入导航名称"
,
trigger
:
"blur"
}],
textColor
:
[{
required
:
true
,
message
:
""
,
trigger
:
"blur"
}],
ckedTextColor
:
[{
required
:
true
,
message
:
""
,
trigger
:
"blur"
}],
TagLink
:
[{
required
:
true
,
message
:
"请选择导航链接"
,
trigger
:
"blur"
}],
}
};
};
},
},
created
()
{
created
()
{
},
},
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
.
isActive
;
item
.
IsActive
=
!
item
.
IsActive
;
},
},
//切换文字颜色
//切换文字颜色
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
)
{
this
.
mallMsg
.
TopNavBgColor
=
val
;
},
//切换底部背景色
getBtmBgColor
(
val
)
{
this
.
mallMsg
.
BottomNavBgColor
=
val
;
},
//删除底部图标
delItem
(
index
)
{
this
.
mallMsg
.
BottomTagList
.
splice
(
index
,
1
);
},
//上传图标
UploadIcon
()
{
this
.
addMsg
.
DefaultIcon
=
""
;
},
//上传选中图标
UploadCkedIcon
()
{
this
.
addMsg
.
CheckedIcon
=
""
;
},
//点击添加图标
addIconList
()
{
this
.
isShowDialog
=
true
;
var
item
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
addMsg
))
this
.
mallMsg
.
BottomTagList
.
push
(
item
);
this
.
EditInfo
(
item
);
},
//点击编辑
EditInfo
(
item
)
{
this
.
addMsg
=
item
;
this
.
isShowDialog
=
true
;
},
//提交数据
submitform
(
addMsg
)
{
//提交创建、修改表单
this
.
$refs
[
addMsg
].
validate
(
valid
=>
{
if
(
valid
)
{
this
.
isShowDialog
=
false
;
}
else
{
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
;
getTopBgColort
(
val
){
}
this
.
BackColor
=
val
;
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
TopNavBgColor
)
{
},
this
.
mallMsg
.
TopNavBgColor
=
res
.
data
.
data
.
TopNavBgColor
;
//切换底部背景色
}
getBtmBgColor
(
val
){
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
BottomNavBgColor
)
{
this
.
btmBackground
=
val
;
this
.
mallMsg
.
BottomNavBgColor
=
res
.
data
.
data
.
BottomNavBgColor
;
},
}
//删除底部图标
if
(
res
.
data
.
data
&&
res
.
data
.
data
.
BottomNavIsShadow
)
{
delItem
(
index
){
this
.
mallMsg
.
BottomNavIsShadow
=
res
.
data
.
data
.
BottomNavIsShadow
;
this
.
msg
.
navObj
.
splice
(
index
,
1
);
}
},
this
.
mallMsg
.
BottomTagList
=
res
.
data
.
data
.
BottomTagList
;
//上传图标
if
(
this
.
mallMsg
.
BottomTagList
&&
this
.
mallMsg
.
BottomTagList
.
length
==
0
)
{
UploadIcon
(){
this
.
mallMsg
.
BottomTagList
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
defaultTagList
))
},
}
//上传选中图标
}
else
{
UploadCkedIcon
(){
this
.
Info
(
res
.
data
.
message
);
},
}
//点击添加图标
})
addIconList
(){
},
this
.
isShowDialog
=
true
;
//保存数据
this
.
addMsg
.
icon
=
''
;
saveMsg
()
{
this
.
addMsg
.
checkedIcon
=
''
;
if
(
this
.
mallMsg
.
BottomTagList
&&
this
.
mallMsg
.
BottomTagList
.
length
>
0
)
{
this
.
addMsg
.
name
=
''
;
this
.
mallMsg
.
BottomTagList
.
forEach
((
item
,
index
)
=>
{
this
.
addMsg
.
textColor
=
'rgb(136, 136, 136)'
;
item
.
TagSort
=
Number
(
index
)
+
1
;
this
.
addMsg
.
ckedTextColor
=
'rgb(255, 69, 68)'
;
});
this
.
addMsg
.
Url
=
''
;
}
},
console
.
log
(
"this.mallMsg"
,
this
.
mallMsg
);
//点击编辑
EditInfo
(
item
){
this
.
apipost
(
"/api/Tenant/SetMiniProgramMallTag"
,
this
.
mallMsg
,
res
=>
{
this
.
addMsg
=
JSON
.
parse
(
JSON
.
stringify
(
item
));
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
isShowDialog
=
true
;
this
.
Success
(
"操作成功!"
);
},
this
.
getNavData
();
//提交数据
}
else
{
submitform
(
addMsg
)
{
this
.
Info
(
res
.
data
.
message
);
//提交创建、修改表单
}
this
.
$refs
[
addMsg
].
validate
(
valid
=>
{
})
if
(
valid
)
{
},
this
.
saveMsg
();
//重置
}
else
{
resetInfo
()
{
return
false
;
}
}
});
},
},
},
mounted
()
{
mounted
()
{
this
.
getNavData
();
}
}
};
};
</
script
>
\ No newline at end of file
</
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