加载

src/views/home/jdcomponents/JDProducts.vue

@@ -81,6 +81,13 @@
           </div>
         </div>
       </div>
+
+      <!-- 加载更多提示 -->
+      <div v-if="loading" class="loading-more">
+        <el-icon class="is-loading"><Loading /></el-icon>
+        <span>加载中...</span>
+      </div>
+      <div v-if="noMore && baseProducts.length > 0" class="no-more">没有更多了</div>
     </div>
     <div class="empty-bos" v-if="baseProducts.length === 0">
       <el-empty description="暂无数据" />
@@ -93,9 +100,12 @@ import { recommendThemeConfig } from '@/api/home/index-enterprise';
 import { onPath } from '@/utils/siteConfig';
 import { addProductShoppingCart } from '@/api/goods/index';
 import { getPcProductPage } from '@/api/search/index';
+import { Loading } from '@element-plus/icons-vue';
 
 const categories = ref<any>([]);
 const baseProducts = ref<any>([]);
+const loading = ref(false);
+const noMore = ref(false);
 
 recommendThemeConfig({}).then((res) => {
   if (res.code == 200) {
@@ -122,6 +132,7 @@ recommendThemeConfig({}).then((res) => {
       if (categoryList.length > 2) {
         categories.value[0].bottomCategoryId = categoryList[2];
       }
+      baseProducts.value = [];
       getList();
     } else {
       baseProducts.value = categories.value[0].goodsList;
@@ -136,6 +147,8 @@ const showNext = ref(true);
 
 const onCurrentCat = (index: any) => {
   currentCat.value = index;
+  // 重置加载状态
+  noMore.value = false;
   if (categories.value[index].categoryPath) {
     categories.value[index].pageNum = 1;
     categories.value[index].pageSize = 20;
@@ -152,6 +165,7 @@ const onCurrentCat = (index: any) => {
     if (categoryList.length > 2) {
       categories.value[index].bottomCategoryId = categoryList[2];
     }
+    baseProducts.value = [];
     getList();
   } else {
     baseProducts.value = categories.value[index].goodsList;
@@ -159,6 +173,9 @@ const onCurrentCat = (index: any) => {
 };
 
 const getList = () => {
+  if (loading.value || noMore.value) return;
+
+  loading.value = true;
   const datas = {
     pageNum: categories.value[currentCat.value].pageNum,
     pageSize: categories.value[currentCat.value].pageSize,
@@ -166,15 +183,26 @@ const getList = () => {
     mediumCategoryId: categories.value[currentCat.value].mediumCategoryId,
     bottomCategoryId: categories.value[currentCat.value].bottomCategoryId
   };
-  getPcProductPage(datas).then((res) => {
-    if (res.code == 200) {
-      baseProducts.value = res.rows ? res.rows : [];
-      // dataList.value = res.rows ? res.rows : [];
-      // // 判断是否还有更多数据
-      // hasMore.value = dataList.value.length === httpObj.value.pageSize;
-    }
-  });
+  getPcProductPage(datas)
+    .then((res) => {
+      if (res.code == 200) {
+        const newProducts = res.rows || [];
+        baseProducts.value = baseProducts.value.concat(newProducts);
+
+        // 判断是否还有更多数据
+        if (res.total <= baseProducts.value.length) {
+          noMore.value = true;
+        } else {
+          // 还有更多数据，页码+1
+          categories.value[currentCat.value].pageNum++;
+        }
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
+
 const checkScroll = () => {
   if (!navListRef.value) return;
   const { scrollLeft, scrollWidth, clientWidth } = navListRef.value;
@@ -211,8 +239,27 @@ const onCart = (row: any) => {
   });
 };
 
+// 监听整个页面滚动
+const handlePageScroll = () => {
+  const { scrollTop, scrollHeight, clientHeight } = document.documentElement || document.body;
+
+  // 距离底部100px时触发加载
+  if (scrollHeight - scrollTop - clientHeight < 100) {
+    if (categories.value[currentCat.value] && categories.value[currentCat.value].categoryPath) {
+      getList();
+    }
+  }
+};
+
 onMounted(() => {
   setTimeout(checkScroll, 100);
+  // 添加页面滚动监听
+  window.addEventListener('scroll', handlePageScroll);
+});
+
+onUnmounted(() => {
+  // 移除页面滚动监听
+  window.removeEventListener('scroll', handlePageScroll);
 });
 </script>
 
@@ -524,4 +571,24 @@ onMounted(() => {
   border-radius: 10px;
   margin-bottom: 20px;
 }
+
+/* 加载更多提示 */
+.loading-more {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: #999;
+  font-size: 14px;
+  gap: 8px;
+}
+
+.no-more {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 20px;
+  color: #999;
+  font-size: 14px;
+}
 </style>