huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成全部页面分页组件的抽取2

Browse Source
This commit is contained in:
huangzhenbao
2026-03-17 11:21:29 +08:00
parent e266482f88
commit 4041933e42
19 changed files with 344 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
pages/mall/admin/product/reviews/index.uvue
View File

@@ -55,7 +55,7 @@
<view class="th col-op"><text>操作</text></view>
</view>
<view v-for="item in replyList" :key="item.id" class="tr-row">
<view v-for="item in pagedList" :key="item.id" class="tr-row">
<view class="td col-check"><text>□</text></view>
<view class="td col-id"><text>{{ item.id }}</text></view>
<view class="td col-product">
@@ -84,8 +84,8 @@
<!-- 分页 -->
<CommonPagination
v-if="replyList.length > 0"
:total="replyList.length"
v-if="true"
:total="total"
:loading="false"
:currentPage="currentPage"
:pageSize="pageSize"
@@ -146,24 +146,25 @@ const replyList = ref([
}
])
// 分页适配状态
// ========== PAGINATION STATE ==========
const currentPage = ref(1)
const pageSize = ref(10)
let jumpPageInput = ''
const jumpPageInput = ref('')
const pageSizeOptions = [10, 20, 30, 50]
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
const pageSizeIndex = computed(() => {
const idx = pageSizeOptions.indexOf(pageSize.value)
return idx >= 0 ? idx : 0
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
const total = computed(() => replyList.value.length)
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
const pagedList = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
return replyList.value.slice(start, start + pageSize.value)
})
const totalPage = computed(() => Math.max(1, Math.ceil(replyList.value.length / pageSize.value)))
const visiblePages = computed(() => {
const total = totalPage.value
const cur = currentPage.value
if (total <= 7) return Array.from({ length: total }, (_: any, i: number) => i + 1)
if (cur <= 4) return [1, 2, 3, 4, 5, -1, total]
if (cur >= total - 3) return [1, -1, total - 4, total - 3, total - 2, total - 1, total]
return [1, -1, cur - 1, cur, cur + 1, -1, total]
const visiblePages = computed((): number[] => {
const t = totalPage.value; const cur = currentPage.value
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
return [1, -1, cur - 1, cur, cur + 1, -1, t]
})
const handlePageChange = (p: number) => { currentPage.value = p }
const handlePageSizeChange = (e: any) => {
@@ -172,9 +173,10 @@ const handlePageSizeChange = (e: any) => {
currentPage.value = 1
}
const handleJumpPage = () => {
const p = parseInt(jumpPageInput)
const p = parseInt(jumpPageInput.value)
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
}
// ========== END PAGINATION STATE ==========
</script>
<style scoped lang="scss">
@@ -274,7 +276,7 @@ const handleJumpPage = () => {
.col-reply { flex: 1; }
.col-status { width: 100px; }
.col-time { width: 160px; }
.col-op { width: 180px; }
.col-op { width: 180px; display: flex; flex-direction: row; }
.p-img { width: 40px; height: 40px; border-radius: 4px; }
.p-name-txt { font-size: 13px; line-height: 1.4; color: #1890ff; }