fix clip bug

61390aa1 · hank · 01db2ef2 · 61390aa1 · 61390aa1 · 61390aa1
Commit 61390aa1 authored Dec 14, 2019 by hank
Hide whitespace changes
Inline Side-by-side

Showing with 73 additions and 28 deletions

src/App.vue
+2 -2

src/views/tempaltes/editMenu.vue
+22 -8

src/views/tempaltes/editMore.vue
+49 -18

No files found.
--- a/src/App.vue
+++ b/src/App.vue
@@ -75,8 +75,8 @@ export default {
 }
 .child-view {
  transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
-  -webkit-overflow-scrolling: touch;
+  // -webkit-overflow-scrolling: touch;
-  position: absolute;
+  // position: absolute;
  width: 100%;
  min-height: 100vh;
 }

--- a/src/views/tempaltes/editMenu.vue
+++ b/src/views/tempaltes/editMenu.vue
@@ -113,7 +113,7 @@
      @changeSelcetData="changeSelcetData"
      v-if="selectData.show"
    ></selectDataCom>
-    <div class="cropper-container" v-show="VueCropperOption.img">
+    <div class="cropper-container" v-if="VueCropperOption.img">
      <vueCropper
        ref="cropper"
        :img="VueCropperOption.img"
@@ -151,6 +151,10 @@ export default {
      type: Object,
      default: () => {}
    },
+    isIos: {
+      type: Boolean,
+      default: true
+    },
    schemaData: {
      type: Object,
      default: () => {}
@@ -159,7 +163,7 @@ export default {
  components: {
    selectDataCom,
    VueCropper
-  },
+  },    
  created() {
    console.log(this.schemaData);
  },
@@ -248,6 +252,7 @@ export default {
    uploadAfter(file) {
      // console.log(file);
      if (String(file.file.type).indexOf("image") !== -1) {
+        this.$emit("setClipImg", true)
        this.VueCropperOption.img = file.content;
      } else {
        this.uploadFile(file.file);
@@ -270,6 +275,7 @@ export default {
      this.$emit("setList", this.schemaData);
    },
    saveCropper() {
+      this.$emit("setClipImg", false)
      this.VueCropperOption.img = "";
      this.$refs.cropper.getCropBlob(data => {
        console.log(data);
@@ -304,19 +310,26 @@ export default {
 .menu-container {
  height: calc(100vh - 570px);
  padding: 15px;
+  position: static;
+  box-sizing: border-box;
+  // overflow: scroll;
  .cropper-container {
+    display: flex;
+    flex-direction: column;
    background-color: #666;
-    overflow: auto;
    top: 0;
    left: 0;
-    width: 100%;
+    bottom: 0;
-    position: fixed;
+    right: 0;
-    height: 100%;
+    width: 100vw;
-    z-index: 100000;
+    position: absolute;
+    height: 100vh;
+    // overflow: hidden;
+    z-index: 10000000;
    .vue-cropper {
      height: calc(100vh - 84px);
+      z-index: 100000000;
    }
    .save-img-btn {
      width: 294px;
@@ -334,6 +347,7 @@ export default {
      border-radius: 30px;
      text-align: center;
      color: white;
+      z-index: 1000000;
    }
  }
  .image {

--- a/src/views/tempaltes/editMore.vue
+++ b/src/views/tempaltes/editMore.vue
@@ -131,6 +131,7 @@
    <div class="content" v-show="gifloaded">
      <div
        class="content-left"
+        v-show="!clipImg"
        :class="{'content-left-v': templateData.templateShow === 'VERTICAL' }"
      >
        <div class="content-left-top">
@@ -150,10 +151,18 @@
          <!-- <van-button size="mini" @click="pageShow">页面排序</van-button> -->
          <!-- <van-button size="mini" @click="preview">预览</van-button> -->
        </div>
+        <iframe
+          style="height: 0px;width: 100%;"
+          v-if="isIos"
+          v-show="false"
+          @load="iframetestLoad"
+          scrolling="no"
+          :src="templateData.frameUrl+'?isEdit=1'"
+          frameborder="0"
+        ></iframe>
        <div
          class="iframe-container"
          :style="!isIos ? 'width: 100vw' : ''"
          :class="{'iframe-container2': templateData.templateShow === 'VERTICAL', isIos: isIos }"
        >
          <iframe
@@ -168,21 +177,14 @@
            frameborder="0"
          ></iframe>
        </div>
-        <iframe
-          style="height: 0px;width: 100%;"
-          v-if="isIos"
-          v-show="false"
-          scrolling="no"
-          :src="templateData.frameUrl+'?isEdit=1'"
-          frameborder="0"
-        ></iframe>
        <!-- 
          :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + time"
          https://visual-clouds.bdideal.com/html/test2.html
          :src="'https://127.0.0.1:9000/template.html' + '?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
        :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"-->
      </div>
-      <div class="content-menu">
+      <div class="content-menu" v-show="!clipImg">
        <slider :list="templateData.listData">
          <div
            class="menu-item"
@@ -194,7 +196,7 @@
          </div>
        </slider>
      </div>
-      <div class="group-menu" v-if="templateData.listData[currentPage]">
+      <div class="group-menu" v-if="templateData.listData[currentPage]" v-show="!clipImg">
        <slider :list="templateData.listData[currentPage].itemList">
          <div
            class="group-menu-item"
@@ -206,21 +208,23 @@
      </div>
      <div class="content-right">
        <!-- <div class="title">编辑栏</div> -->
-        <div class="edit-area">
+        <div class="edit-area" :class="{'fixed-edit-area': clipimg}">
          <div v-if="templateData.listData[currentPage]">
            <editMenu
              v-if="loaded "
+              :isIos="this.isIos"
              :itemList="templateData.listData[currentPage].itemList"
              :item="templateData.listData[currentPage].itemList[itemListIndex]"
              :schemaData="templateData.listData[currentPage].schemaData"
              :frameUrl="templateData.frameUrl"
              @setList="setList"
+              @setClipImg="setClipImg"
            ></editMenu>
          </div>
        </div>
      </div>
    </div>
-    <div class="createBtn" v-show="gifloaded">
+    <div class="createBtn" v-show="gifloaded && !clipImg">
      <van-button type="info" @click="enterSubmit" style="width: 100%">发布</van-button>
    </div>
    <van-action-sheet v-model="showSheet" :round="true" :actions="actions" @select="onSheetSelect" />
@@ -303,6 +307,7 @@ export default {
        defaultData: [],
        templateInfo: {}
      },
+      clipImg: false,
      editObj: {},
      editIndex: "",
      editPage: "",
@@ -337,9 +342,9 @@ export default {
    let ua = window.navigator.userAgent;
    //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
    if (ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
-      this.isIos = true
+      this.isIos = true;
    } else {
-      this.isIos = false
+      this.isIos = false;
    }
    window.onunload = function() {
      window.wx.miniProgram.navigateBack({});
@@ -457,6 +462,9 @@ export default {
        pages: this.templateData.listData
      });
    },
+    setClipImg(show) {
+      this.clipImg = show
+    },
    goPage(index) {
      this.currentPage = index;
      console.log(index);
@@ -551,6 +559,9 @@ export default {
        type: "cancelEdit"
      });
    },
+    iframetestLoad() {
+      this.loaded = true;
+    },
    iframeLoad() {
      this.setList();
    },
@@ -598,7 +609,9 @@ export default {
              var pagesData = res.data.pageList;
              this.templateData.defaultData = pagesData;
            });
-          this.loaded = true;
+          if (!this.isIos) {
+            this.loaded = true;
+          }
          this.$toast("数据加载完成");
          setTimeout(() => {
            window.frames["tiframe"].location.reload();
@@ -617,10 +630,13 @@ export default {
        this.templateData.frameUrl = res.data.frameUrl;
        this.templateData.filmDescribe = res.data.templateDescribe;
        this.templateData.templateShow = res.data.templateShow;
-        this.loaded = true;
+        if (!this.isIos) {
+          this.loaded = true;
+        }
        this.$toast("数据加载完成");
        setTimeout(() => {
          window.frames["tiframe"].location.reload();
+          console.log("reload");
        }, 500);
        axios
          .get(
@@ -773,6 +789,7 @@ export default {
  box-sizing: border-box;
  padding-bottom: 80px;
  position: relative;
+  z-index: 1;
  .page-content-tips {
    text-align: center;
@@ -1051,6 +1068,8 @@ export default {
      }
    }
    .content-right {
+      // position: relative;
+      // z-index: 10;
      // width: 300px;
      text-align: left;
@@ -1064,6 +1083,18 @@ export default {
        margin-bottom: 10px;
        border-bottom: 1px solid #dddddd;
      }
+      // .fixed-edit-area {
+      //   position: fixed;
+      //   top: 0;
+      //   right: 0;
+      //   left: 0;
+      //   bottom: 0;
+      //   z-index: 1000;
+      //   height: 100vh;
+      //   .menu-container {
+      //     height: 100vh !important;
+      //   }
+      // }
      .edit-area {
        padding-top: 10px;
        padding-bottom: 20px;
@@ -1307,7 +1338,7 @@ export default {
    padding: 10px 40px;
    padding-bottom: 10px;
    display: flex;
-    z-index: 1000;
+    // z-index: 1;
    justify-content: space-between;
    background: white;
    box-sizing: border-box;