mirror of
https://github.com/Wei-Shaw/sub2api.git
synced 2026-10-31 08:25:35 +00:00
feat: add admin affiliate record pages
This commit is contained in:
lyen1688
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AdminAffiliateRecordsTable type="invites" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminAffiliateRecordsTable from './AdminAffiliateRecordsTable.vue'
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AdminAffiliateRecordsTable type="rebates" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminAffiliateRecordsTable from './AdminAffiliateRecordsTable.vue'
|
||||
</script>
|
||||
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<TablePageLayout>
|
||||
<template #filters>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<div class="relative w-full md:w-80">
|
||||
<Icon name="search" size="md" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input v-model="filters.search" type="text" class="input pl-10" :placeholder="t('admin.affiliates.records.searchPlaceholder')" @input="debounceLoad" />
|
||||
</div>
|
||||
<input v-model="filters.start_at" type="date" class="input w-full sm:w-44" :title="t('admin.affiliates.records.startAt')" @change="reloadFromFirstPage" />
|
||||
<input v-model="filters.end_at" type="date" class="input w-full sm:w-44" :title="t('admin.affiliates.records.endAt')" @change="reloadFromFirstPage" />
|
||||
<button class="btn btn-secondary px-2 md:px-3" :disabled="loading" :title="t('common.refresh')" @click="loadRecords">
|
||||
<Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #table>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:data="records"
|
||||
:loading="loading"
|
||||
:server-side-sort="true"
|
||||
default-sort-key="created_at"
|
||||
default-sort-order="desc"
|
||||
:sort-storage-key="sortStorageKey"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<template #cell-inviter="{ row }">
|
||||
<UserCell
|
||||
:id="row.inviter_id"
|
||||
:email="row.inviter_email"
|
||||
:username="row.inviter_username"
|
||||
:clickable="props.type === 'invites'"
|
||||
@open="openUserOverview"
|
||||
/>
|
||||
</template>
|
||||
<template #cell-invitee="{ row }">
|
||||
<UserCell
|
||||
:id="row.invitee_id"
|
||||
:email="row.invitee_email"
|
||||
:username="row.invitee_username"
|
||||
:clickable="props.type === 'invites'"
|
||||
@open="openUserOverview"
|
||||
/>
|
||||
</template>
|
||||
<template #cell-user="{ row }">
|
||||
<UserCell :id="row.user_id" :email="row.user_email" :username="row.username" />
|
||||
</template>
|
||||
<template #cell-aff_code="{ row }">
|
||||
<span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{ row.aff_code || '-' }}</span>
|
||||
</template>
|
||||
<template #cell-order="{ row }">
|
||||
<div class="space-y-0.5">
|
||||
<div class="font-mono text-sm text-gray-900 dark:text-white">#{{ row.order_id }}</div>
|
||||
<div class="max-w-56 truncate text-sm text-gray-500 dark:text-dark-400">{{ row.out_trade_no }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-payment_type="{ row }">
|
||||
{{ t('payment.methods.' + row.payment_type, row.payment_type || '-') }}
|
||||
</template>
|
||||
<template #cell-order_status="{ row }">
|
||||
<OrderStatusBadge :status="row.order_status" />
|
||||
</template>
|
||||
<template #cell-total_rebate="{ row }">
|
||||
<AmountText :value="row.total_rebate" />
|
||||
</template>
|
||||
<template #cell-order_amount="{ row }">
|
||||
<AmountText :value="row.order_amount" />
|
||||
</template>
|
||||
<template #cell-pay_amount="{ row }">
|
||||
<span class="text-sm text-gray-900 dark:text-white">¥{{ formatAmount(row.pay_amount) }}</span>
|
||||
</template>
|
||||
<template #cell-rebate_amount="{ row }">
|
||||
<AmountText :value="row.rebate_amount" strong />
|
||||
</template>
|
||||
<template #cell-amount="{ row }">
|
||||
<AmountText :value="row.amount" strong />
|
||||
</template>
|
||||
<template #cell-current_balance="{ row }">
|
||||
<AmountText :value="row.current_balance" />
|
||||
</template>
|
||||
<template #cell-remaining_quota="{ row }">
|
||||
<AmountText :value="row.remaining_quota" />
|
||||
</template>
|
||||
<template #cell-frozen_quota="{ row }">
|
||||
<AmountText :value="row.frozen_quota" />
|
||||
</template>
|
||||
<template #cell-history_quota="{ row }">
|
||||
<AmountText :value="row.history_quota" />
|
||||
</template>
|
||||
<template #cell-created_at="{ row }">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ formatDateTime(row.created_at) }}</span>
|
||||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
|
||||
<template #pagination>
|
||||
<Pagination
|
||||
v-if="pagination.total > 0"
|
||||
:page="pagination.page"
|
||||
:total="pagination.total"
|
||||
:page-size="pagination.page_size"
|
||||
@update:page="handlePageChange"
|
||||
@update:pageSize="handlePageSizeChange"
|
||||
/>
|
||||
</template>
|
||||
</TablePageLayout>
|
||||
|
||||
<BaseDialog
|
||||
:show="overviewDialog"
|
||||
:title="t('admin.affiliates.overview.title')"
|
||||
width="normal"
|
||||
@close="overviewDialog = false"
|
||||
>
|
||||
<div v-if="overviewLoading" class="flex justify-center py-8">
|
||||
<div class="h-6 w-6 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"></div>
|
||||
</div>
|
||||
<div v-else-if="selectedOverview" class="space-y-4">
|
||||
<div class="rounded-lg border border-gray-100 bg-gray-50 p-4 dark:border-dark-700 dark:bg-dark-800">
|
||||
<div class="font-mono text-sm text-gray-900 dark:text-white">#{{ selectedOverview.user_id }}</div>
|
||||
<div class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ selectedOverview.email || '-' }}</div>
|
||||
<div class="mt-0.5 text-sm text-gray-500 dark:text-dark-400">{{ selectedOverview.username || '-' }}</div>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<OverviewStat :label="t('admin.affiliates.overview.affCode')" :value="selectedOverview.aff_code || '-'" mono />
|
||||
<OverviewStat :label="t('admin.affiliates.overview.rebateRate')" :value="formatPercent(selectedOverview.rebate_rate_percent)" />
|
||||
<OverviewStat :label="t('admin.affiliates.overview.invitedCount')" :value="String(selectedOverview.invited_count)" />
|
||||
<OverviewStat :label="t('admin.affiliates.overview.rebatedInviteeCount')" :value="String(selectedOverview.rebated_invitee_count)" />
|
||||
<OverviewStat :label="t('admin.affiliates.overview.availableQuota')" :value="'$' + formatAmount(selectedOverview.available_quota)" />
|
||||
<OverviewStat :label="t('admin.affiliates.overview.historyQuota')" :value="'$' + formatAmount(selectedOverview.history_quota)" />
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent, h, onMounted, reactive, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import AppLayout from '@/components/layout/AppLayout.vue'
|
||||
import TablePageLayout from '@/components/layout/TablePageLayout.vue'
|
||||
import DataTable from '@/components/common/DataTable.vue'
|
||||
import Pagination from '@/components/common/Pagination.vue'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import OrderStatusBadge from '@/components/payment/OrderStatusBadge.vue'
|
||||
import type { Column } from '@/components/common/types'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { affiliatesAPI, type AffiliateInviteRecord, type AffiliateRebateRecord, type AffiliateTransferRecord, type AffiliateUserOverview, type ListAffiliateRecordsParams } from '@/api/admin/affiliates'
|
||||
import type { PaginatedResponse } from '@/types'
|
||||
import { extractI18nErrorMessage } from '@/utils/apiError'
|
||||
import { formatDateTime as formatDisplayDateTime } from '@/utils/format'
|
||||
|
||||
type RecordType = 'invites' | 'rebates' | 'transfers'
|
||||
type AffiliateRecord = AffiliateInviteRecord | AffiliateRebateRecord | AffiliateTransferRecord
|
||||
|
||||
const props = defineProps<{
|
||||
type: RecordType
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
const loading = ref(false)
|
||||
const records = ref<AffiliateRecord[]>([])
|
||||
const filters = reactive({ search: '', start_at: '', end_at: '' })
|
||||
const pagination = reactive({ page: 1, page_size: 20, total: 0 })
|
||||
const overviewDialog = ref(false)
|
||||
const overviewLoading = ref(false)
|
||||
const selectedOverview = ref<AffiliateUserOverview | null>(null)
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const columns = computed<Column[]>(() => {
|
||||
if (props.type === 'invites') {
|
||||
return [
|
||||
{ key: 'inviter', label: t('admin.affiliates.records.inviter'), sortable: true },
|
||||
{ key: 'invitee', label: t('admin.affiliates.records.invitee'), sortable: true },
|
||||
{ key: 'aff_code', label: t('admin.affiliates.records.affCode'), sortable: true },
|
||||
{ key: 'total_rebate', label: t('admin.affiliates.records.totalRebate'), sortable: true },
|
||||
{ key: 'created_at', label: t('admin.affiliates.records.invitedAt'), sortable: true },
|
||||
]
|
||||
}
|
||||
if (props.type === 'rebates') {
|
||||
return [
|
||||
{ key: 'order', label: t('admin.affiliates.records.order'), sortable: true },
|
||||
{ key: 'inviter', label: t('admin.affiliates.records.inviter'), sortable: true },
|
||||
{ key: 'invitee', label: t('admin.affiliates.records.invitee'), sortable: true },
|
||||
{ key: 'order_amount', label: t('admin.affiliates.records.orderAmount'), sortable: true },
|
||||
{ key: 'pay_amount', label: t('admin.affiliates.records.payAmount'), sortable: true },
|
||||
{ key: 'rebate_amount', label: t('admin.affiliates.records.rebateAmount') },
|
||||
{ key: 'payment_type', label: t('admin.affiliates.records.paymentType'), sortable: true },
|
||||
{ key: 'order_status', label: t('admin.affiliates.records.orderStatus'), sortable: true },
|
||||
{ key: 'created_at', label: t('admin.affiliates.records.rebatedAt'), sortable: true },
|
||||
]
|
||||
}
|
||||
return [
|
||||
{ key: 'user', label: t('admin.affiliates.records.user'), sortable: true },
|
||||
{ key: 'amount', label: t('admin.affiliates.records.transferAmount'), sortable: true },
|
||||
{ key: 'current_balance', label: t('admin.affiliates.records.currentBalance'), sortable: true },
|
||||
{ key: 'remaining_quota', label: t('admin.affiliates.records.remainingQuota'), sortable: true },
|
||||
{ key: 'frozen_quota', label: t('admin.affiliates.records.frozenQuota'), sortable: true },
|
||||
{ key: 'history_quota', label: t('admin.affiliates.records.historyQuota'), sortable: true },
|
||||
{ key: 'created_at', label: t('admin.affiliates.records.transferredAt'), sortable: true },
|
||||
]
|
||||
})
|
||||
|
||||
const sortStorageKey = computed(() => `admin-affiliate-${props.type}-table-sort`)
|
||||
|
||||
function loadInitialSortState(): { sort_by: string; sort_order: 'asc' | 'desc' } {
|
||||
const fallback = { sort_by: 'created_at', sort_order: 'desc' as 'asc' | 'desc' }
|
||||
try {
|
||||
const raw = localStorage.getItem(sortStorageKey.value)
|
||||
if (!raw) return fallback
|
||||
const parsed = JSON.parse(raw) as { key?: string; order?: string }
|
||||
const key = typeof parsed.key === 'string' ? parsed.key : ''
|
||||
if (!columns.value.some((column) => column.key === key && column.sortable)) return fallback
|
||||
return {
|
||||
sort_by: key,
|
||||
sort_order: parsed.order === 'asc' ? 'asc' : 'desc',
|
||||
}
|
||||
} catch {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
|
||||
const sortState = reactive(loadInitialSortState())
|
||||
|
||||
function userTimezone(): string {
|
||||
try {
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
} catch {
|
||||
return 'UTC'
|
||||
}
|
||||
}
|
||||
|
||||
function buildParams(): ListAffiliateRecordsParams {
|
||||
return {
|
||||
page: pagination.page,
|
||||
page_size: pagination.page_size,
|
||||
search: filters.search.trim() || undefined,
|
||||
start_at: filters.start_at || undefined,
|
||||
end_at: filters.end_at || undefined,
|
||||
sort_by: sortState.sort_by,
|
||||
sort_order: sortState.sort_order,
|
||||
timezone: userTimezone(),
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchRecords(params: ListAffiliateRecordsParams): Promise<PaginatedResponse<AffiliateRecord>> {
|
||||
if (props.type === 'invites') {
|
||||
return affiliatesAPI.listInviteRecords(params)
|
||||
}
|
||||
if (props.type === 'rebates') {
|
||||
return affiliatesAPI.listRebateRecords(params)
|
||||
}
|
||||
return affiliatesAPI.listTransferRecords(params)
|
||||
}
|
||||
|
||||
async function loadRecords() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await fetchRecords(buildParams())
|
||||
records.value = res.items || []
|
||||
pagination.total = res.total || 0
|
||||
} catch (error) {
|
||||
appStore.showError(extractI18nErrorMessage(error, t, 'admin.affiliates.errors', t('common.error')))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function debounceLoad() {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => reloadFromFirstPage(), 300)
|
||||
}
|
||||
|
||||
function reloadFromFirstPage() {
|
||||
pagination.page = 1
|
||||
void loadRecords()
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
pagination.page = page
|
||||
void loadRecords()
|
||||
}
|
||||
|
||||
function handlePageSizeChange(size: number) {
|
||||
pagination.page_size = size
|
||||
pagination.page = 1
|
||||
void loadRecords()
|
||||
}
|
||||
|
||||
function handleSort(key: string, order: 'asc' | 'desc') {
|
||||
sortState.sort_by = key
|
||||
sortState.sort_order = order
|
||||
pagination.page = 1
|
||||
void loadRecords()
|
||||
}
|
||||
|
||||
function formatAmount(value: number | null | undefined): string {
|
||||
return Number(value || 0).toFixed(2)
|
||||
}
|
||||
|
||||
function formatPercent(value: number | null | undefined): string {
|
||||
const rounded = Math.round(Number(value || 0) * 100) / 100
|
||||
return `${Number.isInteger(rounded) ? rounded.toString() : rounded.toString()}%`
|
||||
}
|
||||
|
||||
function formatDateTime(value: string | null | undefined): string {
|
||||
return value ? formatDisplayDateTime(value) : '-'
|
||||
}
|
||||
|
||||
async function openUserOverview(userId: number) {
|
||||
if (!userId) return
|
||||
overviewDialog.value = true
|
||||
overviewLoading.value = true
|
||||
selectedOverview.value = null
|
||||
try {
|
||||
selectedOverview.value = await affiliatesAPI.getUserOverview(userId)
|
||||
} catch (error) {
|
||||
overviewDialog.value = false
|
||||
appStore.showError(extractI18nErrorMessage(error, t, 'admin.affiliates.errors', t('common.error')))
|
||||
} finally {
|
||||
overviewLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const UserCell = defineComponent({
|
||||
props: {
|
||||
id: { type: Number, required: true },
|
||||
email: { type: String, default: '' },
|
||||
username: { type: String, default: '' },
|
||||
clickable: { type: Boolean, default: false },
|
||||
},
|
||||
emits: ['open'],
|
||||
setup(cellProps, { emit }) {
|
||||
return () => h('div', { class: 'space-y-0.5' }, [
|
||||
h('div', { class: 'font-mono text-sm text-gray-900 dark:text-white' }, `#${cellProps.id}`),
|
||||
h(cellProps.clickable ? 'button' : 'div', {
|
||||
class: cellProps.clickable
|
||||
? 'max-w-56 truncate text-left text-sm font-medium text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300'
|
||||
: 'max-w-56 truncate text-sm text-gray-700 dark:text-gray-300',
|
||||
type: cellProps.clickable ? 'button' : undefined,
|
||||
onClick: cellProps.clickable ? () => emit('open', cellProps.id) : undefined,
|
||||
}, cellProps.email || '-'),
|
||||
h('div', { class: 'max-w-56 truncate text-sm text-gray-500 dark:text-dark-400' }, cellProps.username || '-'),
|
||||
])
|
||||
},
|
||||
})
|
||||
|
||||
const AmountText = defineComponent({
|
||||
props: {
|
||||
value: { type: Number, default: 0 },
|
||||
strong: { type: Boolean, default: false },
|
||||
},
|
||||
setup(amountProps) {
|
||||
return () => h('span', {
|
||||
class: amountProps.strong
|
||||
? 'text-sm font-semibold text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-sm text-gray-900 dark:text-white',
|
||||
}, `$${formatAmount(amountProps.value)}`)
|
||||
},
|
||||
})
|
||||
|
||||
const OverviewStat = defineComponent({
|
||||
props: {
|
||||
label: { type: String, required: true },
|
||||
value: { type: String, required: true },
|
||||
mono: { type: Boolean, default: false },
|
||||
},
|
||||
setup(statProps) {
|
||||
return () => h('div', { class: 'rounded-lg border border-gray-100 bg-white p-3 dark:border-dark-700 dark:bg-dark-900' }, [
|
||||
h('div', { class: 'text-sm text-gray-500 dark:text-dark-400' }, statProps.label),
|
||||
h('div', {
|
||||
class: statProps.mono
|
||||
? 'mt-1 font-mono text-base font-semibold text-gray-900 dark:text-white'
|
||||
: 'mt-1 text-base font-semibold text-gray-900 dark:text-white',
|
||||
}, statProps.value),
|
||||
])
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
void loadRecords()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AdminAffiliateRecordsTable type="transfers" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminAffiliateRecordsTable from './AdminAffiliateRecordsTable.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user