水印相机

src/saas/AppCountryAlbum/Watermark.vue

@@ -1,22 +1,24 @@
 <template>
-  <div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
+  <div class="photo" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}" @click="isHide = true">
     <div class="photo-top" data-html2canvas-ignore>
       <image src="./images/close.png" @click="back" />
       <div class="photo-top__middle" @click="isShowAlbum = true">
         <span>保存至：{{ albumName || '默认相册' }}</span>
         <image src="./images/to-right.png" />
       </div>
-      <span @click="save">保存</span>
+      <span @click.stop="save">保存</span>
     </div>
-    <image :src="img" mode="aspectFit" />
+    <div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
-    <div class="watermark" v-if="currIndex > -1 && currWatermarkConfig.length">
+      <image class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
-      <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
+      <div class="watermark" :style="{left: x + 'px', top: y + 'px' }" v-if="currIndex > -1 && currWatermarkConfig.length" @touchstart="onTouchstart" @touchmove="onTouchmove">
+        <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
+      </div>
     </div>
     <div class="photo-bottom" data-html2canvas-ignore>
       <div class="photo-bottom__top">
-        <image src="./images/clear.png" @click="isHide = true, currIndex = -1" />
+        <image src="./images/clear.png" @click.stop="isHide = true, currIndex = -1" />
         <h2>水印</h2>
-        <span @click="isHide = true">确定</span>
+        <span @click.stop="isHide = true">确定</span>
       </div>
       <div class="waterlist">
         <div
@@ -24,22 +26,22 @@
           :class="[currIndex === index ? 'active' : '']"
           v-for="(item, index) in watermarkList"
           :key="item.id"
-          @click="currIndex = index">
+          @click.stop="currIndex = index">
           <image :src="item.thum" mode="aspectFill" />
           <div class="water-item__bottom">{{ item.name }}</div>
         </div>
       </div>
     </div>
     <div class="photo-tabbar"  data-html2canvas-ignore>
-      <div class="item" @click="back">
+      <div class="item" @click.stop="back">
         <image src="./images/fanhui.png" />
         <div>返回</div>
       </div>
-      <div class="item" @click="isHide = false, currIndex = 0">
+      <div class="item" @click.stop="isHide = false">
         <image src="./images/shuiyin.png" />
         <div>水印</div>
       </div>
-      <div class="item" @click="save">
+      <div class="item" @click.stop="save">
         <image src="./images/shangchuan.png" />
         <div>上传</div>
       </div>
@@ -88,7 +90,12 @@
         watermarkList: [],
         isShowAlbum: false,
         albumList: [],
-        address: {}
+        address: {},
+        x: 32,
+        y: 200,
+        startX: 0,
+        startY: 0,
+        canvasHeight: 0
       }
     },
 
@@ -123,6 +130,35 @@
     methods: {
       ...mapActions(['injectJWeixin']),
 
+      onImgLoad () {
+        const img = document.querySelector('.waterMarker-img')
+
+        this.canvasHeight = img.clientHeight
+      },
+
+      onTouchstart (e) {
+        const isMobile = e.type !== 'mousemove'
+        const watermark = document.querySelector('.watermark')
+        if (isMobile) {
+          this.startX = e.touches[0].clientX - Number((watermark.style.left).replace('px', ''))
+          this.startY = e.touches[0].clientY - Number((watermark.style.top).replace('px', ''))
+        } else {
+          this.startX = e.clientX - Number((watermark.style.left).replace('px', ''))
+          this.startY = e.clientY -Number((watermark.style.top).replace('px', ''))
+        }
+      },
+
+      onTouchmove (e) {
+        const isMobile = e.type !== 'mousemove'
+        if (isMobile) {
+          this.x = e.touches[0].clientX - this.startX
+          this.y = e.touches[0].clientY - this.startY
+        } else {
+          this.x = e.clientX - this.startX
+          this.y = e.clientY - this.startY
+        }
+      },
+
       save () {
         this.isHide = true
         this.$loading()
@@ -268,7 +304,7 @@
     position: relative;
     width: 100%;
     height: 800px;
-    background: #444;
+    background: #333;
     overflow: hidden;
 
     .newImg {
@@ -280,17 +316,30 @@
       height: 100%;
     }
 
-    * {
+    .waterMarker-wrapper {
-      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      transform: translate(-50%, -50%);
+      overflow: hidden;
+
+      .waterMarker-img {
+        width: 100%;
+      }
+
+      .watermark {
+        position: absolute;
+        left: 32px;
+        z-index: 111;
+        color: #FFFFFF;
+        font-size: 28px;
+      }
     }
 
-    .watermark {
+    * {
-      position: fixed;
+      box-sizing: border-box;
-      left: 32px;
-      bottom: 512px;
-      z-index: 111;
-      color: #FFFFFF;
-      font-size: 28px;
     }
 
     .photo-tabbar {
@@ -301,7 +350,7 @@
       left: 0;
       z-index: 10;
       width: 100%;
-      height: 216px;
+      height: 160px;
       background: #1E1E21;
 
       .item {
@@ -311,7 +360,7 @@
         image {
           width: 56px;
           height: 56px;
-          margin-bottom: 12px;
+          margin-bottom: 6px;
         }
 
         div {
@@ -330,6 +379,7 @@
       height: 474px;
       background: #FFFFFF;
       border-radius: 32px 32px 0px 0px;
+      transition: all ease 0.3s;
 
       .waterlist {
         display: flex;
@@ -460,10 +510,5 @@
         // bottom: 38px;
       }
     }
-
-    & > image {
-      width: 100%;
-      height: 100%;
-    }
   }
 </style>

src/saas/AppCountryAlbum/components/watermark/Watermark1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark1" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark1" @click.stop="linkTo('./WatermarkConfig')">
     <div class="top">
       <h2>打卡记录</h2>
       <p>{{ time }}</p>

src/saas/AppCountryAlbum/components/watermark/Watermark2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark3" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark3" @click.stop="linkTo('./WatermarkConfig')">
     <div class="top">
       <h2 v-if="isShowTitle">{{ title }}</h2>
       <span v-if="isShowName">{{ name }}</span>

src/saas/AppCountryAlbum/components/watermark/Watermark3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark2" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark2" @click.stop="linkTo('./WatermarkConfig')">
     <div class="top">
       <div class="left">
         <h2>{{ time }}</h2>
@@ -26,7 +26,7 @@
         time: '',
         week: '',
         timer: null,
-        address: '武汉市·绿地蓝海A座',
+        address: '',
         remark: '',
         configList: [],
         isShowRemark: false

src/saas/AppCountryAlbum/components/watermark/Watermark4.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark6" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark6" @click.stop="linkTo('./WatermarkConfig')">
     <div class="title">
       <h2>{{ title }}</h2>
     </div>
@@ -28,7 +28,7 @@
         timer: null,
         week: '',
         title: '定格在这一刻',
-        address: '武汉市·绿地蓝海A座',
+        address: '',
       }
     },
 

src/saas/AppCountryAlbum/components/watermark/Watermark5.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark4" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark4" @click.stop="linkTo('./WatermarkConfig')">
     <div class="top">
       <image src="./../../images/fangyishuiyin.png" />
       <h2>{{ title }}</h2>
@@ -29,7 +29,7 @@
         week: '',
         timer: null,
         title: '日常消杀',
-        address: '武汉市·绿地蓝海国际A座',
+        address: '',
         configList: [],
         isShowAddress: true,
         isShowDate: true,

src/saas/AppCountryAlbum/components/watermark/Watermark6.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark5" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark5" @click.stop="linkTo('./WatermarkConfig')">
     <div class="top">
       <h2>{{ title }}</h2>
       <div class="right">

src/saas/AppCountryAlbum/components/watermark/Watermark7.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark7" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark7" @click.stop="linkTo('./WatermarkConfig')">
     <image src="../../images/hjws.png" />
     <h2 v-if="isShowTitle">{{ title }}</h2>
     <div class="middle">