实现分页组件多页面替换

pages/mall/admin/product/reviews/index.uvue

@@ -83,20 +83,29 @@
       </view>
 
       <!-- 分页 -->
-      <view class="pagination-row">
-        <text class="total">共 {{ replyList.length }} 条</text>
-        <view class="page-ctrl">
-          <text class="page-btn disabled">{"<"}</text>
-          <text class="page-num active">1</text>
-          <text class="page-btn">{">"}</text>
-        </view>
-      </view>
+      <CommonPagination
+        v-if="replyList.length > 0"
+        :total="replyList.length"
+        :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>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 const replyList = ref([
   {
@@ -136,6 +145,36 @@ const replyList = ref([
     time: '2024-09-12 14:20:12'
   }
 ])
+
+// 分页适配状态
+const currentPage = ref(1)
+const pageSize = ref(10)
+let jumpPageInput = ''
+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 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 handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
 </script>
 
 <style scoped lang="scss">
@@ -249,19 +288,5 @@ const replyList = ref([
 }
 
 .op-link { font-size: 13px; color: #1890ff; margin: 0 4px; cursor: pointer; &.red { color: #f5222d; } }
-
-.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;
-    &.active { background: #1890ff; color: #fff; }
-    &.disabled { background: #f5f5f5; color: #ccc; }
-  }
-}
+/* 分页区域已迁至 CommonPagination 组件 */
 </style>