update

src/components/PhotoSquare.vue

@@ -47,13 +47,13 @@ const fetchImages = async () => {
       images.value = data.data
       if (data.my_published_photo) {
         displayMyPublishPhoto.value = true;
+        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;
       }
-      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 {
       ElMessage.error(data.message);
       emit('update:show', false);
@@ -70,8 +70,66 @@ watch(() => props.show, async (newVal) => {
   fetchImages();
 }, {immediate: true})
 
-// 图片数据
+// 图片数据与分页
 const images = ref([]);
+const page = ref(1);
+const perPage = 20;
+const loading = ref(false);
+const finished = ref(false);
+
+const loadMoreImages = async () => {
+  if (loading.value || finished.value) return;
+  loading.value = true;
+  try {
+    const url = new URL('https://huodong2.lzlj.com/api/faceFamily/face/square');
+    url.searchParams.append('my_only', '0');
+    url.searchParams.append('page', page.value);
+    url.searchParams.append('per_page', perPage);
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
+      }
+    });
+    const data = await response.json();
+    if (response.status == 200 || response.status == 201) {
+      if (data.data.length < perPage) finished.value = true;
+      images.value.push(...data.data);
+      page.value++;
+      if (data.my_published_photo) {
+        displayMyPublishPhoto.value = true;
+        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;
+      }
+    } else {
+      ElMessage.error(data.message);
+      emit('update:show', false);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+  loading.value = false;
+};
+
+const handleScroll = (e) => {
+  const el = e.target;
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < 100) {
+    loadMoreImages();
+  }
+};
+
+watch(() => props.show, async (newVal) => {
+  if (!newVal) return;
+  // 重置分页
+  images.value = [];
+  page.value = 1;
+  finished.value = false;
+  await loadMoreImages();
+}, {immediate: true});
 const userinfos = Storage.get("userinfos")
 
 let mergeId = '';
@@ -191,52 +249,30 @@ const getBackgroundImage = (item) => {
           @click.stop="$emit('go-my-photo')">
       </div>
       <p class="my-photo-desc">打榜活动截止至10月3日23:59:59结束，中奖信息将于10月4日早10点推送至获奖会员。</p>
-      <div v-if="!disableInviteHelp" class="image-gallery ">
-        <RecycleScroller
-            class="scroller"
-            :items="images"
-            :item-size="1"
-            key-field="id"
-            v-slot="{ item, index }"
-          >
-          <div class="image-wrapper">
-            <div class="image-container mask-background" 
-            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
-            </div>          
-            <img 
-              src="../assets/images/zpgc-border.webp" 
-              class="border-image"
-              alt="border"
-            />
-            <div class="list-item">
-              <div class="flex-container-detail">
-                <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>
-        </RecycleScroller>
-        <!-- <div 
+      <div v-if="!disableInviteHelp" class="image-gallery scroller" @scroll="handleScroll">
+        <div 
           v-for="(item, index) in images" 
-          :key="index" 
+          :key="item.id || index" 
           class="image-wrapper"
         >
-          <div class="image-container mask-background">
+          <div class="image-container mask-background" 
+            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
           </div>          
           <img 
             src="../assets/images/zpgc-border.webp" 
             class="border-image"
             alt="border"
           />
-          <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 class="list-item">
+            <div class="flex-container-detail">
+              <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>
-            <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
           </div>
-        </div> -->
+        </div>
+        <div v-if="loading" style="text-align:center;padding:10px;color:#999;">加载中...</div>
+        <div v-if="finished && images.length === 0" style="text-align:center;padding:10px;color:#999;">暂无数据</div>
       </div>
       <div v-if="!disableInviteHelp && displayMyPublishPhoto" class="fixed-background-container">
         <div class="flex-container">
@@ -420,7 +456,7 @@ const getBackgroundImage = (item) => {
 }
 
 .left-group p, .right-item {
-  padding-left: 2vw;
+  padding-left: 0.3vw;
   margin-left: auto;
   flex-shrink: 0;
 }