Skip to content

E
ElectricitySheep
Commit 9f5a9d32 authored by 罗超's avatar 罗超
Browse files
Options

1

parent 0ab938f7
Show whitespace changes
Inline Side-by-side
Showing with 626 additions and 478 deletions
src/components/StoreDesign/labelBar.vue
View file @ 9f5a9d32
<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;
background-color: #fff; background-color: #fff;
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;
margin: 0 auto; margin: 0 auto;
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;
...@@ -36,9 +36,9 @@ ...@@ -36,9 +36,9 @@
font-size: 18px; font-size: 18px;
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;
...@@ -46,50 +46,50 @@ ...@@ -46,50 +46,50 @@
height: 45px; height: 45px;
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 { .labelBar .Label_Right {
width: 100%; 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 { .labelBar .Label_RightBtm {
margin: 20px 0; margin: 20px 0;
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;
...@@ -98,14 +98,14 @@ ...@@ -98,14 +98,14 @@
margin-right: 10px; margin-right: 10px;
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;
margin-right: 10px; margin-right: 10px;
...@@ -115,22 +115,22 @@ ...@@ -115,22 +115,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
float: left; float: left;
} }
.labelBar .btm_icon { .labelBar .btm_icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.Btm_ImgIcon, .Btm_ImgIcon,
.btnCenter { .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 { .labelBar .nav_Action {
display: flex; display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -138,29 +138,28 @@ ...@@ -138,29 +138,28 @@
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 { .labelBar .labelBarIconImg img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<template> <template>
<div class="labelBar"> <div class="labelBar">
...@@ -169,20 +168,39 @@ ...@@ -169,20 +168,39 @@
<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:mallMsg.TopNavWordColor,backgroundColor:mallMsg.TopNavBgColor}">这里是标题 <div
class="Label_Head"
:style="{
color: mallMsg.TopNavWordColor,
backgroundColor: mallMsg.TopNavBgColor,
}"
>
这里是标题
</div> </div>
<div class="Label_foot" :style="{backgroundColor:mallMsg.BottomNavBgColor}"> <div
<div v-for="(item,index) in mallMsg.BottomTagList" :key="index" @click="getChecked(item)" class="Label_foot"
style="cursor:pointer;"> :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="item.CheckedIcon" alt=""> <img
<img class="nav-icon" v-else :src="item.DefaultIcon" alt=""> class="nav-icon"
v-if="item.IsActive"
:src="item.CheckedIcon"
alt=""
/>
<img class="nav-icon" v-else :src="item.DefaultIcon" alt="" />
</div> </div>
<div v-if="item.IsActive" :style="{color:item.CheckedColor}"> <div v-if="item.IsActive" :style="{ color: item.CheckedColor }">
{{item.TagName}} {{ item.TagName }}
</div> </div>
<div v-else :style="{color:item.DefaultColor}"> <div v-else :style="{ color: item.DefaultColor }">
{{item.TagName}} {{ item.TagName }}
</div> </div>
</div> </div>
</div> </div>
...@@ -191,54 +209,101 @@ ...@@ -191,54 +209,101 @@
<div class="Label_Right"> <div class="Label_Right">
<div class="Label_RightTop"> <div class="Label_RightTop">
<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="mallMsg.TopNavWordType" @change="changeColor"> <el-radio-group
v-model="mallMsg.TopNavWordType"
@change="changeColor"
>
<el-radio :label="0">白色</el-radio> <el-radio :label="0">白色</el-radio>
<el-radio :label="1">黑色</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="mallMsg.TopNavBgColor" @change="getTopBgColort"> <el-color-picker
size="small"
v-model="mallMsg.TopNavBgColor"
@change="getTopBgColort"
>
</el-color-picker> </el-color-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="Label_RightBtm"> <div class="Label_RightBtm">
<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="mallMsg.BottomNavBgColor" @change="getBtmBgColor"> <el-color-picker
size="small"
v-model="mallMsg.BottomNavBgColor"
@change="getBtmBgColor"
>
</el-color-picker> </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="mallMsg.BottomNavIsShadow" :active-value="1" :inactive-value="0"></el-switch> <el-switch
v-model="mallMsg.BottomNavIsShadow"
:active-value="1"
:inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item label="是否启用图标" size="small">
<el-switch
v-model="mallMsg.IsShowIcon"
: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">
<draggable v-model="mallMsg.BottomTagList"> <draggable v-model="mallMsg.BottomTagList">
<div class="bottom-icon" v-for="(item,index) in mallMsg.BottomTagList" :key="index"> <div
<div class="Btm_ImgIcon"> class="bottom-icon"
<img class="btm_icon" :src="item.DefaultIcon" alt=""> v-for="(item, index) in mallMsg.BottomTagList"
:key="index"
>
<div
class="Btm_ImgIcon"
v-if="mallMsg.IsShowIcon === 1"
>
<img
class="btm_icon"
:src="item.DefaultIcon"
alt=""
/>
</div> </div>
<div class="btnCenter">{{item.TagName}}</div> <div class="btnCenter">{{ item.TagName }}</div>
<div class="nav_Action"> <div class="nav_Action">
<span style="background: rgba(64, 158, 255, 0.9);" @click="EditInfo(item,index)">编辑</span> <span
<span style="background: rgba(245, 108, 108, 0.9);" @click="delItem(index,item)">删除</span> style="background: rgba(64, 158, 255, 0.9)"
@click="EditInfo(item, index)"
>编辑</span
>
<span
style="background: rgba(245, 108, 108, 0.9)"
@click="delItem(index, item)"
>删除</span
>
</div> </div>
</div> </div>
</draggable> </draggable>
</div> </div>
<div class="nav_Add" v-if="mallMsg.BottomTagList.length<5" @click="addIconList"> <div
class="nav_Add"
v-if="mallMsg.BottomTagList.length < 5"
@click="addIconList"
>
<i class="el-icon-plus nav-add-icon"></i> <i class="el-icon-plus nav-add-icon"></i>
</div> </div>
</div> </div>
</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" type="primary" @click="saveMsg()"
>保存</el-button
>
<el-button size="small" @click="resetInfo()">恢复默认</el-button> <el-button size="small" @click="resetInfo()">恢复默认</el-button>
</div> </div>
</div> </div>
...@@ -247,10 +312,19 @@ ...@@ -247,10 +312,19 @@
<el-dialog title="导航菜单编辑" :visible.sync="isShowDialog" width="800px"> <el-dialog title="导航菜单编辑" :visible.sync="isShowDialog" width="800px">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<!--prop="icon" HK 0428去掉--> <!--prop="icon" HK 0428去掉-->
<el-form-item label="图标"> <el-form-item label="图标" v-if="mallMsg.IsShowIcon === 1">
<div> <div>
<el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start"> <el-tooltip
<el-button size="small" @click="choicImg=true,checkIndex=1">选择文件</el-button> class="item"
effect="dark"
content="建议尺寸:64*64"
placement="top-start"
>
<el-button
size="small"
@click="(choicImg = true), (checkIndex = 1)"
>选择文件</el-button
>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="labelBarIconImg"> <div class="labelBarIconImg">
...@@ -259,10 +333,19 @@ ...@@ -259,10 +333,19 @@
</div> </div>
</el-form-item> </el-form-item>
<!--prop="checkedIcon" HK 0428去掉--> <!--prop="checkedIcon" HK 0428去掉-->
<el-form-item label="选择状态图标"> <el-form-item label="选择状态图标" v-if="mallMsg.IsShowIcon === 1">
<div> <div>
<el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start"> <el-tooltip
<el-button size="small" @click="choicImg=true,checkIndex=2">选择文件</el-button> class="item"
effect="dark"
content="建议尺寸:64*64"
placement="top-start"
>
<el-button
size="small"
@click="(choicImg = true), (checkIndex = 2)"
>选择文件</el-button
>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="labelBarIconImg"> <div class="labelBarIconImg">
...@@ -271,40 +354,62 @@ ...@@ -271,40 +354,62 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="TagName"> <el-form-item label="名称" prop="TagName">
<el-input type="text" v-model="addMsg.TagName" size="small" class="w400" maxlength="100" /> <el-input
type="text"
v-model="addMsg.TagName"
size="small"
class="w400"
maxlength="100"
/>
</el-form-item> </el-form-item>
<el-form-item label="文字颜色"> <el-form-item label="文字颜色">
<el-color-picker size="small" v-model="addMsg.DefaultColor"></el-color-picker> <el-color-picker
size="small"
v-model="addMsg.DefaultColor"
></el-color-picker>
</el-form-item> </el-form-item>
<el-form-item label="选中文字颜色"> <el-form-item label="选中文字颜色">
<el-color-picker size="small" v-model="addMsg.CheckedColor"></el-color-picker> <el-color-picker
size="small"
v-model="addMsg.CheckedColor"
></el-color-picker>
</el-form-item> </el-form-item>
<el-form-item label="导航链接" prop="TagLink"> <el-form-item label="导航链接" prop="TagLink">
<el-input v-model="addMsg.TagLink" class="w400" size="small" maxlength="100" :disabled="true" /> <el-input
<el-button plain size="small" @click="isShowLink=true">选择链接</el-button> v-model="addMsg.TagLink"
class="w400"
size="small"
maxlength="100"
:disabled="true"
/>
<el-button plain size="small" @click="isShowLink = true"
>选择链接</el-button
>
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="TagType"> <el-form-item label="类型" prop="TagType">
<el-select v-model="addMsg.TagType"> <el-select v-model="addMsg.TagType">
<el-option label="通用" :value="0"> <el-option label="通用" :value="0"> </el-option>
</el-option> <el-option label="电商" :value="1"> </el-option>
<el-option label="电商" :value="1"> <el-option label="教育" :value="2"> </el-option>
</el-option>
<el-option label="教育" :value="2">
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowDialog = false,clearAddmsg()">取 消</el-button> <el-button size="small" @click="(isShowDialog = false), clearAddmsg()"
<el-button size="small" type="primary" @click="submitForm('addMsg')">提交</el-button> >取 消</el-button
>
<el-button size="small" type="primary" @click="submitForm('addMsg')"
>提交</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px"> <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMenu ref="chooseMenu"> <chooseMenu ref="chooseMenu"> </chooseMenu>
</chooseMenu>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowLink=false">取 消</el-button> <el-button size="small" @click="isShowLink = false">取 消</el-button>
<el-button size="small" type="danger" @click="getMenu()">确 定</el-button> <el-button size="small" type="danger" @click="getMenu()"
>确 定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<!-- 选择图片文件 --> <!-- 选择图片文件 -->
...@@ -314,25 +419,25 @@ ...@@ -314,25 +419,25 @@
</div> </div>
</template> </template>
<script> <script>
import chooseMenu from "../common/chooseMenu.vue"; import chooseMenu from "../common/chooseMenu.vue";
import ChooseImg from "@/components/global/ChooseImg.vue"; import ChooseImg from "@/components/global/ChooseImg.vue";
import draggable from "vuedraggable" import draggable from "vuedraggable";
export default { export default {
data() { data() {
let validataIcon = (rule, value, callback) => { let validataIcon = (rule, value, callback) => {
if (this.addMsg.DefaultIcon == '') { if (this.addMsg.DefaultIcon == "") {
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.CheckedIcon == '') { if (this.addMsg.CheckedIcon == "") {
return callback(new Error('请选择选中状态图标')); return callback(new Error("请选择选中状态图标"));
} else { } else {
callback(); callback();
} }
} };
return { return {
//图标索引 //图标索引
checkIndex: 0, checkIndex: 0,
...@@ -348,105 +453,123 @@ ...@@ -348,105 +453,123 @@
BottomNavBgColor: "rgb(255, 255, 255)", //底部导航栏背景颜色 BottomNavBgColor: "rgb(255, 255, 255)", //底部导航栏背景颜色
BottomNavIsShadow: 0, //导航底部是否开启阴影效果(0-未开启，1-开启) BottomNavIsShadow: 0, //导航底部是否开启阴影效果(0-未开启，1-开启)
BottomTagList: [], //底部导航标签栏 BottomTagList: [], //底部导航标签栏
IsShowIcon: 1,
}, },
//显示弹窗 //显示弹窗
isShowDialog: false, isShowDialog: false,
//默认底部导航列表 //默认底部导航列表
defaultTagList: [{ defaultTagList: [
{
TagId: 0, //标签Id TagId: 0, //标签Id
TenantId: 0, //商户Id TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id MallBaseId: 0, //小程序Id
TagName: '首页', TagName: "首页",
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-index.png', DefaultIcon:
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-index.active.png', this.domainManager().ImageUrl + "/Static/nav-icon-index.png",
DefaultColor: 'rgb(136, 136, 136)', CheckedIcon:
CheckedColor: 'rgb(255, 69, 68)', this.domainManager().ImageUrl + "/Static/nav-icon-index.active.png",
DefaultColor: "rgb(136, 136, 136)",
CheckedColor: "rgb(255, 69, 68)",
TagLink: "/pages/index/index", //链接地址 TagLink: "/pages/index/index", //链接地址
TagType: 0, //标签模式(0-全部,1-电商,2-教育) TagType: 0, //标签模式(0-全部,1-电商,2-教育)
TagSort: 1, //排序 TagSort: 1, //排序
IsActive: true IsActive: true,
}, },
{ {
TagId: 0, //标签Id TagId: 0, //标签Id
TenantId: 0, //商户Id TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id MallBaseId: 0, //小程序Id
TagName: '分类', TagName: "分类",
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cat.png', DefaultIcon:
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cat.active.png', this.domainManager().ImageUrl + "/Static/nav-icon-cat.png",
DefaultColor: 'rgb(136, 136, 136)', CheckedIcon:
CheckedColor: 'rgb(255, 69, 68)', this.domainManager().ImageUrl + "/Static/nav-icon-cat.active.png",
DefaultColor: "rgb(136, 136, 136)",
CheckedColor: "rgb(255, 69, 68)",
TagLink: "/pages/cats/cats?cat_id=", //链接地址 TagLink: "/pages/cats/cats?cat_id=", //链接地址
TagType: 0, //标签模式(0-全部,1-电商,2-教育) TagType: 0, //标签模式(0-全部,1-电商,2-教育)
TagSort: 2, //排序 TagSort: 2, //排序
IsActive: false IsActive: false,
}, },
{ {
TagId: 0, //标签Id TagId: 0, //标签Id
TenantId: 0, //商户Id TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id MallBaseId: 0, //小程序Id
TagName: '购物车', TagName: "购物车",
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cart.png', DefaultIcon:
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-cart.active.png', this.domainManager().ImageUrl + "/Static/nav-icon-cart.png",
DefaultColor: 'rgb(136, 136, 136)', CheckedIcon:
CheckedColor: 'rgb(255, 69, 68)', this.domainManager().ImageUrl + "/Static/nav-icon-cart.active.png",
DefaultColor: "rgb(136, 136, 136)",
CheckedColor: "rgb(255, 69, 68)",
TagLink: "/pages/cart/cart", //链接地址 TagLink: "/pages/cart/cart", //链接地址
TagType: 0, //标签模式(0-全部,1-电商,2-教育) TagType: 0, //标签模式(0-全部,1-电商,2-教育)
TagSort: 3, //排序 TagSort: 3, //排序
IsActive: false IsActive: false,
}, },
{ {
TagId: 0, //标签Id TagId: 0, //标签Id
TenantId: 0, //商户Id TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id MallBaseId: 0, //小程序Id
TagName: '我', TagName: "我",
DefaultIcon: this.domainManager().ImageUrl + '/Static/nav-icon-user.png', //默认图片 DefaultIcon:
CheckedIcon: this.domainManager().ImageUrl + '/Static/nav-icon-user.active.png', //激活状态图片 this.domainManager().ImageUrl + "/Static/nav-icon-user.png", //默认图片
DefaultColor: 'rgb(136, 136, 136)', //默认字体颜色 CheckedIcon:
CheckedColor: 'rgb(255, 69, 68)', //激活字体颜色 this.domainManager().ImageUrl + "/Static/nav-icon-user.active.png", //激活状态图片
DefaultColor: "rgb(136, 136, 136)", //默认字体颜色
CheckedColor: "rgb(255, 69, 68)", //激活字体颜色
TagType: 0, //标签模式(0-全部,1-电商,2-教育) TagType: 0, //标签模式(0-全部,1-电商,2-教育)
TagLink: "/pages/user-center/user-center", //链接地址 TagLink: "/pages/user-center/user-center", //链接地址
TagSort: 4, //排序 TagSort: 4, //排序
IsActive: false IsActive: false,
} },
], ],
isAdd: true, //是否新加标签 isAdd: true, //是否新加标签
addMsg: { addMsg: {
TagId: 0, //标签Id TagId: 0, //标签Id
TenantId: 0, //商户Id TenantId: 0, //商户Id
MallBaseId: 0, //小程序Id MallBaseId: 0, //小程序Id
TagName: '', TagName: "",
DefaultIcon: '', //默认图片 DefaultIcon: "", //默认图片
CheckedIcon: '', //激活状态图片 CheckedIcon: "", //激活状态图片
DefaultColor: 'rgb(136, 136, 136)', //默认字体颜色 DefaultColor: "rgb(136, 136, 136)", //默认字体颜色
CheckedColor: 'rgb(255, 69, 68)', //激活字体颜色 CheckedColor: "rgb(255, 69, 68)", //激活字体颜色
TagLink: "", //链接地址 TagLink: "", //链接地址
TagType: 0, //标签模式(0-全部,1-电商,2-教育) TagType: 0, //标签模式(0-全部,1-电商,2-教育)
TagSort: 1, //排序 TagSort: 1, //排序
IsActive: false IsActive: false,
}, },
EditIndex: -1, //编辑的行 EditIndex: -1, //编辑的行
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",
}], },
TagName: [{ ],
TagName: [
{
required: true, required: true,
message: "请输入导航名称", message: "请输入导航名称",
trigger: "blur" trigger: "blur",
}], },
TagLink: [{ ],
TagLink: [
{
required: true, required: true,
message: "请选择导航链接", message: "请选择导航链接",
trigger: "blur" trigger: "blur",
}], },
} ],
},
}; };
}, },
components: { components: {
...@@ -454,9 +577,7 @@ ...@@ -454,9 +577,7 @@
ChooseImg, ChooseImg,
draggable, draggable,
}, },
created() { created() {},
},
methods: { methods: {
//选择图片 //选择图片
SelectId(msg) { SelectId(msg) {
...@@ -475,17 +596,17 @@ ...@@ -475,17 +596,17 @@
}, },
//点击切换 //点击切换
getChecked(item) { getChecked(item) {
this.mallMsg.BottomTagList.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) {
if (this.mallMsg.TopNavWordType == 0) { if (this.mallMsg.TopNavWordType == 0) {
this.mallMsg.TopNavWordColor = "#fff" this.mallMsg.TopNavWordColor = "#fff";
} else { } else {
this.mallMsg.TopNavWordColor = "rgb(0, 0, 0)" this.mallMsg.TopNavWordColor = "rgb(0, 0, 0)";
} }
}, },
//切换顶部背景色 //切换顶部背景色
...@@ -499,13 +620,18 @@ ...@@ -499,13 +620,18 @@
//删除底部图标 //删除底部图标
delItem(index, item) { delItem(index, item) {
if (item.TagId > 0) { if (item.TagId > 0) {
this.apipost("/api/Tenant/RemoveMiniProgramMallTag", { this.apipost(
TagId: item.TagId "/api/Tenant/RemoveMiniProgramMallTag",
}, res => { {
if (res.data.resultCode == 1) {} else { TagId: item.TagId,
},
(res) => {
if (res.data.resultCode == 1) {
} else {
this.Info(res.data.message); this.Info(res.data.message);
} }
}) }
);
} }
this.mallMsg.BottomTagList.splice(index, 1); this.mallMsg.BottomTagList.splice(index, 1);
}, },
...@@ -519,12 +645,12 @@ ...@@ -519,12 +645,12 @@
this.addMsg.TagId = 0; this.addMsg.TagId = 0;
this.addMsg.TenantId = 0; this.addMsg.TenantId = 0;
this.addMsg.MallBaseId = 0; this.addMsg.MallBaseId = 0;
this.addMsg.TagName = ''; this.addMsg.TagName = "";
this.addMsg.DefaultIcon = '1'; this.addMsg.DefaultIcon = "1";
this.addMsg.CheckedIcon = '1'; this.addMsg.CheckedIcon = "1";
this.addMsg.DefaultColor = 'rgb(136, 136, 136)'; this.addMsg.DefaultColor = "rgb(136, 136, 136)";
this.addMsg.CheckedColor = 'rgb(255, 69, 68)'; this.addMsg.CheckedColor = "rgb(255, 69, 68)";
this.addMsg.TagLink = ''; this.addMsg.TagLink = "";
this.addMsg.TagSort = 1; this.addMsg.TagSort = 1;
this.addMsg.IsActive = false; this.addMsg.IsActive = false;
}, },
...@@ -538,13 +664,17 @@ ...@@ -538,13 +664,17 @@
//提交数据 //提交数据
submitForm(addMsg) { submitForm(addMsg) {
//提交创建、修改表单 //提交创建、修改表单
this.$refs[addMsg].validate(valid => { this.$refs[addMsg].validate((valid) => {
if (valid) { if (valid) {
if (this.isAdd) { if (this.isAdd) {
this.mallMsg.BottomTagList.push(JSON.parse(JSON.stringify(this.addMsg))); this.mallMsg.BottomTagList.push(
JSON.parse(JSON.stringify(this.addMsg))
);
this.clearAddmsg(); this.clearAddmsg();
} else { } else {
this.mallMsg.BottomTagList[this.EditIndex] = JSON.parse(JSON.stringify(this.addMsg)); this.mallMsg.BottomTagList[this.EditIndex] = JSON.parse(
JSON.stringify(this.addMsg)
);
} }
this.isShowDialog = false; this.isShowDialog = false;
} else { } else {
...@@ -556,9 +686,9 @@ ...@@ -556,9 +686,9 @@
getNavData() { getNavData() {
var qMsg = { var qMsg = {
isGetNav: 1, isGetNav: 1,
MallBaseId: this.getLocalStorage().MallBaseId MallBaseId: this.getLocalStorage().MallBaseId,
}; };
this.apipost("/api/Tenant/GetMiniPrograme", qMsg, res => { this.apipost("/api/Tenant/GetMiniPrograme", qMsg, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.mallMsg.MallBaseId = res.data.data.MallBaseId; this.mallMsg.MallBaseId = res.data.data.MallBaseId;
if (res.data.data && res.data.data.TopNavWordType) { if (res.data.data && res.data.data.TopNavWordType) {
...@@ -576,14 +706,22 @@ ...@@ -576,14 +706,22 @@
if (res.data.data && res.data.data.BottomNavIsShadow) { if (res.data.data && res.data.data.BottomNavIsShadow) {
this.mallMsg.BottomNavIsShadow = res.data.data.BottomNavIsShadow; this.mallMsg.BottomNavIsShadow = res.data.data.BottomNavIsShadow;
} }
if (res.data.data && res.data.data.IsShowIcon) {
this.mallMsg.IsShowIcon = res.data.data.IsShowIcon;
}
this.mallMsg.BottomTagList = res.data.data.BottomTagList; this.mallMsg.BottomTagList = res.data.data.BottomTagList;
if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length == 0) { if (
this.mallMsg.BottomTagList = JSON.parse(JSON.stringify(this.defaultTagList)) this.mallMsg.BottomTagList &&
this.mallMsg.BottomTagList.length == 0
) {
this.mallMsg.BottomTagList = JSON.parse(
JSON.stringify(this.defaultTagList)
);
} }
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
}) });
}, },
//保存数据 //保存数据
saveMsg() { saveMsg() {
...@@ -592,44 +730,49 @@ ...@@ -592,44 +730,49 @@
item.TagSort = Number(index) + 1; item.TagSort = Number(index) + 1;
}); });
} }
this.apipost("/api/Tenant/SetMiniProgramMallTag", this.mallMsg, res => { this.apipost("/api/Tenant/SetMiniProgramMallTag", this.mallMsg, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.Success("操作成功!"); this.Success("操作成功!");
this.getNavData(); this.getNavData();
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
}) });
}, },
//重置 //重置
resetInfo() { resetInfo() {
var that = this; var that = this;
if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) { if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) {
var tagIds = "0,"; var tagIds = "0,";
this.mallMsg.BottomTagList.forEach(item => { this.mallMsg.BottomTagList.forEach((item) => {
if (item.TagId > 0) { if (item.TagId > 0) {
tagIds += item.TagId + ","; tagIds += item.TagId + ",";
} }
}); });
tagIds = tagIds.substring(0, tagIds.lastIndexOf(',')); tagIds = tagIds.substring(0, tagIds.lastIndexOf(","));
this.apipost("/api/Tenant/RemoveMiniProgramMallTag", { this.apipost(
TagId: tagIds "/api/Tenant/RemoveMiniProgramMallTag",
}, res => { {
TagId: tagIds,
},
(res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
that.mallMsg.BottomTagList = []; that.mallMsg.BottomTagList = [];
that.mallMsg.TopNavBgColor = '#FFFFFF'; that.mallMsg.TopNavBgColor = "#FFFFFF";
that.mallMsg.BottomTagList = JSON.parse(JSON.stringify(this.defaultTagList)); that.mallMsg.BottomTagList = JSON.parse(
JSON.stringify(this.defaultTagList)
);
that.saveMsg(); that.saveMsg();
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
})
} }
);
} }
}, },
},
mounted() { mounted() {
this.getNavData(); this.getNavData();
} },
}; };
</script> </script>
src/components/blindDate/PPPlusStyle.vue
View file @ 9f5a9d32
...@@ -72,19 +72,20 @@ export default { ...@@ -72,19 +72,20 @@ export default {
], ],
currentStyle: 1, currentStyle: 1,
saveBtnLoad: false, saveBtnLoad: false,
id: 0,
}; };
}, },
created() { created() {
let data = localStorage.getItem("mall_userInfo");
this.id = JSON.parse(data).MallBaseId;
this.getStyle(); this.getStyle();
}, },
methods: { methods: {
SaveStyle() { SaveStyle() {
this.saveBtnLoad = true; this.saveBtnLoad = true;
let data = localStorage.getItem("mall_userInfo");
let id = JSON.parse(data).MallBaseId;
this.apipost( this.apipost(
"/api/Tenant/SetMiaiPPPlusStyle", "/api/Tenant/SetMiaiPPPlusStyle",
{ MiaiPPPlusStyle: this.currentStyle, MallBaseId: id }, { MiaiPPPlusStyle: this.currentStyle, MallBaseId: this.id },
(res) => { (res) => {
this.saveBtnLoad = false; this.saveBtnLoad = false;
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
...@@ -101,12 +102,16 @@ export default { ...@@ -101,12 +102,16 @@ export default {
this.currentStyle = Style; this.currentStyle = Style;
}, },
getStyle() { getStyle() {
this.apipost("/api/Tenant/GetMiniPrograme", {}, (res) => { this.apipost(
"/api/Tenant/GetMiniPrograme",
{ MallBaseId: this.id },
(res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.currentStyle = res.data.data.MiaiPPPlusStyle; this.currentStyle = res.data.data.MiaiPPPlusStyle;
console.log(244, this.currentStyle, res.data.data.MiaiPPPlusStyle); console.log(244, this.currentStyle, res.data.data.MiaiPPPlusStyle);
} }
}); }
);
}, },
handleClick(val) {}, handleClick(val) {},
......
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