387 lines
16 KiB
Vue
387 lines
16 KiB
Vue
<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>
|