HomeLease/components/pagination/pagination.vue

<template>
  <view class="pagination-container">
    <!-- 上拉加载更多模式 -->
    <view v-if="mode === 'loadMore'" class="load-more-container">
      <view v-if="loading" class="loading-state">
        <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>
      </view>
    </view>

    <!-- 分页器模式 -->
    <view v-else-if="mode === 'pager'" class="pager-container">
      <view v-if="total > 0" class="pager-info">
        <text class="pager-text">
          共 {{ total }} 条，第 {{ currentPage }} / {{ totalPages }} 页
        </text>
      </view>

      <view class="pager-controls">
        <button
          class="pager-btn prev-btn"
          :disabled="currentPage <= 1"
          @click="handlePageChange(currentPage - 1)"
        >
          上一页
        </button>

        <view class="page-numbers">
          <button
            v-for="page in visiblePages"
            :key="page"
            :class="['page-btn', { active: page === currentPage }]"
            @click="handlePageChange(page)"
          >
            {{ page }}
          </button>
        </view>

        <button
          class="pager-btn next-btn"
          :disabled="currentPage >= totalPages"
          @click="handlePageChange(currentPage + 1)"
        >
          下一页
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 分页模式：loadMore(上拉加载) 或 pager(分页器)
    mode: {
      type: String,
      default: 'loadMore',
      validator: value => ['loadMore', 'pager'].includes(value),
    },

    // 数据列表
    list: {
      type: Array,
      default: () => [],
    },

    // 总数据量
    total: {
      type: Number,
      default: 0,
    },

    // 当前页码
    currentPage: {
      type: Number,
      default: 1,
    },

    // 每页数量
    pageSize: {
      type: Number,
      default: 10,
    },

    // 是否正在加载
    loading: {
      type: Boolean,
      default: false,
    },

    // 是否没有更多数据
    noMore: {
      type: Boolean,
      default: false,
    },

    // 自定义文本
    loadingText: {
      type: String,
      default: '正在加载...',
    },

    noMoreText: {
      type: String,
      default: '没有更多数据了',
    },

    emptyText: {
      type: String,
      default: '暂无数据',
    },

    emptyIcon: {
      type: String,
      default: '📋',
    },

    // 分页器显示的页码数量
    visiblePageCount: {
      type: Number,
      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>

<style lang="scss" scoped>
.pagination-container {
  width: 100%;
}

// 上拉加载更多样式
.load-more-container {
  padding: 20rpx;
  text-align: center;
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;

  .loading-spinner {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #1890ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 20rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #666;
  }
}

.no-more-state {
  padding: 20rpx 0;

  .no-more-text {
    font-size: 24rpx;
    color: #999;
  }
}

.empty-state {
  padding: 40rpx 0;

  .empty-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 分页器样式
.pager-container {
  padding: 20rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
}

.pager-info {
  text-align: center;
  margin-bottom: 20rpx;

  .pager-text {
    font-size: 24rpx;
    color: #666;
  }
}

.pager-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.pager-btn {
  min-width: 120rpx;
  height: 60rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  background: #fff;
  color: #333;
  font-size: 26rpx;

  &:disabled {
    color: #ccc;
    background: #f5f5f5;
    border-color: #d9d9d9;
  }

  &:not(:disabled):active {
    background: #f0f0f0;
  }
}

.page-numbers {
  display: flex;
  gap: 10rpx;
}

.page-btn {
  min-width: 60rpx;
  height: 60rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  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);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>