导入 AKSRT 主题开发源码

assets/admin/src/pages/shop/ShopWithdrawals.vue

@@ -0,0 +1,138 @@
+<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>