完成90%页面分页组件的抽取

pages/mall/admin/finance/withdrawal.uvue

@@ -70,7 +70,7 @@
       </view>
 
       <view class="table-body">
-        <view class="table-row" v-for="(item, index) in tableData" :key="item.id">
+        <view class="table-row" v-for="(item, index) in pagedList" :key="item.id">
           <view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
           <view class="td col-user">
             <view class="user-info-box">
@@ -113,11 +113,28 @@
         </view>
       </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.value = val }"
+      @jump-page="handleJumpPage"
+    />
   </view>
 </template>
 
 <script setup lang="uts">
 import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 const timeRange = ref([])
 const timeRangeText = ref('')
@@ -156,35 +173,63 @@ const stats = ref([
   { label: '未提现金额', value: '607930.00', icon: '¥', colorClass: 'pink' }
 ])
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 tableData 为 fetchWithdrawalList() 调用
 const tableData = ref([
-  {
-    id: 57,
-    nickname: '用户昵称: 177****766',
-    userId: '58837',
-    amount: '20.00',
-    fee: '0.00',
-    netAmount: '20.00',
-    name: '接口',
-    type: '支付宝',
-    account: '1195953899',
-    time: '2025-10-24 16:04',
-    remark: ''
-  },
-  {
-    id: 56,
-    nickname: '用户昵称: 测试员的',
-    userId: '20695',
-    amount: '1.00',
-    fee: '0.00',
-    netAmount: '1.00',
-    name: '123',
-    type: '银行卡',
-    account: '4001231221',
-    bank: '中国银行',
-    time: '2025-07-04 15:11',
-    remark: ''
-  }
+  { id: 57, nickname: '用户昵称: 177****766', userId: '58837', amount: '20.00', fee: '0.00', netAmount: '20.00', name: '接口', type: '支付宝', account: '1195953899', time: '2025-10-24 16:04', remark: '' },
+  { id: 56, nickname: '用户昵称: 测试员的', userId: '20695', amount: '1.00', fee: '0.00', netAmount: '1.00', name: '123', type: '银行卡', account: '4001231221', bank: '中国银行', time: '2025-07-04 15:11', remark: '' },
+  { id: 55, nickname: '张小红', userId: '18340', amount: '50.00', fee: '0.50', netAmount: '49.50', name: '张小红', type: '微信', account: 'wx_zhangxh', time: '2025-06-20 10:22', remark: '' },
+  { id: 54, nickname: '李大明', userId: '29501', amount: '200.00', fee: '2.00', netAmount: '198.00', name: '李大明', type: '支付宝', account: 'lidaming@qq.com', time: '2025-06-15 09:30', remark: '' },
+  { id: 53, nickname: '王芳芳', userId: '32110', amount: '80.00', fee: '0.00', netAmount: '80.00', name: '王芳芳', type: '银行卡', account: '6200123456789', bank: '建设银行', time: '2025-06-10 14:55', remark: '' },
+  { id: 52, nickname: '赵刚', userId: '44422', amount: '150.00', fee: '1.50', netAmount: '148.50', name: '赵刚', type: '支付宝', account: 'zhaogang@163.com', time: '2025-06-05 16:40', remark: '请尽快处理' },
+  { id: 51, nickname: '陈小燕', userId: '55631', amount: '30.00', fee: '0.00', netAmount: '30.00', name: '陈小燕', type: '微信', account: 'wx_chenxy', time: '2025-05-28 11:15', remark: '' },
+  { id: 50, nickname: '刘建军', userId: '61204', amount: '500.00', fee: '5.00', netAmount: '495.00', name: '刘建军', type: '银行卡', account: '6228480012345678', bank: '农业银行', time: '2025-05-20 08:00', remark: '' },
+  { id: 49, nickname: '黄小兰', userId: '72890', amount: '25.00', fee: '0.00', netAmount: '25.00', name: '黄小兰', type: '支付宝', account: 'huangxl@sina.com', time: '2025-05-15 13:22', remark: '' },
+  { id: 48, nickname: '周大伟', userId: '83456', amount: '100.00', fee: '1.00', netAmount: '99.00', name: '周大伟', type: '支付宝', account: 'zhoudw@gmail.com', time: '2025-05-10 17:30', remark: '' },
+  { id: 47, nickname: '吴玲玲', userId: '91223', amount: '60.00', fee: '0.00', netAmount: '60.00', name: '吴玲玲', type: '微信', account: 'wx_wull', time: '2025-05-05 10:45', remark: '' },
+  { id: 46, nickname: '郑明亮', userId: '10234', amount: '300.00', fee: '3.00', netAmount: '297.00', name: '郑明亮', type: '银行卡', account: '6217000012345', bank: '工商银行', time: '2025-04-28 09:00', remark: '' },
+  { id: 45, nickname: '孙小丽', userId: '21345', amount: '45.00', fee: '0.00', netAmount: '45.00', name: '孙小丽', type: '支付宝', account: 'sunxl@aliyun.com', time: '2025-04-20 15:10', remark: '' },
+  { id: 44, nickname: '冯浩', userId: '32456', amount: '88.00', fee: '0.88', netAmount: '87.12', name: '冯浩', type: '微信', account: 'wx_fenghao', time: '2025-04-15 11:30', remark: '' },
+  { id: 43, nickname: '陈建国', userId: '43567', amount: '120.00', fee: '1.20', netAmount: '118.80', name: '陈建国', type: '支付宝', account: 'chenjg@hotmail.com', time: '2025-04-10 14:00', remark: '' },
+  { id: 42, nickname: '蒋小娟', userId: '54678', amount: '75.00', fee: '0.00', netAmount: '75.00', name: '蒋小娟', type: '银行卡', account: '6225880099887766', bank: '招商银行', time: '2025-04-05 08:45', remark: '' },
+  { id: 41, nickname: '卫东', userId: '65789', amount: '40.00', fee: '0.40', netAmount: '39.60', name: '卫东', type: '支付宝', account: 'weidong@126.com', time: '2025-03-28 16:20', remark: '' },
+  { id: 40, nickname: '韩美丽', userId: '76890', amount: '250.00', fee: '2.50', netAmount: '247.50', name: '韩美丽', type: '微信', account: 'wx_hanml', time: '2025-03-20 10:00', remark: '' },
+  { id: 39, nickname: '杨志远', userId: '87901', amount: '16.00', fee: '0.00', netAmount: '16.00', name: '杨志远', type: '银行卡', account: '6228001234567890', bank: '中国银行', time: '2025-03-15 12:35', remark: '' },
+  { id: 38, nickname: '秦晓', userId: '98012', amount: '180.00', fee: '1.80', netAmount: '178.20', name: '秦晓', type: '支付宝', account: 'qinxiao@vip.qq.com', time: '2025-03-10 09:50', remark: '' },
 ])
+// ========== MOCK DATA END ==========
+
+// ========== 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 ==========
 
 const statusChange = (e: any) => {
   statusValue.value = statusOptions.value[e.detail.value].value