代码格式化
This commit is contained in:
parent
f4e5481108
commit
04e2fd29bc
|
|
@ -10,130 +10,124 @@ import { ref, computed } from 'vue'
|
|||
* @returns {Object} 分页相关的状态和方法
|
||||
*/
|
||||
export function usePagination(options = {}) {
|
||||
const {
|
||||
fetchData,
|
||||
defaultParams = {},
|
||||
mode = 'loadMore',
|
||||
pageSize = 10
|
||||
} = 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
|
||||
...defaultParams,
|
||||
})
|
||||
|
||||
|
||||
// 分页信息
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize,
|
||||
totalPages: 0
|
||||
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)
|
||||
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'
|
||||
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) => {
|
||||
const goToPage = page => {
|
||||
if (page < 1 || page > pagination.value.totalPages || page === queryParams.value.pageNum) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
queryParams.value.pageNum = page
|
||||
getList(true)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 重置分页状态
|
||||
*/
|
||||
|
|
@ -147,24 +141,24 @@ export function usePagination(options = {}) {
|
|||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize,
|
||||
totalPages: 0
|
||||
totalPages: 0,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 更新查询参数
|
||||
* @param {Object} newParams - 新的查询参数
|
||||
*/
|
||||
const updateParams = (newParams) => {
|
||||
const updateParams = newParams => {
|
||||
queryParams.value = {
|
||||
...queryParams.value,
|
||||
...newParams,
|
||||
pageNum: 1 // 重置页码
|
||||
pageNum: 1, // 重置页码
|
||||
}
|
||||
reset()
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
// 状态
|
||||
list,
|
||||
|
|
@ -173,18 +167,18 @@ export function usePagination(options = {}) {
|
|||
noMore,
|
||||
pagination,
|
||||
queryParams,
|
||||
|
||||
|
||||
// 计算属性
|
||||
hasData,
|
||||
isEmpty,
|
||||
canLoadMore,
|
||||
|
||||
|
||||
// 方法
|
||||
getList,
|
||||
refresh,
|
||||
loadMore,
|
||||
goToPage,
|
||||
reset,
|
||||
updateParams
|
||||
updateParams,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export const DEV_CONFIG = {
|
||||
// 临时token,用于开发测试
|
||||
TEMP_TOKEN:
|
||||
'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjAwMjdjYTRkLTMwOTktNDA4OC04ZTI2LTUzOTQwNGJkZDg0MyJ9.4zQ96QGHIvWy3cJciCPF0e8XWHY2NC9e9svrc9rqNKarnHhiqrAXZ2ZqMfN2AGbSVYVEs6OhUkkrEedupOXYGQ',
|
||||
'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjM2YzUxYWQxLTVmZWMtNDI3Yy1iYjFkLThkYTFmZWE4OWM4MyJ9.Z8ZAPBw-pol_fsLudrWr4tHUn7b-zoMzWxIHnZItI4pW7VH7UsM8dzFwB6aWIzCBnmvnm8T1iTDCEvQT13ihEw',
|
||||
|
||||
// 是否使用临时token
|
||||
USE_TEMP_TOKEN: true,
|
||||
|
|
|
|||
|
|
@ -56,40 +56,34 @@
|
|||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
:mode="'loadMore'"
|
||||
:current-page="pagination.currentPage"
|
||||
:list="list"
|
||||
:loading="loading"
|
||||
:mode="'loadMore'"
|
||||
:no-more="noMore"
|
||||
:total="pagination.total"
|
||||
:current-page="pagination.currentPage"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { onMounted } from 'vue'
|
||||
import { onReachBottom } from '@dcloudio/uni-app'
|
||||
import { usePagination } from '@/composables/usePagination.js'
|
||||
import { getMyOrder } from '@/api/order/myOrder.js'
|
||||
import Pagination from '@/components/pagination/pagination.vue'
|
||||
|
||||
// 使用分页组合式函数
|
||||
const {
|
||||
list,
|
||||
loading,
|
||||
noMore,
|
||||
pagination,
|
||||
getList,
|
||||
loadMore
|
||||
} = usePagination({
|
||||
const { list, loading, noMore, pagination, getList, loadMore } = usePagination({
|
||||
fetchData: getMyOrder,
|
||||
defaultParams: {
|
||||
orderByColumn: 'createTime',
|
||||
isAsc: 'descending'
|
||||
isAsc: 'descending',
|
||||
},
|
||||
mode: 'loadMore',
|
||||
pageSize: 6
|
||||
pageSize: 6,
|
||||
})
|
||||
|
||||
// 页面加载时获取数据
|
||||
|
|
@ -103,7 +97,7 @@ onReachBottom(() => {
|
|||
})
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
const handlePageChange = page => {
|
||||
console.log('页码变化:', page)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user