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="share-content bg-whiter pt-4 pb-4">
          <!-- 用户信息 -->
          <div class="userinfo-wrap pl-4 pr-4">
            <!-- <img class="avatar mr-1" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt=""> -->
            <div class="avatar mr-1"></div>
            <div class="userinfo-text ml-1">
              <div class="userinfo-name">15312348305</div>
              <div class="userinfo-describe">邀请您使用双子星云手机</div>
            </div>
          </div>
          <!-- 分割线 -->
          <van-divider dashed />

          <!-- 分享文案 -->
          <div class="share-bright pl-4 pr-4">
            <div class="share-describe mb-4">现在抢购即可享受活动价格</div>
            <div class="bright-item">
              <div class="bright-context">
                <!-- <img class="bright-img mr-1" src="" alt=""> -->
                <div class="bright-img mr-1"></div>
                <div class="bright-main ml-1">
                  <div class="bright-title">星曜云手机</div>
                  <div class="title-text">邀请您使用双子星云手机</div>
                </div>
              </div>
              <div class="badge">
                <img src="~assets/image/activity/invite-user/invite-new-user/badge.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <!-- 不规则图背景 -->
        <div class="share-irregular bg-whiter"></div>
        <!-- 二维码区域 -->
        <div class="qrcode-wrap bg-whiter mb-6 pl-6 pr-6 pt-6 pb-6">
          <div class="qrcode-img mr-4">
            <!-- <img class="qrcode" src="~assets/image/activity/invite-user/invite-new-user/qrcode.png" alt=""> -->
          </div>
          <div class="qrcode-describe">
            <div class="qrcode-title">双子星云手机</div>
            <div class="qrcode-text">使用微信扫码购买双子星云手机</div>
          </div>
        </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>
export default {
  name: 'SharePopup',
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    async copyCode(text="复制成功") {
      await this.$native.clipboard.writeText(text);
      this.$toast.success('复制成功');
      this.onClose();
    },
    async saveImg() {
      
      // this.$toast.success('保存成功');
      this.onClose();
    }
  },
}
</script>

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

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

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

  .userinfo-wrap{
    display: flex;

    .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;
      }
    }
  }

  .share-describe{
    font-family: DingTalk, DingTalk;
    font-size: 18px;
    color: #0A132B;
    line-height: 21px;
  }

  .bright-item{
    display: flex;

    .bright-context{
      flex: 1;
      display: flex;

      .bright-img{
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        background-color: red;
      }

      .bright-main{
        .bright-title{
          font-weight: 500;
          font-size: 14px;
          color: #0A132B;
        }

        .title-text{
          font-weight: 400;
          font-size: 12px;
          color: #979797;
        }
      }
    }


    .badge{
      flex: 0 0 36px;
      width: 36px;
      height: 36px;

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

  .qrcode-wrap{
    display: flex;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    .qrcode-img{
      flex: 0 0 56px;
      width: 56px;
      height: 56px;
      background-color: red;
    }

    .qrcode-describe{
      display: flex;
      flex-direction: column;
      justify-content: center;

     .qrcode-title{
        font-weight: 600;
        font-size: 16px;
        color: #3370FF;
      }

      .qrcode-text{
        font-weight: 400;
        font-size: 12px;
        color: #666;
      }
    }
  }

  .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>