独联体 - 公会列表增加分页

view/moliparty/modules/guild-ar/js/guild.js

@@ -56,7 +56,7 @@ $(function () {
         translateFun();
         applyExist();
         // listRank();
-        userInfo();
+
     }, 100)
 })
 function translateFun() {
@@ -79,6 +79,10 @@ $('.top img').click(function () {
     // window.location.href = './search.html'
 })
 var partitionId;
+var pageNo = 1;
+var pageSize = 20;
+var isLoading = false; // 防止重复加载
+var hasMoreData = true; // 是否还有更多数据
 // 用户信息接口
 function userInfo() {
     networkRequest({
@@ -87,6 +91,126 @@ function userInfo() {
         success(res) {
             if (res.code === 200) {
                 partitionId = res.data.partitionId;
+                if (partitionId == 32) {
+                    listPageRank();
+                    // 初始化滚动监听
+                    initScrollListener();
+                } else {
+                    listRank();
+                }
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 初始化滚动监听
+function initScrollListener() {
+    $('ul').on('scroll', function () {
+        const $this = $(this);
+        const scrollTop = $this.scrollTop();
+        const scrollHeight = $this[0].scrollHeight;
+        const clientHeight = $this[0].clientHeight;
+
+        // 判断是否滚动到底部
+        if (scrollHeight - scrollTop - clientHeight <= 1 && hasMoreData && !isLoading) {
+            loadMoreData();
+        }
+    });
+}
+// 加载更多数据
+function loadMoreData() {
+    if (isLoading || !hasMoreData) return;
+
+    isLoading = true;
+    pageNo++;
+
+    showLoading();
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/guild/listRank',
+        data: {
+            pageNo,
+            pageSize
+        },
+        success(res) {
+            if (res.code === 200) {
+                if (res.data && res.data.length > 0) {
+                    var str = '';
+                    res.data.forEach((val, i) => {
+                        str += `
+                            <li>
+                                <img class="tx" src="${val.owner.avatar}" alt="">
+                                <p>${val.guildName}</p>
+                                <strong>${langReplace(localLang.guild.newText5)} ${val.owner.erbanNo}</strong>
+                                <span><img src="./images/xren.png" alt=""> <b>${val.memberNum ? val.memberNum : 0}/${val.memberNumLimit}</b></span>
+                                <img class="level" style="display:${val.ssLevel == 0 ? 'none' : 'block'}" src="./images/${val.markScore}.png" alt="">
+                                <div class="but" style="top:${val.ssLevel == 0 ? '0.8rem' : '1.22667rem'}" familyId=${val.guildId}>${langReplace(localLang.guild.newText4)}</div>
+                            </li>
+                        `
+                    });
+                    $('ul').append(str);
+
+                    // 如果返回数据少于pageSize，说明没有更多数据了
+                    if (res.data.length < pageSize) {
+                        hasMoreData = false;
+                    }
+                } else {
+                    // 没有更多数据了
+                    hasMoreData = false;
+                }
+            } else {
+                toastMsg(res.message);
+                // 出错时恢复页码
+                pageNo--;
+            }
+            isLoading = false;
+            hideLoading(layerIndex);
+        },
+        error(err) {
+            isLoading = false;
+            pageNo--;
+            hideLoading(layerIndex);
+            toastMsg(langReplace(localLang.demoModule.layerIndex3));
+        }
+    });
+}
+// 配置接口 - 独联体分页
+function listPageRank() {
+    $('ul li').remove();
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/guild/listRank',
+        data: {
+            pageNo,
+            pageSize
+        },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                res.data.forEach((val, i) => {
+                    str += `
+                            <li>
+                                <img class="tx" src="${val.owner.avatar}" alt="">
+                                <p>${val.guildName}</p>
+                                <strong>${langReplace(localLang.guild.newText5)} ${val.owner.erbanNo}</strong>
+                                <span><img src="./images/xren.png" alt=""> <b>${val.memberNum ? val.memberNum : 0}/${val.memberNumLimit}</b></span>
+                                <img class="level" style="display:${val.ssLevel == 0 ? 'none' : 'block'}" src="./images/${val.markScore}.png" alt="">
+                                <div class="but" style="top:${val.ssLevel == 0 ? '0.8rem' : '1.22667rem'}" familyId=${val.guildId}>${langReplace(localLang.guild.newText4)}</div>
+                            </li>
+                        `
+                })
+                $('ul').append(str);
+                // 如果返回数据少于pageSize，说明没有更多数据了
+                if (res.data.length < pageSize) {
+                    hasMoreData = false;
+                }
             } else {
                 toastMsg(res.message)
             }
@@ -144,7 +268,8 @@ function applyExist() {
                 if (res.data) {
                     $('.submitSuccessfully').show();
                 } else {
-                    listRank();
+                    // listRank();
+                    userInfo();
                 }
             } else {
                 toastMsg(res.message)
@@ -223,7 +348,17 @@ $('.top input').on('input', function () {
     var val = $(this).val();
     clearTimeout(inputTime);
     if (val == '') {
-        listRank();
+        if (partitionId == 32) {
+            pageNo = 1;
+            pageSize = 20;
+            isLoading = false;
+            hasMoreData = true;
+            listPageRank();
+            // 初始化滚动监听
+            initScrollListener();
+        } else {
+            listRank();
+        }
     } else {
         inputTime = setTimeout(() => {
             searchFamily(val);
@@ -241,10 +376,10 @@ function searchFamily(erbanNo) {
         data: { erbanNo },
         success(res) {
             if (res.code == 200) {
-                if(res.data){
-                var str = '';
-                console.log(res.data);
-                str += `
+                if (res.data) {
+                    var str = '';
+                    console.log(res.data);
+                    str += `
                         <li>
                             <img class="tx" src="${res.data.avatar}" alt="">
                             <p>${res.data.guildName}</p>
@@ -254,15 +389,15 @@ function searchFamily(erbanNo) {
                             <div class="but" style="top:${res.data.ssLevel == 0 ? '0.8rem' : '1.22667rem'}" familyId=${res.data.guildId}>Join</div>
                         </li>
                         `
-                $('ul').append(str);
-                }else{
+                    $('ul').append(str);
+                } else {
                     var str = '';
-                str += `
+                    str += `
                     <li class="null">
                         <img src="./images/null.png" alt="">
                         <span>${langReplace(localLang.search.text4)}</span>
                     </li>`
-                $('ul').append(str);
+                    $('ul').append(str);
                 }
             } else if (res.code == 1404) {
                 var str = '';