139 lines
3.8 KiB
Vue
139 lines
3.8 KiB
Vue
<template>
|
|
<div class="aksrt-page-container">
|
|
<PageHeader title="提现管理" desc="审核和管理创作者提现申请。" />
|
|
|
|
<!-- 筛选栏 -->
|
|
<n-card size="small" class="aksrt-shop__section">
|
|
<n-space>
|
|
<n-select v-model:value="statusFilter" :options="statusOptions" placeholder="提现状态" clearable style="width: 140px;" @update:value="loadWithdrawals" />
|
|
</n-space>
|
|
</n-card>
|
|
|
|
<!-- 提现列表 -->
|
|
<n-card size="small" class="aksrt-shop__section">
|
|
<n-data-table
|
|
:columns="columns"
|
|
:data="withdrawals"
|
|
:loading="loading"
|
|
:bordered="false"
|
|
size="small"
|
|
:pagination="pagination"
|
|
@update:page="handlePageChange"
|
|
/>
|
|
</n-card>
|
|
|
|
<!-- 审核弹窗 -->
|
|
<WithdrawalReviewModal
|
|
v-model:show="reviewVisible"
|
|
:withdrawal="reviewItem"
|
|
@updated="loadWithdrawals"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, h } from 'vue'
|
|
import { NTag, NButton } from 'naive-ui'
|
|
import PageHeader from '@/components/PageHeader.vue'
|
|
import WithdrawalReviewModal from './components/WithdrawalReviewModal.vue'
|
|
import api from '@/api/index.js'
|
|
|
|
const loading = ref(false)
|
|
const withdrawals = ref([])
|
|
const statusFilter = ref(null)
|
|
|
|
const reviewVisible = ref(false)
|
|
const reviewItem = ref({})
|
|
|
|
const statusOptions = [
|
|
{ label: '待审核', value: 'pending' },
|
|
{ label: '已批准', value: 'approved' },
|
|
{ label: '已拒绝', value: 'rejected' },
|
|
{ label: '已打款', value: 'completed' },
|
|
]
|
|
|
|
const statusMap = {
|
|
pending: { label: '待审核', type: 'warning' },
|
|
approved: { label: '已批准', type: 'info' },
|
|
processing: { label: '处理中', type: 'info' },
|
|
completed: { label: '已打款', type: 'success' },
|
|
rejected: { label: '已拒绝', type: 'error' },
|
|
}
|
|
|
|
// Unified pagination: page + per_page → items + total + page + total_pages
|
|
const pagination = reactive({
|
|
page: 1,
|
|
pageSize: 20,
|
|
itemCount: 0,
|
|
showSizePicker: true,
|
|
pageSizes: [10, 20, 50],
|
|
})
|
|
|
|
const columns = [
|
|
{ title: '申请人', key: 'user_name', width: 120 },
|
|
{ title: '金额', key: 'amount', width: 120, render: (row) => '¥' + (row.amount || 0).toFixed(2) },
|
|
{ title: '提现方式', key: 'method', width: 100 },
|
|
{ title: '收款账号', key: 'account_info', width: 160, ellipsis: { tooltip: true } },
|
|
{
|
|
title: '状态',
|
|
key: 'status',
|
|
width: 100,
|
|
render: (row) => {
|
|
const s = statusMap[row.status] || { label: row.status, type: 'default' }
|
|
return h(NTag, { size: 'small', type: s.type }, () => s.label)
|
|
},
|
|
},
|
|
{ title: '申请时间', key: 'created_at', width: 160 },
|
|
{
|
|
title: '操作',
|
|
key: 'actions',
|
|
width: 120,
|
|
render: (row) => {
|
|
if (row.status !== 'pending') {
|
|
return h('span', { style: 'color:#aaa;font-size:12px;' }, '—')
|
|
}
|
|
return h(NButton, { size: 'tiny', quaternary: true, type: 'info', onClick: () => openReview(row) }, () => '审核')
|
|
},
|
|
},
|
|
]
|
|
|
|
async function loadWithdrawals() {
|
|
loading.value = true
|
|
try {
|
|
const params = new URLSearchParams({
|
|
per_page: String(pagination.pageSize),
|
|
page: String(pagination.page),
|
|
})
|
|
if (statusFilter.value) params.set('status', statusFilter.value)
|
|
|
|
const res = await api.request('/payment/withdrawals?' + params.toString())
|
|
if (res?.data) {
|
|
withdrawals.value = res.data.items || []
|
|
pagination.itemCount = res.data.total || 0
|
|
}
|
|
} catch {
|
|
// Endpoint may not exist yet
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function handlePageChange(page) {
|
|
pagination.page = page
|
|
loadWithdrawals()
|
|
}
|
|
|
|
function openReview(row) {
|
|
reviewItem.value = row
|
|
reviewVisible.value = true
|
|
}
|
|
|
|
onMounted(loadWithdrawals)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.aksrt-shop__section {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|