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

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>