Merge branch 'develop' into test

src/views/tempaltes/editMenu.vue

@@ -154,8 +154,24 @@
         :img="VueCropperOption.img"
         :canMove="false"
         :autoCrop="VueCropperOption.autoCrop"
+        :fixedNumber="VueCropperOption.fixedNumber"
+        :fixed="VueCropperOption.fixed"
         :outputType="VueCropperOption.outputType"
       ></vueCropper>
+      <div class="scale-container">
+        <div class="scale-item" :class="VueCropperOption.fixedState == 0 ? 'scale-item-active' : ''" @click="changeFixedState(0)">
+          <img class="scale-icon" src="../../assets/img/16-9.png" alt />
+          <div>16:9</div>
+        </div>
+        <div class="scale-item" :class="VueCropperOption.fixedState == 1 ? 'scale-item-active' : ''" @click="changeFixedState(1)"> 
+          <img class="scale-icon" src="../../assets/img/9-16.png" alt />
+          <div>9:16</div>
+        </div>
+        <div class="scale-item" :class="VueCropperOption.fixedState == 2 ? 'scale-item-active' : ''" @click="changeFixedState(2)">
+          <img class="scale-icon" src="../../assets/img/auto.png" alt />
+          <div>自定义</div>
+        </div>
+      </div>
       <div class="save-img-btn" @click="saveCropper">
         <!-- <van-button @click="VueCropperOption.img = ''">取消</van-button> -->
         确定
@@ -190,6 +206,10 @@ export default {
       type: Boolean,
       default: true
     },
+    templateShow: {
+      type: String,
+      default: "HORIZONTAL"
+    },
     schemaData: {
       type: Object,
       default: () => {}
@@ -199,9 +219,15 @@ export default {
     selectDataCom,
     VueCropper
   },
-  created() {
-    console.log(this.schemaData);
+  mounted() {
+    console.log(this.tempalteShow, "this.tempalteShow");
+    if (this.tempalteShow === "HORIZONTAL") {
+      this.VueCropperOption.fixedNumber = [16, 9];
+    } else {
+      this.VueCropperOption.fixedNumber = [9, 16];
+    }
   },
+  created() {},
   data() {
     return {
       activeName: "",
@@ -212,14 +238,42 @@ export default {
         show: false
       },
       VueCropperOption: {
+        fixedState: 0,
         img: "",
         outputType: "png",
         autoCrop: true,
+        fixed: true,
+        fixedNumber: [16, 9],
         preImg: ""
       }
     };
   },
   methods: {
+    changeFixedState(state) {
+      this.VueCropperOption.fixedState = state
+      if(state === 0) {
+        this.VueCropperOption.fixedNumber = [16,9]
+        this.VueCropperOption.fixed = true
+        this.VueCropperOption.autoCrop = false
+        setTimeout(() => {
+          this.VueCropperOption.autoCrop = true
+        }, 300)
+      } else if(state === 1) {
+        this.VueCropperOption.fixedNumber = [9,16]
+        this.VueCropperOption.fixed = true
+        this.VueCropperOption.autoCrop = false
+        setTimeout(() => {
+          this.VueCropperOption.autoCrop = true
+        }, 300)
+      } else {
+         this.VueCropperOption.fixedNumber = [1,1]
+        this.VueCropperOption.fixed = false
+        this.VueCropperOption.autoCrop = false
+        setTimeout(() => {
+          this.VueCropperOption.autoCrop = true
+        }, 300)
+      }
+    },
     uploadFile(data) {
       this.$toast.loading({
         mask: true,
@@ -243,19 +297,19 @@ export default {
         });
     },
     onBlur() {
-      var top = window.scrollY
-      console.log(top)
+      var top = window.scrollY;
+      console.log(top);
       window.scrollTo(0, 0);
       var time = setTimeout(() => {
         window.scrollTo(0, top);
-        clearTimeout(time)
-      }, 100)
+        clearTimeout(time);
+      }, 100);
     },
     valueChange2() {
-      console.log(this.schemaData)
+      console.log(this.schemaData);
       setTimeout(() => {
         this.$emit("setList", this.schemaData);
-      }, 100)
+      }, 100);
       this.$emit("setList", this.schemaData);
     },
     setList() {
@@ -297,7 +351,14 @@ export default {
       return getHostUrl(this.frameUrl, dataUrl);
     },
     uploadAfter(file) {
-      // console.log(file);
+      if (this.templateShow === "HORIZONTAL") {
+        this.VueCropperOption.fixedNumber = [16, 9];
+        this.VueCropperOption.fixedState = 0
+      } else {
+        this.VueCropperOption.fixedNumber = [9, 16];
+        
+        this.VueCropperOption.fixedState = 1
+      }
       if (String(file.file.type).indexOf("image") !== -1) {
         this.$emit("setClipImg", true);
         this.VueCropperOption.img = file.content;
@@ -364,7 +425,7 @@ export default {
   .cropper-container {
     display: flex;
     flex-direction: column;
-    background-color: #666;
+    background-color: black;
     top: 0;
     left: 0;
     bottom: 0;
@@ -375,23 +436,47 @@ export default {
     // overflow: hidden;
     z-index: 10000000;
     .vue-cropper {
-      height: calc(100vh - 84px);
+      height: calc(100vh - 130px);
+      // width:
       z-index: 100000000;
     }
+    .scale-container {
+      padding-top: 15px;
+      display: flex;
+      justify-content: center;
+      .scale-item {
+        color: white;
+        font-size: 13px;
+        font-weight: 300px;
+        width: 20.3%;
+        text-align: center;
+        opacity: 0.6;
+        .scale-icon {
+          width: 22px;
+          height: 22px;
+          margin-bottom: 9px;
+        }
+      }
+      .scale-item-active {
+        opacity: 1;
+      }
+    }
     .save-img-btn {
-      width: 294px;
+      width: 177px;
       height: 44px;
       line-height: 44px;
       font-size: 18px;
       margin: 20px auto;
       margin-bottom: 20px;
-      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: 30px;
+      // background: linear-gradient(
+      //   266deg,
+      //   rgba(255, 171, 32, 1) 0%,
+      //   rgba(255, 114, 14, 1) 100%
+      // );
+      border: 1px solid rgba(255, 255, 255, 1);
+      // box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
+      // border-radius: 30px;
+      border-radius: 19px;
       text-align: center;
       color: white;
       z-index: 1000000;

src/views/tempaltes/editMore.vue

@@ -184,7 +184,7 @@
           :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" v-show="!clipImg">
+      <!-- <div class="content-menu" v-show="!clipImg">
         <slider :list="templateData.listData">
           <div
             class="menu-item"
@@ -195,7 +195,7 @@
             <img :src="scope.slider.thumb" alt />
           </div>
         </slider>
-      </div>
+      </div> -->
       <div class="group-menu" v-if="templateData.listData[currentPage]" v-show="!clipImg">
         <slider :list="templateData.listData[currentPage].itemList">
           <div
@@ -217,6 +217,7 @@
               :item="templateData.listData[currentPage].itemList[itemListIndex]"
               :schemaData="templateData.listData[currentPage].schemaData"
               :frameUrl="templateData.frameUrl"
+              :templateShow="templateData.templateShow"
               @setList="setList"
               @setClipImg="setClipImg"
             ></editMenu>
@@ -684,7 +685,9 @@ export default {
           // window.sessionStorage.setItem("filmId");
           this.navToWx(filmId);
           // this.$router.back();
-        });
+        }).catch(() => {
+          this.$toast.clear();
+        }) ;
       } else {
         // "templateId": "string",
         // "resourceId": "string",
@@ -703,7 +706,9 @@ export default {
           window.sessionStorage.setItem("filmId", res.data.data);
           this.templateData.filmId = res.data.data;
           this.navToWx(res.data.data);
-        });
+        }).catch(() => {
+          this.$toast.clear();
+        }) ;
       }
     },
     navToWx(fId) {