更新周边功能

src/components/TodoList.vue

@@ -1,34 +1,17 @@
 <template>
-  <div class="home-wrapper" style="z-index: 9;">
-    <img src="../assets/images/todo-bg.png" alt="任务列表背景图">
-
-    <div class="scene-item item-1" @click="closeTodoList">
-      <img src="../assets/images/close-btn.png" alt="关闭按钮">
-    </div>
-    <div class="scene-item item-2" @click="openQiwei($event)">
-      <img src="../assets/images/add-wx.png" alt="去添加">
-    </div>
-    <div class="scene-item item-3" @click="handleScan($event)">
-      <img src="../assets/images/scan-code.png" alt="去扫码">
-    </div>
-    <div class="scene-item item-4" @click="openHaibao($event)">
-      <img src="../assets/images/share-link.png" alt="去分享">
-    </div>
-  </div>
   <ModalTransition class="todolist" :show="show">
     <div class="todolist-wrapper">
       <div class="btn-group">
-        <div class="btn-share" :class="globalStore.invitees >= globalStore.MAX_INVITE_DAILY && 'has'"
-          @click="openHaibao($event)"></div>
         <div class="btn-qiwei" :class="globalStore.followed_official && 'has'" @click="openQiwei($event)"></div>
         <div class="btn-scan" :class="globalStore.cap_scan >= globalStore.MAX_CAP_SCAN && 'has'"
           @click="handleScan($event)"></div>
-        <div class="btn-peifang" :class="globalStore.game_chances_view_recipes >= globalStore.MAX_VIEW_RECIPES_DAILY && 'has'" @click="openPeifang($event)"></div>
+        <div class="btn-share" :class="globalStore.invitees >= globalStore.MAX_INVITE_DAILY && 'has'"
+          @click="openHaibao($event)"></div>
       </div>
       <div class="close" @click="$emit('close')"></div>
     </div>
     <div class="fullsection" v-show="haibaoShow">
-      <div class="haibao">
+      <div class="haibao" :style="userhaibaoCover">
         <img :src="haibaoUrl" alt="">
         <div class="close" @click="haibaoShow = false"></div>
       </div>
@@ -36,7 +19,7 @@
 
     <div class="fullsection" v-show="qiweiShow">
       <div class="qiwei">
-        <img src="../assets/images/qiwei-bg.webp" alt="">
+        <img src="../assets/images/qiwei-bg.png" alt="">
         <div class="close" @click="qiweiShow = false"></div>
       </div>
     </div>
@@ -44,38 +27,67 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { ref, computed } from "vue"
 import { globalStore } from "@/globalstore";
 import ModalTransition from "./ModalTransition.vue"
 import { Storage, generateQR, isWeixin, isMiniPage } from "../libs/utils"
 import Haibao from "@/libs/haibao"
-import bg from "../assets/images/haibao-bg.webp"
+import userPicture from "../assets/images/home-bg.png" //TODO: 这里得图片后面要换成用户参榜的图片
+import bg from "../assets/images/haibao-bg.png"
+import mask from "../assets/images/haibao-mask.png"
+import haibaoCoverBorder from "../assets/images/haibao-cover.png"
 const props = defineProps({
-  show: true,
+  show: false,
 })
 
-const emit = defineEmits(['close','open'])
+const emit = defineEmits(['close', 'open'])
 const shareShow = ref(false)
 const qiweiShow = ref(false)
 const haibaoShow = ref(false)
 const haibaoUrl = ref('')
+const userHaibaoUrl = ref('')
+const userhaibaoCover = computed(() => {
+  return { backgroundImage: `url(${userHaibaoUrl.value})` }
+})
 
 const handleHaibao = async () => {
   if (haibaoUrl.value) {
     return
   }
+
   const loading = weui.loading()
   const infos = Storage.get("userinfos")
-  const haibao = new Haibao(1080, 2160)
-  const qrcode = await generateQR(`fromid=${infos.invite_code}&org_id=${infos.org_id}`)
-  haibao.add(bg, 0, 0)
-  haibao.add(qrcode, 802, 1908)
-  haibao.generate().then(url => {
-    haibaoUrl.value = url
-    loading.hide()
-  }).catch(err => {
-    weui.alert("海报生成失败，请重新生成")
+  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}&org_id=${infos.org_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()
+      })
+    })
   })
+
 }
 const openQiwei = (e) => {
   const target = e.currentTarget
@@ -101,7 +113,7 @@ const openPeifang = (e) => {
   if (target.classList.contains("has")) {
     return
   }
-  emit('open',{ type: 'peifang' })
+  emit('open', { type: 'peifang' })
 }
 const handleScan = (e) => {
   const target = e.currentTarget
@@ -131,11 +143,13 @@ const handleScan = (e) => {
   position: relative;
   min-height: -webkit-fill-available;
 }
+
 .home-wrapper img {
   width: 100%;
   background-size: cover;
   background-repeat: no-repeat;
 }
+
 .scene-item {
   position: absolute;
   z-index: 2;
@@ -196,8 +210,8 @@ const handleScan = (e) => {
 
 .qiwei {
   position: relative;
-  width: 71.851852vw;
-  height: 89.259259vw;
+  width: 80.740741vw;
+  /* height: 89.259259vw; */
 }
 
 .qiwei img {
@@ -227,15 +241,6 @@ const handleScan = (e) => {
   background-size: 100%;
 }
 
-
-.haibao .close {
-  right: -10vw;
-}
-
-.qiwei .close {
-  right: -10vw;
-}
-
 .haibao img {
   width: 100%;
   height: 100%;
@@ -246,19 +251,32 @@ const handleScan = (e) => {
 .close {
   position: absolute;
   width: 8.148148vw;
-  height: 8.055556vw;
+  height: 8.148148vw;
   right: 5vw;
-  top: 0;
-  background-image: url("../assets/images/icon-close.webp");
+  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);
+}
+
+.qiwei .close {
+  right: 50%;
+  top: 90vw;
+  margin-right: -4vw;
+}
+
 .todolist-wrapper {
   position: relative;
   width: 100vw;
-  height: 136.018519vw;
-  background-image: url("../assets/images/todo-bg.webp");
+  height: 123.333333vw;
+  background-image: url("../assets/images/todo-bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -266,23 +284,23 @@ const handleScan = (e) => {
 .btn-group {
   position: absolute;
   right: 6vw;
-  top: 46vw;
-  width: 23.981481vw;
-  height: 84vw;
+  top: 45vw;
+  width: 24.907407vw;
+  height: 70vw;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 
 .btn-group div {
-  width: 23.981481vw;
-  height: 9.074074vw;
+  width: 24.907407vw;
+  height: 10vw;
   background-repeat: no-repeat;
   background-size: 100%;
 }
 
 .btn-share {
-  background-image: url("../assets/images/btn-share.webp");
+  background-image: url("../assets/images/share-link.png");
 }
 
 .btn-share.has {
@@ -290,7 +308,7 @@ const handleScan = (e) => {
 }
 
 .btn-qiwei {
-  background-image: url("../assets/images/btn-qiwei.webp");
+  background-image: url("../assets/images/add-wx.png");
 }
 
 .btn-qiwei.has {
@@ -298,15 +316,10 @@ const handleScan = (e) => {
 }
 
 .btn-scan {
-  background-image: url("../assets/images/btn-scan.webp");
+  background-image: url("../assets/images/scan-code.png");
 }
+
 .btn-scan.has {
   background-image: url("../assets/images/btn-max.webp");
 }
-.btn-peifang {
-  background-image: url("../assets/images/btn-look.webp");
-}
-.btn-peifang.has {
-  background-image: url("../assets/images/btn-max.webp");
-}
 </style>