vue3-scene-web/src/views/home/components/share-popup/index.vue

<template>
  <el-dialog custom-class="share-popup" v-model="show" title="分享">
    <p>请使用手机扫描二维码或 复制分享链接</p>

    <vue-qrcode :value="url" :width="isMobile ? 150 : 180" class="share-popup__qrcode" />

    <div class="share-popup-tools">
      <div class="share-popup__btn" @click="copyUrl">复制分享链接</div>
      <div v-if="isMobile" class="share-popup__btn" @click="saveQRCode">保存二维码</div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import VueQrcode from 'vue-qrcode';
  import clipboard from 'clipboard';
  import { storeToRefs } from 'pinia';
  import useBaseStore from '@/store/module/base';

  const baseStore = useBaseStore();
  const { manageJsLoaded } = storeToRefs(baseStore);
  const url = window.location.href;
  const isMobile = ref(false);
  const props = defineProps<{
    visible: boolean;
  }>();
  const emits = defineEmits(['update:visible']);

  const show = computed({
    get() {
      return props.visible;
    },
    set(v) {
      emits('update:visible', v);
    },
  });

  const copyUrl = () => {
    clipboard.copy(url);

    ElNotification({
      title: '提示',
      type: 'success',
      message: '链接已复制',
      position: 'bottom-right',
    });
  };

  const saveQRCode = () => {
    const img = document.getElementsByClassName('share-popup__qrcode');
    if (img && img.length) {
      const a = document.createElement('a');
      // @ts-ignore
      a.href = img[0].src;
      a.download = '三亚家园.jpg';
      a.click();
    }
  };

  watch(manageJsLoaded, (v) => {
    if (v) {
      isMobile.value = window.browser.isMobile();
    }
  });
</script>

<style lang="scss">
  .share-popup {
    --el-dialog-width: 420px;
    --el-dialog-border-radius: 0;
    --el-dialog-title-font-size: 24px;
    height: 580px;
    background: url('./images/bg-share-min.jpg') no-repeat center / contain;

    .el-dialog__header {
      padding: 50px 40px;
    }
    .el-dialog__title {
      color: #f5dd8c;
      font-weight: 700;
    }
    .el-dialog__body {
      padding: 0 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      p {
        width: 220px;
        color: white;
        font-size: 20px;
        text-align: center;
      }
    }
    .el-dialog__headerbtn {
      --el-color-info: white;
      top: 35px;
      right: 20px;
      font-size: 26px;
    }
    &__qrcode {
      margin: 25px 0 40px;
      overflow: hidden;
      border-radius: 10px;
    }
    &__btn {
      flex: 1;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #9d222d;
      font-size: 20px;
      background: #f5dd8c;
      border-radius: 100px;
      cursor: pointer;
    }
    &-tools {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }
  }

  @media only screen and (max-width: 600px) {
    .share-popup {
      --el-dialog-width: 314px;
      --el-dialog-border-radius: 0;
      --el-dialog-title-font-size: 16px;
      height: 433px;

      .el-dialog__header {
        padding: 30px;
      }
      .el-dialog__body {
        padding: 0 30px;

        p {
          width: 160px;
          font-size: 16px;
        }
      }
      .el-dialog__headerbtn {
        top: 15px;
        right: 6px;
        font-size: 23px;
      }
      &__qrcode {
        margin: 18px 0 37px;
        border-radius: 3px;
      }
      &__btn {
        height: 43px;
        line-height: 43px;
        font-size: 16px;
      }
    }
  }
</style>