caimei-authentic-www/components/SimpleShare/index.vue

<template>
  <div class="simple-share" v-if="shareFlag">
    <!-- 分享按钮 -->
    <div class="share__btns" @click="handleShare"></div>
    <!-- 分享弹窗 -->
    <div class="share__dialog" v-if="showDialog">
      <div class="share__dialog_wrapper">
        <div class="share__dialog__item" @click="handleShareWechat">
          <i class="icon icon-share-wechat"></i>
          <span>分享给好友</span>
        </div>
        <template v-if="showImage">
          <div class="share__dialog__item">
            <i class="icon icon-share-download"></i>
            <span>保存相册</span>
          </div>
        </template>
        <template v-else>
          <div class="share__dialog__item" @click="handleGenerateImage">
            <i class="icon icon-share-code"></i>
            <span>生成二维码</span>
          </div>
        </template>
      </div>
      <div class="share-concel" @click="handleCancel">取消</div>
    </div>
    <!-- 图片预览 -->
    <div class="share__image" v-if="showImage"><img :src="imageUrl" /></div>
    <!-- 遮罩层 -->
    <div class="share__mask" :class="maskClass" v-if="showMask" @click="handleCancel"></div>
    <!-- 画布 -->
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import { loadImage } from '~/utils'
import QRCode from 'qrcode'
import { isWeChat } from '~/utils/validator'
export default {
  data() {
    return {
      shareFlag: false,
      showDialog: false,
      showImage: false,
      showMask: false,
      imageUrl: '/share-code-bg.png',
      shareGuide: false,
      shareImageGuide: false,
    }
  },
  computed: {
    maskClass() {
      return {
        'share-guide': this.shareGuide,
        'share-image-guide': this.shareImageGuide,
      }
    },
  },
  created() {
    this.shareFlag = isWeChat()
  },
  methods: {
    // 分享弹窗
    handleShare() {
      this.showDialog = true
      this.showMask = true
    },
    // 取消
    handleCancel() {
      this.showDialog = false
      this.showImage = false
      this.showMask = false
      this.shareGuide = false
      this.shareImageGuide = false
    },
    // 生成图片
    handleGenerateImage() {
      this.drawImage()
      this.showDialog = false
    },
    handleShareWechat() {
      this.shareGuide = true
      this.showDialog = false
    },
    async drawImage() {
      const canvas = document.createElement('canvas')
      canvas.width = 800
      canvas.height = 1200

      const ctx = canvas.getContext('2d')
      const image = await loadImage('/share-code-bg.png')
      ctx.drawImage(image, 0, 0, 800, 1200)
      const url = window.location.href
      const qrcodeUrl = await QRCode.toDataURL(url, { version: 5 })
      const qrcodeImage = await loadImage(qrcodeUrl)
      ctx.drawImage(qrcodeImage, 190, 600, 420, 420)

      this.imageUrl = canvas.toDataURL('image/jpg')
      this.showImage = true
      this.shareImageGuide = true
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .simple-share {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .simple-share {
    position: relative;

    .share__mask {
      position: fixed;
      z-index: 19;
      width: 100vw;
      height: 100vh;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.8);

      &.share-guide {
        background-image: url(/icon-share-guide1.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 70vw;
        z-index: 1000;
      }

      &.share-image-guide {
        background-image: url(/icon-share-guide2.png);
        background-repeat: no-repeat;
        background-position: center 90%;
        background-size: 50vw;
      }
    }

    .share__btns {
      position: fixed;
      right: 4vw;
      bottom: 32vw;
      width: 12vw;
      height: 12vw;
      background: url(/icon-share.png) no-repeat center;
      background-size: 12vw;
      border-radius: 50%;
      z-index: 19;
    }

    .share__image {
      width: 80vw;
      height: 120.2vw;
      position: fixed;
      left: 10vw;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .share__dialog {
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      background: #fff;
      z-index: 21;
      padding: 7.2vw 0;

      .share-concel {
        padding: 5.6vw 0;
        margin-top: 5.6vw;
        border-top: 0.1vw solid #e1e1e1;
        text-align: center;
        color: #333333;
        font-size: 3.6vw;
      }

      .share__dialog_wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .share__dialog__item {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 24%;

          span {
            font-size: 3.6vw;
            color: #333333;
            margin-top: 2.4vw;
          }

          .icon {
            display: block;
            width: 8.8vw;
            height: 8.8vw;
            background-size: 8.8vw;
            background-repeat: no-repeat;
            background-position: center;

            &.icon-share-wechat {
              background-image: url('~assets/image/share-icon-wechat.png');
            }

            &.icon-share-code {
              background-image: url('~assets/image/share-icon-code.png');
            }

            &.icon-share-download {
              background-image: url('~assets/image/share-icon-download.png');
            }
          }
        }
      }
    }
  }
}
</style>