完成大部分页面的分页抽取的逻辑

pages/mall/admin/marketing/points/goods.uvue

@@ -86,31 +86,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"><</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, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 interface ProductItem {
   id: number
@@ -169,6 +168,36 @@ const handleEdit = (item: ProductItem) => { console.log('Editing...', item.id) }
 const toggleStatus = (index: number) => {
   productList.value[index].status = !productList.value[index].status
 }
+
+// 分页适配状态
+const currentPage = ref(1)
+const pageSize = ref(15)
+let jumpPageInput = ''
+const pageSizeOptions = [10, 15, 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(total.value / pageSize.value)))
+const visiblePages = computed(() => {
+  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) => {
+  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">
@@ -365,34 +394,7 @@ const toggleStatus = (index: number) => {
 .op-split { color: #e8eaec; margin: 0 5px; }
 .text-danger { color: #ed4014; }
 
-/* 分页 */
-.pagination-footer {
-  padding: 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}
-.total-txt { font-size: 13px; color: #606266; }
-.page-val { font-size: 13px; 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 #e8eaec; 
-  border-radius: 4px; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  font-size: 13px;
-  color: #666;
-}
-.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
-
-.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
-.jump-txt { font-size: 13px; color: #606266; }
-.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 13px; }
+/* 分页区域已迁至 CommonPagination 组件 */
 
 </style>
 

pages/mall/admin/marketing/points/index.uvue

@@ -86,31 +86,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"><</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, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 interface ProductItem {
   id: number
@@ -169,6 +168,36 @@ const handleEdit = (item: ProductItem) => { console.log('Editing...', item.id) }
 const toggleStatus = (index: number) => {
   productList.value[index].status = !productList.value[index].status
 }
+
+// 分页适配状态
+const currentPage = ref(1)
+const pageSize = ref(15)
+let jumpPageInput = ''
+const pageSizeOptions = [10, 15, 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(total.value / pageSize.value)))
+const visiblePages = computed(() => {
+  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) => {
+  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">
@@ -365,34 +394,7 @@ const toggleStatus = (index: number) => {
 .op-split { color: #e8eaec; margin: 0 5px; }
 .text-danger { color: #ed4014; }
 
-/* 分页 */
-.pagination-footer {
-  padding: 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}
-.total-txt { font-size: 13px; color: #606266; }
-.page-val { font-size: 13px; 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 #e8eaec; 
-  border-radius: 4px; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  font-size: 13px;
-  color: #666;
-}
-.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
-
-.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
-.jump-txt { font-size: 13px; color: #606266; }
-.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 13px; }
+/* 分页区域已迁至 CommonPagination 组件 */
 
 </style>
 

pages/mall/admin/marketing/points/list.uvue

@@ -86,31 +86,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"><</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, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 interface ProductItem {
   id: number
@@ -169,6 +168,36 @@ const handleEdit = (item: ProductItem) => { console.log('Editing...', item.id) }
 const toggleStatus = (index: number) => {
   productList.value[index].status = !productList.value[index].status
 }
+
+// 分页适配状态
+const currentPage = ref(1)
+const pageSize = ref(15)
+let jumpPageInput = ''
+const pageSizeOptions = [10, 15, 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(total.value / pageSize.value)))
+const visiblePages = computed(() => {
+  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) => {
+  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">
@@ -365,34 +394,7 @@ const toggleStatus = (index: number) => {
 .op-split { color: #e8eaec; margin: 0 5px; }
 .text-danger { color: #ed4014; }
 
-/* 分页 */
-.pagination-footer {
-  padding: 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}
-.total-txt { font-size: 13px; color: #606266; }
-.page-val { font-size: 13px; 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 #e8eaec; 
-  border-radius: 4px; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  font-size: 13px;
-  color: #666;
-}
-.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
-
-.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
-.jump-txt { font-size: 13px; color: #606266; }
-.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 13px; }
+/* 分页区域已迁至 CommonPagination 组件 */
 
 </style>
 

pages/mall/admin/marketing/points/order.uvue

@@ -90,26 +90,41 @@
         </view>
       </view>
 
-      <!-- 分页 -->
-      <view class="table-pagination">
-        <text class="total-text">共 {{ total }} 条</text>
-        <view class="page-ops">
-          <button class="page-btn" disabled>上一页</button>
-          <text class="current-page">1</text>
-          <button class="page-btn">下一页</button>
-        </view>
-      </view>
+      <!-- 分页区域 -->
+      <CommonPagination
+        v-if="total > 0"
+        :total="total"
+        :loading="false"
+        :currentPage="currentPage"
+        :pageSize="currentSize"
+        :pageSizeOptionLabels="pageSizeOptionLabels"
+        :pageSizeIndex="pageSizeIndex"
+        :visiblePages="visiblePages"
+        :totalPage="totalPage"
+        :jumpPageInput="jumpPageInput"
+        @page-size-change="handlePageSizeChange"
+        @page-change="handlePageChange"
+        @update:jumpPageInput="updateJumpPageInput"
+        @jump-page="handleJumpPage"
+      />
     </view>
   </view>
 </template>
 
 <script uts>
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 export default {
+  components: {
+    CommonPagination
+  },
   data() {
     return {
       currentStatus: -1,
       searchQuery: '',
       total: 8,
+      currentPage: 1,
+      currentSize: 15,
+      jumpPageInput: '',
       statusOptions: [
         { label: '全部', value: -1, count: 8 },
         { label: '待发货', value: 0, count: 6 },
@@ -181,6 +196,23 @@ export default {
       ] as any[]
     }
   },
+  computed: {
+    pageSizeOptions(): number[] { return [10, 15, 20, 30, 50] },
+    pageSizeOptionLabels(): string[] { return (this.pageSizeOptions as number[]).map((n: number) => `${n}条/页`) },
+    pageSizeIndex(): number {
+      const idx = (this.pageSizeOptions as number[]).indexOf(this.currentSize as number)
+      return idx >= 0 ? idx : 0
+    },
+    totalPage(): number { return Math.max(1, Math.ceil((this.total as number) / (this.currentSize as number))) },
+    visiblePages(): number[] {
+      const t = this.totalPage as number
+      const cur = this.currentPage as number
+      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]
+    }
+  },
   methods: {
     getStatusLabel(val : number) : string {
       const item = this.statusOptions.find((opt: any) => opt.value === val)
@@ -215,7 +247,18 @@ export default {
     handleReset() {
       this.searchQuery = ''
       this.currentStatus = -1
-    }
+    },
+    handlePageChange(p: number) { this.currentPage = p as any },
+    handlePageSizeChange(e: any) {
+      const idx = Number(e.detail.value)
+      this.currentSize = ((this.pageSizeOptions as number[])[idx] ?? (this.pageSizeOptions as number[])[0]) as any
+      this.currentPage = 1 as any
+    },
+    handleJumpPage() {
+      const p = parseInt(this.jumpPageInput as string)
+      if (!isNaN(p) && p >= 1 && p <= (this.totalPage as number)) this.currentPage = p as any
+    },
+    updateJumpPageInput(val: string) { this.jumpPageInput = val as any }
   }
 }
 </script>
@@ -399,14 +442,6 @@ export default {
   cursor: pointer;
 }
 
-/* 分页 */
-.table-pagination {
-  padding: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-}
-.total-text { font-size: 14px; color: #515a6e; margin-right: 15px; }
+/* 分页区域已迁至 CommonPagination 组件 */
 </style>
 

pages/mall/admin/marketing/points/product.uvue

@@ -86,31 +86,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"><</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, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 interface ProductItem {
   id: number
@@ -169,6 +168,36 @@ const handleEdit = (item: ProductItem) => { console.log('Editing...', item.id) }
 const toggleStatus = (index: number) => {
   productList.value[index].status = !productList.value[index].status
 }
+
+// 分页适配状态
+const currentPage = ref(1)
+const pageSize = ref(15)
+let jumpPageInput = ''
+const pageSizeOptions = [10, 15, 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(total.value / pageSize.value)))
+const visiblePages = computed(() => {
+  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) => {
+  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">
@@ -365,34 +394,7 @@ const toggleStatus = (index: number) => {
 .op-split { color: #e8eaec; margin: 0 5px; }
 .text-danger { color: #ed4014; }
 
-/* 分页 */
-.pagination-footer {
-  padding: 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}
-.total-txt { font-size: 13px; color: #606266; }
-.page-val { font-size: 13px; 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 #e8eaec; 
-  border-radius: 4px; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  font-size: 13px;
-  color: #666;
-}
-.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
-
-.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
-.jump-txt { font-size: 13px; color: #606266; }
-.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 13px; }
+/* 分页区域已迁至 CommonPagination 组件 */
 
 </style>
 

pages/mall/admin/marketing/points/record.uvue

@@ -57,21 +57,33 @@
         </view>
       </view>
       
-      <!-- 分页 -->
-      <view class="table-pagination">
-        <text class="total-text">共 {{ total }} 条</text>
-        <view class="page-ops">
-          <button class="page-btn" disabled>上一页</button>
-          <text class="current-page">1</text>
-          <button class="page-btn">下一页</button>
-        </view>
-      </view>
+      <!-- 分页区域 -->
+      <CommonPagination
+        v-if="total > 0"
+        :total="total"
+        :loading="false"
+        :currentPage="currentPage"
+        :pageSize="currentSize"
+        :pageSizeOptionLabels="pageSizeOptionLabels"
+        :pageSizeIndex="pageSizeIndex"
+        :visiblePages="visiblePages"
+        :totalPage="totalPage"
+        :jumpPageInput="jumpPageInput"
+        @page-size-change="handlePageSizeChange"
+        @page-change="handlePageChange"
+        @update:jumpPageInput="updateJumpPageInput"
+        @jump-page="handleJumpPage"
+      />
     </view>
   </view>
 </template>
 
 <script uts>
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 export default {
+  components: {
+    CommonPagination
+  },
   data() {
     return {
       searchQuery: '',
@@ -83,6 +95,9 @@ export default {
         { label: '后台充值', value: 'system' }
       ] as any[],
       total: 5,
+      currentPage: 1,
+      currentSize: 15,
+      jumpPageInput: '',
       tableData: [
         {
           id: 1256,
@@ -121,6 +136,21 @@ export default {
     typeLabel(): string {
       const found = this.typeOptions.find((o: any): boolean => o.value == this.currentType)
       return found != null ? (found['label'] as string) : '全部'
+    },
+    pageSizeOptions(): number[] { return [10, 15, 20, 30, 50] },
+    pageSizeOptionLabels(): string[] { return (this.pageSizeOptions as number[]).map((n: number) => `${n}条/页`) },
+    pageSizeIndex(): number {
+      const idx = (this.pageSizeOptions as number[]).indexOf(this.currentSize as number)
+      return idx >= 0 ? idx : 0
+    },
+    totalPage(): number { return Math.max(1, Math.ceil((this.total as number) / (this.currentSize as number))) },
+    visiblePages(): number[] {
+      const t = this.totalPage as number
+      const cur = this.currentPage as number
+      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]
     }
   },
   methods: {
@@ -136,7 +166,18 @@ export default {
     },
     handleMark(item: any) {
       uni.showToast({ title: '修改备注: ' + item.id, icon: 'none' })
-    }
+    },
+    handlePageChange(p: number) { this.currentPage = p as any },
+    handlePageSizeChange(e: any) {
+      const idx = Number(e.detail.value)
+      this.currentSize = ((this.pageSizeOptions as number[])[idx] ?? (this.pageSizeOptions as number[])[0]) as any
+      this.currentPage = 1 as any
+    },
+    handleJumpPage() {
+      const p = parseInt(this.jumpPageInput as string)
+      if (!isNaN(p) && p >= 1 && p <= (this.totalPage as number)) this.currentPage = p as any
+    },
+    updateJumpPageInput(val: string) { this.jumpPageInput = val as any }
   }
 }
 </script>
@@ -267,36 +308,7 @@ export default {
   cursor: pointer;
 }
 
-/* 分页 */
-.table-pagination {
-  padding: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-}
-.total-text { font-size: 14px; color: #515a6e; margin-right: 15px; }
-
-.page-ops {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-.page-btn {
-  height: 32px;
-  padding: 0 12px;
-  font-size: 14px;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  background: #fff;
-  margin: 0;
-}
-.current-page {
-  padding: 0 12px;
-  font-size: 14px;
-  color: #2d8cf0;
-}
+/* 分页区域已迁至 CommonPagination 组件 */
 </style>