huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
huangzhenbao
2026-03-17 09:01:11 +08:00
parent 7e814d349e
commit 7211fcdfea
29 changed files with 2331 additions and 539 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
pages/mall/admin/finance/balance_record.uvue
View File

@@ -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">

132
pages/mall/admin/finance/commission.uvue
View File

@@ -30,7 +30,7 @@
</view>
<view class="table-body">
<view class="table-row" v-for="item in tableData" :key="item.uid">
<view class="table-row" v-for="item in pagedList" :key="item.uid">
<view class="td col-user">
<text class="td-txt">{{ item.userInfo }}</text>
</view>
@@ -46,12 +46,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 } from 'vue'
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
interface CommissionSummary {
uid: string
@@ -61,64 +78,63 @@ interface CommissionSummary {
withdrawAmount: string
}
// ========== MOCK DATA START ==========
// TODO: 接真实接口时替换此处 tableData 为 fetchCommissionList() 调用
const tableData = ref<CommissionSummary[]>([
{
uid: '77418',
userInfo: '张迪 | 155****5525 | 77418',
totalAmount: '11.00',
accountAmount: '11.00',
withdrawAmount: '0'
},
{
uid: '69696',
userInfo: "I'm yours - | 69696",
totalAmount: '0.40',
accountAmount: '0.40',
withdrawAmount: '0'
},
{
uid: '68582',
userInfo: 'guan | 68582',
totalAmount: '140.80',
accountAmount: '140.80',
withdrawAmount: '0'
},
{
uid: '65258',
userInfo: '纯爱战神别名王富贵儿 | 158****4881 | 65258',
totalAmount: '11.00',
accountAmount: '11.00',
withdrawAmount: '0'
},
{
uid: '66265',
userInfo: '王伟兴 | 66265',
totalAmount: '11.99',
accountAmount: '11.99',
withdrawAmount: '0'
},
{
uid: '65270',
userInfo: '199****1781 | 199****1781 | 65270',
totalAmount: '31.60',
accountAmount: '31.60',
withdrawAmount: '0'
},
{
uid: '64572',
userInfo: '洒笾菂艸 | 188****2434 | 64572',
totalAmount: '0.20',
accountAmount: '0.20',
withdrawAmount: '0'
},
{
uid: '47952',
userInfo: '那小子 | 134****3573 | 47952',
totalAmount: '19.80',
accountAmount: '19.80',
withdrawAmount: '0'
}
{ uid: '77418', userInfo: '张迪 | 155****5525 | 77418', totalAmount: '11.00', accountAmount: '11.00', withdrawAmount: '0' },
{ uid: '69696', userInfo: "I'm yours - | 69696", totalAmount: '0.40', accountAmount: '0.40', withdrawAmount: '0' },
{ uid: '68582', userInfo: 'guan | 68582', totalAmount: '140.80', accountAmount: '140.80', withdrawAmount: '0' },
{ uid: '65258', userInfo: '纯爱战神别名王富贵儿 | 158****4881 | 65258', totalAmount: '11.00', accountAmount: '11.00', withdrawAmount: '0' },
{ uid: '66265', userInfo: '王伟兴 | 66265', totalAmount: '11.99', accountAmount: '11.99', withdrawAmount: '0' },
{ uid: '65270', userInfo: '199****1781 | 199****1781 | 65270', totalAmount: '31.60', accountAmount: '31.60', withdrawAmount: '0' },
{ uid: '64572', userInfo: '洒笾菂艸 | 188****2434 | 64572', totalAmount: '0.20', accountAmount: '0.20', withdrawAmount: '0' },
{ uid: '47952', userInfo: '那小子 | 134****3573 | 47952', totalAmount: '19.80', accountAmount: '19.80', withdrawAmount: '0' },
{ uid: '43210', userInfo: '小花猫 | 132****0011 | 43210', totalAmount: '56.00', accountAmount: '30.00', withdrawAmount: '26.00' },
{ uid: '39876', userInfo: '蓝色天空 | 136****5566 | 39876', totalAmount: '88.50', accountAmount: '50.00', withdrawAmount: '38.50' },
{ uid: '35432', userInfo: '星星之火 | 159****7788 | 35432', totalAmount: '200.00', accountAmount: '100.00', withdrawAmount: '100.00' },
{ uid: '31098', userInfo: '夜行者 | 177****9900 | 31098', totalAmount: '15.60', accountAmount: '15.60', withdrawAmount: '0' },
{ uid: '26754', userInfo: '晨曦 | 138****1122 | 26754', totalAmount: '320.00', accountAmount: '200.00', withdrawAmount: '120.00' },
{ uid: '22410', userInfo: '落叶归根 | 152****3344 | 22410', totalAmount: '45.80', accountAmount: '45.80', withdrawAmount: '0' },
{ uid: '18066', userInfo: '风中漫步 | 189****5566 | 18066', totalAmount: '800.00', accountAmount: '500.00', withdrawAmount: '300.00' },
{ uid: '13722', userInfo: '快乐小屋 | 133****7788 | 13722', totalAmount: '12.00', accountAmount: '12.00', withdrawAmount: '0' },
{ uid: '9378', userInfo: '云端漫步 | 176****9900 | 9378', totalAmount: '650.00', accountAmount: '400.00', withdrawAmount: '250.00' },
{ uid: '5034', userInfo: '绿草如茵 | 156****0011 | 5034', totalAmount: '28.40', accountAmount: '28.40', withdrawAmount: '0' },
{ uid: '88901', userInfo: '阳光路上 | 139****2233 | 88901', totalAmount: '1200.00', accountAmount: '800.00', withdrawAmount: '400.00' },
{ uid: '84557', userInfo: '繁花似锦 | 173****4455 | 84557', totalAmount: '76.60', accountAmount: '76.60', withdrawAmount: '0' },
])
// ========== 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">

148
pages/mall/admin/finance/invoice.uvue
View File

@@ -54,7 +54,7 @@
</view>
<view class="table-body">
<view class="table-row" v-for="item in tableData" :key="item.orderNo">
<view class="table-row" v-for="item in pagedList" :key="item.orderNo">
<view class="td col-order text-left"><text class="td-txt">{{ item.orderNo }}</text></view>
<view class="td col-amount"><text class="td-txt">¥ {{ item.amount }}</text></view>
<view class="td col-type"><text class="td-txt">{{ item.invoiceType }}</text></view>
@@ -72,11 +72,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 } from 'vue'
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
const activeTab = ref(0)
@@ -87,80 +104,63 @@ const tabs = ref([
{ name: '退款发票', count: 33 }
])
// ========== MOCK DATA START ==========
// TODO: 接真实接口时替换此处 tableData 为 fetchInvoiceList() 调用
const tableData = ref([
{
orderNo: 'cp538981381384962048',
amount: '999.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2026-01-27 07:19:35',
invStatus: '未开票',
orderStatus: '未发货'
},
{
orderNo: 'cp523490058603331584',
amount: '9.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2025-12-15 13:22:35',
invStatus: '未开票',
orderStatus: '未发货'
},
{
orderNo: 'cp524967077409193984',
amount: '9.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2025-12-19 15:11:44',
invStatus: '未开票',
orderStatus: '未发货'
},
{
orderNo: 'cp521126678106210304',
amount: '11890.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2025-12-09 00:51:22',
invStatus: '未开票',
orderStatus: '未发货'
},
{
orderNo: 'cp521126166883467264',
amount: '11800.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2025-12-09 00:49:20',
invStatus: '未开票',
orderStatus: '未发货'
},
{
orderNo: 'cp517015093888679936',
amount: '142.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2025-11-27 16:33:24',
invStatus: '未开票',
orderStatus: '未发货'
},
{
orderNo: 'cp313601579989073920',
amount: '0.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2024-05-15 08:59:56',
invStatus: '未开票',
orderStatus: '待评价'
},
{
orderNo: 'cp503871643047690240',
amount: '999.00',
invoiceType: '电子普通发票',
headerType: '个人',
time: '2025-10-22 10:06:01',
invStatus: '未开票',
orderStatus: '未发货'
}
{ orderNo: 'cp538981381384962048', amount: '999.00', invoiceType: '电子普通发票', headerType: '个人', time: '2026-01-27 07:19:35', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp523490058603331584', amount: '9.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-12-15 13:22:35', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp524967077409193984', amount: '9.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-12-19 15:11:44', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp521126678106210304', amount: '11890.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-12-09 00:51:22', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp521126166883467264', amount: '11800.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-12-09 00:49:20', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp517015093888679936', amount: '142.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-11-27 16:33:24', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp313601579989073920', amount: '0.00', invoiceType: '电子普通发票', headerType: '个人', time: '2024-05-15 08:59:56', invStatus: '未开票', orderStatus: '待评价' },
{ orderNo: 'cp503871643047690240', amount: '999.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-10-22 10:06:01', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp510234567890123456', amount: '288.00', invoiceType: '电子增值税发票', headerType: '企业', time: '2025-11-05 09:30:00', invStatus: '已开票', orderStatus: '已发货' },
{ orderNo: 'cp511234567890123456', amount: '1580.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-11-10 14:20:00', invStatus: '退款发票', orderStatus: '已退款' },
{ orderNo: 'cp512234567890123456', amount: '680.00', invoiceType: '电子增值税发票', headerType: '企业', time: '2025-11-12 16:45:00', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp513234567890123456', amount: '99.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-11-15 11:00:00', invStatus: '已开票', orderStatus: '已签收' },
{ orderNo: 'cp514234567890123456', amount: '350.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-11-18 08:30:00', invStatus: '未开票', orderStatus: '配送中' },
{ orderNo: 'cp515234567890123456', amount: '2500.00', invoiceType: '电子增值税发票', headerType: '企业', time: '2025-11-20 10:15:00', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp516234567890123456', amount: '120.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-11-22 13:40:00', invStatus: '已开票', orderStatus: '待评价' },
{ orderNo: 'cp518234567890123456', amount: '799.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-11-28 09:50:00', invStatus: '未开票', orderStatus: '未发货' },
{ orderNo: 'cp519234567890123456', amount: '3200.00', invoiceType: '电子增值税发票', headerType: '企业', time: '2025-12-01 14:30:00', invStatus: '退款发票', orderStatus: '已退款' },
{ orderNo: 'cp520234567890123456', amount: '450.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-12-05 10:00:00', invStatus: '未开票', orderStatus: '已发货' },
{ orderNo: 'cp522234567890123456', amount: '980.00', invoiceType: '电子增值税发票', headerType: '企业', time: '2025-12-12 15:20:00', invStatus: '已开票', orderStatus: '已签收' },
{ orderNo: 'cp525234567890123456', amount: '199.00', invoiceType: '电子普通发票', headerType: '个人', time: '2025-12-25 12:00:00', invStatus: '未开票', orderStatus: '未发货' },
])
// ========== 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">

101
pages/mall/admin/finance/withdrawal.uvue
View File

@@ -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