android-cloud-H5/pages/activity/invite-user/components/SharePopup.vue

<template>
  <div class="share-popup">
    <van-popup
      v-model="show"
      :close-on-click-overlay="false"
    >
      <div class="share-wrap">
        <div class="top-raduis bg-whiter">
          <!-- 用户信息 -->
          <div class="userinfo-wrap pl-4 pr-4 pt-4 pb-4">
            <img class="avatar mr-1" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt="">
            <div class="userinfo-text ml-1">
              <div class="userinfo-name">{{ nickname }}</div>
              <div class="userinfo-describe">邀请您使用云手机</div>
            </div>
          </div>
        </div>

        <!-- 二维码区域 -->
        <div class="qrcode-container bg-whiter pl-6 pr-6 pt-6 pb-6">
          <div class="qrcode-img">
            <!-- <img class="qrcode" src="~assets/image/activity/invite-user/invite-new-user/qrcode.png" alt=""> -->
             <div class="qrcode">
              <vue-qr
                ref="qrcode"
                :text="qrText"
                :size="size"
                :margin="10"
                colorDark="#000"
                colorLight="#fff"
                :logoSrc="logoSrc"
                :logoScale="0.2"
                :dotScale="0.7"
            />
             </div>
          </div>
        </div>

        <div class="arc tips-text bg-whiter">使用微信扫码注册云手机</div>
        <div class="btm-raduis bg-whiter pt-6 mb-6"></div>

        <div class="share-btn-wrap">
          <div class="operate-wrap">
            <div class="copy-link" @click="copyCode">复制链接</div>
            <div class="save-img" @click="saveImg">保存图片</div>
          </div>
          <div class="close-wrap mt-5">
            <span @click="onClose" class="cancel-btn">取消分享</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import vueQr from 'vue-qr/src/packages/vue-qr.vue';

export default {
  name: 'SharePopup',
  props: {
    nickname: {
      type: String,
      default: ''
    },
    qrText: {
      type: String,
      default: ''
    },
    logoSrc: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 190
    },
  },
  components: {
    vueQr
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    async copyCode() {
      await this.$native.clipboard.writeText(this.qrText);
      this.$toast.success('复制成功');
      this.onClose();
    },
    async saveImg() {
      try {
        const img = this.$refs.qrcode.$el;
        const base64Data = img.src;
        // 创建Blob对象
        const byteString = atob(base64Data.split(',')[1]);
        const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        const blob = new Blob([ab], { type: mimeString });

        // 创建下载链接
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        // 设置下载的文件名
        a.download = '1.png';
        document.body.appendChild(a);
        a.click();

        // 清理
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);

        this.$toast.success('保存成功');

        this.onClose();
      } catch (error) {
        console.log(error)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .bg-whiter{
    background-color: #fff;
  }

  .share-popup ::v-deep .van-popup {
    background-color: transparent;
    width: 290px;
  }

  .top-raduis{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .btm-raduis{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .arc{
    overflow: hidden;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    &::before,&::after{
      content: "";
      position: absolute;
      display: block;
      width: 22px;
      height: 22px;
      background-color: #171611;
      border-radius: 50%;
    }
    &::before{
        left: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    &::after{
        right: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
  }

  .userinfo-wrap{
    display: flex;
    background-image: url('~/assets/image/activity/invite-user/invite-new-user/share-popup-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: padding-box;

    .avatar{
     flex: 0 0 40px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #fff;
    }

    .userinfo-text{
      .userinfo-name{
        font-size: 14px;
        color: #242424;
      }

      .userinfo-describe{
        color: #979797;
      }
    }
  }

  .qrcode-container{
    display: flex;
    justify-content: center;
    align-items: center;

    .qrcode-img{

      .qrcode{
        width: 190px;
        height: 190px;
      }
    }
  }

  .tips-text{
    font-weight: 600;
    font-size: 16px;
    color: #0A132B;
    text-align: center;
  }

  .share-btn-wrap{
    .operate-wrap{
      display: flex;
      justify-content: space-around;
      align-items: center;

    .copy-link, .save-img{
        width: 113px;
        flex: 0 0 113px;
        font-weight: 400;
        font-size: 16px;
        line-height: 36px;
        text-align: center;
        border-radius: 18px;
        position: relative;
      }

      .copy-link{
        color: #0A132B;
        background-color: #fff;

        &::before{
          position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color: #000;
            border: inherit;
            border-color: #000;
            border-radius: inherit;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 0;
            content: ' ';
        }

        &:active::before{
          opacity: .1;
        }
      }

      .save-img{
        background-color: #3370FF;
        color: #fff;

        &::before{
          position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color: #000;
            border: inherit;
            border-color: #000;
            border-radius: inherit;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 0;
            content: ' ';
        }

        &:active::before{
          opacity: .1;
        }
      }
    }

    .close-wrap{
      display: flex;
      justify-content: center;
      align-items: center;

      .cancel-btn{
        display: inline-block;
        font-weight: 400;
        font-size: 14px;
        color: #FFF;
        line-height: 26px;
      }
    }
  }
</style>