实现分页组件多页面替换

pages/mall/admin/order/order-management/index.uvue

@@ -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;