kuailelunwen_new_houtai/src/components/Page.vue

<template>
  <div class="pagination">
    <!-- 首页按钮 -->
    <button 
      v-if="showHome" 
      @click="goToFirstPage"
      class="pagination-button"
    >
      首页
    </button>
    
    <!-- 上一页按钮 -->
    <button 
      v-if="showPrev" 
      @click="goToPrevPage"
      class="pagination-button"
    >
      上一页
    </button>
    
    <!-- 当前页码显示 -->
    <span v-if="showCurrent" class="current-page">第{{ currentPage }}页</span>
    
    <!-- 下一页按钮 -->
    <button 
      v-if="showNext" 
      @click="goToNextPage"
      class="pagination-button"
    >
      下一页
    </button>
    
    <!-- 尾页按钮/状态 -->
    <button 
      v-if="showLastButton"
      @click="goToLastPage"
      class="pagination-button"
    >
      尾页
    </button>
    <span v-if="showLastText" class="last-page">尾页</span>
    
    <!-- 尾页时的页码显示 -->
    <span v-if="endPageFlag" class="last-page-number">第{{ totalPages }}页</span>
    
    <!-- 跳转控件 -->
    <div class="page-jump">
      <input 
        type="number" 
        v-model="jumpPage" 
        min="1" 
        class="jump-input"
      >
      <button @click="handleJump" class="jump-button">跳转</button>
    </div>
    
    <!-- 尾页时的总记录数 -->
    <span v-if="endPageFlag" class="total-records">共{{ totalRecords }}条记录</span>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 总记录数
    totalRecords: {
      type: [Number,String],
      required: true,
      default: 0
    },
    // 总页数
    totalPages: {
      type: [Number,String],
      required: true,
      default: 1
    },
    // 当前页码
    currentPage: {
      type: [Number,String],
      required: true,
      default: 1
    },
    // 用于下一页的minid
    nextMinId: {
      type: [Number,String],
      default: null
    },
    // 用于上一页的maxid
    prevMaxId: {
      type: [Number,String],
      default: null
    }
  },
  data() {
    return {
      endPageFlag: false, // 尾页标识
      jumpPage: null      // 跳转页码
    };
  },
  computed: {
    // 是否显示首页按钮
    showHome() {
      return this.currentPage > 1;
    },
    // 是否显示上一页按钮
    showPrev() {
      return this.currentPage > 1;
    },
    // 是否显示当前页码
    showCurrent() {
      return !this.endPageFlag;
    },
    // 是否显示下一页按钮
    showNext() {
      return !this.endPageFlag;
    },
    // 是否显示尾页按钮
    showLastButton() {
      return !this.endPageFlag;
    },
    // 是否显示尾页文本
    showLastText() {
      return this.endPageFlag;
    }
  },
  methods: {
    // 跳转到首页
    goToFirstPage() {
      this.endPageFlag = false;
      this.$emit('page-change', {
        page: 1,
        isFirst: true
      });
    },
    
    // 跳转到上一页
    goToPrevPage() {
      this.endPageFlag = false;
      this.$emit('page-change', {
        page: this.currentPage - 1,
        maxid: this.prevMaxId,
        isPrev: true
      });
    },
    
    // 跳转到下一页
    goToNextPage() {
      this.endPageFlag = false;
      this.$emit('page-change', {
        page: this.currentPage + 1,
        minid: this.nextMinId,
        isNext: true
      });
    },
    
    // 跳转到尾页
    goToLastPage() {
      this.endPageFlag = true;
      this.$emit('page-change', {
        page: this.totalPages,
        isLast: true
      });
    },
    
    // 处理跳转
    handleJump() {
      if (!this.jumpPage || this.jumpPage < 1) {
        return;
      }
      if (this.totalPages > 0 && this.jumpPage > this.totalPages) {
        return;
      }
      
      this.endPageFlag = this.jumpPage === this.totalPages;
      
      this.$emit('page-change', {
        page: this.jumpPage,
        isJump: true
      });
      
      this.jumpPage = null;
    }
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.pagination-button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  border-radius: 4px;
  cursor: pointer;
}

.pagination-button:hover {
  background: #e8e8e8;
}

.current-page, .last-page, .last-page-number, .total-records {
  padding: 0 8px;
  font-size: 14px;
}

.page-jump {
  display: flex;
  gap: 4px;
}

.jump-input {
  width: 50px;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.jump-button {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
}

.jump-button:hover {
  background: #e0e0e0;
}
</style>