zq
3 days ago
3 changed files with 528 additions and 275 deletions
@ -0,0 +1,284 @@ |
|||
<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.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
} |
|||
}, |
|||
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> |
|||
Loading…
Reference in new issue