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

pages/mall/admin/setting/delivery/staff.uvue

@@ -17,7 +17,7 @@
           <view class="th" style="flex: 2;">操作</view>
         </view>
         <view class="table-body">
-          <view v-for="item in courierList" :key="item.id" class="tr">
+          <view v-for="item in pagedList" :key="item.id" class="tr">
             <view class="td" style="flex: 1;">{{ item.id }}</view>
             <view class="td" style="flex: 1.5;">
               <image class="avatar" :src="item.avatar" mode="aspectFill" />
@@ -35,12 +35,29 @@
           </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, reactive } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 type CourierItem = {
   id: number
@@ -51,11 +68,63 @@ type CourierItem = {
   addTime: string
 }
 
-const courierList = reactive<CourierItem[]>([
-  { id: 106, avatar: '/static/logo.png', name: 'cheshi', phone: '18943652356', isshow: true, addTime: '2025-06-29 21:45:19' },
-  { id: 105, avatar: '/static/logo.png', name: 'dl', phone: '15648569914', isshow: true, addTime: '2025-06-28 18:40:26' },
-  { id: 102, avatar: '/static/logo.png', name: '小牛马', phone: '13548652258', isshow: true, addTime: '2025-06-26 15:14:40' }
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 courierList 为 fetchCourierList() 调用
+const courierList = ref<CourierItem[]>([
+  { id: 120, avatar: '/static/logo.png', name: '王明', phone: '13812345678', isshow: true, addTime: '2025-06-29 21:45:19' },
+  { id: 119, avatar: '/static/logo.png', name: '李红', phone: '13987654321', isshow: true, addTime: '2025-06-28 18:40:26' },
+  { id: 118, avatar: '/static/logo.png', name: '张伟', phone: '15800001111', isshow: true, addTime: '2025-06-27 09:00:00' },
+  { id: 117, avatar: '/static/logo.png', name: '刘洋', phone: '15900002222', isshow: false, addTime: '2025-06-26 15:14:40' },
+  { id: 116, avatar: '/static/logo.png', name: '陈娟', phone: '13600003333', isshow: true, addTime: '2025-06-25 10:00:00' },
+  { id: 115, avatar: '/static/logo.png', name: '杨帆', phone: '13700004444', isshow: true, addTime: '2025-06-24 08:30:00' },
+  { id: 114, avatar: '/static/logo.png', name: '赵雷', phone: '18900005555', isshow: false, addTime: '2025-06-23 11:20:00' },
+  { id: 113, avatar: '/static/logo.png', name: '周芳', phone: '13500006666', isshow: true, addTime: '2025-06-22 14:50:00' },
+  { id: 112, avatar: '/static/logo.png', name: '吴勇', phone: '15600007777', isshow: true, addTime: '2025-06-21 16:10:00' },
+  { id: 111, avatar: '/static/logo.png', name: '郑山', phone: '18700008888', isshow: true, addTime: '2025-06-20 09:40:00' },
+  { id: 110, avatar: '/static/logo.png', name: '孙海', phone: '13900009999', isshow: false, addTime: '2025-06-19 13:00:00' },
+  { id: 109, avatar: '/static/logo.png', name: '马琳', phone: '15300010101', isshow: true, addTime: '2025-06-18 07:50:00' },
+  { id: 108, avatar: '/static/logo.png', name: '胡兴', phone: '18600011111', isshow: true, addTime: '2025-06-17 12:00:00' },
+  { id: 107, avatar: '/static/logo.png', name: '高雪', phone: '13200012222', isshow: true, addTime: '2025-06-16 15:30:00' },
+  { id: 106, avatar: '/static/logo.png', name: 'cheshi', phone: '18943652356', isshow: true, addTime: '2025-06-15 21:45:19' },
+  { id: 105, avatar: '/static/logo.png', name: 'dl', phone: '15648569914', isshow: true, addTime: '2025-06-14 18:40:26' },
+  { id: 104, avatar: '/static/logo.png', name: '小牛马', phone: '13548652258', isshow: true, addTime: '2025-06-13 15:14:40' },
+  { id: 103, avatar: '/static/logo.png', name: '小李', phone: '13200013333', isshow: false, addTime: '2025-06-12 10:00:00' },
+  { id: 102, avatar: '/static/logo.png', name: '小刘', phone: '15000014444', isshow: true, addTime: '2025-06-11 09:00:00' },
+  { id: 101, avatar: '/static/logo.png', name: '小王', phone: '13300015555', isshow: true, addTime: '2025-06-10 08:00:00' }
 ])
+// ========== 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(() => courierList.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 courierList.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 onAdd() {
   console.log('Add courier')