Merge branch 'master' of http://git.jietuozhidao.com/liuxiang/faceFamilySource

src/components/MyPhoto.vue

@@ -37,38 +37,39 @@ const fetchImages = async () => {
     if (response.status == 200 || response.status == 201) {
       // 只保留result_url存在的记录
       images.value = data.data.filter(item => item.result_url);
-      images.value = [
+      // 测试数据
-          {
+      // images.value = [
-              "id": 186,
+      //     {
-              "status": "success",
+      //         "id": 186,
-              "error_message": null,
+      //         "status": "success",
-              "is_public": false,
+      //         "error_message": null,
-              "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250919\/face-merge-717b50c3-9c38-4713-929a-49d072b90ab6.jpg",
+      //         "is_public": false,
-              "likes_count": 0,
+      //         "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250919\/face-merge-717b50c3-9c38-4713-929a-49d072b90ab6.jpg",
-              "created_at": "2025-09-19T04:30:26.000000Z",
+      //         "likes_count": 0,
-              "user_name": "\u4f9d\u65ed"
+      //         "created_at": "2025-09-19T04:30:26.000000Z",
-          },
+      //         "user_name": "\u4f9d\u65ed"
-          {
+      //     },
-              "id": 155,
+      //     {
-              "status": "success",
+      //         "id": 155,
-              "error_message": null,
+      //         "status": "success",
-              "is_public": false,
+      //         "error_message": null,
-              "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-1d2ddf63-b029-48f8-b0b7-de7643dbd184.jpg",
+      //         "is_public": false,
-              "likes_count": 0,
+      //         "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-1d2ddf63-b029-48f8-b0b7-de7643dbd184.jpg",
-              "created_at": "2025-09-17T13:37:08.000000Z",
+      //         "likes_count": 0,
-              "user_name": "\u4f9d\u65ed"
+      //         "created_at": "2025-09-17T13:37:08.000000Z",
-          },
+      //         "user_name": "\u4f9d\u65ed"
-          {
+      //     },
-              "id": 156,
+      //     {
-              "status": "success",
+      //         "id": 156,
-              "error_message": null,
+      //         "status": "success",
-              "is_public": false,
+      //         "error_message": null,
-              "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-eda32a25-4244-4041-8db8-25aeb41f5a2f.jpg",
+      //         "is_public": false,
-              "likes_count": 2,
+      //         "result_url": "https:\/\/lzlj123.oss-cn-shanghai.aliyuncs.com\/face-merged\/20250917\/face-merge-eda32a25-4244-4041-8db8-25aeb41f5a2f.jpg",
-              "created_at": "2025-09-17T13:40:49.000000Z",
+      //         "likes_count": 2,
-              "user_name": "\u4f9d\u65ed"
+      //         "created_at": "2025-09-17T13:40:49.000000Z",
-          }
+      //         "user_name": "\u4f9d\u65ed"
-      ]
+      //     }
+      // ]
       const foundItem = images.value.find(item => item.is_public === true);
       if (foundItem) {
         globalStore.result_url = foundItem.result_url;
@@ -108,18 +109,16 @@ const images = ref([]);
 
 import defaultBorderImage from '../assets/images/my-photo-border.webp';
 import activeBorderImage from '../assets/images/my-photo-selected-border.webp';
+import inActiveBorderImage from '../assets/images/no-btn.webp';
 
 const activeBorders = ref(images.value.map(() => false));
 // 切换边框状态
 const toggleBorder = (item, index) => {
-  openHaibao(item);
-  if (!globalStore.chartsBattle && item.result_url !== failedImg) {
   activeBorders.value = activeBorders.value.map(() => false);
   // 如果没有打榜，点击切换图片时，把当前背景图赋值给globalStore.result_url做为最新的背景图
   globalStore.result_url = item.result_url;
   activeBorders.value[index] = true;
   globalStore.mergeId = item.id;
-  }
 };
 
 const handleDabangClick = () => {
@@ -316,6 +315,18 @@ markers.value = [
   { x: 0, y: 32, width: 50, height: 14 }
 ];
 
+const getBorder = (item, index) => {
+  if (globalStore.chartsBattle && index !== 0) {
+    return inActiveBorderImage;
+  } else {
+    if ((activeBorders.value[index] || (globalStore.chartsBattle && item.is_public))) {
+      return activeBorderImage;
+    } else {
+      return defaultBorderImage;
+    }
+  }
+}
+
 
 </script>
 
@@ -364,11 +375,11 @@ markers.value = [
           </div>
           <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)"
             src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
-          <img :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
+          <img :src="getBorder(item, index)" class="border-image" alt="border"
-            ? activeBorderImage : defaultBorderImage" class="border-image" alt="border"
+            @click.stop="downloadGenerateImg(item)"
-            @click="toggleBorder(item, index)" />
+          />
-          <!-- <img v-if="item.result_url !== failedImg" 
+          <div class="mask-overlay" 
-            src="../assets/images/download.webp" class="download-btn" alt="下载图片"> -->
+          @click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)"></div>
         </div>
       </div>
       <div class="scene-item item-2">
@@ -388,6 +399,16 @@ markers.value = [
 </template>
 
 <style scoped>
+/* 蒙版样式 */
+.mask-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 14vw;
+  width: 10vw;
+  height: 8vw;
+  z-index: 2;
+  cursor: pointer;
+}
 .scroller {
   height: 124vw;
   overflow-y: auto;