update

src/components/MyPhoto.vue

@@ -4,25 +4,31 @@ import ModalTransition from "./ModalTransition.vue"
 import { useRouter } from 'vue-router'
 import { globalStore } from "../globalstore.js";
 import { ElMessage } from 'element-plus';
-import { isLogin, Storage, Request } from "../libs/utils"
-import globalToastEvent, { ToastType } from '../globalToastEvent';
+import { Storage, generateQR } from "../libs/utils"
+// import { RecycleScroller } from "vue-virtual-scroller";
+// import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
-defineProps({
+const props = defineProps({
   show: false
 })
 
-//TODO 帮我看一下对不对
-globalToastEvent.on(ToastType.MOUNTED, () => {
-  fetchImages()
+watch(() => props.show, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  if (newVal) {
+    fetchImages();
+  }
 })
 
-const emit = defineEmits(['go-photo-square']);
+const emit = defineEmits(['go-photo-square', 'update:show']);
 const router = useRouter();
 const goBack = () => {
   emit('update:show', false);
 };
 
 const imageList = ref([])
+const displayZhuli = ref(false);
 const fetchImages = async () => {
   
   try {
@@ -39,14 +45,17 @@ const fetchImages = async () => {
     const data = await response.json()
     console.log('Success:', data)
     images.value = data.data;
+    const foundItem = data.data.find(item => item.is_public === true);
+    if (foundItem) {
+      displayZhuli.value = true;
+    } else {
+      displayZhuli.value = false;
+    }
     imageList.value = data;
 
-    // Check for any image with is_public = true after fetching
     const hasPublicImage = images.value.some(item => item.is_public);
     if (hasPublicImage) {
       globalStore.chartsBattle = true;
-      
-      // Find the index of the public image and set its border to active
       const publicIndex = images.value.findIndex(item => item.is_public);
       if (publicIndex !== -1) {
         activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
@@ -99,7 +108,8 @@ const handleDabangClick = () => {
 };
 
 const handleZhuliClick = () => {
-    console.log('助力被点击');
+  openHaibao();
+  console.log('助力被点击');
 };
 
 import failedImg from '../assets/images/failed.png';
@@ -131,20 +141,118 @@ const getBackgroundImage = (item) => {
     return item.result_url = failedImg;
   }
 };
+
+
+// 海报
+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 这里得图片后面要换成用户参榜的图片
+
+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()
+}
+
+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()
+      })
+    })
+  })
+
+}
+
+const markers = ref([]);
+markers.value = [
+  { x: 50, y: 50, width: 100, height: 80 }
+];
+
 </script>
 
 <template>
-  <ModalTransition class="myPhoto" :show="show">
+  <ModalTransition class="myPhoto" :no-animation="true" :show="show">
     <div class="myPhoto-bg">
       <div class="scene-item item-1" @click="goBack">
         <img src="../assets/images/close-btn.png" alt="关闭按钮">
       </div>
 
-      <div class="scene-item item-3" @click="$emit('go-photo-square')">
-        <img src="../assets/images/zpgc.png" alt="照片广场">
+      <div v-for="(marker, index) in markers" 
+          :key="index"
+          class="marker"
+          :style="{
+            left: marker.x + 'px',
+            top: marker.y + 'px',
+            width: marker.width + 'px',
+            height: marker.height + 'px'
+          }"
+          @click.stop="$emit('go-photo-square')">
       </div>
-      <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p>
+      <!-- <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p> -->
       <div class="image-gallery">
+        <!-- <RecycleScroller
+            class="scroller"
+            :items="images"
+            :item-size="2"
+            key-field="id"
+            v-slot="{ item, index }"
+          >
+          <div class="image-wrapper">
+            <div class="image-container mask-background"
+              :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
+            >
+            </div> 
+            <div class="list-item">
+              <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
+              <img 
+                :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
+                 ? activeBorderImage : defaultBorderImage" 
+                class="border-image"
+                alt="border"
+                @click="!globalStore.chartsBattle && toggleBorder(item, index)"
+              />
+            </div>
+          </div>
+        </RecycleScroller> -->
         <div 
           v-for="(item, index) in images" 
           :key="index" 
@@ -165,13 +273,15 @@ const getBackgroundImage = (item) => {
         </div>
       </div>
       <div class="scene-item item-2">
-        <img 
-          :src="!globalStore.chartsBattle 
-            ? 'src/assets/images/dabang.png' 
-            : 'src/assets/images/zhuli.png'" 
-          alt="角色图片"
-          @click="!globalStore.chartsBattle ? handleDabangClick() : handleZhuliClick()"
-        >
+        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.png" alt="助力" >
+        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.png" alt="打榜" >
+      </div>
+
+      <div class="fullsection" v-show="haibaoShow">
+        <div class="haibao" :style="userhaibaoCover">
+          <img :src="haibaoUrl" alt="">
+          <div class="close" @click="haibaoShow = false"></div>
+        </div>
       </div>
 
     </div>
@@ -179,6 +289,60 @@ const getBackgroundImage = (item) => {
 </template>
 
 <style scoped>
+.scroller {
+  height: 124vw;
+  overflow-y: auto;
+}
+.list-item {
+  height: 2vw;
+  line-height: 50px;
+}
+.marker {
+  left: 0 !important;
+  top: 32vw !important;
+  width: 50vw !important;
+  height: 14vw !important;
+  position: absolute;
+}
+.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);
+}
+
+.haibao {
+  position: relative;
+  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: 29vw;
+  top: 114vw;
+  background-image: url("../assets/images/close-btn.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
 .my-photo-desc {
   position: absolute;
   width: 87vw;
@@ -209,6 +373,7 @@ const getBackgroundImage = (item) => {
 }
 .image-gallery {
   overflow-y: auto;
+  overflow-x: hidden;
   display: block;
   width: 84vw;
   height: 57vh;
@@ -252,7 +417,7 @@ const getBackgroundImage = (item) => {
 .myPhoto-bg {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/my-photo-bg.png');
+  background-image: url('../assets/images/my-photov2.png');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;