zhaoma/src/components/SharePage.vue

<script setup>
import { Storage, generateQR } from "../libs/utils.js"
import ModalTransition from "./ModalTransition.vue"
import { ref, watch, computed } from "vue"
import Haibao from "../libs/haibao.js"
import ruleBg from "../assets/images/new/rule-share.webp"
import globalToastEvent, { ToastType } from '../globalToastEvent';
import { globalStore } from "../globalstore.js";
import share5 from '../assets/images/new/share-bg-5.webp';
import share4 from '../assets/images/new/share-bg-4.webp';
import share3 from '../assets/images/new/share-bg-3.webp';
import share2 from '../assets/images/new/share-bg-2.webp';
import share1 from '../assets/images/new/share-bg-1.webp';
import todoListBg from '../assets/images/new/todolist-bg.webp';
import todoListImg from '../assets/images/new/todolist-img.webp';

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

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

const emit = defineEmits(['close'])

const gameImgMap = {
  game1: share1,
  game2: share2,
  game3: share3,
  game4: share4,
  game5: share5
}

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

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

const haibaoBackgroundImg = ref({});
const handleHaibao = async () => {
  const loading = weui.loading();
  
  const img = gameImgMap[globalStore.game_id] || 'share1';
  haibaoBackgroundImg.value = props.isFromHomePageList ? { backgroundImage: `url(${todoListImg})` } : { backgroundImage: `url(${img})` };

  const infos = Storage.get("userinfos")
  const haibaoCover = new Haibao(1080, 2160);

  haibaoCover.add(ruleBg, 0, 0)
  const qrcode = await generateQR(`fromid=${infos.invite_code}`, 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" :style="haibaoBackgroundImg">
          <img :src="haibaoUrl" alt="">
        </div>
      </div>

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

<style scoped>
.home-wrapper {
  background-size: contain;
  background-position: center;
  width: 100vw;
  height: 217vw;
  background-image: url("../assets/images/new/todolist-bg.webp");
  background-size: 100% auto;
  background-position: 0 0;
  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.webp");
  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.webp');
  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: 170vw;
  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>