update

src/components/MyPhoto.vue

@@ -117,6 +117,12 @@ const handleZhuliClick = () => {
   console.log('助力被点击');
 };
 
+const downloadGenerateImg = (item) => {
+  openHaibao(item);
+  console.log('下载被点击');
+}
+
+import haibaoCoverBorderSuccess from "../assets/images/haibao-cover-sucess.webp";
 import failedImg from '../assets/images/failed.webp';
 const getGenerateImgStatus = async (item)=> {
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
@@ -170,23 +176,23 @@ const userhaibaoCover = computed(() => {
   return { backgroundImage: `url(${userHaibaoUrl.value})` }
 })
 
-const openHaibao = (e) => {
+const openHaibao = (item) => {
   haibaoShow.value = true
-  handleHaibao()
+  handleHaibao(item)
 }
 
-const handleHaibao = async () => {
-  if (haibaoUrl.value) {
-    return
-  }
-
+const handleHaibao = async (item) => {
   const loading = weui.loading()
   const infos = Storage.get("userinfos")
   const haibaoCover = new Haibao(951, 1607)
   const userPicture = await loadImage(globalStore.result_url)
   haibaoCover.add(userPicture, 0, 50, 951, 1698)
   haibaoCover.add(mask, 10, 100)
-  haibaoCover.add(haibaoCoverBorder, 0, 0)
+  if (item && item.result_url) {
+    haibaoCover.add(haibaoCoverBorderSuccess, 0, 0)
+  } else {
+    haibaoCover.add(haibaoCoverBorder, 0, 0)
+  }
   haibaoCover.draw('destination-in').then(() => {
     haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
       userHaibaoUrl.value = url
@@ -199,7 +205,11 @@ const handleHaibao = async () => {
       haibaoSave.draw().then(() => {
         haibaoSave.text(infos.nickname + '的全家福', haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
         haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
-          haibaoUrl.value = url
+          if (item && item.result_url) {
+            haibaoUrl.value = item.result_url
+          } else {
+            haibaoUrl.value = url
+          }
           loading.hide()
         }).catch(err => {
           console.log(err)
@@ -221,25 +231,6 @@ markers.value = [
   { x: 0, y: 32, width: 50, height: 14 }
 ];
 
-// 从URL中提取文件名
-const getFileNameFromUrl = (url) => {
-  if (!url) return null;
-  return url.substring(url.lastIndexOf('/') + 1);
-};
-
-const downloadGenerateImg = (item)=> {
-  try {
-    const link = document.createElement('a');
-    link.href = item.result_url;
-    link.download = getFileNameFromUrl(item.result_url) || 'downloaded-image.jpg';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    ElMessage.success('下载成功！');
-  } catch (error) {
-    ElMessage.success('下载失败！');
-  }
-}
 
 </script>
 
@@ -297,14 +288,14 @@ const downloadGenerateImg = (item)=> {
           >
           </div> 
           <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">   
-          <img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)" src="../assets/images/download.webp" class="download-btn" alt="下载图片">         
           <img 
-            :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
+          :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">
@@ -388,7 +379,6 @@ const downloadGenerateImg = (item)=> {
   bottom: 7vw;
   right: 3vw;
   cursor: pointer;
-  z-index: 9;
 }
 .refresh-btn {
   width: 12vw;
@@ -396,7 +386,6 @@ const downloadGenerateImg = (item)=> {
   top: 7vw;
   right: 3vw;
   cursor: pointer;
-  z-index: 9;
 }
 .image-wrapper {
   position: relative;