commit

src/components/tabbar/index.vue

@@ -318,13 +318,13 @@ export default {
       })
     },
     handleCode() {
-      let that = this
-      let isShow = localStorage.getItem('isShow')
-      if (isShow) {
-        this.handlescanQRCode()
-      } else {
+      // let that = this
+      // let isShow = localStorage.getItem('isShow')
+      // if (isShow) {
+        // this.handlescanQRCode()
+      // } else {
         this.showOperation = true
-      }
+      // }
       // Dialog.confirm({
       //   title: '温馨提示',
       //   message: '是否查看操作指引',

src/pages/composite/img.vue

@@ -16,7 +16,7 @@
           height: 'auto',
           top: top + 'px',
           left: left + 'px',
-          transform: scale
+          transform: `scale(${scale}) rotateZ(${deg}deg)`
         }"
       />
     </div>
@@ -43,10 +43,11 @@ export default {
       imgW: 0,
       imgW: 0,
       imgH: 0,
-      deg: 0,
       top: 0,
       left: 0,
-      scale: 'scale(1)',
+      deg: 0,
+      scale: '1',
+      transform: 'scale(1)',
       myscale: 0,
       size: 0,
       // 位置差
@@ -54,6 +55,12 @@ export default {
       disY: 0,
       DropEl: null,
       dropContainer: null,
+
+
+
+
+
+
       mousewheelevt: null
     }
   },
@@ -98,9 +105,12 @@ export default {
         // + that.myscale
         // 根据缩放比例来缩放图片或其他内容
         myscale = scale
-        that.scale = 'scale(' + scale + ')'
-        container.style.transform = 'scale(' +  scale + ')'
-        console.log(scale, 'scale', that.myscale)
+        that.scale = scale
+        // container.style.transform = `${scale} rotateZ(${that.deg}deg)`
+        
+        // that.scale = `${scale} rotateZ(${that.deg}deg)`
+        // container.style.transform = that.scale
+        console.log(scale, 'scale', that.myscale, that.deg)
       }
     })
     // container.addEventListener('touchend', function (e) {
@@ -242,7 +252,8 @@ export default {
         this.deg = 0
       }
       this.size = 0
-      this.scale = `${this.scale} rotateZ(${this.deg}deg)`
+      // this.scale = `${this.scale} rotateZ(${this.deg}deg)`
+      console.log(this.deg, 'this.deg')
     },
 
     /**
@@ -255,7 +266,7 @@ export default {
       if (this.size < -0.5) {
         this.size = -0.5
       }
-      this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`
+      this.scale = 1 + this.size
     },
 
     /**
@@ -267,7 +278,7 @@ export default {
       this.top = 0
       this.left = 0
       this.deg = 0
-      this.scale = 'scale(1)'
+      this.scale = '1'
       this.size = 0
       this.initImage()
     },

src/pages/composite/index.vue

@@ -52,11 +52,15 @@
     >
       <div class="shareImgDiv showimg1" v-if="imgUrl" >
         <div ref="downDiv" style="width: 100%; height: 100%">
-          <myImg :src="imgUrl" :bgsrc="activeImg"  />
+          <myImg ref="myImg" :src="imgUrl" :bgsrc="activeImg"  />
         </div>
-        <div v-if="!img && !showShare" class="bit2 mybut" @click="handleSavaimg">
-          <!-- <img style="margin: 0; height: 24px; width: 24px" src="/static/img/dowm.png" alt="" /> -->
-          查看图片{{ img }}
+        <div class="bit2 butlist flex justify-around" v-if="!img && !showShare">
+          <div class="mybut" @click="handleSavaimg">
+            查看图片{{ img }}
+          </div>
+          <div class="mybut" @click="handlexz">
+            旋转图片
+          </div>
         </div>
         <!-- <div class="scz"><van-icon name="photo-o" size="26" style="margin-right: 11px" />照片合成中...</div> -->
         <!-- <div class="result">
@@ -269,6 +273,9 @@ export default {
       this.active = index
       this.activeImg = item.img
     },
+    handlexz(){
+      this.$refs.myImg.handleRotate()
+    },
     handleSavaimg() {
       let that = this
       console.log('base64', this.$refs.downDiv)
@@ -307,22 +314,7 @@ export default {
     text-align: center;
     position: relative;
     height: calc(100% - 209px);
-    .mybut {
-      position: absolute;
-      bottom: 0;
-      right: 6.4vw;
-      z-index: 10;
-      /* margin: 0 auto; */
-      width: 100px;
-      left: calc(50% - 50px);
-      height: 42px;
-      width: 124px;
-      line-height: 42px;
-      background: rgba(187, 171, 146, 0.8);
-      border-radius: 38px 38px 38px 38px;
-      border: 1px solid #fff9b1;
-      color: #5b472e;
-    }
+
     .scz {
       width: 217px;
       height: 65px;
@@ -356,8 +348,8 @@ export default {
         }
       }
       .butlist {
-        margin-top: 19px;
-        width: 270px;
+        // margin-top: 19px;
+        // width: 270px;
         // padding: 0 9px;
         .bit1 {
           height: 42px;
@@ -368,7 +360,7 @@ export default {
           border: 1px solid #bbab92;
           color: #e3c991;
         }
-        .bit2 {
+        .mybut {
           height: 42px;
           width: 124px;
           line-height: 42px;
@@ -503,7 +495,23 @@ export default {
     .home {
       margin: 0 auto;
     }
-    .bit2 {
+    .butlist {
+      // position: absolute;
+      bottom: 0;
+      right: 6.4vw;
+      z-index: 10;
+      /* margin: 0 auto; */
+      width: 100px;
+      left: calc(50% - 50px);
+      margin: 19px auto 0 auto;
+      height: 42px;
+      width: 100%;
+      line-height: 42px;
+      // background: rgba(187, 171, 146, 0.8);
+      // border-radius: 38px 38px 38px 38px;
+      // border: 1px solid #fff9b1;
+      // color: #5b472e;
+      .mybut {
       height: 42px;
       width: 124px;
       line-height: 42px;
@@ -511,11 +519,13 @@ export default {
       border-radius: 38px 38px 38px 38px;
       border: 1px solid #fff9b1;
       color: #5b472e;
-      position: absolute;
+      // position: absolute;
       bottom: 0;
       left: calc(50% - 62px);
       text-align: center;
     }
+    }
+
   }
 }
 </style>