|
@@ -128,21 +128,20 @@
|
|
|
<view class="pagination">
|
|
<view class="pagination">
|
|
|
<view class="page-item prev" :class="{ disabled: pagination.current === 1 }"
|
|
<view class="page-item prev" :class="{ disabled: pagination.current === 1 }"
|
|
|
@click="handlePageChange('prev')">
|
|
@click="handlePageChange('prev')">
|
|
|
- <uni-icons type="arrowright" size="16" color="#666" class="arrow-left" />
|
|
|
|
|
- <!-- <text>上一页</text> -->
|
|
|
|
|
|
|
+ <uni-icons type="arrowright" size="14" :color="pagination.current === 1 ? '#c0c4cc' : '#606266'" class="arrow-left"/>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="page-numbers">
|
|
<view class="page-numbers">
|
|
|
- <view v-for="page in visiblePages" :key="page" class="page-number"
|
|
|
|
|
- :class="{ active: pagination.current === page }" @click="handlePageChange(page)">
|
|
|
|
|
|
|
+ <view v-for="(page, index) in visiblePages" :key="index" class="page-number"
|
|
|
|
|
+ :class="{ active: pagination.current === page, ellipsis: page === '...' }"
|
|
|
|
|
+ @click="page !== '...' && handlePageChange(page)">
|
|
|
{{ page }}
|
|
{{ page }}
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="page-item next" :class="{ disabled: pagination.current === pagination.pages }"
|
|
<view class="page-item next" :class="{ disabled: pagination.current === pagination.pages }"
|
|
|
@click="handlePageChange('next')">
|
|
@click="handlePageChange('next')">
|
|
|
- <!-- <text>下一页</text> -->
|
|
|
|
|
- <uni-icons type="arrowright" size="16" color="#666" />
|
|
|
|
|
|
|
+ <uni-icons type="arrowright" size="14" :color="pagination.current === pagination.pages ? '#c0c4cc' : '#606266'" />
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -341,15 +340,29 @@ const pageSizeIndex = computed(() => {
|
|
|
|
|
|
|
|
// 可见页码
|
|
// 可见页码
|
|
|
const visiblePages = computed(() => {
|
|
const visiblePages = computed(() => {
|
|
|
- const maxVisible = 5
|
|
|
|
|
- const half = Math.floor(maxVisible / 2)
|
|
|
|
|
- let start = Math.max(1, pagination.value.current - half)
|
|
|
|
|
- let end = Math.min(pagination.value.pages, start + maxVisible - 1)
|
|
|
|
|
-
|
|
|
|
|
- if (end - start + 1 < maxVisible) {
|
|
|
|
|
- start = Math.max(1, end - maxVisible + 1)
|
|
|
|
|
|
|
+ const totalPages = pagination.value.pages
|
|
|
|
|
+ const currentPage = pagination.value.current
|
|
|
|
|
+ const maxVisible = 4 // 显示的页码数量(包括第一页和最后一页)
|
|
|
|
|
+
|
|
|
|
|
+ if (totalPages <= maxVisible) {
|
|
|
|
|
+ return Array.from({ length: totalPages }, (_, i) => i + 1)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ let pages = []
|
|
|
|
|
+
|
|
|
|
|
+ if (currentPage <= 2) {
|
|
|
|
|
+ // 当前页靠前:[1, 2, '...', 最后一页]
|
|
|
|
|
+ pages = [1, 2, '...', totalPages]
|
|
|
|
|
+ } else if (currentPage >= totalPages - 1) {
|
|
|
|
|
+ // 当前页靠后:[1, '...', 倒数第二页, 最后一页]
|
|
|
|
|
+ pages = [1, '...', totalPages - 1, totalPages]
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 当前页在中间:由于只显示4个,去掉后面的...直接紧凑展示:[1, '...', 当前页, 最后一页]
|
|
|
|
|
+ // 或者:[1, 当前页, '...', 最后一页] 以确保当前页能点到
|
|
|
|
|
+ pages = [1, '...', currentPage, totalPages]
|
|
|
}
|
|
}
|
|
|
- return Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
|
|
|
|
|
|
+
|
|
|
|
|
+ return pages
|
|
|
})
|
|
})
|
|
|
// ========== 工具函数 ==========
|
|
// ========== 工具函数 ==========
|
|
|
// 获取表头样式
|
|
// 获取表头样式
|
|
@@ -974,39 +987,33 @@ defineExpose({
|
|
|
.page-item {
|
|
.page-item {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
padding: 0 px2rpx(12);
|
|
padding: 0 px2rpx(12);
|
|
|
|
|
+ min-width: px2rpx(32);
|
|
|
height: px2rpx(30);
|
|
height: px2rpx(30);
|
|
|
background-color: var(--color-white);
|
|
background-color: var(--color-white);
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
|
|
- border-radius: px2rpx(8);
|
|
|
|
|
- font-size: px2rpx(16);
|
|
|
|
|
|
|
+ border-radius: px2rpx(4);
|
|
|
|
|
+ font-size: px2rpx(14);
|
|
|
color: #606266;
|
|
color: #606266;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
|
margin: 0 px2rpx(6);
|
|
margin: 0 px2rpx(6);
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .page-item.prev {
|
|
|
|
|
- margin-right: px2rpx(10);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .page-item.next {
|
|
|
|
|
- margin-left: px2rpx(10);
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .page-item:not(.disabled):hover {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- border-color: #cf1322;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &:not(.disabled):hover {
|
|
|
|
|
+ color: #cf1322;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .page-item.disabled {
|
|
|
|
|
- opacity: 0.5;
|
|
|
|
|
- cursor: not-allowed;
|
|
|
|
|
- pointer-events: none;
|
|
|
|
|
|
|
+ &.disabled {
|
|
|
|
|
+ opacity: 0.5;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ color: #c0c4cc;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.page-numbers {
|
|
.page-numbers {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
+ flex: 1;
|
|
|
gap: px2rpx(8);
|
|
gap: px2rpx(8);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1018,26 +1025,38 @@ defineExpose({
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- min-width: px2rpx(40);
|
|
|
|
|
- height: px2rpx(30);
|
|
|
|
|
|
|
+ min-width: px2rpx(20);
|
|
|
|
|
+ height: px2rpx(26);
|
|
|
padding: 0 px2rpx(4);
|
|
padding: 0 px2rpx(4);
|
|
|
background-color: var(--color-white);
|
|
background-color: var(--color-white);
|
|
|
- border-radius: px2rpx(8);
|
|
|
|
|
- font-size: px2rpx(16);
|
|
|
|
|
|
|
+ border-radius: px2rpx(4);
|
|
|
|
|
+ font-size: px2rpx(12);
|
|
|
color: #606266;
|
|
color: #606266;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
|
- }
|
|
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+
|
|
|
|
|
+ &.ellipsis {
|
|
|
|
|
+ cursor: default;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: #c0c4cc;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ min-width: px2rpx(24);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .page-number:hover {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- border-color: #cf1322;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &:not(.ellipsis):hover {
|
|
|
|
|
+ color: #cf1322;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .page-number.active {
|
|
|
|
|
- background-color: #cf1322;
|
|
|
|
|
- border-color: #cf1322;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ background-color: #cf1322;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ border-color: #cf1322;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.pagination-info {
|
|
.pagination-info {
|
|
@@ -1064,16 +1083,37 @@ defineExpose({
|
|
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
@media screen and (max-width: 768px) {
|
|
|
.pagination {
|
|
.pagination {
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
|
+ flex-wrap: nowrap;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
|
|
+
|
|
|
|
|
+ &::-webkit-scrollbar {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page-numbers {
|
|
|
|
|
+ flex: none;
|
|
|
|
|
+ gap: px2rpx(4);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.page-item {
|
|
.page-item {
|
|
|
- padding: 0 px2rpx(16);
|
|
|
|
|
|
|
+ padding: 0 px2rpx(8);
|
|
|
|
|
+ min-width: px2rpx(28);
|
|
|
|
|
+ margin: 0 px2rpx(2);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.page-number {
|
|
.page-number {
|
|
|
- min-width: px2rpx(60);
|
|
|
|
|
|
|
+ min-width: px2rpx(28);
|
|
|
|
|
+ padding: 0 px2rpx(4);
|
|
|
|
|
+ font-size: px2rpx(12);
|
|
|
|
|
+
|
|
|
|
|
+ &.ellipsis {
|
|
|
|
|
+ min-width: px2rpx(16);
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.pagination-info {
|
|
.pagination-info {
|