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">
             <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="btm-raduis tips-text bg-whiter pb-6 pt-1 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,
    };
  },
  computed: {
    // 是否是ios环境
    isIos() {
      return this.$userAgent.isIos;
    },
    // 是否是安卓环境
    isAndroid() {
      return this.$userAgent.isAndroid;
    },
    // 是否是App环境
    isApp() {
      return this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    async copyCode() {
      try {
        await this.$native.clipboard.writeText(this.qrText || '复制的连接为空');
        this.$toast.success('复制成功');
        this.onClose();
      } catch (error) {
        console.log(error)
      }
    },
    async saveImg() {
      console.log(this.$userAgent)
      // http://192.168.0.101:3000/h5/activity/invite-user/invite-new-user/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiIyMjg4MiIsImNsaWVudCI6IjciLCJ1c2VyVHlwZSI6IjIiLCJtZXJjaGFudFNpZ24iOiJTWlgiLCJleHAiOjE3NDcyNjEwNjAsInVzZXJuYW1lIjoiMEVzSDAxNjY2MTc1NTMwU1pYIn0.0s0DI-hf_pFhgQUOQIueUAjzJ34WTv-XQLv0qBaYC1k
      try {
        const img = this.$refs.qrcode.$el;
        const base64Data = img.src; // 获取图片的base64数据

        if(this.isApp && this.isIos) {
          window.webkit.messageHandlers.picture.postMessage(base64Data);
        }else if(this.isApp && this.isAndroid) {
          window.native.saveImg(base64Data);
        }else {
          // h5 保存图片
          // 创建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.onClose();
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  /* 示例参照代码
  downloadFile (url) {
    Toast.clear()
    if (this.isiOS) {
      try {
        window.webkit.messageHandlers.picture.postMessage(url)
      } catch (error) {
        console.log(error)
      }
    }
    if (this.isAndroid) {
      try {
        window.native.saveImg(url)
      } catch (error) {
        console.log(error)
      }
    }
  },
  downloadFileByBase64 (base64) {
    this.downloadFile(base64)
    switch (this.current) {
      case 0: 
        this.makePoint('si_game_script_images'); 
        break
      case 1: 
        this.makePoint('si_crack_resource_images'); 
        break
      case 2: 
        this.makePoint('si_location_service_images'); 
        break
      case 3: 
        this.makePoint('si_entertainment_images'); 
        break
        case 4: this.makePoint('si_game_images'); 
        break
    }
  },
  */
}
</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{
        display: flex;
        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>