Skip to content

E
ElectricitySheep
Commit 4abd7fdc authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent df963540
Hide whitespace changes
Inline Side-by-side
Showing with 505 additions and 397 deletions
src/components/StoreDesign/labelBar.vue
View file @ 4abd7fdc
<style>
.labelBar .LB_content{
margin-top:10px;
}
.labelBar .LB_divInner{
display: flex;
color:#303133;
}
.labelBar .Label_mobile{
width: 404px;
height: 736px;
border-radius: 30px;
background-color: #fff;
padding: 33px 12px;
margin-right: 10px;
}
.labelBar .Label_Screen{
border: 2px solid #F3F5F6;
height: 670px;
width: 380px;
margin: 0 auto;
position: relative;
background-color: #F7F7F7;
}
.labelBar .Label_Head{
position: absolute;
top: 0;
left: 0;
width: 376px;
height: 60px;
line-height: 60px;
font-size: 18px;
font-weight: bolder;
text-align: center;
}
.labelBar .Label_foot{
position: absolute;
bottom: 0;
left: 0;
width: 376px;
height: 45px;
display: flex;
flex-direction: row;
}
.labelBar .Label_foot>div{
display: flex;
align-items: center;
flex-grow:1;
flex-direction: column;
}
.Label_Screen .Label_foot .nav-icon {
height: 20px;
width: 20px;
}
.labelBar .Label_Right{
width:100%;
}
.Label_RightTop{
background-color: #fff;
}
.labelBar .Label_title{
padding: 18px 20px;
border-bottom: 1px solid #F3F3F3;
}
.labelBar .Label_RightBtm{
margin-top:20px;
background-color: #fff;
}
.labelBar .nav_Main{
display: flex;
justify-content: flex-start;
}
.labelBar .nav_IconContent{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.labelBar .nav_Add{
display: flex;
border:1px dashed #eeeeee;
cursor: pointer;
width: 80px;
height: 80px;
margin-right: 10px;
align-items: center;
justify-content: center;
}
.labelBar .nav-add-icon {
font-size: 50px;
color: #eeeeee;
}
.labelBar .bottom-icon {
width: 80px;
height: 80px;
margin-right: 10px;
border: 1px solid #eeeeee;
cursor: move;
position: relative;
display: flex;
flex-direction: column;
}
.labelBar .btm_icon {
width: 30px;
height: 30px;
}
.Btm_ImgIcon,.btnCenter{
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.labelBar .nav_Action{
display:flex;
position: absolute;
width: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%;
}
.labelBar .LB_content {
margin-top: 10px;
}
.labelBar .LB_divInner {
display: flex;
color: #303133;
}
.labelBar .Label_mobile {
width: 404px;
height: 736px;
border-radius: 30px;
background-color: #fff;
padding: 33px 12px;
margin-right: 10px;
}
.labelBar .Label_Screen {
border: 2px solid #F3F5F6;
height: 670px;
width: 380px;
margin: 0 auto;
position: relative;
background-color: #F7F7F7;
}
.labelBar .Label_Head {
position: absolute;
top: 0;
left: 0;
width: 376px;
height: 60px;
line-height: 60px;
font-size: 18px;
font-weight: bolder;
text-align: center;
}
.labelBar .Label_foot {
position: absolute;
bottom: 0;
left: 0;
width: 376px;
height: 45px;
display: flex;
flex-direction: row;
}
.labelBar .Label_foot>div {
display: flex;
align-items: center;
flex-grow: 1;
flex-direction: column;
}
.Label_Screen .Label_foot .nav-icon {
height: 20px;
width: 20px;
}
.labelBar .Label_Right {
width: 100%;
}
.Label_RightTop {
background-color: #fff;
}
.labelBar .Label_title {
padding: 18px 20px;
border-bottom: 1px solid #F3F3F3;
}
.labelBar .Label_RightBtm {
margin-top: 20px;
background-color: #fff;
}
.labelBar .nav_Main {
display: flex;
justify-content: flex-start;
}
.labelBar .nav_IconContent {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.labelBar .nav_Add {
display: flex;
border: 1px dashed #eeeeee;
cursor: pointer;
width: 80px;
height: 80px;
margin-right: 10px;
align-items: center;
justify-content: center;
}
.labelBar .nav-add-icon {
font-size: 50px;
color: #eeeeee;
}
.labelBar .bottom-icon {
width: 80px;
height: 80px;
margin-right: 10px;
border: 1px solid #eeeeee;
cursor: move;
position: relative;
display: flex;
flex-direction: column;
}
.labelBar .btm_icon {
width: 30px;
height: 30px;
}
.Btm_ImgIcon,
.btnCenter {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.labelBar .nav_Action {
display: flex;
position: absolute;
width: 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>
<template>
<div class="labelBar">
<div class="CommonHeader">标签栏设置</div>
<div class="LB_content">
<div class="LB_divInner">
<div class="Label_mobile">
<div class="Label_Screen">
<div class="Label_Head" :style="{color:TextColor,backgroundColor:BackColor}">这里是标题</div>
<div class="Label_foot" :style="{backgroundColor:btmBackground}">
<div v-for="(item,index) in msg.navObj" :key="index" @click="getChecked(item)">
<div>
<img class="nav-icon" v-if="item.isActive" :src="domainManager().ImageUrl+'/Static/'+item.checkedIcon" alt="">
<img class="nav-icon" v-else :src="domainManager().ImageUrl+'/Static/'+item.icon" alt="">
</div>
<div v-if="item.isActive" :style="{color:item.ckedTextColor}">
{{item.name}}
</div>
<div v-else :style="{color:item.textColor}">
{{item.name}}
</div>
</div>
</div>
</div>
<div class="labelBar">
<div class="CommonHeader">标签栏设置</div>
<div class="LB_content">
<div class="LB_divInner">
<div class="Label_mobile">
<div class="Label_Screen">
<div class="Label_Head" :style="{color:mallMsg.TopNavWordColor,backgroundColor:mallMsg.TopNavBgColor}">这里是标题
</div>
<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>
<img class="nav-icon" v-if="item.IsActive" :src="item.CheckedIcon" alt="">
<img class="nav-icon" v-else :src="item.DefaultIcon" alt="">
</div>
<div class="Label_Right">
<div class="Label_RightTop">
<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 v-if="item.IsActive" :style="{color:item.CheckedColor}">
{{item.TagName}}
</div>
</div>
<div v-else :style="{color:item.DefaultColor}">
{{item.TagName}}
</div>
</div>
</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.icon" :src="domainManager().ImageUrl+'/Static/'+addMsg.icon" 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="domainManager().ImageUrl+'/Static/'+addMsg.checkedIcon" alt="" />
<img v-else src="../../assets/img/default.png" alt="" />
<div class="Label_Right">
<div class="Label_RightTop">
<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="mallMsg.TopNavWordType" @change="changeColor">
<el-radio :label="0">白色</el-radio>
<el-radio :label="1">黑色</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="背景颜色" size="small">
<el-color-picker size="small" v-model="mallMsg.TopNavBgColor" @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="mallMsg.BottomNavBgColor" @change="getBtmBgColor">
</el-color-picker>
</el-form-item>
<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>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input type="text" v-model="addMsg.name" size="small" class="w400" maxlength="100" />
</el-form-item>
<el-form-item label="文字颜色" prop="textColor">
<el-color-picker size="small" v-model="addMsg.textColor"></el-color-picker>
</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>
</div>
<div class="nav_Add" @click="addIconList">
<i class="el-icon-plus nav-add-icon"></i>
</div>
</div>
</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>
<el-button size="small" type="primary" @click="saveMsg()">保存</el-button>
<el-button size="small" @click="resetInfo()">恢复默认</el-button>
</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>
<script>
export default {
data() {
let validataIcon = (rule, value, callback) => {
if (this.addMsg.icon == '') {
if (this.addMsg.DefaultIcon == '') {
return callback(new Error('请选择图标'));
} else {
callback();
}
}
let validataCkedIcon = (rule, value, callback) => {
if (this.addMsg.checkedIcon == '') {
if (this.addMsg.CheckedIcon == '') {
return callback(new Error('请选择选中状态图标'));
} else {
callback();
}
}
return {
//文字颜色
TextColor:'',
BackColor:'rgb(255, 255, 255)',
//底部颜色
btmBackground:'rgb(255, 255, 255)',
mallMsg: {
MallBaseId: 0,
TopNavWordType: 1, //顶部标题文件颜色类型(0-白色，1-黑色)
TopNavWordColor: "rgb(0, 0, 0)", //顶部标题文字颜色
TopNavBgColor: "rgb(255, 255, 255)", //顶部导航栏背景颜色
BottomNavBgColor: "rgb(255, 255, 255)", //底部导航栏背景颜色
BottomNavIsShadow: 0, //导航底部是否开启阴影效果(0-未开启，1-开启)
BottomTagList: [], //底部导航标签栏
},
//显示弹窗
isShowDialog:false,
msg:{
//文字颜色
textColor: '2',
//选择的顶部背景色
titleBgColor:'#FFFFFF',
//底部背景色
btmBgColor:"#FFFFFF",
//是否导航阴影效果
isShadow:false,
navObj:[{
name:'我',
icon:'nav-icon-user.png',
checkedIcon:'nav-icon-user.active.png',
textColor:'rgb(136, 136, 136)',
ckedTextColor:'rgb(255, 69, 68)',
isActive:true
},{
name:'首页',
icon:'nav-icon-index.png',
checkedIcon:'nav-icon-index.active.png',
textColor:'rgb(136, 136, 136)',
ckedTextColor:'rgb(255, 69, 68)',
isActive:false
},{
name:'购物车',
icon:'nav-icon-cart.png',
checkedIcon:'nav-icon-cart.active.png',
textColor:'rgb(136, 136, 136)',
ckedTextColor:'rgb(255, 69, 68)',
isActive:false
},{
name:'分类',
icon:'nav-icon-cat.png',
checkedIcon:'nav-icon-cat.active.png',
textColor:'rgb(136, 136, 136)',
ckedTextColor:'rgb(255, 69, 68)',
isActive:false
}]
},
addMsg:{
icon:'',
checkedIcon:'',
name:'',
textColor:'rgb(136, 136, 136)',
ckedTextColor:'rgb(255, 69, 68)',
Url:''
},
rules:{
icon: [{
required: true,
validator:validataIcon,
trigger: "blur"
}],
checkedIcon: [{
required: true,
validator:validataCkedIcon,
trigger: "blur"
}],
name:[{
required: true,
message: "请输入导航名称",
trigger: "blur"
}],
textColor:[{
required: true,
message: "",
trigger: "blur"
}],
ckedTextColor:[{
required: true,
message: "",
trigger: "blur"
}],
Url:[{
required: true,
message: "请选择导航链接",
trigger: "blur"
}],
}
isShowDialog: false,
//默认底部导航列表
defaultTagList: [{
TagId: 0, //标签Id
TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id
TagName: '首页',
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-index.png',
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-index.active.png',
DefaultColor: 'rgb(136, 136, 136)',
CheckedColor: 'rgb(255, 69, 68)',
TagLink: "", //链接地址
TagSort: 1, //排序
IsActive: true
},
{
TagId: 0, //标签Id
TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id
TagName: '分类',
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cat.png',
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cat.active.png',
DefaultColor: 'rgb(136, 136, 136)',
CheckedColor: 'rgb(255, 69, 68)',
TagLink: "", //链接地址
TagSort: 2, //排序
IsActive: false
},
{
TagId: 0, //标签Id
TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id
TagName: '购物车',
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cart.png',
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cart.active.png',
DefaultColor: 'rgb(136, 136, 136)',
CheckedColor: 'rgb(255, 69, 68)',
TagLink: "", //链接地址
TagSort: 3, //排序
IsActive: false
},
{
TagId: 0, //标签Id
TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id
TagName: '我',
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-user.png', //默认图片
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: {
icon: [{
required: true,
validator: validataIcon,
trigger: "blur"
}],
checkedIcon: [{
required: true,
validator: validataCkedIcon,
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() {
},
methods: {
//点击切换
getChecked(item){
this.msg.navObj.forEach(x=>{
x.isActive=false;
})
item.isActive=!item.isActive;
},
//切换文字颜色
changeColor(val){
console.log(val,'val')
if(val==1){
this.TextColor="#fff"
}else{
this.TextColor="rgb(0, 0, 0)"
//点击切换
getChecked(item) {
this.mallMsg.BottomTagList.forEach(x => {
x.IsActive = false;
})
item.IsActive = !item.IsActive;
},
//切换文字颜色
changeColor(val) {
if (this.mallMsg.TopNavWordType == 0) {
this.mallMsg.TopNavWordColor = "#fff"
} else {
this.mallMsg.TopNavWordColor = "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;
}
},
//切换顶部背景色
getTopBgColort(val){
this.BackColor=val;
},
//切换底部背景色
getBtmBgColor(val){
this.btmBackground=val;
},
//删除底部图标
delItem(index){
this.msg.navObj.splice(index,1);
},
//上传图标
UploadIcon(){
},
//上传选中图标
UploadCkedIcon(){
},
//点击添加图标
addIconList(){
this.isShowDialog=true;
this.addMsg.icon='';
this.addMsg.checkedIcon='';
this.addMsg.name='';
this.addMsg.textColor='rgb(136, 136, 136)';
this.addMsg.ckedTextColor='rgb(255, 69, 68)';
this.addMsg.Url='';
},
//点击编辑
EditInfo(item){
this.addMsg = JSON.parse(JSON.stringify(item));
this.isShowDialog=true;
},
//提交数据
submitform(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.saveMsg();
} else {
return false;
}
});
},
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);
}
})
},
//保存数据
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>
\ No newline at end of file
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment