页面修改

src/components/sallCenter/plugin/nav-page.vue

@@ -161,7 +161,6 @@
     font-size: 12px;
     color: #fff;
   }
-
 </style>
 <template>
   <div :class="{'active':navData.isCked}">
@@ -226,7 +225,7 @@
               <div flex="dir:left box:first cross:center">
                 <div>
                   <div class="navapp-image-upload">
-                    <div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box"
+                    <div flex="main:center cross:center" @click="choiceMyImg(index,1)" class="pic-box"
                       :style="{backgroundImage:'url(' + getIconLink(item.icon) + ')'}">
                       <i class="el-icon-picture-outline" v-if="item.icon==''"></i>
                       <div class="size-tip">88 × 88</div>
@@ -235,10 +234,37 @@
                     </div>
                   </div>
                 </div>
+                <div flex="dir:left box:first cross:center">
+                  <div>
+                    <div class="navapp-image-upload">
+                      <div flex="main:center cross:center" @click="choiceMyImg(index,2)" class="pic-box"
+                        :style="{backgroundImage:'url(' + getIconLink(item.checkIcon) + ')'}">
+                        <i class="el-icon-picture-outline" v-if="item.checkIcon==''"></i>
+                        <div class="size-tip">88 × 88</div>
+                        <el-button type="danger" v-if="item.checkIcon!=''" class="image-delete" size="mini"
+                          icon="el-icon-close" @click.stop="item.checkIcon=''" circle></el-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <div>
                   <div style="margin-bottom:5px;">
                     <el-input type="text" placeholder="名称" v-model="item.name" size="small"></el-input>
                   </div>
+                  <div style="margin-bottom:5px;">
+                    默认颜色
+                    <el-color-picker v-model="item.color" size="small"></el-color-picker>
+                    <el-input type="text" v-model="item.color" size="small" style="width: 80px; margin-right: 25px;">
+                    </el-input>
+                  </div>
+                  <div style="margin-bottom:5px;">
+                    选中颜色：
+                    <el-color-picker v-model="item.checkColor" size="small"></el-color-picker>
+                    <el-input type="text" v-model="item.checkColor" size="small"
+                      style="width: 80px; margin-right: 25px;">
+                    </el-input>
+                  </div>
+
                   <div style="margin-bottom:5px;">
                     <el-radio-group v-model="item.ShowType">
                       <el-radio :label="0">组件</el-radio>
@@ -366,6 +392,7 @@
         choicImg: false,
         selectType: 1,
         isShowModule: false, //是否显示选择模板
+        checkType: 1,
       };
     },
     components: {
@@ -423,6 +450,9 @@
       addNavigatiton() {
         let obj = {
           icon: '',
+          color: '', //默认颜色
+          checkIcon: '', //选中导航图标
+          checkColor: '', //选中颜色
           name: '',
           ShowType: 0, //0-组件,1-模板
           ComponentName: "", //组件名称
@@ -443,7 +473,11 @@
         if (this.selectType == 1) {
           this.navData.data.backgroundPicUrl = msg.url;
         } else {
-          this.navData.data.navs[this.commonIndex].icon = msg.url;
+          if (this.checkType == 1) {
+            this.navData.data.navs[this.commonIndex].icon = msg.url;
+          } else {
+            this.navData.data.navs[this.commonIndex].checkIcon = msg.url;
+          }
         }
         this.choicImg = false;
       },
@@ -452,10 +486,11 @@
         this.$emit('getSord', this.index, IsUp);
       },
       //选取图片
-      choiceMyImg(index) {
+      choiceMyImg(index, type) {
         this.choicImg = true;
         this.commonIndex = index;
         this.selectType = 2;
+        this.checkType = type;
       },
       //点击触发父组件删除
       delPlugin() {
@@ -466,5 +501,4 @@
 
     }
   };
-
-</script>
+</script>
\ No newline at end of file