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

pages/mall/admin/distribution/division/apply.uvue

@@ -30,7 +30,7 @@
           <view class="col col-ops"><text>操作</text></view>
         </view>
         <view class="table-body">
-          <view v-for="item in applyList" :key="item.uid" class="table-row">
+          <view v-for="item in pagedList" :key="item.uid" class="table-row">
             <view class="col col-uid"><text>{{ item.uid }}</text></view>
             <view class="col col-name"><text>{{ item.name }}</text></view>
             <view class="col col-phone"><text>{{ item.phone }}</text></view>
@@ -53,16 +53,90 @@
           </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>
   </view>
 </template>
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
+
 const activeTab = ref(0)
 const tabs = ['全部', '申请中', '已同意', '已拒绝']
+
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 applyList 为 fetchApplyList() 调用
 const applyList = ref([
   { uid: '81806', name: '测试测试', phone: '19910205954', deptName: '26991', time: '2026-01-08 15:30:39', statusText: '申请中', code: '70623142' },
+  { uid: '81807', name: '张三', phone: '13812345678', deptName: '北京事业部', time: '2026-01-10 09:20:15', statusText: '已同意', code: '80731253' },
+  { uid: '81808', name: '李四', phone: '13987654321', deptName: '上海事业部', time: '2026-01-12 14:05:33', statusText: '已拒绝', code: '90842364' },
+  { uid: '81809', name: '王五', phone: '15012341234', deptName: '广州事业部', time: '2026-01-15 11:45:20', statusText: '申请中', code: '10953475' },
+  { uid: '81810', name: '赵六', phone: '18600001111', deptName: '深圳事业部', time: '2026-01-18 08:30:00', statusText: '已同意', code: '21064586' },
+  { uid: '81811', name: '孙七', phone: '17712349876', deptName: '成都事业部', time: '2026-01-20 16:15:44', statusText: '已同意', code: '32175697' },
+  { uid: '81812', name: '周八', phone: '13300002222', deptName: '杭州事业部', time: '2026-01-22 10:55:30', statusText: '申请中', code: '43286708' },
+  { uid: '81813', name: '吴九', phone: '15566667777', deptName: '武汉事业部', time: '2026-01-25 13:40:18', statusText: '已拒绝', code: '54397819' },
+  { uid: '81814', name: '郑十', phone: '18899998888', deptName: '南京事业部', time: '2026-01-28 09:00:05', statusText: '申请中', code: '65408920' },
+  { uid: '81815', name: '冯云', phone: '13712348765', deptName: '西安事业部', time: '2026-02-01 15:20:33', statusText: '已同意', code: '76519031' },
+  { uid: '81816', name: '陈霞', phone: '15087651234', deptName: '重庆事业部', time: '2026-02-05 11:10:22', statusText: '申请中', code: '87620142' },
+  { uid: '81817', name: '蒋峰', phone: '13500004444', deptName: '郑州事业部', time: '2026-02-08 14:35:49', statusText: '已同意', code: '98731253' },
+  { uid: '81818', name: '卫林', phone: '17656785678', deptName: '长沙事业部', time: '2026-02-10 08:45:11', statusText: '已拒绝', code: '09842364' },
+  { uid: '81819', name: '蒋彪', phone: '18211112222', deptName: '合肥事业部', time: '2026-02-12 17:00:00', statusText: '申请中', code: '10953476' },
+  { uid: '81820', name: '沈辉', phone: '13655554444', deptName: '天津事业部', time: '2026-02-15 12:30:40', statusText: '已同意', code: '21064587' },
+  { uid: '81821', name: '韩磊', phone: '15999990000', deptName: '苏州事业部', time: '2026-02-18 09:55:28', statusText: '已同意', code: '32175698' },
+  { uid: '81822', name: '杨红', phone: '17811122233', deptName: '宁波事业部', time: '2026-02-20 16:40:15', statusText: '申请中', code: '43286709' },
+  { uid: '81823', name: '秦波', phone: '13234561234', deptName: '厦门事业部', time: '2026-02-22 11:20:06', statusText: '已拒绝', code: '54397820' },
+  { uid: '81824', name: '许丹', phone: '18777776666', deptName: '青岛事业部', time: '2026-02-25 14:05:50', statusText: '已同意', code: '65408921' },
+  { uid: '81825', name: '何强', phone: '15344443333', deptName: '福州事业部', time: '2026-02-28 08:15:38', statusText: '申请中', code: '76519032' },
 ])
+// ========== 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(() => applyList.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 applyList.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 ==========
+
 function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
 </script>
 <style scoped lang="scss">
@@ -80,7 +154,8 @@ function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
 .table-header { display: flex; flex-direction: row; background: #f8faff; border-bottom: 1px solid #f0f0f0; padding: 12px 0; }
 .table-row { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 12px 0; align-items: center; &:hover { background: #fafafa; } }
 .col { padding: 0 8px; font-size: 14px; color: #333; display: flex; align-items: center; }
-.col-uid { width: 80px; } .col-name { width: 120px; } .col-phone { width: 120px; } .col-dept { width: 120px; } .col-img { width: 80px; justify-content: center; } .col-time { width: 160px; justify-content: center; } .col-status { width: 100px; justify-content: center; } .col-code { width: 100px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; }
+.col-uid { width: 80px; } .col-name { width: 120px; } .col-phone { width: 120px; } .col-dept { width: 120px; } .col-img { width: 80px; justify-content: center; } .col-time { width: 160px; justify-content: center; } .col-status { width: 100px; justify-content: center; } .col-code { width: 100px; justify-content: center; } 
+.col-ops { flex: 1; justify-content: flex-end; display: flex; flex-direction: row; }
 .table-img { width: 32px; height: 32px; border-radius: 2px; }
 .status-tag { border: 1px solid #1890ff; color: #1890ff; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
 .code-box { border: 1px solid #d9d9d9; padding: 2px 8px; border-radius: 4px; font-size: 12px; background: #fafafa; }