完成全部页面分页组件的抽取

pages/mall/admin/finance/capital_flow.uvue

@@ -41,7 +41,7 @@
       </view>
 
       <view class="table-body">
-        <view class="table-row" v-for="item in tableData" :key="item.flowNo">
+        <view class="table-row" v-for="item in pagedList" :key="item.flowNo">
           <view class="td col-flow"><text class="td-txt">{{ item.flowNo }}</text></view>
           <view class="td col-order text-left"><text class="td-txt">{{ item.orderNo }}</text></view>
           <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
@@ -55,11 +55,28 @@
         </view>
       </view>
     </view>
+    <CommonPagination
+      v-if="true"
+      :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.value = val }"
+      @jump-page="handleJumpPage"
+    />
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 interface FlowRecord {
   flowNo: string
@@ -134,8 +151,52 @@ const tableData = ref<FlowRecord[]>([
     user: 'b342865d2077',
     method: '微信',
     remark: ''
-  }
+  },
+  { flowNo: 'ZJ202601290823456789', orderNo: 'hy539987654321234567', time: '2026-01-29 08:23:45', amount: '+88.00', user: '张小明', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601281534267890', orderNo: 'hy539765432109876543', time: '2026-01-28 15:34:26', amount: '+200.00', user: '王芳芳', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601270945123450', orderNo: 'hy539543210987654321', time: '2026-01-27 09:45:12', amount: '-50.00', user: '李建国', method: '余额', remark: '退款' },
+  { flowNo: 'ZJ202601261200345678', orderNo: 'hy539321098765432109', time: '2026-01-26 12:00:34', amount: '+150.00', user: 'Tom Wang', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601251756890123', orderNo: 'hy539098765432109876', time: '2026-01-25 17:56:08', amount: '+30.00', user: '赵小燕', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601240314567890', orderNo: 'hy538876543210987654', time: '2026-01-24 03:14:56', amount: '+500.00', user: '陈大伟', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601231023456789', orderNo: 'hy538654321098765432', time: '2026-01-23 10:23:45', amount: '+1000.00', user: '周总', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601221445678901', orderNo: 'hy538432109876543210', time: '2026-01-22 14:45:06', amount: '-20.00', user: '刘小丽', method: '余额', remark: '佣金提现' },
+  { flowNo: 'ZJ202601210856789012', orderNo: 'hy538209876543210987', time: '2026-01-21 08:56:07', amount: '+75.00', user: '黄志强', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601201234567890', orderNo: 'hy537987654321098765', time: '2026-01-20 12:34:56', amount: '+320.00', user: '吴晓东', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601191634234567', orderNo: 'hy537765432109876543', time: '2026-01-19 16:34:23', amount: '+65.00', user: '郑美华', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601181034567890', orderNo: 'hy537543210987654321', time: '2026-01-18 10:34:56', amount: '+128.00', user: '孙小峰', method: '微信', remark: '' }
 ])
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+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 total = computed(() => tableData.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return tableData.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  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.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 </script>
 
 <style scoped lang="scss">