kuailelunwen_new_houtai/src/components/Page2.vue

<template>
  <div class="pagination flex gap10">
    <!-- 首页按钮 -->
    <GuipButton size="form" v-if="showFirstPage" @click="goToFirstPage" :disabled="page === 1">
      首页
    </GuipButton>

    <!-- 上一页按钮 -->
    <GuipButton size="form" v-if="showPrevPage" @click="goToPrevPage" :disabled="page === 1">
      上一页
    </GuipButton>

    <!-- 当前页码 -->
    <span v-if="showCurrentPage">第{{ page }}页</span>

    <!-- 下一页按钮 -->
    <GuipButton size="form" v-if="showNextPage" @click="goToNextPage" :disabled="!hasNextPage">
      下一页
    </GuipButton>

    <!-- 尾页按钮 -->
    <GuipButton size="form" v-if="showLastPage" @click="goToLastPage">
      尾页
    </GuipButton>

    <!-- 跳转输入 -->
    <div class="page-jump flex gap10" v-if="showJump">
      <input type="number" v-model.number="jumpPage" min="1" :max="totalPages">
      <GuipButton size="form" @click="handleJump">跳转</GuipButton>
    </div>

    <!-- 总记录数 -->
    <span v-if="showTotalRecords" class="total-records">共{{ totalRecords }}条记录</span>
  </div>
</template>

<script>
import GuipButton from '@/components/GuipButton.vue';
// 父组件使用
// <!-- <Page
//                         :api-url="'/agentnew/ajax_get_check_order_list'" 
//                         :page-size="10"
//                         @update="handleUpdate"
//                         @error="handleError"
//                         @changeLoad="changeLoad"
//                     /> -->
export default {
  name: 'Pagination',
  components: { GuipButton },
  props: {
    // 接口URL
    apiUrl: {
      type: String,
      required: true
    },
    // 每页条数
    pageSize: {
      type: Number,
      default: 10
    },
    // 其他请求参数
    extraParams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      page: 1,
      jumpPage: 1,
      end_page: 0,
      hasNextPage: false,
      minId: null,
      maxId: null,
      totalRecords: 0,
      buttonType: '',
      totalPages: 1,
      token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
    }
  },
  computed: {
    // 是否显示首页按钮
    showFirstPage() {
      return this.page > 2
    },
    // 是否显示上一页按钮
    showPrevPage() {
      return this.page > 1
    },
    // 是否显示当前页码
    showCurrentPage() {
      return true
    },
    // 是否显示下一页按钮
    showNextPage() {
      return this.hasNextPage
    },
    // 是否显示尾页按钮
    showLastPage() {
      return !(this.end_page > 0) || this.hasNextPage
    },
    // 是否显示跳转
    showJump() {
      return true
    },
    // 是否显示总记录数
    showTotalRecords() {
      return this.totalRecords > 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 构建请求参数
    buildParams() {
      const params = {
        pagesize: this.pageSize,
        page: this.page,
        ...this.extraParams
      }

      // 如果不是第一页，添加maxid或minid
      if (this.page > 1) {
        if (this.page === this.totalPages) {
          // 从尾页往前翻
          params.maxid = this.maxId
        } else {
          // 正常翻页
          if (this.buttonType == 'prev') {
            params.maxid = this.maxId
          } else {
            params.minid = this.minId
          }
        }
      }
      if (this.end_page > 0) {
        delete params.page
        delete params.maxid
        delete params.minid
        params.end_page = this.end_page
      } else {
        delete params.end_page
      }

      console.log(params, 'params======');
      return params
    },

    // 获取数据
    async fetchData() {
      console.log('-----执行了');
      this.$emit('changeLoad', true)
      try {
        this.$http('POST', this.apiUrl, this.buildParams(), {
          headers: {
            'Auth': this.token
          }
        }).then(response => {
          const data = response.data
          this.hasNextPage = data.is_has_next_page
          this.minId = data.minid || null
          this.maxId = data.maxid || null
          this.totalRecords = data.total_records || 0
          if (this.totalRecords > 0) {
            // 计算总页数
            this.totalPages = Math.ceil(this.totalRecords / this.pageSize)
            this.page = this.totalPages || 1
            this.jumpPage = this.page
            this.end_page = 1;
          }
          // 通知父组件数据更新
          this.$emit('update', data)
          this.$emit('changeLoad', false)
        })
      } catch (error) {
        console.error('分页请求失败:', error)
        this.$emit('error', error)
        this.$emit('changeLoad', false)
      } finally {
        this.$emit('changeLoad', false)
      }
    },

    // 跳转到首页
    goToFirstPage() {
      if (this.page === 1) return
      this.page = 1
      this.jumpPage = 1
      this.end_page = 0;
      this.buttonType = ''
      this.fetchData()
    },

    // 跳转到上一页
    goToPrevPage() {
      if (this.page <= 1) return
      this.page--
      this.jumpPage = this.page
      this.end_page = 0;
      this.buttonType = 'prev'
      this.fetchData()
    },

    // 跳转到下一页
    goToNextPage() {
      if (!this.hasNextPage) return
      this.page++
      this.end_page = 0;
      this.jumpPage = this.page
      this.buttonType = 'next'
      this.fetchData()
    },

    // 跳转到尾页
    goToLastPage() {
      // if (this.page === this.totalPages) return
      // this.page = this.totalPages
      // this.jumpPage = this.totalPages
      this.end_page = 1;
      this.buttonType = ''
      this.fetchData()
    },

    // 处理跳转
    handleJump() {
      let page = parseInt(this.jumpPage)

      if (isNaN(page) || page < 1) {
        page = 1
      }
      //  else if (page > this.totalPages) {
      //   page = this.totalPages
      // }

      if (page === this.page) return

      this.page = page
      this.jumpPage = page
      this.fetchData()
    }
  },
  watch: {
    apiUrl() {
      this.page = 1
      this.fetchData()
    },
    pageSize() {
      this.page = 1
      this.fetchData()
    },
    extraParams: {
      deep: true,
      handler() {
        this.page = 1
        this.fetchData()
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 20px 0;
  gap: 10px;
}

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

.total-records {
  margin-left: 10px;
  color: #666;
}
</style>