修改

src/components/offlineService/storesManage.vue

@@ -117,12 +117,19 @@
                     <el-button size="mini" @click="choicImg=true,commonIndex=2">选择图片</el-button>
                   </el-tooltip>
                   <div class="customize-share-title">
-                    <div class="zk_pic_box" @click="choicImg=true,commonIndex=2" flex="main:center cross:center"
-                      style="width:80px;height:80px;"
-                      :style="{backgroundImage:'url(' + getIconLink(addMsg.NavImg) + ')'}">
-                      <i v-if="addMsg.NavImg==''" class="el-icon-picture-outline"></i>
-                      <el-button type="danger" v-if="addMsg.NavImg!=''" class="image-delete" size="mini"
-                        icon="el-icon-close" @click.stop="addMsg.NavImg=''" circle></el-button>
+                    <div class="nav_Main">
+                      <div class="nav_IconContent">
+                        <div v-for="(item, index) in imgList" :key="index+'2'"
+                          style="margin:0 20px 20px 0; position: relative; ">
+                          <div class="colapp-image" :style="{backgroundImage: 'url(' + getIconLink(item) + ')'}"></div>
+                          <el-button @click="ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close"
+                            circle></el-button>
+                        </div>
+                      </div>
+                      <div @click="choicImg=true,commonIndex=2" v-if="imgList.length<5"
+                        class="add-image-btn 2222">
+                        + 添加图片
+                      </div>
                     </div>
                   </div>
                 </el-form-item>
@@ -202,7 +209,7 @@
           Score: 5, //门店评分
           Intro: "", //门店介绍
           CoverImg: "", //门店封面图
-          NavImg: "", //门店轮播图
+          NavImg: '', //门店轮播图
           StartTime: "00:00", //营业开始时间
           EndTime: "24:00", //营业结束时间
           IsAllDay: 0, //是否全天营业(1-是)
@@ -214,6 +221,7 @@
           initialFrameHeight: 350,
         },
         commonIndex: -1,
+        imgList:[],
         rules: {
           Name: [{
             required: true,
@@ -285,6 +293,7 @@
       saveMsg() {
         this.addMsg.Intro = this.$refs.ue.getUEContent();
         this.addMsg.ServiceProject = this.$refs.ue2.getUEContent();
+        this.addMsg.NavImg = this.imgList.join(",");
         this.apipost("/api/MContent/SetStores", this.addMsg, res => {
           if (res.data.resultCode == 1) {
             this.storesIsShowAdd = true;
@@ -311,6 +320,7 @@
         this.addMsg.EndTime = '';
         this.addMsg.IsAllDay = 0;
         this.addMsg.ServiceProject = "";
+        this.address='';
         this.checked = false;
       },
       //修改
@@ -334,6 +344,8 @@
             this.addMsg.EndTime = jsonData.EndTime;
             this.addMsg.IsAllDay = jsonData.IsAllDay;
             this.addMsg.ServiceProject = jsonData.ServiceProject;
+            this.imgList = this.addMsg.NavImg.split(",");
+
             if (this.addMsg.IsAllDay == 1) {
               this.checked = true;
             }
@@ -378,7 +390,7 @@
         if (this.commonIndex == 1) {
           this.addMsg.CoverImg = msg.url;
         } else if (this.commonIndex == 2) {
-          this.addMsg.NavImg = msg.url
+          this.imgList.push(msg.url);
         }
         this.choicImg = false;
       },
@@ -391,7 +403,11 @@
       getMapShow(){
         this.isShowMap = true;
         this.address = this.addMsg.Address;
-      }
+      },
+      ClearCarouse(index) {
+        this.imgList.splice(index, 1);
+      },
+
     },
     mounted() {
       this.getList();
@@ -440,5 +456,36 @@
     background-color: #fff;
     margin-bottom: 20px;
   }
-
+  .storeManage .nav_Main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+  .storeManage .nav_IconContent {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+  }
+  .storeManage .add-image-btn {
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    color: #419efb;
+    border: 1px solid #e2e2e2;
+    cursor: pointer;
+    text-align: center;
+  }
+  .storeManage .colapp-image {
+    background-size: cover;
+    background-position: center center;
+    width: 80px;
+    height: 80px;
+    border-radius: 0%;
+  }
+  .storeManage .delBtn {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    padding: 4px 4px !important;
+}
 </style>