2.4.4 更改主播上限

src/views/pk-mini/PkHall.vue

@@ -55,10 +55,10 @@
     <div class="content-area">
       <!-- 列表面板 -->
       <div class="list-panel">
-        <div v-infinite-scroll="loadMore" :infinite-scroll-distance="100" :infinite-scroll-disabled="loading || noMore"
-          class="pk-list">
-          <div v-for="(item, index) in pkList" :key="index" class="pk-card" :class="{ selected: selectedItem === item }"
-            @click="handleItemClick(item)">
+        <div v-infinite-scroll="loadMore" :infinite-scroll-distance="50" :infinite-scroll-disabled="loading || noMore"
+          :infinite-scroll-immediate="true" class="pk-list">
+          <div v-for="item in pkList" :key="item.id || item.anchorId" class="pk-card"
+            :class="{ selected: selectedItem === item }" @click="handleItemClick(item)">
             <!-- 头像 -->
             <div class="pk-avatar">
               <img :src="item.anchorIcon" alt="" />
@@ -67,8 +67,8 @@
               <!-- 个人信息 -->
               <div class="pk-personal">
                 <span class="pk-name">{{ item.disPlayId }}</span>
-                <span class="pk-gender" :class="item.sex === 1 ? 'male' : 'female'">
-                  {{ item.sex === 1 ? '男' : '女' }}
+                <span class="pk-gender" :class="item.sex === '1' ? 'male' : 'female'">
+                  {{ item.sex === '1' ? '男' : '女' }}
                 </span>
                 <span class="pk-country">{{ item.country }}</span>
               </div>
@@ -89,6 +89,14 @@
           </div>
 
           <div v-if="pkList.length === 0" class="empty-tip">暂无数据</div>
+          <!-- 加载状态提示 -->
+          <div v-if="loading" class="loading-tip">
+            <span class="loading-spinner"></span>
+            <span>加载中...</span>
+          </div>
+          <div v-else-if="noMore && pkList.length > 0" class="no-more-tip">
+            已加载全部数据
+          </div>
         </div>
       </div>
 
@@ -152,8 +160,8 @@
             <div class="anchor-info">
               <div class="anchor-name">{{ anchor.anchorId }}</div>
               <div class="anchor-detail">
-                <span class="anchor-gender" :class="anchor.sex === 1 ? 'male' : 'female'">
-                  {{ anchor.sex === 1 ? '男' : '女' }}
+                <span class="anchor-gender" :class="anchor.sex === '1' ? 'male' : 'female'">
+                  {{ anchor.sex === '1' ? '男' : '女' }}
                 </span>
                 <span class="anchor-coin">{{ anchor.coin }}K</span>
               </div>
@@ -249,11 +257,20 @@ const formatTime = TimestamptolocalTime
 function switchMode() {
   isHallMode.value = !isHallMode.value
   selectedItem.value = null
+  // 重置分页和加载状态
+  page.value = 0
+  loading.value = false
+  noMore.value = false
+  // 清空当前模式的数据
   if (isHallMode.value) {
+    hallList.value = []
     pkList.value = hallList.value
   } else {
+    todayList.value = []
     pkList.value = todayList.value
   }
+  // 重新加载数据
+  loadPkList()
 }
 
 // 搜索
@@ -281,6 +298,7 @@ function handleReset() {
 
 // 加载更多
 function loadMore() {
+  console.log('[PkHall] loadMore 被调用')
   loadPkList()
 }
 
@@ -341,9 +359,27 @@ async function loadPkList() {
     }
   } catch (e) {
     console.error('加载 PK 列表失败', e)
-    noMore.value = true
+    ElMessage.error('加载失败，请稍后重试')
   } finally {
     loading.value = false
+    // 数据加载完成后，使用 nextTick 强制重新计算滚动位置
+    nextTick(() => {
+      const pkListEl = document.querySelector('.pk-list')
+      if (pkListEl) {
+        // 触发一次滚动事件，确保无限滚动指令能够正确检测滚动位置
+        pkListEl.dispatchEvent(new Event('scroll'))
+
+        // 手动检查是否已经滚动到底部，如果是，则直接调用 loadMore
+        const { scrollTop, scrollHeight, clientHeight } = pkListEl
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10
+        if (isAtBottom && !loading.value && !noMore.value) {
+          console.log('[PkHall] 检测到已滚动到底部，手动调用 loadMore')
+          setTimeout(() => {
+            loadMore()
+          }, 100)
+        }
+      }
+    })
   }
 }
 
@@ -546,7 +582,7 @@ async function confirmInvite() {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   countryOptions.value = getCountryNamesArray()
   currentUser.value = getMainUserData() || {}
   const userId = getUserId(currentUser.value)
@@ -556,7 +592,27 @@ onMounted(() => {
 
   // 初始加载 PK 大厅数据（通过 loadPkList 统一管理 page/loading/noMore 状态）
   if (userId) {
-    loadPkList()
+    await loadPkList()
+    // 延迟一段时间，确保无限滚动指令已经完全初始化
+    setTimeout(() => {
+      const pkListEl = document.querySelector('.pk-list')
+      if (pkListEl) {
+        const { scrollTop, scrollHeight, clientHeight } = pkListEl
+        console.log('[PkHall] pk-list 元素信息:', {
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+          isAtBottom: scrollTop + clientHeight >= scrollHeight - 10
+        })
+
+        // 手动滚动到底部，然后触发滚动事件
+        pkListEl.scrollTop = scrollHeight - clientHeight
+        setTimeout(() => {
+          pkListEl.dispatchEvent(new Event('scroll'))
+          console.log('[PkHall] 手动滚动到底部并触发滚动事件')
+        }, 100)
+      }
+    }, 500)
   } else {
     console.warn('[PkHall] 未找到用户 ID，无法加载数据')
   }
@@ -860,6 +916,43 @@ onUnmounted(() => {
   font-size: 16px;
 }
 
+// 加载状态提示
+.loading-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px;
+  color: #2563eb; // blue-600
+  font-size: 14px;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #e2e8f0;
+  border-top: 2px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.no-more-tip {
+  text-align: center;
+  padding: 20px;
+  color: #94a3b8; // slate-400
+  font-size: 14px;
+}
+
 // 聊天面板
 .chat-panel {
   width: 350px;