update

src/components/PhotoSquare.vue

@@ -4,12 +4,23 @@ import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus';
+import { RecycleScroller } from "vue-virtual-scroller";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
-defineProps({
+const props = defineProps({
   show: false
 })
 
-const emit = defineEmits(['go-my-photo']);
+watch(() => props.show, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  if (newVal) {
+    fetchImages();
+  }
+})
+
+const emit = defineEmits(['go-my-photo', 'update:show']);
 const router = useRouter();
 const goBack = () => {
   emit('update:show', false);
@@ -46,20 +57,30 @@ const fetchImages = async () => {
 
 // 图片数据
 const images = ref([]);
-const disableInviteHelp = ref(true);
+const disableInviteHelp = ref(false);
 const userinfos = Storage.get("userinfos")
 
-// TODO 需要测试
-
+// TODO 需要测试邀请进来的情况
 const mergeId = ref();
 const rankingInvite = ref(0);
 const nameInvite = ref('');
 const linkCountInvite = ref(0);
 
+const urlParams = new URLSearchParams(window.location.search);
+mergeId.value = urlParams.get('merge_id');
+watch(() => mergeId, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  if (newVal.value) {
+    fetchImages();
+  }
+})
+
 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`, {
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeId.value}`, {
     method: 'GET',
     headers: {
       'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
@@ -101,22 +122,63 @@ const inviteHelp = ()=> {
   }); 
 }
 
-onMounted(getInviteInfo(), fetchImages())
+// onMounted(()=> {
+//   getInviteInfo()
+// })
+const markers = ref([]);
+markers.value = [
+  { x: 50, y: 50, width: 100, height: 80 }
+];
+
 </script>
 
 <template>
-  <ModalTransition class="photoSquare" :show="show">
+  <ModalTransition class="photoSquare" :no-animation="true" :show="show">
     <div class="photoSquare-bg">
       <div class="scene-item item-1" @click="goBack">
         <img src="../assets/images/close-btn.png" alt="关闭按钮">
       </div>
 
-      <div class="scene-item item-3" @click="$emit('go-my-photo')">
-        <img src="../assets/images/my-photo-tab.png" alt="我的照片">
+      <div v-for="(marker, index) in markers" 
+          :key="index"
+          class="marker"
+          :style="{
+            left: marker.x + 'px',
+            top: marker.y + 'px',
+            width: marker.width + 'px',
+            height: marker.height + 'px'
+          }"
+          @click.stop="$emit('go-my-photo')">
       </div>
 
       <div v-if="!disableInviteHelp" class="image-gallery ">
-        <div 
+        <RecycleScroller
+            class="scroller"
+            :items="images"
+            :item-size="8"
+            key-field="id"
+            v-slot="{ item, index }"
+          >
+          <div class="image-wrapper">
+            <div class="image-container mask-background">
+            </div>          
+            <img 
+              src="../assets/images/zpgc-border.png" 
+              class="border-image"
+              alt="border"
+            />
+            <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>
+            </div>
+          </div>
+        </RecycleScroller>
+        <!-- <div 
           v-for="(item, index) in images" 
           :key="index" 
           class="image-wrapper"
@@ -135,7 +197,7 @@ onMounted(getInviteInfo(), fetchImages())
             </div>
             <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
           </div>
-        </div>
+        </div> -->
       </div>
       <div v-if="!disableInviteHelp" class="fixed-background-container">
         <div class="flex-container">
@@ -173,6 +235,21 @@ onMounted(getInviteInfo(), fetchImages())
 </template>
 
 <style scoped>
+.scroller {
+  height: 124vw;
+  overflow-y: auto;
+}
+.list-item {
+  height: 8vw;
+  line-height: 50px;
+}
+.marker {
+  left: 50vw !important;
+  top: 32vw !important;
+  width: 50vw !important;
+  height: 14vw !important;
+  position: absolute;
+}
 .flex-container-detail-invite {
   display: flex;
   flex-flow: row;
@@ -246,6 +323,7 @@ onMounted(getInviteInfo(), fetchImages())
   align-items: center;
   height: 3vh;
   top: -11vw;
+  font-size: 11px;
 }
 .flex-container {
   display: flex;
@@ -336,7 +414,7 @@ onMounted(getInviteInfo(), fetchImages())
 .photoSquare-bg {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/zpgc-bg.png');
+  background-image: url('../assets/images/photo-squarev2.png');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;