fix

src/components/PhotoSquare.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, watch } from "vue"
 import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus';
 import { RecycleScroller } from "vue-virtual-scroller";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
@@ -11,17 +11,16 @@ const props = defineProps({
   show: false
 })
 
-watch(() => props.show, async (newVal) => {
-  if (!newVal) {
-    return
-  }
-  fetchImages();
-})
-
+const disableInviteHelp = ref(false);
 const emit = defineEmits(['go-my-photo', 'update:show']);
 const router = useRouter();
+const route = useRoute();
 const goBack = () => {
   emit('update:show', false);
+  // 清除URL中的查询参数
+  if (Object.keys(route.query).length > 0) {
+      router.replace({ path: route.path, query: {} });
+  }
 };
 
 const username = ref();
@@ -31,7 +30,7 @@ const ranking = ref();
 const displayMyPublishPhoto = ref(false);
 
 const fetchImages = async () => {
-  
+  disableInviteHelp.value = false;
   try {
     const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
     url.searchParams.append('my_only', '0');
@@ -43,28 +42,38 @@ const fetchImages = async () => {
       }
     })
     const data = await response.json()
-    console.log('Success:', data)
-    images.value = data.data
-    if (data.my_published_photo) {
-      displayMyPublishPhoto.value = true;
+    if (response.status == 200 || response.status == 201) {
+      console.log('Success:', data)
+      images.value = data.data
+      if (data.my_published_photo) {
+        displayMyPublishPhoto.value = true;
+      } else {
+        displayMyPublishPhoto.value = false;
+      }
+      username.value = data.my_published_photo.user_name;
+      likesCount.value = data.my_published_photo.likes_count;
+      userImg.value = data.my_published_photo.avatar;
+      ranking.value = data.my_published_photo.ranking;
     } else {
-      displayMyPublishPhoto.value = false;
+      ElMessage.error(data.message);
+      emit('update:show', false);
     }
-    username.value = data.my_published_photo.user_name;
-    likesCount.value = data.my_published_photo.likes_count;
-    userImg.value = data.my_published_photo.avatar;
-    ranking.value = data.my_published_photo.ranking;
   } catch (error) {
       console.error('Error:', error)
   }
 }
 
+watch(() => props.show, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  fetchImages();
+}, {immediate: true})
+
 // 图片数据
 const images = ref([]);
-const disableInviteHelp = ref(false);
 const userinfos = Storage.get("userinfos")
 
-// TODO 需要测试邀请进来的情况
 let mergeId = '';
 let inviteCode = '';
 const rankingInvite = ref(0);
@@ -76,7 +85,7 @@ mergeId = urlParams.get('merge_id');
 inviteCode = urlParams.get('fromid');
 
 
-const getInviteInfo = ()=> {
+const getInviteInfo =  ()=> {
   disableInviteHelp.value = true;
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeId}`, {
     method: 'GET',
@@ -84,16 +93,20 @@ const getInviteInfo = ()=> {
       'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
     }
   })
-  .then(response => response.json())
-  .then(data => {
-    rankingInvite.value = data.ranking;
-    nameInvite.value = data.user_name;
-    linkCountInvite.value = data.likes_count;
-    
+  .then(async response => {
+    const data = await response.json()
+    if (response.status == 200 || response.status == 201) {
+      rankingInvite.value = data.ranking;
+      nameInvite.value = data.user_name;
+      linkCountInvite.value = data.likes_count;
+    } else {
+      ElMessage.error(data.message);
+      emit('update:show', false);
+    }
   })
   .catch((error) => {
-    ElMessage.success('点赞失败！');
-    console.error('Error:', error);
+    ElMessage.error('分享进入页面失败！');
+    emit('update:show', false);
   }); 
 }
 
@@ -124,13 +137,17 @@ const inviteHelp = ()=> {
     },
     body: JSON.stringify(formData)
   })
-  .then(response => response.json())
-  .then(data => {
-    displayInviteHelpBtn.value = false;
-    ElMessage.success('点赞成功！');
+  .then(async response => {
+    const data = await response.json()
+    if (response.status == 200 || response.status == 201) {
+      displayInviteHelpBtn.value = false;
+      ElMessage.success('点赞成功！');
+    } else {
+      ElMessage.error(data.message);
+    }
   })
   .catch((error) => {
-    ElMessage.success('点赞失败！');
+    ElMessage.error('点赞失败！');
     console.error('Error:', error);
   }); 
 }
@@ -189,11 +206,9 @@ const getBackgroundImage = (item) => {
             />
             <div class="list-item">
               <div class="flex-container-detail">
-                <div class="left-group">
-                  <p class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</p>
-                  <p class="photo-name">{{ item.user_name }}</p>
-                </div>
-                <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
+                <div class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</div>
+                <div class="photo-name">{{ item.user_name }}</div>
+                <div class="right-item photo-name">{{ item.likes_count }}赞</div>
               </div>
             </div>
           </div>
@@ -230,18 +245,16 @@ const getBackgroundImage = (item) => {
         </div>
       </div>
 
-      <div v-if="disableInviteHelp">
+      <div v-if="disableInviteHelp" class="share-main">
         <div class="image-gallery-share">
           <div class="image-wrapper-share">
             <div class="image-container-share mask-background">
             </div>          
             <img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
             <div class="flex-container-detail-invite">
-              <div class="left-group-left">
-                <p class="photo-number">{{ rankingInvite }}</p>
-                <p class="photo-name">{{ nameInvite }}</p>
-              </div>
-              <p class="right-item photo-name" style="padding-left: 3vw;">{{ linkCountInvite }}赞</p>
+              <div class="photo-number">{{ rankingInvite }}</div>
+              <div class="photo-name">{{ nameInvite }}</div>
+              <div class="right-item photo-name">{{ linkCountInvite }}赞</div>
             </div>
           </div>
         </div>
@@ -255,6 +268,11 @@ const getBackgroundImage = (item) => {
 </template>
 
 <style scoped>
+.share-main {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
 .my-photo-desc {
   position: absolute;
   width: 87vw;
@@ -268,18 +286,24 @@ const getBackgroundImage = (item) => {
   overflow-y: auto;
 }
 .list-item {
-  height: 8vw;
-  line-height: 50px;
+  position: relative;
 }
 .marker {
   position: absolute;
 }
 .flex-container-detail-invite {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
   position: relative;
-  top: -8vw;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 11vw;
+  bottom: 10.5vw;
+  font-size: 3vw;
+  width: 100%;
+  padding: 0px 13vw;
+}
+.flex-container-detail-invite .photo-name {
+  max-width: 24vw;
 }
 .left-group-left {
   display: flex;
@@ -290,32 +314,23 @@ const getBackgroundImage = (item) => {
 .ranking-title {
   width: 48vw;
   position: absolute;
-  bottom: 20vw;
+  bottom: 2vw;
   left: 27vw;
 }
 .ranking-title img {
   width: 100%;
 }
-.image-gallery-share {
-  margin: 0 auto;
-  position: relative;
-  overflow-y: auto;
-  display: block;
-  width: 84vw;
-  height: 57vh;
-  top: 16%;
-}
 .image-wrapper-share {
   position: relative;
-  margin-bottom: -10vw;
-  float: left;
-  margin-left: 4vw;
+  width: 69vw;
+  height: 57vw;
+  margin-top: 12vw;
 }
 .image-container-share {
-  width: 77vw;
-  height: 43vh;
+  width: 68vw;
+  height: 81vw;
   background-image: url(/src/assets/images/test.webp);
-  background-size: cover;
+  background-size: 100%;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
@@ -327,27 +342,36 @@ const getBackgroundImage = (item) => {
 }
 .border-image-share {
   position: absolute;
-  width: 72vw;
-  top: -0.5vw;
-  left: 2.6vw;
+  width: 63vw;
+  top: -0.8vw;
+  left: 3vw;
 }
 .bold {
   font-weight: bold;
 }
 .photo-number {
   color: red;
+  flex-shrink: 0;
+  padding-right: 2vw;
 }
 .photo-name {
+  min-width: 14vw;
+  max-width: 19vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: #93551f;
 }
 .flex-container-detail {
-  position: relative;
+  position: absolute;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   height: 3vh;
-  top: -11vw;
-  font-size: 11px;
+  bottom: 5.5vw;
+  font-size: 3vw;
+  width: 100%;
+  padding: 0 4vw;
 }
 .flex-container {
   display: flex;
@@ -369,7 +393,9 @@ const getBackgroundImage = (item) => {
 }
 
 .left-group p, .right-item {
-  margin: 0;
+  padding-left: 2vw;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 .fixed-background-container {
   background-image: url('../assets/images/paiming-border.webp');
@@ -392,13 +418,12 @@ const getBackgroundImage = (item) => {
 .border-image {
   position: absolute;
   width: 40vw;
-  top: 1.6333vh;
-  left: -0.4vw;
+  top: 2.8vw;
+  left: -0.8vw;
 }
 .image-gallery {
   overflow-y: auto;
   overflow-x: hidden;
-  display: block;
   width: 84vw;
   height: 57vh;
   position: relative;
@@ -406,13 +431,14 @@ const getBackgroundImage = (item) => {
   flex-flow: row;
   flex-wrap: wrap;
   top: 26vw;
+  padding-bottom: 12vw;
 }
 
 .image-container {
   width: 38vw;
   height: 28vh;
   background-image: url('../assets/images/test.webp');
-  background-size: cover;
+  background-size: 100%;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;