乡村相册

src/saas/AppCountryAlbum/Watermark.vue

@@ -12,7 +12,7 @@
     <div class="watermark" v-if="currIndex > -1">
       <component :is="'Watermark' + (currIndex + 1)"></component>
     </div>
-    <div class="photo-bottom" v-if="!isHide">
+    <div class="photo-bottom" data-html2canvas-ignore>
       <div class="photo-bottom__top">
         <image src="./images/clear.png" @click="isHide = true, currIndex = -1" />
         <h2>水印</h2>
@@ -31,6 +31,20 @@
       </div>
     </div>
     <image class="newImg" @click="waterSrc = ''" :src="waterSrc" v-if="waterSrc" />
+    <div class="photo-tabbar"  data-html2canvas-ignore>
+      <div class="item" @click="back">
+        <image src="./images/fanhui.png" />
+        <div>返回</div>
+      </div>
+      <div class="item" @click="isHide = false, currIndex = 0">
+        <image src="./images/shuiyin.png" />
+        <div>水印</div>
+      </div>
+      <div class="item" @click="save">
+        <image src="./images/shangchuan.png" />
+        <div>上传</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -81,7 +95,6 @@
     methods: {
       save () {
         this.isHide = true
-        console.log(this.$refs.waterMarker.offsetHeight)
         this.$nextTick(() => {
           setTimeout(() => {
             html2canvas(this.$refs.waterMarker, {
@@ -136,6 +149,34 @@
       font-size: 28px;
     }
 
+    .photo-tabbar {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      bottom: 0;
+      left: 0;
+      z-index: 10;
+      width: 100%;
+      height: 216px;
+      background: #1E1E21;
+
+      .item {
+        flex: 1;
+        text-align: center;
+
+        image {
+          width: 56px;
+          height: 56px;
+          margin-bottom: 12px;
+        }
+
+        div {
+          font-size: 28px;
+          color: #fff;
+        }
+      }
+    }
+
     .photo-bottom {
       position: fixed;
       bottom: 0;