zq
3 months 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