公告列表采用分页组件

components/pagination/pagination.vue

@@ -6,11 +6,11 @@
         <view class="loading-spinner"></view>
         <text class="loading-text">{{ loadingText }}</text>
       </view>
-      
+
       <view v-else-if="noMore && list.length > 0" class="no-more-state">
         <text class="no-more-text">{{ noMoreText }}</text>
       </view>
-      
+
       <view v-else-if="list.length === 0 && !loading" class="empty-state">
         <view class="empty-icon">{{ emptyIcon }}</view>
         <text class="empty-text">{{ emptyText }}</text>
@@ -24,19 +24,19 @@
           共 {{ total }} 条，第 {{ currentPage }} / {{ totalPages }} 页
         </text>
       </view>
-      
+
       <view class="pager-controls">
-        <button 
+        <button
-          class="pager-btn prev-btn" 
+          class="pager-btn prev-btn"
           :disabled="currentPage <= 1"
           @click="handlePageChange(currentPage - 1)"
         >
           上一页
         </button>
-        
+
         <view class="page-numbers">
-          <button 
+          <button
-            v-for="page in visiblePages" 
+            v-for="page in visiblePages"
             :key="page"
             :class="['page-btn', { active: page === currentPage }]"
             @click="handlePageChange(page)"
@@ -44,9 +44,9 @@
             {{ page }}
           </button>
         </view>
-        
+
-        <button 
+        <button
-          class="pager-btn next-btn" 
+          class="pager-btn next-btn"
           :disabled="currentPage >= totalPages"
           @click="handlePageChange(currentPage + 1)"
         >
@@ -65,114 +65,114 @@ export default {
     mode: {
       type: String,
       default: 'loadMore',
-      validator: value => ['loadMore', 'pager'].includes(value)
+      validator: value => ['loadMore', 'pager'].includes(value),
     },
-    
+
     // 数据列表
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
-    
+
     // 总数据量
     total: {
       type: Number,
-      default: 0
+      default: 0,
     },
-    
+
     // 当前页码
     currentPage: {
       type: Number,
-      default: 1
+      default: 1,
     },
-    
+
     // 每页数量
     pageSize: {
       type: Number,
-      default: 10
+      default: 10,
     },
-    
+
     // 是否正在加载
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
-    
+
     // 是否没有更多数据
     noMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
-    
+
     // 自定义文本
     loadingText: {
       type: String,
-      default: '正在加载...'
+      default: '正在加载...',
     },
-    
+
     noMoreText: {
       type: String,
-      default: '没有更多数据了'
+      default: '没有更多数据了',
     },
-    
+
     emptyText: {
       type: String,
-      default: '暂无数据'
+      default: '暂无数据',
     },
-    
+
     emptyIcon: {
       type: String,
-      default: '📋'
+      default: '📋',
     },
-    
+
     // 分页器显示的页码数量
     visiblePageCount: {
       type: Number,
-      default: 5
+      default: 5,
-    }
+    },
   },
-  
+
   computed: {
     // 总页数
     totalPages() {
       return Math.ceil(this.total / this.pageSize)
     },
-    
+
     // 可见的页码
     visiblePages() {
       const pages = []
       const half = Math.floor(this.visiblePageCount / 2)
       let start = Math.max(1, this.currentPage - half)
       let end = Math.min(this.totalPages, start + this.visiblePageCount - 1)
-      
+
       // 调整起始位置
       if (end - start + 1 < this.visiblePageCount) {
         start = Math.max(1, end - this.visiblePageCount + 1)
       }
-      
+
       for (let i = start; i <= end; i++) {
         pages.push(i)
       }
-      
+
       return pages
-    }
+    },
   },
-  
+
   methods: {
     // 处理页码变化
     handlePageChange(page) {
       if (page < 1 || page > this.totalPages || page === this.currentPage) {
         return
       }
-      
+
       this.$emit('page-change', page)
     },
-    
+
     // 重置分页状态
     reset() {
       this.$emit('reset')
-    }
+    },
-  }
+  },
 }
 </script>
 
@@ -192,7 +192,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 20rpx 0;
-  
+
   .loading-spinner {
     width: 40rpx;
     height: 40rpx;
@@ -202,7 +202,7 @@ export default {
     animation: spin 1s linear infinite;
     margin-right: 20rpx;
   }
-  
+
   .loading-text {
     font-size: 28rpx;
     color: #666;
@@ -211,7 +211,7 @@ export default {
 
 .no-more-state {
   padding: 20rpx 0;
-  
+
   .no-more-text {
     font-size: 24rpx;
     color: #999;
@@ -220,12 +220,12 @@ export default {
 
 .empty-state {
   padding: 40rpx 0;
-  
+
   .empty-icon {
     font-size: 80rpx;
     margin-bottom: 20rpx;
   }
-  
+
   .empty-text {
     font-size: 28rpx;
     color: #999;
@@ -242,7 +242,7 @@ export default {
 .pager-info {
   text-align: center;
   margin-bottom: 20rpx;
-  
+
   .pager-text {
     font-size: 24rpx;
     color: #666;
@@ -264,13 +264,13 @@ export default {
   background: #fff;
   color: #333;
   font-size: 26rpx;
-  
+
   &:disabled {
     color: #ccc;
     background: #f5f5f5;
     border-color: #d9d9d9;
   }
-  
+
   &:not(:disabled):active {
     background: #f0f0f0;
   }
@@ -289,20 +289,24 @@ export default {
   background: #fff;
   color: #333;
   font-size: 26rpx;
-  
+
   &.active {
     background: #1890ff;
     color: #fff;
     border-color: #1890ff;
   }
-  
+
   &:not(.active):active {
     background: #f0f0f0;
   }
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
-</style> 
+</style>

pages/announcementList/announcementList.vue

@@ -4,61 +4,33 @@
       <uni-card :extra="item.createTime" :title="item.title" @click="detail(item)"></uni-card>
     </view>
 
-    <!-- 加载更多状态 -->
+    <!-- 分页组件 -->
-    <view v-if="noData && list.length > 0" class="load-more">
+    <pagination
-      <text class="no-more-text">没有更多数据了</text>
+      :current-page="pagination.currentPage"
-    </view>
+      :list="list"
+      :loading="loading"
+      :mode="'loadMore'"
+      :no-more="noMore"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      @page-change="handlePageChange"
+    />
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { getArticleList } from '@/api/article/article.js'
-import { onUnload, onReachBottom } from '@dcloudio/uni-app'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { usePagination } from '@/composables/usePagination.js'
 
-const list = ref([])
+// 使用分页组合式函数
-const noData = ref(false)
+const { list, loading, noMore, pagination, getList, loadMore } = usePagination({
-const loading = ref(false)
+  fetchData: getArticleList,
-
+  defaultParams: {},
-//定义data参数
+  mode: 'loadMore',
-const queryParams = {
+  pageSize: 9,
-  pageNum: 1,
+})
-  pageSize: 6,
-}
-
-// 获取列表
-const getList = async () => {
-  if (loading.value) return
-
-  try {
-    loading.value = true
-    let res = await getArticleList(queryParams)
-
-    // 确保 res.data 存在且是数组
-    const newData = res?.rows || []
-
-    // 如果是第一页，直接替换数据
-    if (queryParams.pageNum === 1) {
-      list.value = newData
-    } else {
-      list.value = [...list.value, ...newData]
-    }
-
-    if (queryParams.pageNum * queryParams.pageSize >= res.total) {
-      noData.value = true
-    }
-
-    console.log('订单列表:', list.value)
-  } catch (error) {
-    console.error('获取订单列表失败:', error)
-    uni.showToast({
-      title: '获取订单列表失败',
-      icon: 'none',
-    })
-  } finally {
-    loading.value = false
-  }
-}
 
 const detail = item => {
   uni.navigateTo({
@@ -71,18 +43,15 @@ onMounted(() => {
   getList()
 })
 
-onUnload(() => {
+// 上拉加载更多
-  // 清理数据
+onReachBottom(() => {
-  list.value = []
+  loadMore()
-  noData.value = false
-  loading.value = false
 })
 
-onReachBottom(() => {
+// 处理页码变化
-  if (noData.value || loading.value) return
+const handlePageChange = page => {
-  queryParams.pageNum++
+  console.log('页码变化:', page)
-  getList()
+}
-})
 </script>
 
 <style lang="scss" scoped>

pages/myOrder/myOrder.vue

@@ -73,7 +73,6 @@ import { onMounted } from 'vue'
 import { onReachBottom } from '@dcloudio/uni-app'
 import { usePagination } from '@/composables/usePagination.js'
 import { getMyOrder } from '@/api/order/myOrder.js'
-import Pagination from '@/components/pagination/pagination.vue'
 
 // 使用分页组合式函数
 const { list, loading, noMore, pagination, getList, loadMore } = usePagination({