update

src/components/SynthesizedResults.vue

@@ -1,15 +1,20 @@
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, onMounted, computed } from "vue"
 import { useRouter } from 'vue-router'
 import Popup from './Popup.vue'
 import { globalStore } from "../globalstore.js";
 import globalToastEvent, { ToastType } from '../globalToastEvent';
+import { Storage, generateQR } from "../libs/utils";
+import Haibao from "@/libs/haibao";
+import mask from "../assets/images/haibao-mask.png";
+import haibaoCoverBorder from "../assets/images/haibao-cover.png";
+import bg from "../assets/images/haibao-bg.png"
+import userPicture from "../assets/images/home-bg.png"; //TODO: globalStore.result_url 这里得图片后面要换成用户参榜的图片
 
 defineProps({
   show: true
 })
 
-
 const isPopupVisible = ref(false);
 
 
@@ -29,6 +34,58 @@ const handleLottery = () => {
   globalToastEvent.emit(ToastType.SHOW_LOTTERY)
 }
 
+// 海报
+const haibaoShow = ref(false);
+const haibaoUrl = ref('');
+const userHaibaoUrl = ref('');
+const userhaibaoCover = computed(() => {
+  return { backgroundImage: `url(${userHaibaoUrl.value})` }
+})
+
+const openHaibao = (e) => {
+  haibaoShow.value = true
+  handleHaibao()
+}
+onMounted(openHaibao)
+const handleHaibao = async () => {
+  if (haibaoUrl.value) {
+    return
+  }
+
+  const loading = weui.loading()
+  const infos = Storage.get("userinfos")
+  const haibaoCover = new Haibao(951, 1607)
+  haibaoCover.add(userPicture, 0, 0)
+  haibaoCover.add(mask, 10, 100)
+  haibaoCover.add(haibaoCoverBorder, 0, 0)
+  haibaoCover.draw('destination-in').then(() => {
+    haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
+      userHaibaoUrl.value = url
+
+      const haibaoSave = new Haibao(1080, 2160)
+      const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
+      haibaoSave.add(url, 62, 350)
+      haibaoSave.add(bg, 0, 0)
+      haibaoSave.add(qrcode, 115, 1875)
+      haibaoSave.draw().then(() => {
+        haibaoSave.text(infos.nickname, haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#ffee6f' })
+        haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
+          haibaoUrl.value = url
+          loading.hide()
+        }).catch(err => {
+          console.log(err)
+          weui.alert("海报生成失败，请重新生成")
+          loading.hide()
+        })
+      }).catch(err => {
+        console.log(err)
+        weui.alert("海报生成失败，请重新生成")
+        loading.hide()
+      })
+    })
+  })
+
+}
 </script>
 
 <template>
@@ -38,9 +95,15 @@ const handleLottery = () => {
         <img src="../assets/images/go-home-btn.png" @click="navigateToHome" alt="回到首页">
       </div>
 
-      <div class="mask-background mask-image" :style="{ backgroundImage: `url(${globalStore.result_url})` }">
+      <!-- <div class="mask-background mask-image" :style="{ backgroundImage: `url(${globalStore.result_url})` }">
+      </div>
+      <img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版"> -->
+      <div class="fullsection" v-show="haibaoShow">
+        <div class="haibao" :style="userhaibaoCover">
+          <img :src="haibaoUrl" alt="">
+          <div class="close" @click="haibaoShow = false"></div>
+        </div>
       </div>
-      <img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版">
 
       <div class="scene-item item-2">
         <img src="../assets/images/charts-battle.png" @click="chartsBattle" alt="参与打榜">
@@ -56,30 +119,52 @@ const handleLottery = () => {
 </template>
 
 <style scoped>
-.mengban-border {
-  width: 85vw;
-  position: absolute;
-  top: 13%;
-}
-.mask-background {
-  -webkit-mask-image: url("../assets/images/mengban.png");
-  mask-image: url("../assets/images/mengban.png");
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
+.fullsection {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, .7);
 }
 
-.mask-image {
-  /* background-image: url("../assets/images/haibao-bg.webp"); */
-  background-size: cover;
-  background-repeat: no-repeat;
+.haibao {
   position: relative;
-  width: 100vw;
-  height: 60vh;
+  width: 65.37037vw;
+  height: 119.444444vw;
+  background-image: url("../assets/images/haibao-cover.webp");
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
+
+.haibao img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  opacity: 0;
+}
+
+.close {
+  position: absolute;
+  width: 8.148148vw;
+  height: 8.148148vw;
+  right: 5vw;
+  top: 15vw;
+  background-image: url("../assets/images/close-btn.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.haibao .close {
+  left: 50%;
+  bottom: -5vw;
+  top: initial;
+  transform: translate3d(-50%,0,0);
+}
+
 .home-wrapper {
   width: 100%;
   height: 92vh;