分享增加合成次数

src/components/MyPhoto.vue

@@ -21,7 +21,7 @@ const goBack = () => {
 const imageList = ref([])
 const displayZhuli = ref(false);
 const fetchImages = async () => {
-  
+
   try {
     const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
     url.searchParams.append('my_only', '1');
@@ -58,7 +58,7 @@ const fetchImages = async () => {
       ElMessage.error(data.message);
     }
   } catch (error) {
-      console.error('Error:', error)
+    console.error('Error:', error)
   }
 }
 
@@ -72,7 +72,7 @@ watch(() => props.show, async (newVal) => {
 
 // 图片数据
 const images = ref([]);
- 
+
 import defaultBorderImage from '../assets/images/my-photo-border.webp';
 import activeBorderImage from '../assets/images/my-photo-selected-border.webp';
 
@@ -100,21 +100,21 @@ const handleDabangClick = () => {
     },
     body: {}
   })
-  .then(async response => {
+    .then(async response => {
-    const data = await response.json()
+      const data = await response.json()
-    if (response.status == 200 || response.status == 201) {
+      if (response.status == 200 || response.status == 201) {
-      ElMessage.success('打榜成功！');
+        ElMessage.success('打榜成功！');
-      displayZhuli.value = true;
+        displayZhuli.value = true;
-      globalStore.chartsBattle = true;
+        globalStore.chartsBattle = true;
-      return { success: true, data };
+        return { success: true, data };
-    } else {
+      } else {
-      ElMessage.error(data.message);
+        ElMessage.error(data.message);
-    }
+      }
-  })
+    })
-  .catch((error) => {
+    .catch((error) => {
-    ElMessage.error('打榜失败！');
+      ElMessage.error('打榜失败！');
-    return { success: false, error };
+      return { success: false, error };
-  });
+    });
 };
 
 const handleZhuliClick = () => {
@@ -130,28 +130,28 @@ const downloadGenerateImg = (item) => {
 import haibaoCoverBorderNoTitle from "../assets/images/haibao-cover-no-title.webp"
 import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp";
 import failedImg from '../assets/images/failed.webp';
-const getGenerateImgStatus = async (item)=> {
+const getGenerateImgStatus = async (item) => {
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
     method: 'GET',
     headers: {
       'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
     }
   })
-  .then(async response => {
+    .then(async response => {
-    const data = await response.json()
+      const data = await response.json()
-    if (response.status == 200 || response.status == 201) {
+      if (response.status == 200 || response.status == 201) {
-      if (data.status = 'failed') {
+        if (data.status = 'failed') {
-        item.result_url = failedImg;
+          item.result_url = failedImg;
-      } else if (data.status = 'success') {
+        } else if (data.status = 'success') {
-        item.result_url = data.result_url;
+          item.result_url = data.result_url;
+        }
+      } else {
+        ElMessage.error(data.message);
       }
-    } else {
+    })
-      ElMessage.error(data.message);
+    .catch((error) => {
-    }
+      ElMessage.error('获取状态失败！');
-  })
+    });
-  .catch((error) => {
-    ElMessage.error('获取状态失败！');
-  });
 }
 
 const getBackgroundImage = (item) => {
@@ -168,7 +168,7 @@ import Haibao from "@/libs/haibao";
 import mask from "../assets/images/haibao-mask.webp";
 import haibaoCoverBorder from "../assets/images/haibao-cover.webp";
 import bg from "../assets/images/haibao-bg.webp"
-const loadImage = (src)=> {
+const loadImage = (src) => {
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.crossOrigin = "Anonymous";
@@ -240,6 +240,10 @@ const handleHaibao = async (item) => {
       })
     })
 
+    if (!globalStore.first_share_today) {
+      Request(`face/share/${globalStore.mergeId}`)
+    }
+
     const haibaoCoverNoTitle = new Haibao(951, 1607)
     haibaoCoverNoTitle.add(userPicture, 0, 50, 951, 1698)
     haibaoCoverNoTitle.add(mask, 10, 100)
@@ -286,16 +290,12 @@ markers.value = [
         <img src="../assets/images/close-btn.webp" alt="关闭按钮">
       </div>
 
-      <div v-for="(marker, index) in markers" 
+      <div v-for="(marker, index) in markers" :key="index" class="marker" :style="{
-          :key="index"
+        left: marker.x + 'vw',
-          class="marker"
+        top: marker.y + 'vw',
-          :style="{
+        width: marker.width + 'vw',
-            left: marker.x + 'vw',
+        height: marker.height + 'vw'
-            top: marker.y + 'vw',
+      }" @click.stop="$emit('go-photo-square')">
-            width: marker.width + 'vw',
-            height: marker.height + 'vw'
-          }"
-          @click.stop="$emit('go-photo-square')">
       </div>
       <p class="my-photo-desc">每位会员只能选一张照片参与打榜，点赞前30名即可获得中秋精美礼品，速速邀请好友为你点赞吧！</p>
       <div class="image-gallery">
@@ -323,29 +323,21 @@ markers.value = [
             </div>
           </div>
         </RecycleScroller> -->
-        <div 
+        <div v-for="(item, index) in images" :key="index" class="image-wrapper">
-          v-for="(item, index) in images" 
+          <div class="image-container mask-background" :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
-          :key="index" 
+          </div>
-          class="image-wrapper"
+          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)"
-        >
+            src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
-          <div class="image-container mask-background"
+          <img :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
-            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
+            ? activeBorderImage : defaultBorderImage" class="border-image" alt="border"
-          >
+            @click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)" />
-          </div> 
+          <img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)"
-          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">   
+            src="../assets/images/download.webp" class="download-btn" alt="下载图片">
-          <img 
-          :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
-             ? activeBorderImage : defaultBorderImage" 
-            class="border-image"
-            alt="border"
-            @click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)"
-            />
-          <img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)" src="../assets/images/download.webp" class="download-btn" alt="下载图片">         
         </div>
       </div>
       <div class="scene-item item-2">
-        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力" >
+        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力">
-        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜" >
+        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜">
       </div>
 
       <div class="fullsection" v-show="haibaoShow">
@@ -364,13 +356,16 @@ markers.value = [
   height: 124vw;
   overflow-y: auto;
 }
+
 .list-item {
   height: 2vw;
   line-height: 50px;
 }
+
 .marker {
   position: absolute;
 }
+
 .fullsection {
   position: fixed;
   top: 0;
@@ -418,6 +413,7 @@ markers.value = [
   color: #855211;
   font-size: 3.6vw;
 }
+
 .download-btn {
   width: 12.6vw;
   position: absolute;
@@ -425,6 +421,7 @@ markers.value = [
   right: 3vw;
   cursor: pointer;
 }
+
 .refresh-btn {
   width: 12vw;
   position: absolute;
@@ -432,6 +429,7 @@ markers.value = [
   right: 3vw;
   cursor: pointer;
 }
+
 .image-wrapper {
   position: relative;
   margin-right: 2vw;
@@ -439,12 +437,14 @@ markers.value = [
   width: 38vw;
   height: 59vw;
 }
+
 .border-image {
   position: absolute;
   width: 40vw;
   top: 2.8vw;
   left: -0.8vw;
 }
+
 .image-gallery {
   overflow-y: auto;
   overflow-x: hidden;
@@ -503,6 +503,7 @@ markers.value = [
   position: relative;
   min-height: -webkit-fill-available;
 }
+
 .scene-item {
   position: absolute;
   cursor: pointer;
@@ -516,6 +517,7 @@ markers.value = [
 .scene-item:hover {
   transform: scale(1.05);
 }
+
 .btn-login {
   text-align: center;
   border-radius: 1vw;
@@ -525,22 +527,26 @@ markers.value = [
   color: #fff;
   position: relative;
 }
+
 .item-1 {
   top: 9%;
   width: 10vw;
   right: 4%;
 }
+
 .item-3 {
   top: 16.3vh;
   width: 32vw;
   position: absolute;
   left: 11vw;
 }
+
 .item-2 {
   position: fixed;
   width: 100%;
   bottom: 0;
 }
+
 .scene-item img {
   width: 100%;
   height: 100%;