dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/Watermark.vue

<template>
  <div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
    <div class="photo-top" data-html2canvas-ignore>
      <!-- <image src="./images/gengduo1.png" @click="back" /> -->
      <u-icon name="close" color="#fff" size="28"  @click="back"></u-icon>
      <div class="photo-top__middle">
        <span>保存至：默认相册</span>
        <image src="./images/gengduo1.png" />
      </div>
      <span @click="save">保存</span>
    </div>
    <image :src="img" mode="aspectFit" />
    <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__top">
        <image src="./images/gengduo1.png" @click="isHide = true, currIndex = -1" />
        <h2>水印</h2>
        <span>确定</span>
      </div>
      <div class="waterlist">
        <div
          class="water-item"
          :class="[currIndex === index ? 'active' : '']"
          v-for="(item, index) in config"
          :key="index"
          @click="currIndex = index">
          <image :src="item.thum" mode="aspectFill" />
          <div class="water-item__bottom">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <image class="newImg" @click="waterSrc = ''" :src="waterSrc" v-if="waterSrc" />
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import Watermark1 from './components/watermark/Watermark1'
  import Watermark2 from './components/watermark/Watermark2'
  import Watermark3 from './components/watermark/Watermark3'
  import Watermark4 from './components/watermark/Watermark4'
  import Watermark5 from './components/watermark/Watermark5'
  import Watermark6 from './components/watermark/Watermark6'
  import Watermark7 from './components/watermark/Watermark7'
  import Watermark8 from './components/watermark/Watermark8'

  import { config } from './config'
  export default {
    name: 'Watermark',

    appName: '水印相机',

    components: {
      Watermark1,
      Watermark2,
      Watermark3,
      Watermark4,
      Watermark5,
      Watermark6,
      Watermark7,
      Watermark8
    },

    data () {
      return {
        img: '',
        config,
        currIndex: 0,
        isHide: false,
        height: '100%',
        waterSrc: ''
      }
    },

    onLoad (query) {
      this.img = query.url
      this.height = uni.getSystemInfoSync().windowHeight
    },

    methods: {
      save () {
        this.isHide = true
        console.log(this.$refs.waterMarker.offsetHeight)
        this.$nextTick(() => {
          setTimeout(() => {
            html2canvas(this.$refs.waterMarker, {
              allowTaint: true,
              useCORS: true
            }).then((canvas) => {
              let dataURL = canvas.toDataURL('image/png')
              this.waterSrc = dataURL
            }).catch(e => {
              console.log(e)
            })
          }, 2000)
        })
      },

      back () {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .photo {
    position: relative;
    width: 100%;
    height: 800px;
    background: #444;
    overflow: hidden;

    .newImg {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 11111;
      width: 100%;
      height: 100%;
    }

    * {
      box-sizing: border-box;
    }

    .watermark {
      position: fixed;
      left: 32px;
      bottom: 512px;
      z-index: 111;
      color: #FFFFFF;
      font-size: 28px;
    }

    .photo-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      height: 474px;
      background: #FFFFFF;
      border-radius: 32px 32px 0px 0px;

      .waterlist {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        height: calc(100% - 96px);
        padding: 18px 16px;
        overflow-y: auto;

        .water-item {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          width: 352px;
          height: 240px;
          margin-bottom: 16px;
          background: #2A3540;
          border-radius: 8px;
          overflow: hidden;

          &.active {
            border: 6px solid #408EF6;
          }

          image {
            width: 176px;
            height: 200px;
          }

          .water-item__bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 56px;
            line-height: 56px;
            color: #fff;
            text-align: center;
            font-size: 28px;
            background: rgba(0, 0, 0, 0.7);
          }
        }
      }

      .photo-bottom__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 96px;
        padding: 0 32px;

        image {
          width: 40px;
          height: 40px;
        }

        h2 {
          font-size: 28px;
          color: #333;
        }

        span {
          font-size: 32px;
          color: #222;
          font-weight: 600;
        }
      }
    }

    .photo-top {
      display: flex;
      position: fixed;
      align-items: center;
      justify-content: space-between;
      top: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      height: 128px;
      padding: 0 32px;
      background: rgba(0, 0, 0, 0.5);

      & > image {
        width: 28px;
        height: 28px;
      }

      & > span {
        color: #cbcbcb;
        font-size: 32px;
      }

      .photo-top__middle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 336px;
        height: 72px;
        background: #0B111F;
        border-radius: 40px;
        font-size: 28px;
        color: #cbcbcb;

        image {
          width: 32px;
          height: 32px;
          margin-left: 16px;
        }
      }
    }

    &.home-active {
      .photo-bottom {
        transform: translateY(100%);
      }

      .watermark {
        bottom: 38px;
      }
    }

    & > image {
      width: 100%;
      height: 100%;
    }
  }
</style>