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

2026-03-17 09:01:11 +08:00
parent 7e814d349e
commit 7211fcdfea
29 changed files with 2331 additions and 539 deletions
--- a/pages/mall/admin/finance/balance_record.uvue
+++ b/pages/mall/admin/finance/balance_record.uvue
@@ -34,7 +34,7 @@
      </view>

      <scroll-view class="table-body">
-        <view class="table-row" v-for="item in tableData" :key="item.id">
+        <view class="table-row" v-for="item in pagedList" :key="item.id">
          <view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
          <view class="td col-order text-left"><text class="td-txt">{{ item.order }}</text></view>
          <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
@@ -49,12 +49,29 @@
          </view>
        </view>
      </scroll-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'

 interface BalanceRecord {
  id: string
@@ -66,71 +83,63 @@ interface BalanceRecord {
  remark: string
 }

+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 tableData 为 fetchBalanceRecordList() 调用
 const tableData = ref<BalanceRecord[]>([
-  {
-    id: '31216',
-    order: '新用户注册赠送余额',
-    time: '2026-02-03 10:30:11',
-    amount: '+ 88888.00',
-    user: '1',
-    type: '新用户注册赠送余额',
-    remark: '新用户注册赠送88888余额'
-  },
-  {
-    id: '31215',
-    order: '新用户注册赠送余额',
-    time: '2026-02-03 10:19:52',
-    amount: '+ 88888.00',
-    user: 'circus',
-    type: '新用户注册赠送余额',
-    remark: '新用户注册赠送88888余额'
-  },
-  {
-    id: '31214',
-    order: 'cp541560738494283776',
-    time: '2026-02-03 10:09:07',
-    amount: '- 999.00',
-    user: '1岁上班22岁退休',
-    type: '余额支付购买商品',
-    remark: '余额支付999.00元购买商品'
-  },
-  {
-    id: '31213',
-    order: '新用户注册赠送余额',
-    time: '2026-02-03 10:07:59',
-    amount: '+ 88888.00',
-    user: '1岁上班22岁退休',
-    type: '新用户注册赠送余额',
-    remark: '新用户注册赠送88888余额'
-  },
-  {
-    id: '31212',
-    order: '新用户注册赠送余额',
-    time: '2026-02-03 02:17:24',
-    amount: '+ 88888.00',
-    user: '136****0434',
-    type: '新用户注册赠送余额',
-    remark: '新用户注册赠送88888余额'
-  },
-  {
-    id: '31211',
-    order: '新用户注册赠送余额',
-    time: '2026-02-03 02:04:17',
-    amount: '+ 88888.00',
-    user: '灵境',
-    type: '新用户注册赠送余额',
-    remark: '新用户注册赠送88888余额'
-  },
-  {
-    id: '31210',
-    order: '新用户注册赠送余额',
-    time: '2026-02-03 00:58:21',
-    amount: '+ 88888.00',
-    user: 'J.',
-    type: '新用户注册赠送余额',
-    remark: '新用户注册赠送88888余额'
-  }
+  { id: '31216', order: '新用户注册赠送余额', time: '2026-02-03 10:30:11', amount: '+ 88888.00', user: '1', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31215', order: '新用户注册赠送余额', time: '2026-02-03 10:19:52', amount: '+ 88888.00', user: 'circus', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31214', order: 'cp541560738494283776', time: '2026-02-03 10:09:07', amount: '- 999.00', user: '1岁上班22岁退休', type: '余额支付购买商品', remark: '余额支付999.00元购买商品' },
+  { id: '31213', order: '新用户注册赠送余额', time: '2026-02-03 10:07:59', amount: '+ 88888.00', user: '1岁上班22岁退休', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31212', order: '新用户注册赠送余额', time: '2026-02-03 02:17:24', amount: '+ 88888.00', user: '136****0434', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31211', order: '新用户注册赠送余额', time: '2026-02-03 02:04:17', amount: '+ 88888.00', user: '灵境', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31210', order: '新用户注册赠送余额', time: '2026-02-03 00:58:21', amount: '+ 88888.00', user: 'J.', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31209', order: 'cp540123456789012345', time: '2026-02-02 18:30:00', amount: '- 288.00', user: '张小明', type: '余额支付购买商品', remark: '余额支付288.00元购买商品' },
+  { id: '31208', order: '管理员手动充值', time: '2026-02-02 16:00:00', amount: '+ 500.00', user: '李大力', type: '管理员手动充值', remark: '管理员充值500元' },
+  { id: '31207', order: 'cp539876543210987654', time: '2026-02-02 14:20:00', amount: '- 99.00', user: '王芳', type: '余额支付购买商品', remark: '余额支付99.00元购买商品' },
+  { id: '31206', order: '退款退回余额', time: '2026-02-02 11:45:00', amount: '+ 150.00', user: '赵明', type: '退款退回余额', remark: '订单退款150元返还余额' },
+  { id: '31205', order: 'cp538765432109876543', time: '2026-02-02 09:00:00', amount: '- 1280.00', user: '陈小燕', type: '余额支付购买商品', remark: '余额支付1280.00元购买商品' },
+  { id: '31204', order: '签到赠送余额', time: '2026-02-01 23:59:00', amount: '+ 10.00', user: '刘建国', type: '签到赠送余额', remark: '每日签到赠送10元余额' },
+  { id: '31203', order: 'cp537654321098765432', time: '2026-02-01 20:30:00', amount: '- 450.00', user: '黄晓兰', type: '余额支付购买商品', remark: '余额支付450.00元购买商品' },
+  { id: '31202', order: '新用户注册赠送余额', time: '2026-02-01 18:00:00', amount: '+ 88888.00', user: '周大卫', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
+  { id: '31201', order: '管理员手动充值', time: '2026-02-01 15:30:00', amount: '+ 1000.00', user: '吴玲玲', type: '管理员手动充值', remark: '管理员充值1000元' },
+  { id: '31200', order: 'cp536543210987654321', time: '2026-02-01 12:00:00', amount: '- 680.00', user: '郑明亮', type: '余额支付购买商品', remark: '余额支付680.00元购买商品' },
+  { id: '31199', order: '活动赠送余额', time: '2026-02-01 10:00:00', amount: '+ 200.00', user: '孙小丽', type: '活动赠送余额', remark: '新春活动赠送200元余额' },
+  { id: '31198', order: 'cp535432109876543210', time: '2026-01-31 16:30:00', amount: '- 320.00', user: '冯浩', type: '余额支付购买商品', remark: '余额支付320.00元购买商品' },
+  { id: '31197', order: '退款退回余额', time: '2026-01-31 14:00:00', amount: '+ 99.00', user: '陈建国', type: '退款退回余额', remark: '订单退款99元返还余额' },
 ])
+// ========== 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 ==========
 </script>

 <style scoped lang="scss">