1

src/components/StoreDesign/labelBar.vue

 <style>
-  .labelBar .LB_content {
-    margin-top: 10px;
-  }
+.labelBar .LB_content {
+  margin-top: 10px;
+}
 
-  .labelBar .LB_divInner {
-    display: flex;
-    color: #303133;
-  }
+.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_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_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_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 {
+  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;
-  }
+.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;
-  }
+.Label_Screen .Label_foot .nav-icon {
+  height: 20px;
+  width: 20px;
+}
 
-  .labelBar .Label_Right {
-    width: 100%;
-  }
+.labelBar .Label_Right {
+  width: 100%;
+}
 
-  .Label_RightTop {
-    background-color: #fff;
-  }
+.Label_RightTop {
+  background-color: #fff;
+}
 
-  .labelBar .Label_title {
-    padding: 18px 20px;
-    border-bottom: 1px solid #F3F3F3;
-  }
+.labelBar .Label_title {
+  padding: 18px 20px;
+  border-bottom: 1px solid #f3f3f3;
+}
 
-  .labelBar .Label_RightBtm {
-    margin: 20px 0;
-    background-color: #fff;
-  }
+.labelBar .Label_RightBtm {
+  margin: 20px 0;
+  background-color: #fff;
+}
 
-  .labelBar .nav_Main {
-    display: flex;
-    justify-content: flex-start;
-  }
+.labelBar .nav_Main {
+  display: flex;
+  justify-content: flex-start;
+}
 
-  .labelBar .nav_IconContent {
-    display: flex;
-    flex-wrap: wrap;
-    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 {
+  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 .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;
-    float: left;
-  }
+.labelBar .bottom-icon {
+  width: 80px;
+  height: 80px;
+  margin-right: 10px;
+  border: 1px solid #eeeeee;
+  cursor: move;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  float: left;
+}
 
-  .labelBar .btm_icon {
-    width: 30px;
-    height: 30px;
-  }
+.labelBar .btm_icon {
+  width: 30px;
+  height: 30px;
+}
 
-  .Btm_ImgIcon,
-  .btnCenter {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.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;
-  }
+.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;
-  }
+.nav_Action span {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
 
-  .bottom-icon:hover .nav_Action {
-    visibility: visible;
-  }
+.bottom-icon:hover .nav_Action {
+  visibility: visible;
+}
 
-  .labelBar .labelBarIconImg {
-    width: 80px;
-    height: 80px;
-  }
-
-  .labelBar .labelBarIconImg img {
-    width: 100%;
-    height: 100%;
-  }
+.labelBar .labelBarIconImg {
+  width: 80px;
+  height: 80px;
+}
 
+.labelBar .labelBarIconImg img {
+  width: 100%;
+  height: 100%;
+}
 </style>
 <template>
   <div class="labelBar">
@@ -169,20 +168,39 @@
       <div class="LB_divInner">
         <div class="Label_mobile">
           <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 class="Label_foot" :style="{backgroundColor:mallMsg.BottomNavBgColor}">
-              <div v-for="(item,index) in mallMsg.BottomTagList" :key="index" @click="getChecked(item)"
-                style="cursor:pointer;">
+            <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="">
+                  <img
+                    class="nav-icon"
+                    v-if="item.IsActive"
+                    :src="item.CheckedIcon"
+                    alt=""
+                  />
+                  <img class="nav-icon" v-else :src="item.DefaultIcon" alt="" />
                 </div>
-                <div v-if="item.IsActive" :style="{color:item.CheckedColor}">
-                  {{item.TagName}}
+                <div v-if="item.IsActive" :style="{ color: item.CheckedColor }">
+                  {{ item.TagName }}
                 </div>
-                <div v-else :style="{color:item.DefaultColor}">
-                  {{item.TagName}}
+                <div v-else :style="{ color: item.DefaultColor }">
+                  {{ item.TagName }}
                 </div>
               </div>
             </div>
@@ -191,54 +209,101 @@
         <div class="Label_Right">
           <div class="Label_RightTop">
             <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-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="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
+                  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 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
+                  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-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 label="底部导航图标" size="small">
                 <div class="nav_Main">
                   <div class="nav_IconContent">
                     <draggable v-model="mallMsg.BottomTagList">
-                      <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
+                        class="bottom-icon"
+                        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 class="btnCenter">{{item.TagName}}</div>
+                        <div class="btnCenter">{{ item.TagName }}</div>
                         <div class="nav_Action">
-                          <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>
+                          <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>
                     </draggable>
                   </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>
                   </div>
                 </div>
               </el-form-item>
             </el-form>
           </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>
         </div>
       </div>
@@ -247,10 +312,19 @@
     <el-dialog title="导航菜单编辑" :visible.sync="isShowDialog" width="800px">
       <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
         <!--prop="icon" HK 0428去掉-->
-        <el-form-item label="图标">
+        <el-form-item label="图标" v-if="mallMsg.IsShowIcon === 1">
           <div>
-            <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
-              <el-button size="small" @click="choicImg=true,checkIndex=1">选择文件</el-button>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="建议尺寸:64*64"
+              placement="top-start"
+            >
+              <el-button
+                size="small"
+                @click="(choicImg = true), (checkIndex = 1)"
+                >选择文件</el-button
+              >
             </el-tooltip>
           </div>
           <div class="labelBarIconImg">
@@ -259,10 +333,19 @@
           </div>
         </el-form-item>
         <!--prop="checkedIcon" HK 0428去掉-->
-        <el-form-item label="选择状态图标">
+        <el-form-item label="选择状态图标" v-if="mallMsg.IsShowIcon === 1">
           <div>
-            <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
-              <el-button size="small" @click="choicImg=true,checkIndex=2">选择文件</el-button>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="建议尺寸:64*64"
+              placement="top-start"
+            >
+              <el-button
+                size="small"
+                @click="(choicImg = true), (checkIndex = 2)"
+                >选择文件</el-button
+              >
             </el-tooltip>
           </div>
           <div class="labelBarIconImg">
@@ -271,40 +354,62 @@
           </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-input
+            type="text"
+            v-model="addMsg.TagName"
+            size="small"
+            class="w400"
+            maxlength="100"
+          />
         </el-form-item>
         <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 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 label="导航链接" prop="TagLink">
-          <el-input v-model="addMsg.TagLink" class="w400" size="small" maxlength="100" :disabled="true" />
-          <el-button plain size="small" @click="isShowLink=true">选择链接</el-button>
+          <el-input
+            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 label="类型" prop="TagType">
           <el-select v-model="addMsg.TagType">
-            <el-option label="通用" :value="0">
-            </el-option>
-            <el-option label="电商" :value="1">
-            </el-option>
-            <el-option label="教育" :value="2">
-            </el-option>
+            <el-option label="通用" :value="0"> </el-option>
+            <el-option label="电商" :value="1"> </el-option>
+            <el-option label="教育" :value="2"> </el-option>
           </el-select>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="isShowDialog = false,clearAddmsg()">取 消</el-button>
-        <el-button size="small" type="primary" @click="submitForm('addMsg')">提交</el-button>
+        <el-button size="small" @click="(isShowDialog = false), clearAddmsg()"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="submitForm('addMsg')"
+          >提交</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
-      <chooseMenu ref="chooseMenu">
-      </chooseMenu>
+      <chooseMenu ref="chooseMenu"> </chooseMenu>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="isShowLink=false">取 消</el-button>
-        <el-button size="small" type="danger" @click="getMenu()">确 定</el-button>
+        <el-button size="small" @click="isShowLink = false">取 消</el-button>
+        <el-button size="small" type="danger" @click="getMenu()"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <!-- 选择图片文件 -->
@@ -314,322 +419,360 @@
   </div>
 </template>
 <script>
-  import chooseMenu from "../common/chooseMenu.vue";
-  import ChooseImg from "@/components/global/ChooseImg.vue";
-  import draggable from "vuedraggable"
-  export default {
-    data() {
-      let validataIcon = (rule, value, callback) => {
-        if (this.addMsg.DefaultIcon == '') {
-          return callback(new Error('请选择图标'));
-        } else {
-          callback();
-        }
+import chooseMenu from "../common/chooseMenu.vue";
+import ChooseImg from "@/components/global/ChooseImg.vue";
+import draggable from "vuedraggable";
+export default {
+  data() {
+    let validataIcon = (rule, value, callback) => {
+      if (this.addMsg.DefaultIcon == "") {
+        return callback(new Error("请选择图标"));
+      } else {
+        callback();
       }
-      let validataCkedIcon = (rule, value, callback) => {
-        if (this.addMsg.CheckedIcon == '') {
-          return callback(new Error('请选择选中状态图标'));
-        } else {
-          callback();
-        }
+    };
+    let validataCkedIcon = (rule, value, callback) => {
+      if (this.addMsg.CheckedIcon == "") {
+        return callback(new Error("请选择选中状态图标"));
+      } else {
+        callback();
       }
-      return {
-        //图标索引
-        checkIndex: 0,
-        //选择图片
-        choicImg: false,
-        //是否显示链接弹窗
-        isShowLink: false,
-        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,
-        //默认底部导航列表
-        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: "/pages/index/index", //链接地址
-            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
-            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: "/pages/cats/cats?cat_id=", //链接地址
-            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
-            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: "/pages/cart/cart", //链接地址
-            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
-            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)', //激活字体颜色
-            TagType: 0, //标签模式(0-全部,1-电商,2-教育)
-            TagLink: "/pages/user-center/user-center", //链接地址
-            TagSort: 4, //排序
-            IsActive: false
-          }
-        ],
-        isAdd: true, //是否新加标签
-        addMsg: {
+    };
+    return {
+      //图标索引
+      checkIndex: 0,
+      //选择图片
+      choicImg: false,
+      //是否显示链接弹窗
+      isShowLink: false,
+      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: [], //底部导航标签栏
+        IsShowIcon: 1,
+      },
+      //显示弹窗
+      isShowDialog: false,
+      //默认底部导航列表
+      defaultTagList: [
+        {
           TagId: 0, //标签Id
           TenantId: 0, //商户Id
           MallBaseId: 0, //小程序Id
-          TagName: '',
-          DefaultIcon: '', //默认图片
-          CheckedIcon: '', //激活状态图片
-          DefaultColor: 'rgb(136, 136, 136)', //默认字体颜色
-          CheckedColor: 'rgb(255, 69, 68)', //激活字体颜色
-          TagLink: "", //链接地址
+          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: "/pages/index/index", //链接地址
           TagType: 0, //标签模式(0-全部,1-电商,2-教育)
           TagSort: 1, //排序
-          IsActive: false
+          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: "/pages/cats/cats?cat_id=", //链接地址
+          TagType: 0, //标签模式(0-全部,1-电商,2-教育)
+          TagSort: 2, //排序
+          IsActive: false,
         },
-        EditIndex: -1, //编辑的行
-        rules: {
-          icon: [{
+        {
+          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: "/pages/cart/cart", //链接地址
+          TagType: 0, //标签模式(0-全部,1-电商,2-教育)
+          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)", //激活字体颜色
+          TagType: 0, //标签模式(0-全部,1-电商,2-教育)
+          TagLink: "/pages/user-center/user-center", //链接地址
+          TagSort: 4, //排序
+          IsActive: false,
+        },
+      ],
+      isAdd: true, //是否新加标签
+      addMsg: {
+        TagId: 0, //标签Id
+        TenantId: 0, //商户Id
+        MallBaseId: 0, //小程序Id
+        TagName: "",
+        DefaultIcon: "", //默认图片
+        CheckedIcon: "", //激活状态图片
+        DefaultColor: "rgb(136, 136, 136)", //默认字体颜色
+        CheckedColor: "rgb(255, 69, 68)", //激活字体颜色
+        TagLink: "", //链接地址
+        TagType: 0, //标签模式(0-全部,1-电商,2-教育)
+        TagSort: 1, //排序
+        IsActive: false,
+      },
+      EditIndex: -1, //编辑的行
+      rules: {
+        icon: [
+          {
             required: true,
             validator: validataIcon,
-            trigger: "blur"
-          }],
-          checkedIcon: [{
+            trigger: "blur",
+          },
+        ],
+        checkedIcon: [
+          {
             required: true,
             validator: validataCkedIcon,
-            trigger: "blur"
-          }],
-          TagName: [{
+            trigger: "blur",
+          },
+        ],
+        TagName: [
+          {
             required: true,
             message: "请输入导航名称",
-            trigger: "blur"
-          }],
-          TagLink: [{
+            trigger: "blur",
+          },
+        ],
+        TagLink: [
+          {
             required: true,
             message: "请选择导航链接",
-            trigger: "blur"
-          }],
-        }
-      };
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  components: {
+    chooseMenu,
+    ChooseImg,
+    draggable,
+  },
+  created() {},
+  methods: {
+    //选择图片
+    SelectId(msg) {
+      if (this.checkIndex == 1) {
+        this.addMsg.DefaultIcon = this.getIconLink(msg.url);
+      } else if (this.checkIndex == 2) {
+        this.addMsg.CheckedIcon = this.getIconLink(msg.url);
+      }
+      this.choicImg = false;
     },
-    components: {
-      chooseMenu,
-      ChooseImg,
-      draggable,
+    getMenu() {
+      //调用子组件方法
+      var obj = this.$refs.chooseMenu.getChooseMenu();
+      this.addMsg.TagLink = obj.PageUrl;
+      this.isShowLink = false;
     },
-    created() {
-
+    //点击切换
+    getChecked(item) {
+      this.mallMsg.BottomTagList.forEach((x) => {
+        x.IsActive = false;
+      });
+      item.IsActive = !item.IsActive;
     },
-    methods: {
-      //选择图片
-      SelectId(msg) {
-        if (this.checkIndex == 1) {
-          this.addMsg.DefaultIcon = this.getIconLink(msg.url);
-        } else if (this.checkIndex == 2) {
-          this.addMsg.CheckedIcon = this.getIconLink(msg.url);
-        }
-        this.choicImg = false;
-      },
-      getMenu() {
-        //调用子组件方法
-        var obj = this.$refs.chooseMenu.getChooseMenu();
-        this.addMsg.TagLink = obj.PageUrl;
-        this.isShowLink = false;
-      },
-      //点击切换
-      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, item) {
-        if (item.TagId > 0) {
-          this.apipost("/api/Tenant/RemoveMiniProgramMallTag", {
-            TagId: item.TagId
-          }, res => {
-            if (res.data.resultCode == 1) {} else {
-              this.Info(res.data.message);
-            }
-          })
-        }
-        this.mallMsg.BottomTagList.splice(index, 1);
-      },
-      //点击添加图标
-      addIconList() {
-        this.isAdd = true;
-        this.isShowDialog = true;
-        this.clearAddmsg();
-      },
-      clearAddmsg() {
-        this.addMsg.TagId = 0;
-        this.addMsg.TenantId = 0;
-        this.addMsg.MallBaseId = 0;
-        this.addMsg.TagName = '';
-        this.addMsg.DefaultIcon = '1';
-        this.addMsg.CheckedIcon = '1';
-        this.addMsg.DefaultColor = 'rgb(136, 136, 136)';
-        this.addMsg.CheckedColor = 'rgb(255, 69, 68)';
-        this.addMsg.TagLink = '';
-        this.addMsg.TagSort = 1;
-        this.addMsg.IsActive = false;
-      },
-      //点击编辑
-      EditInfo(item, index) {
-        this.isAdd = false;
-        this.EditIndex = index;
-        this.addMsg = JSON.parse(JSON.stringify(item));
-        this.isShowDialog = true;
-      },
-      //提交数据
-      submitForm(addMsg) {
-        //提交创建、修改表单
-        this.$refs[addMsg].validate(valid => {
-          if (valid) {
-            if (this.isAdd) {
-              this.mallMsg.BottomTagList.push(JSON.parse(JSON.stringify(this.addMsg)));
-              this.clearAddmsg();
+    //切换文字颜色
+    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, item) {
+      if (item.TagId > 0) {
+        this.apipost(
+          "/api/Tenant/RemoveMiniProgramMallTag",
+          {
+            TagId: item.TagId,
+          },
+          (res) => {
+            if (res.data.resultCode == 1) {
             } else {
-              this.mallMsg.BottomTagList[this.EditIndex] = JSON.parse(JSON.stringify(this.addMsg));
+              this.Info(res.data.message);
             }
-            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;
-            }
-            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))
-            }
+        );
+      }
+      this.mallMsg.BottomTagList.splice(index, 1);
+    },
+    //点击添加图标
+    addIconList() {
+      this.isAdd = true;
+      this.isShowDialog = true;
+      this.clearAddmsg();
+    },
+    clearAddmsg() {
+      this.addMsg.TagId = 0;
+      this.addMsg.TenantId = 0;
+      this.addMsg.MallBaseId = 0;
+      this.addMsg.TagName = "";
+      this.addMsg.DefaultIcon = "1";
+      this.addMsg.CheckedIcon = "1";
+      this.addMsg.DefaultColor = "rgb(136, 136, 136)";
+      this.addMsg.CheckedColor = "rgb(255, 69, 68)";
+      this.addMsg.TagLink = "";
+      this.addMsg.TagSort = 1;
+      this.addMsg.IsActive = false;
+    },
+    //点击编辑
+    EditInfo(item, index) {
+      this.isAdd = false;
+      this.EditIndex = index;
+      this.addMsg = JSON.parse(JSON.stringify(item));
+      this.isShowDialog = true;
+    },
+    //提交数据
+    submitForm(addMsg) {
+      //提交创建、修改表单
+      this.$refs[addMsg].validate((valid) => {
+        if (valid) {
+          if (this.isAdd) {
+            this.mallMsg.BottomTagList.push(
+              JSON.parse(JSON.stringify(this.addMsg))
+            );
+            this.clearAddmsg();
           } else {
-            this.Info(res.data.message);
+            this.mallMsg.BottomTagList[this.EditIndex] = JSON.parse(
+              JSON.stringify(this.addMsg)
+            );
           }
-        })
-      },
-      //保存数据
-      saveMsg() {
-        if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) {
-          this.mallMsg.BottomTagList.forEach((item, index) => {
-            item.TagSort = Number(index) + 1;
-          });
+          this.isShowDialog = false;
+        } else {
+          return false;
         }
-        this.apipost("/api/Tenant/SetMiniProgramMallTag", this.mallMsg, res => {
-          if (res.data.resultCode == 1) {
-            this.Success("操作成功!");
-            this.getNavData();
-          } else {
-            this.Info(res.data.message);
+      });
+    },
+    //获取导航栏设置
+    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;
           }
-        })
-      },
-      //重置
-      resetInfo() {
-        var that = this;
-        if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) {
-          var tagIds = "0,";
-          this.mallMsg.BottomTagList.forEach(item => {
-            if (item.TagId > 0) {
-              tagIds += item.TagId + ",";
-            }
-          });
-          tagIds = tagIds.substring(0, tagIds.lastIndexOf(','));
-          this.apipost("/api/Tenant/RemoveMiniProgramMallTag", {
-            TagId: tagIds
-          }, res => {
+          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;
+          }
+          if (res.data.data && res.data.data.IsShowIcon) {
+            this.mallMsg.IsShowIcon = res.data.data.IsShowIcon;
+          }
+          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;
+        });
+      }
+      this.apipost("/api/Tenant/SetMiniProgramMallTag", this.mallMsg, (res) => {
+        if (res.data.resultCode == 1) {
+          this.Success("操作成功!");
+          this.getNavData();
+        } else {
+          this.Info(res.data.message);
+        }
+      });
+    },
+    //重置
+    resetInfo() {
+      var that = this;
+      if (this.mallMsg.BottomTagList && this.mallMsg.BottomTagList.length > 0) {
+        var tagIds = "0,";
+        this.mallMsg.BottomTagList.forEach((item) => {
+          if (item.TagId > 0) {
+            tagIds += item.TagId + ",";
+          }
+        });
+        tagIds = tagIds.substring(0, tagIds.lastIndexOf(","));
+        this.apipost(
+          "/api/Tenant/RemoveMiniProgramMallTag",
+          {
+            TagId: tagIds,
+          },
+          (res) => {
             if (res.data.resultCode == 1) {
               that.mallMsg.BottomTagList = [];
-              that.mallMsg.TopNavBgColor = '#FFFFFF';
-              that.mallMsg.BottomTagList = JSON.parse(JSON.stringify(this.defaultTagList));
+              that.mallMsg.TopNavBgColor = "#FFFFFF";
+              that.mallMsg.BottomTagList = JSON.parse(
+                JSON.stringify(this.defaultTagList)
+              );
               that.saveMsg();
             } else {
               this.Info(res.data.message);
             }
-          })
-        }
+          }
+        );
       }
     },
-    mounted() {
-      this.getNavData();
-    }
-  };
-
+  },
+  mounted() {
+    this.getNavData();
+  },
+};
 </script>

src/components/blindDate/PPPlusStyle.vue

@@ -72,19 +72,20 @@ export default {
       ],
       currentStyle: 1,
       saveBtnLoad: false,
+      id: 0,
     };
   },
   created() {
+    let data = localStorage.getItem("mall_userInfo");
+    this.id = JSON.parse(data).MallBaseId;
     this.getStyle();
   },
   methods: {
     SaveStyle() {
       this.saveBtnLoad = true;
-      let data = localStorage.getItem("mall_userInfo");
-      let id = JSON.parse(data).MallBaseId;
       this.apipost(
         "/api/Tenant/SetMiaiPPPlusStyle",
-        { MiaiPPPlusStyle: this.currentStyle, MallBaseId: id },
+        { MiaiPPPlusStyle: this.currentStyle, MallBaseId: this.id },
         (res) => {
           this.saveBtnLoad = false;
           if (res.data.resultCode === 1) {
@@ -101,12 +102,16 @@ export default {
       this.currentStyle = Style;
     },
     getStyle() {
-      this.apipost("/api/Tenant/GetMiniPrograme", {}, (res) => {
-        if (res.data.resultCode == 1) {
-          this.currentStyle = res.data.data.MiaiPPPlusStyle;
-          console.log(244, this.currentStyle, res.data.data.MiaiPPPlusStyle);
+      this.apipost(
+        "/api/Tenant/GetMiniPrograme",
+        { MallBaseId: this.id },
+        (res) => {
+          if (res.data.resultCode == 1) {
+            this.currentStyle = res.data.data.MiaiPPPlusStyle;
+            console.log(244, this.currentStyle, res.data.data.MiaiPPPlusStyle);
+          }
         }
-      });
+      );
     },
 
     handleClick(val) {},