实现分页组件多页面替换

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

@@ -162,30 +162,82 @@
       </view>
 
       <!-- 5. 分页 -->
-      <view class="pagination-row">
-        <text class="total">共 {{ total }} 条</text>
-        <view class="page-ctrl">
-          <text class="page-btn disabled">{"<"}</text>
-          <text class="page-num active">1</text>
-          <text class="page-num">2</text>
-          <text class="page-btn">{">"}</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>
     </template>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
 import StatusSwitch from '@/components/StatusSwitch.uvue'
 import supa, { ensureSupabaseReady } from '@/components/supadb/aksupainstance'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 const hasShop = ref(false)
 const shopLoading = ref(true)
 
 const total = ref(0)
+
+// 分页状态适配层
+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(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 activeStatus = ref('selling')
 const activeDropdownId = ref<number | null>(null)
 
@@ -689,34 +741,7 @@ function moveToRecycle(id: number) {
   .arrow { font-size: 10px; color: #1890ff; margin-left: 2px; }
 }
 
-.pagination-row {
-  padding: 24px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 16px;
-  .total { font-size: 13px; color: #606266; }
-}
-
-.page-ctrl {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  .page-num, .page-btn {
-    width: 32px;
-    height: 32px;
-    border: 1px solid #dcdfe6;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #606266;
-    &.active { background: #1890ff; color: #fff; border-color: #1890ff; }
-    &.disabled { color: #c0c4cc; background: #f5f7fa; }
-  }
-}
+/* 分页区域已迁至 CommonPagination 组件 */
 
 </style>