fix bug

src/views/tempaltes/editMenu.vue

 <template>
   <div class="menu-container">
-    <van-collapse v-model="activeName" accordion>
-      <van-collapse-item
-        v-for="(item, index) in itemList"
-        :key="index"
-        :title="item.name"
-        :name="index"
-      >
-        <!-- <edit-menu v-if="item.type === 'group'" :itemList="item.itemList" :schemaData="schemaData">
-
-        </edit-menu>-->
     <div>
       <!-- <div>{{schemaData[item.dataKey]}} {{item.dataKey}}</div> -->
       <video
@@ -49,13 +39,9 @@
           class="create-btn-container"
           v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
         >
-              <van-button class="create-btn" type="info" @click="addItem(item)">新增</van-button>
+          <van-button class="create-btn" type="info" @click="addItem(item)">新增1</van-button>
         </div>
-            <div
-              class="list-item"
-              v-for="(item2, index2) in schemaData[item.dataKey]"
-              :key="index2"
-            >
+        <div class="list-item" v-for="(item2, index2) in schemaData[item.dataKey]" :key="index2">
           <div class="btn-con">
             <span class="index">序号{{index2}}</span>
           </div>
@@ -91,7 +77,6 @@
                 </van-uploader>
               </div>
             </div>
-              </div>
             <div class="list-item-delete">
               <span @click="deleteItem(index2, schemaData[item.dataKey])">
                 <img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
@@ -100,6 +85,7 @@
             </div>
           </div>
         </div>
+      </div>
       <van-uploader
         result-type="dataUrl"
         v-if="item.type == 'image' || item.type == 'video'"
@@ -116,8 +102,6 @@
         @click="setSelectData(item, index)"
       >选择默认数据</van-button>
     </div>
-      </van-collapse-item>
-    </van-collapse>
     <selectDataCom
       :selectList="selectData"
       @changeSelcetData="changeSelcetData"
@@ -141,6 +125,10 @@ export default {
       type: String,
       default: ""
     },
+    item: {
+      type: Object,
+      default: () => {}
+    },
     schemaData: {
       type: Object,
       default: () => {}
@@ -194,6 +182,7 @@ export default {
           obj[item] = "";
         });
         this.schemaData[item.dataKey].push(obj);
+        console.log(obj)
       } else {
         alert("选择类型添加，敬请期待！");
       }
@@ -264,16 +253,19 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.image {
+.menu-container {
+  height: calc(100vh - 570px);
+  padding: 15px;
+  .image {
     height: 50px;
-}
-.van-uploader {
+  }
+  .van-uploader {
     .van-button {
       height: 0.8rem;
       line-height: 0.8rem;
     }
-}
-.list-container {
+  }
+  .list-container {
     .list-item {
       // padding:
       position: relative;
@@ -287,6 +279,7 @@ export default {
       .btn-con {
         display: flex;
         justify-content: space-between;
+        margin-bottom: 15px;
       }
 
       .edit-input-list-item {
@@ -302,8 +295,8 @@ export default {
       .list-item-delete {
         text-align: right;
         &-icon {
-        height: 16px;
-        width: 16px;
+          height: 14px;
+          width: 14px;
           vertical-align: middle;
           margin-right: 5px;
         }
@@ -314,15 +307,16 @@ export default {
           vertical-align: middle;
         }
       }
+      .list-item-list {
         padding: 10px;
-    margin-right: 10px;
         border: 1px solid #dddddd;
         box-sizing: border-box;
         border-radius: 8px;
         margin-bottom: 20px;
       }
-}
-.btn-container {
+    }
+  }
+  .btn-container {
     padding-left: 20px;
     // line-height: 38px;
     word-break: break-all;
@@ -335,16 +329,16 @@ export default {
       margin-bottom: 10px;
       border-radius: 3px;
     }
-}
-input {
+  }
+  input {
     margin-top: 15px;
     display: block;
     width: 50vw;
     height: 42px;
     padding-left: 10px;
     border: none;
-}
-.checkbox {
+  }
+  .checkbox {
     display: flex;
     align-items: center;
     height: 30px;
@@ -358,8 +352,8 @@ input {
         width: 20px;
       }
     }
-}
-.create-btn-container {
+  }
+  .create-btn-container {
     margin-bottom: 25px;
     .create-btn {
       padding-left: 17px;
@@ -378,14 +372,15 @@ input {
       box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
       border-radius: 22px;
     }
-}
-.edit-input {
+  }
+  .edit-input {
     width: 97%;
     background: #f5f5f5;
     border-radius: 6px;
     font-size: 14px;
     color: rgba(51, 51, 51, 1);
     margin-top: 0;
+  }
 }
 </style>
 

src/views/tempaltes/editMenu_back.vue

+<template>
+  <div class="menu-container">
+    <van-collapse v-model="activeName" accordion>
+      <van-collapse-item
+        v-for="(item, index) in itemList"
+        :key="index"
+        :title="item.name"
+        :name="index"
+      >
+        <!-- <edit-menu v-if="item.type === 'group'" :itemList="item.itemList" :schemaData="schemaData">
+
+        </edit-menu>-->
+        <div>
+          <!-- <div>{{schemaData[item.dataKey]}} {{item.dataKey}}</div> -->
+          <video
+            v-if="item.type ===  'video'"
+            class="image"
+            :src="getHostUrl(schemaData[item.dataKey].value)"
+            alt
+          />
+          <img
+            v-if="item.type ===  'image'"
+            class="image"
+            :src="getHostUrl(schemaData[item.dataKey].value)"
+            alt
+          />
+          <div class="checkbox" v-if="item.enableDisplay">
+            <label>
+              <input
+                type="checkbox"
+                style="display: inline;"
+                v-model="schemaData[item.dataKey].visbility"
+                @change="checkboxChange"
+              />是否隐藏
+            </label>
+          </div>
+          <div>
+            <input
+              v-if="item.type ===  'text'"
+              class="edit-input"
+              type="text"
+              v-model="schemaData[item.dataKey].value"
+              @keyup="valueChange2()"
+            />
+          </div>
+
+          <div class="list-container" v-if="item.type === 'list'">
+            <div
+              class="create-btn-container"
+              v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
+            >
+              <van-button class="create-btn" type="info" @click="addItem(item)">新增</van-button>
+            </div>
+            <div
+              class="list-item"
+              v-for="(item2, index2) in schemaData[item.dataKey]"
+              :key="index2"
+            >
+              <div class="btn-con">
+                <span class="index">序号{{index2}}</span>
+              </div>
+              <div class="list-item-list" v-for="(item3, index3) in item2" :key="index3">
+                <div v-if="(index3 != 'schemaIndex' && index3 != 'index')">
+                  <input
+                    v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
+                    :placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
+                    class="edit-input edit-input-list-item"
+                    type="text"
+                    v-model="item2[index3]"
+                    @keyup="valueChange2()"
+                  />
+                  <div>
+                    <van-uploader
+                      result-type="dataUrl"
+                      v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'"
+                      :accept="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' ? 'image/*' : 'video/*'"
+                      @click.native="uploadListItem(item.dataKey,index2, index3)"
+                      :after-read="uploadAfter"
+                    >
+                      <!-- <van-button type="info">上传</van-button> -->
+                      <img
+                        v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
+                        :src="getHostUrl(item2[index3])"
+                        class="edit-input edit-input-image"
+                      />
+                      <video
+                        class="edit-input-video"
+                        :src="getHostUrl(item2[index3])"
+                        v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
+                      ></video>
+                    </van-uploader>
+                  </div>
+                </div>
+              </div>
+              <div class="list-item-delete">
+                <span @click="deleteItem(index2, schemaData[item.dataKey])">
+                  <img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
+                  <span class="del-btn">删除</span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <van-uploader
+            result-type="dataUrl"
+            v-if="item.type == 'image' || item.type == 'video'"
+            :accept="item.type == 'image' ? 'image/*' : 'video/*'"
+            @click.native="uploadItem(item.dataKey)"
+            :after-read="uploadAfter"
+          >
+            <van-button type="info">上传</van-button>
+            <br />
+          </van-uploader>
+          <van-button
+            type="info"
+            v-if="item.selectList && item.type !== 'list'"
+            @click="setSelectData(item, index)"
+          >选择默认数据</van-button>
+        </div>
+      </van-collapse-item>
+    </van-collapse>
+    <selectDataCom
+      :selectList="selectData"
+      @changeSelcetData="changeSelcetData"
+      v-if="selectData.show"
+    ></selectDataCom>
+  </div>
+</template>
+
+<script>
+import { upload } from "@/api/api";
+import { getHostUrl } from "@/utils/index";
+import selectDataCom from "./selectData";
+export default {
+  name: "editMenu",
+  props: {
+    itemList: {
+      type: Array,
+      default: () => []
+    },
+    frameUrl: {
+      type: String,
+      default: ""
+    },
+    schemaData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  components: {
+    selectDataCom
+  },
+  created() {
+    console.log(this.schemaData);
+  },
+  data() {
+    return {
+      activeName: "",
+      dataKey: "",
+      listIndex: "",
+      itemKey: "",
+      selectData: {
+        show: false
+      }
+    };
+  },
+  methods: {
+    valueChange2() {
+      console.log(this.schemaData);
+      this.$emit("setList", this.schemaData);
+    },
+    uploadItem(key) {
+      // alert(key);
+      (this.itemKey = ""), (this.dataKey = key);
+    },
+    uploadListItem(key, index, itemKey) {
+      this.dataKey = key;
+      this.listIndex = index;
+      this.itemKey = itemKey;
+      console.log(key, index, itemKey, "dsadadsa");
+    },
+    isSchemaIndex(item) {
+      // console.log(item);
+      return item["schemaIndex"] ? item["schemaIndex"] : 0;
+    },
+    toObj(obj) {
+      console.log(obj);
+      return JSON.parse(JSON.stringify(obj));
+    },
+    addItem(item) {
+      if (item.modelSchema && item.modelSchema.length === 1) {
+        var keys = Object.keys(item.modelSchema[0]);
+        var obj = {};
+        keys.map(function(item) {
+          obj[item] = "";
+        });
+        this.schemaData[item.dataKey].push(obj);
+      } else {
+        alert("选择类型添加，敬请期待！");
+      }
+      console.log(item);
+    },
+    getHostUrl(dataUrl) {
+      return getHostUrl(this.frameUrl, dataUrl);
+    },
+    uploadAfter(file) {
+      this.$toast.loading({
+        mask: true,
+        duration: 0,
+        message: "上传中..."
+      });
+      upload(file.file)
+        .then(res => {
+          // this.schemaData[this.dataKey].value = res.data.data;
+          if (this.itemKey) {
+            this.setSchemaListData(res.data.data);
+          } else {
+            this.setSchemaData(res.data.data);
+          }
+          this.$toast.clear();
+        })
+        .catch(e => {
+          console.log(e);
+          this.$toast.clear();
+          this.$toast("上传失败");
+        });
+    },
+    checkboxChange(value) {
+      console.log(this.schemaData, value);
+    },
+    setSchemaData(value) {
+      this.schemaData[this.dataKey].value = value;
+      this.valueChange2();
+    },
+    setSchemaListData(value) {
+      this.schemaData[this.dataKey][this.listIndex][this.itemKey] = value;
+      this.valueChange2();
+      this.itemKey = "";
+    },
+    deleteItem(index, arr) {
+      arr.splice(index, 1);
+      this.$emit("setList", this.schemaData);
+    },
+    setSelectData(item, index) {
+      const myItem = JSON.parse(JSON.stringify(item));
+      this.selectData.show = true;
+      this.selectData.item = myItem;
+
+      this.selectData.index = index;
+      this.selectData.item.selectList = [
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
+      ];
+      console.log(this.selectData);
+    },
+    changeSelcetData(data) {
+      console.log(data);
+      this.dataKey = data.item.dataKey;
+      this.setSchemaData(data.val);
+      this.selectData.show = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.image {
+  height: 50px;
+}
+.van-uploader {
+  .van-button {
+    height: 0.8rem;
+    line-height: 0.8rem;
+  }
+}
+.list-container {
+  .list-item {
+    // padding:
+    position: relative;
+    .index {
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 1);
+      // line-height: 18px;
+    }
+    .btn-con {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .edit-input-list-item {
+      margin: 10px 0;
+    }
+    .edit-input-image {
+      width: auto;
+      height: 100px;
+      max-height: 100px;
+      max-width: 100%;
+      // display: block;
+    }
+    .list-item-delete {
+      text-align: right;
+      &-icon {
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+      .del-btn {
+        font-size: 14px;
+        color: rgba(250, 61, 34, 1);
+
+        vertical-align: middle;
+      }
+    }
+    padding: 10px;
+    margin-right: 10px;
+    border: 1px solid #dddddd;
+    box-sizing: border-box;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  }
+}
+.btn-container {
+  padding-left: 20px;
+  // line-height: 38px;
+  word-break: break-all;
+  .editbtn {
+    display: inline-block;
+    background: white;
+    padding: 2px 5px;
+    border: 1px solid #333333;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 3px;
+  }
+}
+input {
+  margin-top: 15px;
+  display: block;
+  width: 50vw;
+  height: 42px;
+  padding-left: 10px;
+  border: none;
+}
+.checkbox {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  label {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    input {
+      margin: 0;
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+.create-btn-container {
+  margin-bottom: 25px;
+  .create-btn {
+    padding-left: 17px;
+    padding-right: 17px;
+    // width: 197px;
+    line-height: 34px;
+    box-sizing: border-box;
+    border: none;
+    font-size: 16px;
+    height: 34px;
+    background: linear-gradient(
+      266deg,
+      rgba(255, 171, 32, 1) 0%,
+      rgba(255, 114, 14, 1) 100%
+    );
+    box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
+    border-radius: 22px;
+  }
+}
+.edit-input {
+  width: 97%;
+  background: #f5f5f5;
+  border-radius: 6px;
+  font-size: 14px;
+  color: rgba(51, 51, 51, 1);
+  margin-top: 0;
+}
+</style>
+

src/views/tempaltes/editMore.vue

@@ -191,13 +191,24 @@
           </div>
         </slider>
       </div>
+      <div class="group-menu" v-if="templateData.listData[currentPage]">
+        <slider :list="templateData.listData[currentPage].itemList">
+          <div
+            class="group-menu-item"
+            :class="itemListIndex===scope.index? 'group-menu-item-active': ''"
+            @click="setItemListIndex(scope.index)"
+            slot-scope="scope"
+          >{{scope.slider.name}}</div>
+        </slider>
+      </div>
       <div class="content-right">
-        <div class="title">编辑栏</div>
+        <!-- <div class="title">编辑栏</div> -->
         <div class="edit-area">
           <div v-if="templateData.listData[currentPage]">
             <editMenu
               v-if="loaded "
               :itemList="templateData.listData[currentPage].itemList"
+              :item="templateData.listData[currentPage].itemList[itemListIndex]"
               :schemaData="templateData.listData[currentPage].schemaData"
               :frameUrl="templateData.frameUrl"
               @setList="setList"
@@ -298,6 +309,7 @@ export default {
       pageViews: false,
       isPreview: false,
       currentPage: 0,
+      itemListIndex: 0,
       deviceList: [
         {
           clientId: "maxrocky",
@@ -403,6 +415,9 @@ export default {
           document.body.appendChild(newImg);
         });
     },
+    setItemListIndex(index) {
+      this.itemListIndex = index;
+    },
     onSheetSelect(item) {
       this.showSheet = false;
       if (item.action === "createPage") {
@@ -656,6 +671,7 @@ export default {
       window.wx.miniProgram.navigateTo({
         url: `/pages/home/film/schedule_add/components/device/index?fId=${filmId}`
       });
+      this.$toast.clear()
     },
     getFilmId() {
       const filmId =
@@ -663,6 +679,11 @@ export default {
       return filmId;
     },
     enterSubmit() {
+      this.$toast.loading({
+        overlay: true,
+        message: "加载中...",
+        forbidClick: true
+      });
       this.message({
         type: "getList"
       });
@@ -802,6 +823,66 @@ export default {
         background: lightblue;
       }
     }
+    .group-menu {
+      // box-shadow:0px -1px 0px 0px rgba(0,0,0,0.1);
+      border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
+      display: flex;
+      // height: calc(100vh - 96px);
+      background: #fff;
+      padding: 0px 10px;
+      padding-right: 10px;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: auto;
+      .swiper-slide {
+        width: auto;
+      }
+
+      .group-menu-item {
+        position: relative;
+        // width: 80px;
+        height: 40px;
+        line-height: 40px;
+        img {
+          border: 1px dashed #666;
+          width: 100%;
+          box-sizing: border-box;
+        }
+        // line-height: 65px;
+        margin: 0 20px;
+        font-size: 15px;
+        color: rgba(153, 153, 153, 1);
+        .close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+      .group-menu-item-active {
+        color: rgba(255, 145, 16, 1);
+        font-size: 16px;
+        position: relative;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 19px;
+          height: 4px;
+          background: rgba(255, 145, 16, 1);
+          box-shadow: 0px 1px 4px 1px rgba(233, 145, 42, 0.43);
+          border-radius: 2px;
+          left: calc(50% - 9.5px);
+          bottom: 0;
+        }
+      }
+      .activePage {
+        img {
+          border: 2px solid red;
+        }
+      }
+      .sortable-chosen {
+        background: lightblue;
+      }
+    }
     .content-left {
       // padding-top: 10px;
       flex: 1;
@@ -907,29 +988,36 @@ export default {
         box-sizing: border-box;
         // display: flex;
         // justify-content: center;
-        padding: 0 calc((100vw - 343px) / 2);
+        position: relative;
+        width: 344px;
+        margin: 0 auto;
       }
       .iframe-container2 {
         box-sizing: border-box;
         // display: flex;
         // justify-content: center;
-        padding: 0 calc((100vw - 193px) / 2);
+
+        width: 194px !important;
+        margin: 0 auto;
       }
       .iframe {
-        width: 343px;
+        width: 100%;
         margin: 0 auto;
         // margin-left: 16px;
-        height: 193px;
+        height: 194px;
         display: block;
         box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
-        position: relative;
+        // position: absolute;
+        overflow: hidden;
+        transform: translate3d(0, 0, 0) scale(1);
       }
       .viframe {
-        position: relative;
-        width: 193px !important;
+        overflow: hidden;
+        // position: absolute;
+        width: 100% !important;
         margin: 0 auto;
         // margin-left: 91px;
-        height: 343px;
+        height: 344px;
       }
     }
     .content-left-v {
@@ -1192,8 +1280,8 @@ export default {
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 20px 40px;
-    padding-bottom: 20px;
+    padding: 10px 40px;
+    padding-bottom: 10px;
     display: flex;
     z-index: 1000;
     justify-content: space-between;