JiNianGuan_aomeng/scene/src/views/gui/components/share.vue

<template>
  <div class="share">
    <div class="imgBox" v-if="isOk">
      <img :src="isOk" alt="" />
      <p>{{ isMobile ? "可长按图片保存" : "可点击鼠标右键保存图片" }}</p>
    </div>
    <div class="main" id="canvsBox" v-else>
      <!-- 数字 -->
      <div class="txt">
        第&nbsp;&nbsp;<span>{{ num }}</span
        >&nbsp;&nbsp;位参与者
      </div>
      <!-- 二维码 -->
      <div class="code">
        <img src="code.png" alt="" />
      </div>
    </div>
    <!-- 加载中 -->
    <div
      class="logingBox"
      v-loading="!isOk"
      element-loading-text="生成海报中"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
    <div class="close" @click="$emit('close')">
      <img src="../../../assets/img/close.png" alt="" />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { getVisitAPI } from "../../../utils/api";
export default {
  components: {},
  props: ["openInd"],
  data() {
    return {
      num: 0,
      // 生成截图成功
      isOk: "",
    };
  },
  computed: {},
  watch: {
    openInd(val) {
      if (val) {
        if (!this.isOk) this.toImgFu();
      }
    },
  },
  methods: {
    // 生成截图
    toImgFu() {
      window.setTimeout(() => {
        const dom = document.querySelector("#canvsBox");
        html2canvas(dom, {
          // backgroundColor: "transparent",
          allowTaint: true,
          useCORS: true,
        }).then((canvas) => {
          const link = canvas.toDataURL("image/jpeg");
          this.isOk = link;
        });
      }, 100);
    },
  },
  async created() {
    try {
      const res = await getVisitAPI();
      this.num = res.data.pcsShow + res.data.pcsVisit;
    } catch (e) {
      console.log(e);
    }
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.share {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 542px;
  height: 820px;
  .imgBox {
    width: 100%;
    height: 100%;
    position: relative;
    & > img {
      width: 100%;
      height: 100%;
    }
    & > p {
      position: absolute;
      bottom: 10px;
      right: 34px;
      bottom: 20px;
      width: 80px;
      font-size: 12px;
      text-align: center;
    }
  }
  .logingBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
  .main {
    width: 100%;
    height: 100%;
    background-image: url("../../../assets/img/open/bg-share.jpg");
    background-size: 100% 100%;
    position: relative;
    .txt {
      position: absolute;
      bottom: 70px;
      left: 34px;
      color: #d6b970;
      & > span {
        font-size: 36px;
        font-weight: 700;
      }
    }
    .code {
      position: absolute;
      bottom: 60px;
      right: 34px;
      width: 80px;
      & > img {
        border-radius: 6px;
        width: 80px;
      }
    }
  }
  .close {
    z-index: 99;
    position: absolute;
    right: -40px;
    top: 10px;
    cursor: pointer;
  }
}
// 移动端
@media screen and (max-width: 1000px) {
  .share {
    width: 90%;
    height: 90%;
    .imgBox {
      & > p {
        font-size: 12px;
        bottom: 10px;
        width: 84px;
        right: 14px;
      }
    }
    .main {
      background-image: url("../../../assets/img/open/bg-shareM.jpg");
      background-size: 100% 100%;

      .txt {
        bottom: 30px;
        left: 16px;
        & > span {
          font-size: 30px;
        }
      }
      .code {
        width: 84px;
        bottom: 30px;
        right: 14px;
        & > img {
          width: 84px;
        }
      }
    }
    .close {
      position: absolute;
      right: -14px;
      top: -14px;
      cursor: pointer;
    }
  }
}
</style>