update

src/components/MyPhoto.vue

@@ -1,16 +1,21 @@
 <script setup>
 import { ref, onMounted, computed, watch } from "vue"
-import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
-import Agreement from "./Agreement.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';
 
 defineProps({
   show: false
 })
 
+//TODO 帮我看一下对不对
+globalToastEvent.on(ToastType.MOUNTED, () => {
+  fetchImages()
+})
+
 const emit = defineEmits(['go-photo-square']);
 const router = useRouter();
 const goBack = () => {
@@ -51,22 +56,20 @@ const fetchImages = async () => {
       console.error('Error:', error)
   }
 }
-onMounted(fetchImages)
+
 
 // 图片数据
 const images = ref([]);
-
-const defaultBorderImage = 'src/assets/images/my-photo-border.png';
-const activeBorderImage = 'src/assets/images/my-photo-selected-border.png';
+ 
+import defaultBorderImage from '../assets/images/my-photo-border.png';
+import activeBorderImage from '../assets/images/my-photo-selected-border.png';
 
 const activeBorders = ref(images.value.map(() => false));
 let mergeId = '';
 // 切换边框状态
 const toggleBorder = (item, index) => {
-  // 先重置所有状态为 false
   activeBorders.value = activeBorders.value.map(() => false);
   
-  // 然后设置当前点击的为 true
   activeBorders.value[index] = true;
   mergeId = item.id;
 };
@@ -99,6 +102,7 @@ const handleZhuliClick = () => {
     console.log('助力被点击');
 };
 
+import failedImg from '../assets/images/failed.png';
 const getGenerateImgStatus = async (item)=> {
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
     method: 'GET',
@@ -110,7 +114,7 @@ const getGenerateImgStatus = async (item)=> {
   .then(data => {
       console.log('Success:', data);
       if (data.status = 'failed') {
-        item.result_url = 'src/assets/images/failed.png'
+        item.result_url = failedImg;
       } else if (data.status = 'success') {
         item.result_url = data.result_url;
       }
@@ -121,18 +125,11 @@ const getGenerateImgStatus = async (item)=> {
 }
 
 const getBackgroundImage = (item) => {
-  // If result_url exists, use it
   if (item.result_url) {
     return item.result_url;
+  } else {
+    return item.result_url = failedImg;
   }
-  
-  // Otherwise, search in generateImgTemplates for matching merge_id
-  const matchingTemplate = globalStore.generateImgTemplates.find(
-    template => template.merge_id === item.id
-  );
-  
-  // Return the backgroundImg if found, or empty string as fallback
-  return matchingTemplate?.backgroundImg || '';
 };
 </script>
 
@@ -146,8 +143,8 @@ const getBackgroundImage = (item) => {
       <div class="scene-item item-3" @click="$emit('go-photo-square')">
         <img src="../assets/images/zpgc.png" alt="照片广场">
       </div>
-
-      <div class="image-gallery ">
+      <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p>
+      <div class="image-gallery">
         <div 
           v-for="(item, index) in images" 
           :key="index" 
@@ -157,7 +154,7 @@ const getBackgroundImage = (item) => {
             :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
           >
           </div> 
-          <img v-if="!item.result_url" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
+          <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" 
@@ -179,11 +176,16 @@ const getBackgroundImage = (item) => {
 
     </div>
   </ModalTransition>
-
-  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
 </template>
 
 <style scoped>
+.my-photo-desc {
+  position: absolute;
+  width: 87vw;
+  top: 48vw;
+  text-align: center;
+  color: #855211
+}
 .refresh-btn {
   width: 12vw;
   position: absolute;
@@ -211,7 +213,7 @@ const getBackgroundImage = (item) => {
   width: 84vw;
   height: 57vh;
   position: absolute;
-  top: 28%;
+  top: 30%;
 }
 
 .image-container {