zhaoma/src/components/SharePage.vue

<script setup>
import { Storage, generateQR } from "../libs/utils.js"
import ModalTransition from "./ModalTransition.vue"
import { ref, watch } from "vue"
import Haibao from "../libs/haibao.js"
import ruleBg from "../assets/images/new/rule-share.png"
import globalToastEvent, { ToastType } from '../globalToastEvent';

const props = defineProps({
  show: false,
})

watch(() => props.show, async (newVal) => {
  if (!newVal) {
    return
  }
  openHaibao();
}, { immediate: true })

const emit = defineEmits(['close'])
const gotoLottery = () => {
  globalToastEvent.emit(ToastType.SHOW_LOTTERY);
}

const cancelBtn = () => {
  emit('close')
}

// 海报
const haibaoUrl = ref('');
const openHaibao = (e) => {
  handleHaibao()
}

const handleHaibao = async () => {
  const loading = weui.loading()
  const infos = Storage.get("userinfos")
  const haibaoCover = new Haibao(1080, 2160);

  haibaoCover.add(ruleBg, 0, 0)
  const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.mergeId}`, 200, 200);
  haibaoCover.add(qrcode, 742, 1870);

  haibaoCover.draw().then(() => {
    haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
      
      haibaoUrl.value = url
      loading.hide()
    }).catch(err => {
      console.log(err)
      weui.alert("海报生成失败，请重新生成")
      loading.hide()
    })
  })
}

</script>

<template>
  <ModalTransition class="popup" :show="show">
    <div class="home-wrapper">
      <div class="fullsection">
        <div class="haibao">
          <img :src="haibaoUrl" alt="">
        </div>
      </div>

      <!-- <div class="scene-item item-4">
        <img src="../assets/images/new/choujiang.png" @click="gotoLottery" alt="立即抽奖">
      </div> -->

      <div class="scene-item item-5">
        <img src="../assets/images/new/close-btn.png" @click="cancelBtn" alt="关闭">
      </div>
    </div>
  </ModalTransition>
</template>

<style scoped>
.home-wrapper {
  width: 100vw;
  height: 217vw;
  background-image: url("../assets/images/new/share-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: -webkit-fill-available;
}
.haibao {
  width: 70vw;
  height: 119.444444vw;
  background-image: url("../assets/images/new/share-popup-demo.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.haibao img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
.home-bg {
  position: absolute;
  top: 0;
  left: 0;
}
.message {
  width: 60vw;
  position: absolute;
  top: 42%;
  color: #774107;
  text-align: center;
}
.share-bg {
  width: 100vw;
  height: 204vw;
  background-image: url('../assets/images/new/share-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.scene-item {
  position: absolute;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  animation: float 4s ease-in-out infinite;
}

.scene-item:hover {
  transform: scale(1.05);
}
.btn-login {
  text-align: center;
  border-radius: 1vw;
  background-color: #70b2e2;
  margin-top: 4vw;
  padding: 3vw;
  color: #fff;
  position: relative;
}
.item-1 {
  top: 114vw;
  width: 20vw;
}
.item-2 {
  top: 134vw;
  width: 54vw;
}
.item-3 {
  top: 164vw;
  width: 13vw;
}
.item-4 {
  top: 166vw;
  width: 40vw;
}
.item-5 {
  top: 166vw;
  width: 14vw;
}
.scene-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-login.disable {
  opacity: .6;
}

.btn-login.subloading {
  opacity: .6;
}

.btn-login.subloading::before {
  content: "";
  position: absolute;
  border: .5vw solid #fff;
  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  top: 30%;
  left: calc(50% - 14vw);
  animation: loginloading 1s linear infinite;
}

@keyframes loginloading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>