分页组件
This commit is contained in:
WindowBird
parent
8dfe079690
commit
f4e5481108
308
components/pagination/pagination.vue
Normal file
308
components/pagination/pagination.vue
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
<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>
|
||||
190
composables/usePagination.js
Normal file
190
composables/usePagination.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
import { ref, computed } from 'vue'
|
||||
|
||||
/**
|
||||
* 分页管理组合式函数
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {Function} options.fetchData - 获取数据的API函数
|
||||
* @param {Object} options.defaultParams - 默认查询参数
|
||||
* @param {string} options.mode - 分页模式：'loadMore' 或 'pager'
|
||||
* @param {number} options.pageSize - 每页数量
|
||||
* @returns {Object} 分页相关的状态和方法
|
||||
*/
|
||||
export function usePagination(options = {}) {
|
||||
const {
|
||||
fetchData,
|
||||
defaultParams = {},
|
||||
mode = 'loadMore',
|
||||
pageSize = 10
|
||||
} = options
|
||||
|
||||
// 基础状态
|
||||
const list = ref([])
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
// 分页参数
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize,
|
||||
...defaultParams
|
||||
})
|
||||
|
||||
// 分页信息
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize,
|
||||
totalPages: 0
|
||||
})
|
||||
|
||||
// 上拉加载相关
|
||||
const noMore = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const hasData = computed(() => list.value.length > 0)
|
||||
const isEmpty = computed(() => !loading.value && list.value.length === 0)
|
||||
const canLoadMore = computed(() => mode === 'loadMore' && !noMore.value && !loading.value)
|
||||
|
||||
/**
|
||||
* 获取数据列表
|
||||
* @param {boolean} isRefresh - 是否为刷新操作
|
||||
*/
|
||||
const getList = async (isRefresh = false) => {
|
||||
if (loading.value) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
// 如果是刷新，重置页码
|
||||
if (isRefresh) {
|
||||
queryParams.value.pageNum = 1
|
||||
noMore.value = false
|
||||
}
|
||||
|
||||
const res = await fetchData(queryParams.value)
|
||||
|
||||
// 处理响应数据
|
||||
const newData = res?.rows || []
|
||||
const total = res?.total || 0
|
||||
|
||||
// 更新分页信息
|
||||
pagination.value = {
|
||||
total,
|
||||
currentPage: queryParams.value.pageNum,
|
||||
pageSize,
|
||||
totalPages: Math.ceil(total / pageSize)
|
||||
}
|
||||
|
||||
// 更新数据列表
|
||||
if (isRefresh || queryParams.value.pageNum === 1) {
|
||||
list.value = newData
|
||||
} else {
|
||||
list.value = [...list.value, ...newData]
|
||||
}
|
||||
|
||||
// 检查是否还有更多数据
|
||||
if (mode === 'loadMore') {
|
||||
noMore.value = queryParams.value.pageNum * pageSize >= total
|
||||
}
|
||||
|
||||
console.log(`获取数据成功: 第${queryParams.value.pageNum}页，共${newData.length}条`)
|
||||
|
||||
} catch (err) {
|
||||
console.error('获取数据失败:', err)
|
||||
error.value = err
|
||||
|
||||
// 显示错误提示
|
||||
uni.showToast({
|
||||
title: '数据加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新数据
|
||||
*/
|
||||
const refresh = () => {
|
||||
getList(true)
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载下一页（上拉加载模式）
|
||||
*/
|
||||
const loadMore = () => {
|
||||
if (!canLoadMore.value) return
|
||||
|
||||
queryParams.value.pageNum++
|
||||
getList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到指定页（分页器模式）
|
||||
* @param {number} page - 目标页码
|
||||
*/
|
||||
const goToPage = (page) => {
|
||||
if (page < 1 || page > pagination.value.totalPages || page === queryParams.value.pageNum) {
|
||||
return
|
||||
}
|
||||
|
||||
queryParams.value.pageNum = page
|
||||
getList(true)
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置分页状态
|
||||
*/
|
||||
const reset = () => {
|
||||
list.value = []
|
||||
loading.value = false
|
||||
error.value = null
|
||||
noMore.value = false
|
||||
queryParams.value.pageNum = 1
|
||||
pagination.value = {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize,
|
||||
totalPages: 0
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新查询参数
|
||||
* @param {Object} newParams - 新的查询参数
|
||||
*/
|
||||
const updateParams = (newParams) => {
|
||||
queryParams.value = {
|
||||
...queryParams.value,
|
||||
...newParams,
|
||||
pageNum: 1 // 重置页码
|
||||
}
|
||||
reset()
|
||||
getList()
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
list,
|
||||
loading,
|
||||
error,
|
||||
noMore,
|
||||
pagination,
|
||||
queryParams,
|
||||
|
||||
// 计算属性
|
||||
hasData,
|
||||
isEmpty,
|
||||
canLoadMore,
|
||||
|
||||
// 方法
|
||||
getList,
|
||||
refresh,
|
||||
loadMore,
|
||||
goToPage,
|
||||
reset,
|
||||
updateParams
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading-container">
|
||||
<view v-if="loading && list.length === 0" class="loading-container">
|
||||
<text class="loading-text">正在加载...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<view v-else-if="list.length === 0 && !loading" class="empty-container">
|
||||
<view v-else-if="isEmpty" class="empty-container">
|
||||
<view class="empty-icon">📋</view>
|
||||
<text class="empty-text">暂无订单数据</text>
|
||||
</view>
|
||||
|
|
@ -52,23 +52,60 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多状态 -->
|
||||
<view v-if="noData && list.length > 0" class="load-more">
|
||||
<text class="no-more-text">没有更多数据了</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
:mode="'loadMore'"
|
||||
:list="list"
|
||||
:loading="loading"
|
||||
:no-more="noMore"
|
||||
:total="pagination.total"
|
||||
:current-page="pagination.currentPage"
|
||||
:page-size="pagination.pageSize"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onMounted, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { usePagination } from '@/composables/usePagination.js'
|
||||
import { getMyOrder } from '@/api/order/myOrder.js'
|
||||
import { onUnload, onReachBottom } from '@dcloudio/uni-app'
|
||||
import Pagination from '@/components/pagination/pagination.vue'
|
||||
|
||||
const list = ref([])
|
||||
const noData = ref(false)
|
||||
const loading = ref(false)
|
||||
// 使用分页组合式函数
|
||||
const {
|
||||
list,
|
||||
loading,
|
||||
noMore,
|
||||
pagination,
|
||||
getList,
|
||||
loadMore
|
||||
} = usePagination({
|
||||
fetchData: getMyOrder,
|
||||
defaultParams: {
|
||||
orderByColumn: 'createTime',
|
||||
isAsc: 'descending'
|
||||
},
|
||||
mode: 'loadMore',
|
||||
pageSize: 6
|
||||
})
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
})
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
console.log('页码变化:', page)
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单状态/物流状态映射工具
|
||||
|
|
@ -96,7 +133,7 @@ function mapOrderStatus(type, value) {
|
|||
},
|
||||
}
|
||||
|
||||
return maps[type]?.[value] || '未知状态' // 添加默认值
|
||||
return maps[type]?.[value] || '未知状态'
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -163,57 +200,6 @@ function formatTime(timeStr) {
|
|||
}
|
||||
}
|
||||
|
||||
//定义data参数
|
||||
const queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
}
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
if (noData.value || loading.value) return
|
||||
queryParams.pageNum++
|
||||
getList()
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
const getList = async () => {
|
||||
if (loading.value) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
let res = await getMyOrder(queryParams)
|
||||
|
||||
// 确保 res.data 存在且是数组
|
||||
const newData = res?.rows || []
|
||||
|
||||
// 如果是第一页，直接替换数据
|
||||
if (queryParams.pageNum === 1) {
|
||||
list.value = newData
|
||||
} else {
|
||||
list.value = [...list.value, ...newData]
|
||||
}
|
||||
|
||||
if (queryParams.pageNum * queryParams.pageSize >= res.total) {
|
||||
noData.value = true
|
||||
}
|
||||
|
||||
console.log('订单列表:', list.value)
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '获取订单列表失败',
|
||||
icon: 'none',
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 点击订单卡片
|
||||
const onClick = item => {
|
||||
console.log('点击订单:', item)
|
||||
|
|
@ -222,13 +208,6 @@ const onClick = item => {
|
|||
url: `/pages/myOrder/orderDetail?id=${item.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
onUnload(() => {
|
||||
// 清理数据
|
||||
list.value = []
|
||||
noData.value = false
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user