update

src/components/MyPhoto.vue

@@ -35,8 +35,8 @@ const fetchImages = async () => {
     })
     const data = await response.json()
     if (response.status == 200 || response.status == 201) {
-      // 只保留result_url存在的记录
+  // 只保留 status=processing 或 result_url 不为空的记录
-      images.value = data.data.filter(item => item.result_url);
+  images.value = data.data.filter(item => item.status === 'processing' || item.result_url);
       // 测试数据
       // images.value = [
       //     {
@@ -165,7 +165,9 @@ 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';
+import processingImg from '../assets/images/processing.webp';
 const getGenerateImgStatus = async (item) => {
+  const loading = weui.loading()
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
     method: 'GET',
     headers: {
@@ -174,6 +176,7 @@ const getGenerateImgStatus = async (item) => {
   })
     .then(async response => {
       const data = await response.json()
+      loading.hide();
       if (response.status == 200 || response.status == 201) {
         if (data.status = 'failed') {
           item.result_url = failedImg;
@@ -185,6 +188,7 @@ const getGenerateImgStatus = async (item) => {
       }
     })
     .catch((error) => {
+      loading.hide();
       ElMessage.error('获取状态失败！');
     });
 }
@@ -193,7 +197,7 @@ const getBackgroundImage = (item) => {
   if (item.result_url) {
     return `${item.result_url}?x-oss-process=image/resize,w_400/format,webp/quality,q_80`;
   } else {
-    return item.result_url = failedImg;
+    return item.result_url = processing;
   }
 };
 
@@ -373,13 +377,13 @@ const getBorder = (item, index) => {
         <div v-for="(item, index) in images" :key="index" class="image-wrapper">
           <div class="image-container mask-background" @click="downloadGenerateImg(item)" :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
           </div>
-          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)"
+          <img v-if="item.status === 'processing'" @click.stop="getGenerateImgStatus(item)"
             src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">
           <img :src="getBorder(item, index)" class="border-image" alt="border"
             @click.stop="downloadGenerateImg(item)"
           />
           <div class="mask-overlay" 
-          @click="(!globalStore.chartsBattle && item.result_url !== failedImg) && toggleBorder(item, index)"></div>
+          @click="(!globalStore.chartsBattle && item.result_url !== processingImg) && toggleBorder(item, index)"></div>
         </div>
       </div>
       <div class="scene-item item-2">
@@ -485,6 +489,7 @@ const getBorder = (item, index) => {
   top: 7vw;
   right: 3vw;
   cursor: pointer;
+  z-index: 13;
 }
 
 .image-wrapper {
@@ -521,7 +526,7 @@ const getBorder = (item, index) => {
   top: 0;
   margin-bottom: 3vw;
   background-image: url('../assets/images/test.webp');
-  background-size: 100%;
+  background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;