njDaTuSha/src/pages/share/index.vue

<template>
  <div class="share-pg">

    <GoBack class="goback abs" style="z-index: 100" @click="router.go(-1)" />

    <div class="will-copy" ref="src">
      <div class="copy-img">
        <img src="/images/share.jpg" alt="" />
      </div>
      <div class="content txt">
        <div class="name">{{ user.nickname || "朋友" }}</div>
        <div style="line-height: 1.6em">
          您是第{{user.num}}位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。
        </div>
      </div>
    </div>
    <img class="img-target" :src="imgData" v-if="imgData" alt="" />
    <PageLoading class="rendering" v-else :loading="true" text="正在生成..." />
  </div>
</template>

<script setup>
import { onMounted,watch, ref } from "vue";
import html2canvas from "html2canvas";
import { useModel } from "@zjxpcyc/vue-tiny-store";
import { useRouter } from "vue-router";
import GoBack from "@/components/GoBack.vue";
import PageLoading from "@/components/PageLoading.vue";

const router = useRouter();
const { user } = useModel("user");
const imgData = ref();
const src = ref();


onMounted(() => {
  const t = setTimeout(()=>{
    html2canvas(src.value).then((canvas) => {
      imgData.value = canvas.toDataURL("image/jpg", 0.8);
    });

    clearTimeout(t);
  }, 200);
});
</script>

<style lang="less" scoped>
.share-pg {
  position: relative;
  overflow: hidden;
  height: 100%;

  .rendering {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .goback{
    z-index: 100;
    left: 10px;
    top: 10px;
  }

  .will-copy {
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    left: -200vw;
    top: 0;

    .copy-img {
      width: 100%;
      height: 100%;
      position: relative;

      img {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }

  .content {
    position: absolute;
    top: 50vh;
    left: 30vw;
    text-align: left;
    width: 56vw;
    padding-bottom: 20px;

    .name {
      font-size: 18px;
    }
  }

  .img-target {
    position: absolute;
    z-index: 20;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
}
</style>