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

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

@@ -85,30 +85,34 @@
       </view>
 
       <!-- 分页区域 -->
-      <view class="table-pagination">
-        <text class="total-text">共 {{ total }} 条</text>
-        <view class="page-ops">
-          <picker :range="pageSizes" @change="pageSizeChange">
-            <view class="size-picker">{{ currentSize }}条/页 <text class="iconfont icon-arrow-down"></text></view>
-          </picker>
-          <button class="page-btn" disabled>上一页</button>
-          <text class="current-page">1</text>
-          <button class="page-btn" disabled>下一页</button>
-          <text class="jump-text">前往</text>
-          <input class="jump-input" value="1" />
-          <text class="jump-text">页</text>
-        </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 StatusSwitch from '@/components/StatusSwitch.uvue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 export default {
   components: {
-    StatusSwitch
+    StatusSwitch,
+    CommonPagination
   },
   data() {
     return {
@@ -116,7 +120,9 @@ export default {
       currentStatus: 0,
       currentType: 0,
       total: 4,
+      currentPage: 1,
       currentSize: 15,
+      jumpPageInput: '',
       pageSizes: ['15条/页', '30条/页', '50条/页'],
       statusOptions: [
         { label: '全部', value: 0 },
@@ -186,6 +192,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 found = this.statusOptions.find((item : any) : boolean => item.value == val)
@@ -207,7 +230,18 @@ export default {
     },
     handleSearch() {
       uni.showToast({ title: '搜索', 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>
@@ -354,63 +388,7 @@ export default {
   cursor: pointer;
 }
 
-/* 分页 */
-.table-pagination {
-  padding: 16px 20px;
-  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;
-}
-.size-picker {
-  font-size: 14px;
-  color: #515a6e;
-  border: 1px solid #dcdfe6;
-  padding: 2px 8px;
-  border-radius: 4px;
-  margin-right: 15px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.page-btn {
-  height: 28px;
-  line-height: 28px;
-  padding: 0 8px;
-  font-size: 12px;
-  border: 1px solid #dcdfe6;
-  background-color: #fff;
-}
-.current-page {
-  width: 28px;
-  height: 28px;
-  line-height: 28px;
-  text-align: center;
-  background-color: #2d8cf0;
-  color: #fff;
-  font-size: 14px;
-  border-radius: 2px;
-  margin: 0 8px;
-}
-.jump-text { font-size: 14px; color: #515a6e; margin: 0 5px; }
-.jump-input {
-  width: 40px;
-  height: 28px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  text-align: center;
-  font-size: 14px;
-}
+/* 分页区域已迁至 CommonPagination 组件 */
 </style>