update

src/components/PhotoSquare.vue

@@ -2,9 +2,7 @@
 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';
 
 defineProps({
@@ -45,14 +43,41 @@ const fetchImages = async () => {
       console.error('Error:', error)
   }
 }
-onMounted(fetchImages)
-
 
 // 图片数据
 const images = ref([]);
 const disableInviteHelp = ref(true);
 const userinfos = Storage.get("userinfos")
-// TODO 差接口
+
+// TODO 需要测试
+
+const mergeId = ref();
+const rankingInvite = ref(0);
+const nameInvite = ref('');
+const linkCountInvite = ref(0);
+
+const getInviteInfo = ()=> {
+  const urlParams = new URLSearchParams(window.location.search);
+  mergeId.value = urlParams.get('merge_id');
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/89`, {
+    method: 'GET',
+    headers: {
+      '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;
+
+  })
+  .catch((error) => {
+    ElMessage.success('点赞失败！');
+    console.error('Error:', error);
+  }); 
+}
+
 const inviteHelp = ()=> {
   const formData = {
     invite_code: userinfos.invite_code,
@@ -75,6 +100,8 @@ const inviteHelp = ()=> {
     console.error('Error:', error);
   }); 
 }
+
+onMounted(getInviteInfo(), fetchImages())
 </script>
 
 <template>
@@ -127,12 +154,12 @@ const inviteHelp = ()=> {
             <div class="image-container-share mask-background">
             </div>          
             <img src="../assets/images/zpgc-border.png" class="border-image-share" alt="border" />
-            <div class="flex-container-detail">
-              <div class="left-group">
-                <p class="photo-number">000</p>
-                <p class="photo-name">name</p>
+            <div class="flex-container-detail-invite">
+              <div class="left-group-left">
+                <p class="photo-number">111</p>
+                <p class="photo-name">222</p>
               </div>
-              <p class="right-item photo-name" style="padding-left: 3vw;">888赞</p>
+              <p class="right-item photo-name" style="padding-left: 3vw;">333赞</p>
             </div>
           </div>
         </div>
@@ -143,11 +170,22 @@ const inviteHelp = ()=> {
       </div>
     </div>
   </ModalTransition>
-
-  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
 </template>
 
 <style scoped>
+.flex-container-detail-invite {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  position: relative;
+  top: -8vw;
+}
+.left-group-left {
+  display: flex;
+  flex-flow: row;
+  padding-right: 16vw;
+  gap: 3vw;
+}
 .ranking-title {
   width: 48vw;
   position: absolute;