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

实现分页组件多页面替换

Browse Source
This commit is contained in:
huangzhenbao
2026-03-16 15:10:07 +08:00
parent 64b714a0eb
commit b449826758
7 changed files with 413 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
pages/mall/admin/order/aftersales-order/index.uvue
View File

@@ -76,31 +76,30 @@
</view>
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
<text class="p-btn active">1</text>
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
</view>
</view>
<CommonPagination
v-if="total > 0"
:total="total"
:loading="false"
:currentPage="currentPage"
:pageSize="pageSize"
:pageSizeOptionLabels="pageSizeOptionLabels"
:pageSizeIndex="pageSizeIndex"
:visiblePages="visiblePages"
:totalPage="totalPage"
:jumpPageInput="jumpPageInput"
@page-size-change="handlePageSizeChange"
@page-change="handlePageChange"
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
@jump-page="handleJumpPage"
/>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
interface RefundOrder {
id: number
@@ -118,6 +117,50 @@ interface RefundOrder {
const searchQuery = ref('')
const total = ref(11)
// 分页状态适配层
const currentPage = ref(1)
const pageSize = ref(15)
let jumpPageInput = ''
const pageSizeOptions = [10, 15, 20, 30, 50]
const pageSizeOptionLabels = computed((): string[] => pageSizeOptions.map((s: number): string => `${s} 条/页`))
const pageSizeIndex = computed((): number => {
const i = pageSizeOptions.indexOf(pageSize.value)
return i === -1 ? 0 : i
})
const totalPage = computed((): number => Math.ceil(total.value / pageSize.value))
const visiblePages = computed((): number[] => {
const cur = currentPage.value
const tot = totalPage.value
if (tot <= 7) {
const pages: number[] = []
for (let i = 1; i <= tot; i++) pages.push(i)
return pages
}
if (cur <= 4) return [1, 2, 3, 4, 5, -1, tot]
if (cur >= tot - 3) return [1, -1, tot - 4, tot - 3, tot - 2, tot - 1, tot]
return [1, -1, cur - 1, cur, cur + 1, -1, tot]
})
const handlePageChange = (p: number) => {
if (p < 1 || p > totalPage.value || p === currentPage.value) return
currentPage.value = p
jumpPageInput = ''
}
const handlePageSizeChange = (e: any) => {
let val = 0
if (typeof e.detail.value === 'string') val = parseInt(e.detail.value)
else val = e.detail.value as number
pageSize.value = pageSizeOptions[val]
currentPage.value = 1
}
const handleJumpPage = () => {
let jumpTo = parseInt(jumpPageInput)
if (isNaN(jumpTo)) return
if (jumpTo < 1) jumpTo = 1
if (jumpTo > totalPage.value) jumpTo = totalPage.value
jumpPageInput = String(jumpTo)
if (jumpTo !== currentPage.value) currentPage.value = jumpTo
}
const orderList = ref<RefundOrder[]>([
{
id: 1,
@@ -376,34 +419,7 @@ const handleQuery = () => { console.log('Querying...') }
.op-txt { font-size: 14px; }
.op-arrow { font-size: 10px; }
/* 分页 */
.pagination-footer {
padding: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 14px; color: #606266; }
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 32px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 14px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
/* 分页区域已迁至 CommonPagination 组件 */
</style>

110
pages/mall/admin/order/cashier-order/index.uvue
View File

@@ -58,24 +58,22 @@
</view>
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
<text class="p-btn active">1</text>
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
</view>
</view>
<CommonPagination
v-if="total > 0"
:total="total"
:loading="false"
:currentPage="currentPage"
:pageSize="pageSize"
:pageSizeOptionLabels="pageSizeOptionLabels"
:pageSizeIndex="pageSizeIndex"
:visiblePages="visiblePages"
:totalPage="totalPage"
:jumpPageInput="jumpPageInput"
@page-size-change="handlePageSizeChange"
@page-change="handlePageChange"
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
@jump-page="handleJumpPage"
/>
</view>
</view>
@@ -104,7 +102,8 @@
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
interface CashierOrder {
orderId: string
@@ -117,6 +116,50 @@ interface CashierOrder {
const orderId = ref('')
const username = ref('')
const total = ref(12)
// 分页状态适配层
const currentPage = ref(1)
const pageSize = ref(15)
let jumpPageInput = ''
const pageSizeOptions = [10, 15, 20, 30, 50]
const pageSizeOptionLabels = computed((): string[] => pageSizeOptions.map((s: number): string => `${s} 条/页`))
const pageSizeIndex = computed((): number => {
const i = pageSizeOptions.indexOf(pageSize.value)
return i === -1 ? 0 : i
})
const totalPage = computed((): number => Math.ceil(total.value / pageSize.value))
const visiblePages = computed((): number[] => {
const cur = currentPage.value
const tot = totalPage.value
if (tot <= 7) {
const pages: number[] = []
for (let i = 1; i <= tot; i++) pages.push(i)
return pages
}
if (cur <= 4) return [1, 2, 3, 4, 5, -1, tot]
if (cur >= tot - 3) return [1, -1, tot - 4, tot - 3, tot - 2, tot - 1, tot]
return [1, -1, cur - 1, cur, cur + 1, -1, tot]
})
const handlePageChange = (p: number) => {
if (p < 1 || p > totalPage.value || p === currentPage.value) return
currentPage.value = p
jumpPageInput = ''
}
const handlePageSizeChange = (e: any) => {
let val = 0
if (typeof e.detail.value === 'string') val = parseInt(e.detail.value)
else val = e.detail.value as number
pageSize.value = pageSizeOptions[val]
currentPage.value = 1
}
const handleJumpPage = () => {
let jumpTo = parseInt(jumpPageInput)
if (isNaN(jumpTo)) return
if (jumpTo < 1) jumpTo = 1
if (jumpTo > totalPage.value) jumpTo = totalPage.value
jumpPageInput = String(jumpTo)
if (jumpTo !== currentPage.value) currentPage.value = jumpTo
}
const orderList = ref<CashierOrder[]>([
{ orderId: 'hy536720518414336000', userInfo: '东流 | 76058', payPrice: 1.00, discountPrice: 0.00, payTime: '2026-01-21 01:35:43' },
{ orderId: 'hy529509398574268416', userInfo: '半个栗子 | 81997', payPrice: 10000.00, discountPrice: 0.00, payTime: '2026-01-01 04:01:18' },
@@ -270,34 +313,7 @@ const closeQrModal = () => {
.td-txt { font-size: 14px; color: #515a6e; }
/* 分页 */
.pagination-footer {
padding: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 14px; color: #606266; }
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 32px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 14px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
/* 分页区域已迁至 CommonPagination 组件 */
/* Modal 弹窗逻辑 */
.modal-mask {

140
pages/mall/admin/order/order-management/index.uvue
View File

@@ -190,24 +190,22 @@
</view>
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-left">
<text class="count-text">共 {{ filteredOrders.length }} 条</text>
<view class="page-size-select">
<text>10条/页</text>
<view class="arrow-down"></view>
</view>
</view>
<view class="page-right">
<view class="page-btn disabled"><text>‹</text></view>
<view class="page-num active"><text>1</text></view>
<view class="page-num"><text>2</text></view>
<view class="page-num"><text>3</text></view>
<view class="page-btns-more"><text>...</text></view>
<view class="page-num"><text>10</text></view>
<view class="page-btn"><text>›</text></view>
</view>
</view>
<CommonPagination
v-if="filteredOrders.length > 0 || loading"
:total="filteredOrders.length"
:loading="loading"
:currentPage="currentPage"
:pageSize="pageSize"
:pageSizeOptionLabels="pageSizeOptionLabels"
:pageSizeIndex="pageSizeIndex"
:visiblePages="visiblePages"
:totalPage="totalPage"
:jumpPageInput="jumpPageInput"
@page-size-change="handlePageSizeChange"
@page-change="handlePageChange"
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
@jump-page="handleJumpPage"
/>
</view>
</view>
@@ -223,11 +221,58 @@
import { ref, computed, onMounted } from 'vue'
import { supabase } from '@/components/supadb/aksupainstance.uts'
import OrderDetailDrawer from './components/OrderDetailDrawer.uvue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
const activeTab = ref(0)
const loading = ref(false)
const searchKeyword = ref('')
// 分页状态适配层
const currentPage = ref(1)
const pageSize = ref(10)
let jumpPageInput = ''
const pageSizeOptions = [10, 20, 30, 50, 100]
const pageSizeOptionLabels = computed((): string[] => pageSizeOptions.map((s: number): string => `${s} 条/页`))
const pageSizeIndex = computed((): number => {
const i = pageSizeOptions.indexOf(pageSize.value)
return i === -1 ? 0 : i
})
const totalPage = computed((): number => Math.ceil(filteredOrders.value.length / pageSize.value))
const visiblePages = computed((): number[] => {
const cur = currentPage.value
const tot = totalPage.value
if (tot <= 7) {
const pages: number[] = []
for (let i = 1; i <= tot; i++) pages.push(i)
return pages
}
if (cur <= 4) return [1, 2, 3, 4, 5, -1, tot]
if (cur >= tot - 3) return [1, -1, tot - 4, tot - 3, tot - 2, tot - 1, tot]
return [1, -1, cur - 1, cur, cur + 1, -1, tot]
})
const handlePageChange = (p: number) => {
if (loading.value || p < 1 || p > totalPage.value || p === currentPage.value) return
currentPage.value = p
jumpPageInput = ''
}
const handlePageSizeChange = (e: any) => {
if (loading.value) return
let val = 0
if (typeof e.detail.value === 'string') val = parseInt(e.detail.value)
else val = e.detail.value as number
pageSize.value = pageSizeOptions[val]
currentPage.value = 1
}
const handleJumpPage = () => {
if (loading.value) return
let jumpTo = parseInt(jumpPageInput)
if (isNaN(jumpTo)) return
if (jumpTo < 1) jumpTo = 1
if (jumpTo > totalPage.value) jumpTo = totalPage.value
jumpPageInput = String(jumpTo)
if (jumpTo !== currentPage.value) currentPage.value = jumpTo
}
// Dropdown 状态
const activeDropdownId = ref('')
const showDetail = ref(false)
@@ -931,65 +976,6 @@ onMounted(() => {
border-bottom: 4px solid #1890ff;
margin-bottom: 3px;
}
.pagination-footer {
padding: 16px 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.page-left {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
.count-text { font-size: 14px; color: #595959; }
}
.page-size-select {
height: 28px;
padding: 0 10px;
border: 1px solid #d9d9d9;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
text { font-size: 12px; color: #595959; }
}
.page-right {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.page-num, .page-btn, .page-btns-more {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d9d9d9;
border-radius: 4px;
text { font-size: 14px; color: #595959; }
cursor: pointer;
}
.page-num.active {
border-color: #1890ff;
text { color: #1890ff; }
}
.page-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.page-btns-more { border: none; }
.order-time {
font-size: 12px;
color: #999;

110
pages/mall/admin/order/write-off-records/index.uvue
View File

@@ -74,31 +74,30 @@
</view>
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
<text class="p-btn active">1</text>
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
</view>
</view>
<CommonPagination
v-if="total > 0"
:total="total"
:loading="false"
:currentPage="currentPage"
:pageSize="pageSize"
:pageSizeOptionLabels="pageSizeOptionLabels"
:pageSizeIndex="pageSizeIndex"
:visiblePages="visiblePages"
:totalPage="totalPage"
:jumpPageInput="jumpPageInput"
@page-size-change="handlePageSizeChange"
@page-change="handlePageChange"
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
@jump-page="handleJumpPage"
/>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
interface WriteOffRecord {
orderId: string
@@ -115,6 +114,50 @@ interface WriteOffRecord {
const searchQuery = ref('')
const total = ref(10)
// 分页状态适配层
const currentPage = ref(1)
const pageSize = ref(15)
let jumpPageInput = ''
const pageSizeOptions = [10, 15, 20, 30, 50]
const pageSizeOptionLabels = computed((): string[] => pageSizeOptions.map((s: number): string => `${s} 条/页`))
const pageSizeIndex = computed((): number => {
const i = pageSizeOptions.indexOf(pageSize.value)
return i === -1 ? 0 : i
})
const totalPage = computed((): number => Math.ceil(total.value / pageSize.value))
const visiblePages = computed((): number[] => {
const cur = currentPage.value
const tot = totalPage.value
if (tot <= 7) {
const pages: number[] = []
for (let i = 1; i <= tot; i++) pages.push(i)
return pages
}
if (cur <= 4) return [1, 2, 3, 4, 5, -1, tot]
if (cur >= tot - 3) return [1, -1, tot - 4, tot - 3, tot - 2, tot - 1, tot]
return [1, -1, cur - 1, cur, cur + 1, -1, tot]
})
const handlePageChange = (p: number) => {
if (p < 1 || p > totalPage.value || p === currentPage.value) return
currentPage.value = p
jumpPageInput = ''
}
const handlePageSizeChange = (e: any) => {
let val = 0
if (typeof e.detail.value === 'string') val = parseInt(e.detail.value)
else val = e.detail.value as number
pageSize.value = pageSizeOptions[val]
currentPage.value = 1
}
const handleJumpPage = () => {
let jumpTo = parseInt(jumpPageInput)
if (isNaN(jumpTo)) return
if (jumpTo < 1) jumpTo = 1
if (jumpTo > totalPage.value) jumpTo = totalPage.value
jumpPageInput = String(jumpTo)
if (jumpTo !== currentPage.value) currentPage.value = jumpTo
}
const recordList = ref<WriteOffRecord[]>([
{
orderId: 'cp470547161164021760',
@@ -342,34 +385,7 @@ const handleQuery = () => { console.log('Searching...') }
overflow: hidden;
}
/* 分页 */
.pagination-footer {
padding: 24px 0 0 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 14px; color: #606266; }
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 32px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 14px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
/* 分页区域已迁至 CommonPagination 组件 */
</style>