810 lines
26 KiB
Vue
810 lines
26 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, onActivated, ref } from 'vue';
|
||
|
||
defineOptions({ name: 'AdminCashback' });
|
||
import type { TableColumnCtx } from 'element-plus';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import { useAdminLocale } from '../composables/useAdminLocale';
|
||
import { usePermissions } from '../composables/usePermissions';
|
||
import { AdminPerm } from '../constants/permissions';
|
||
import { formatAmount, formatAmountFull } from '../utils/format-amount';
|
||
import { formatRatePercent } from '../utils/rate-percent';
|
||
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
|
||
import { resolveApiError } from '../i18n/form-validation';
|
||
import api from '../api';
|
||
|
||
interface CashbackBatch {
|
||
id: string;
|
||
batchNo: string;
|
||
periodStart: string;
|
||
periodEnd: string;
|
||
playerCount: number;
|
||
totalAmount: string;
|
||
totalEffectiveStake?: string;
|
||
totalBetCount?: number;
|
||
status: string;
|
||
operatorUsername?: string | null;
|
||
confirmedAt?: string | null;
|
||
createdAt: string;
|
||
}
|
||
|
||
interface CashbackPreviewItem {
|
||
userId: string;
|
||
username: string;
|
||
agentUsername: string | null;
|
||
availableBalance: string;
|
||
effectiveStake: string;
|
||
betCount: number;
|
||
rate: string;
|
||
amount: string;
|
||
}
|
||
|
||
interface CashbackPreview {
|
||
batch: CashbackBatch;
|
||
items: CashbackPreviewItem[];
|
||
totalAmount: string;
|
||
totalEffectiveStake?: string;
|
||
totalBetCount?: number;
|
||
avgRate?: string;
|
||
replacedPreviewCount?: number;
|
||
}
|
||
|
||
const { t, localeTag } = useAdminLocale();
|
||
const { hasPermission } = usePermissions();
|
||
const canConfirmCashback = computed(() => hasPermission(AdminPerm.cashback));
|
||
|
||
const preview = ref<CashbackPreview | null>(null);
|
||
const rulesVisible = ref(false);
|
||
const loading = ref(false);
|
||
const historyLoading = ref(false);
|
||
const detailLoading = ref(false);
|
||
const detailVisible = ref(false);
|
||
const detail = ref<CashbackPreview | null>(null);
|
||
|
||
const history = ref<CashbackBatch[]>([]);
|
||
const historyTotal = ref(0);
|
||
const historyPage = ref(1);
|
||
const historyPageSize = ref(10);
|
||
const historyStatus = ref('');
|
||
|
||
const period = ref({
|
||
start: new Date(Date.now() - 7 * 86400000).toISOString().slice(0, 10),
|
||
end: new Date().toISOString().slice(0, 10),
|
||
});
|
||
|
||
const previewItems = computed(() => preview.value?.items ?? []);
|
||
const detailItems = computed(() => detail.value?.items ?? []);
|
||
|
||
function formatRate(value: string | number | null | undefined) {
|
||
return formatRatePercent(value);
|
||
}
|
||
|
||
function formatPeriodDate(value: string) {
|
||
if (!value) return '—';
|
||
return value.slice(0, 10);
|
||
}
|
||
|
||
function formatPeriodRange(row: Pick<CashbackBatch, 'periodStart' | 'periodEnd'>) {
|
||
return `${formatPeriodDate(row.periodStart)} — ${formatPeriodDate(row.periodEnd)}`;
|
||
}
|
||
|
||
function formatTime(value: string | null | undefined) {
|
||
if (!value) return '—';
|
||
return new Date(value).toLocaleString(localeTag.value, {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
function statusLabel(status: string) {
|
||
const key = `cashback.status.${status}`;
|
||
const label = t(key);
|
||
return label === key ? status : label;
|
||
}
|
||
|
||
function statusTagType(status: string) {
|
||
if (status === 'CONFIRMED') return 'success';
|
||
if (status === 'CANCELLED') return 'info';
|
||
return 'warning';
|
||
}
|
||
|
||
function tableSummary(param: {
|
||
columns: TableColumnCtx<CashbackPreviewItem>[];
|
||
data: CashbackPreviewItem[];
|
||
}) {
|
||
const { columns, data } = param;
|
||
const stakeSum = data.reduce((s, row) => s + Number(row.effectiveStake), 0);
|
||
const betSum = data.reduce((s, row) => s + Number(row.betCount ?? 0), 0);
|
||
const amountSum = data.reduce((s, row) => s + Number(row.amount), 0);
|
||
|
||
return columns.map((col, index) => {
|
||
if (index === 0) return t('cashback.table_total');
|
||
if (col.property === 'betCount') return String(betSum);
|
||
if (col.property === 'effectiveStake') return formatAmount(stakeSum);
|
||
if (col.property === 'amount') return formatAmount(amountSum);
|
||
return '';
|
||
});
|
||
}
|
||
|
||
async function loadHistory(opts?: { silent?: boolean }) {
|
||
if (!opts?.silent) historyLoading.value = true;
|
||
try {
|
||
const { data } = await api.get('/admin/cashbacks', {
|
||
params: {
|
||
page: historyPage.value,
|
||
pageSize: historyPageSize.value,
|
||
status: historyStatus.value || undefined,
|
||
},
|
||
});
|
||
history.value = (data.data.items ?? []) as CashbackBatch[];
|
||
historyTotal.value = data.data.total ?? 0;
|
||
} catch (err) {
|
||
ElMessage.error(resolveApiError(err, t, 'msg.load_failed'));
|
||
} finally {
|
||
if (!opts?.silent) historyLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function generatePreview() {
|
||
loading.value = true;
|
||
try {
|
||
const { data } = await api.post('/admin/cashbacks/preview', {
|
||
periodStart: period.value.start,
|
||
periodEnd: period.value.end,
|
||
});
|
||
preview.value = data.data as CashbackPreview;
|
||
const replaced = preview.value.replacedPreviewCount ?? 0;
|
||
if (replaced > 0) {
|
||
ElMessage.warning(t('msg.cashback_preview_replaced', { n: replaced }));
|
||
} else {
|
||
ElMessage.success(t('msg.cashback_preview_ready'));
|
||
}
|
||
await loadHistory();
|
||
} catch (err) {
|
||
ElMessage.error(resolveApiError(err, t, 'msg.save_failed'));
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function confirmBatchId(batchId: string) {
|
||
try {
|
||
await ElMessageBox.confirm(t('cashback.confirm_prompt'), t('common.confirm'), {
|
||
type: 'warning',
|
||
confirmButtonText: t('cashback.confirm_issue'),
|
||
cancelButtonText: t('common.cancel'),
|
||
});
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await api.post(`/admin/cashbacks/${batchId}/confirm`);
|
||
ElMessage.success(t('msg.cashback_issued'));
|
||
if (preview.value?.batch.id === batchId) preview.value = null;
|
||
if (detail.value?.batch.id === batchId) detailVisible.value = false;
|
||
await loadHistory();
|
||
} catch (err) {
|
||
ElMessage.error(resolveApiError(err, t, 'msg.save_failed'));
|
||
}
|
||
}
|
||
|
||
async function cancelBatchId(batchId: string) {
|
||
try {
|
||
await ElMessageBox.confirm(t('cashback.cancel_prompt'), t('common.confirm'), {
|
||
type: 'warning',
|
||
confirmButtonText: t('cashback.cancel_issue'),
|
||
cancelButtonText: t('common.cancel'),
|
||
});
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await api.post(`/admin/cashbacks/${batchId}/cancel`);
|
||
ElMessage.success(t('msg.cashback_cancelled'));
|
||
if (preview.value?.batch.id === batchId) preview.value = null;
|
||
if (detail.value?.batch.id === batchId) detailVisible.value = false;
|
||
await loadHistory();
|
||
} catch (err) {
|
||
ElMessage.error(resolveApiError(err, t, 'msg.save_failed'));
|
||
}
|
||
}
|
||
|
||
async function confirm() {
|
||
if (!preview.value?.batch) return;
|
||
await confirmBatchId(preview.value.batch.id);
|
||
}
|
||
|
||
async function openDetail(batchId: string) {
|
||
detailLoading.value = true;
|
||
detailVisible.value = true;
|
||
detail.value = null;
|
||
try {
|
||
const { data } = await api.get(`/admin/cashbacks/${batchId}`);
|
||
detail.value = data.data as CashbackPreview;
|
||
} catch (err) {
|
||
detailVisible.value = false;
|
||
ElMessage.error(resolveApiError(err, t, 'msg.load_failed'));
|
||
} finally {
|
||
detailLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function onHistoryPageChange(p: number) {
|
||
historyPage.value = p;
|
||
loadHistory();
|
||
}
|
||
|
||
function onHistorySizeChange(size: number) {
|
||
historyPageSize.value = size;
|
||
historyPage.value = 1;
|
||
loadHistory();
|
||
}
|
||
|
||
function onHistoryStatusChange() {
|
||
historyPage.value = 1;
|
||
loadHistory();
|
||
}
|
||
|
||
onMounted(() => void loadHistory());
|
||
onActivated(() => {
|
||
if (history.value.length > 0) void loadHistory({ silent: true });
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-scroll">
|
||
<el-card class="tool-card" shadow="never">
|
||
<div class="filter-row">
|
||
<el-form inline>
|
||
<el-form-item :label="t('cashback.start_date')">
|
||
<el-date-picker v-model="period.start" type="date" value-format="YYYY-MM-DD" style="width: 150px" />
|
||
</el-form-item>
|
||
<el-form-item :label="t('cashback.end_date')">
|
||
<el-date-picker v-model="period.end" type="date" value-format="YYYY-MM-DD" style="width: 150px" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" :loading="loading" @click="generatePreview">
|
||
{{ t('cashback.preview_btn') }}
|
||
</el-button>
|
||
<button
|
||
type="button"
|
||
class="rules-help-btn"
|
||
:aria-label="t('cashback.rules_title')"
|
||
:title="t('cashback.rules_title')"
|
||
@click="rulesVisible = true"
|
||
>
|
||
?
|
||
</button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-dialog
|
||
v-model="rulesVisible"
|
||
:title="t('cashback.rules_title')"
|
||
width="560px"
|
||
destroy-on-close
|
||
>
|
||
<ul class="rules-list">
|
||
<li>{{ t('cashback.rule_period') }}</li>
|
||
<li>{{ t('cashback.rule_eligible') }}</li>
|
||
<li>{{ t('cashback.rule_formula') }}</li>
|
||
<li>{{ t('cashback.rule_rate') }}</li>
|
||
<li>{{ t('cashback.rule_flow') }}</li>
|
||
<li>{{ t('cashback.rule_platform') }}</li>
|
||
<li class="rules-note">{{ t('cashback.rule_note_zero') }}</li>
|
||
</ul>
|
||
</el-dialog>
|
||
|
||
<template v-if="preview">
|
||
<el-card class="preview-card" shadow="never">
|
||
<div class="preview-head">
|
||
<div>
|
||
<div class="preview-title">{{ t('cashback.preview_title') }}</div>
|
||
<div class="preview-meta">
|
||
<span>{{ t('cashback.batch_no') }}：{{ preview.batch.batchNo }}</span>
|
||
<span class="meta-sep">·</span>
|
||
<span>{{ formatPeriodRange(preview.batch) }}</span>
|
||
</div>
|
||
</div>
|
||
<el-tag :type="statusTagType(preview.batch.status)" size="small">
|
||
{{ statusLabel(preview.batch.status) }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<el-row :gutter="12" class="preview-stats">
|
||
<el-col :xs="12" :sm="8" :md="4">
|
||
<div class="pstat">
|
||
<div class="pstat-value">{{ preview.batch.playerCount ?? 0 }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.players') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="8" :md="4">
|
||
<div class="pstat">
|
||
<div class="pstat-value pstat-green">{{ formatAmount(preview.totalAmount) }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.total') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="8" :md="4">
|
||
<div class="pstat">
|
||
<div class="pstat-value">{{ formatAmount(preview.totalEffectiveStake ?? 0) }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.effective_stake') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="8" :md="4">
|
||
<div class="pstat">
|
||
<div class="pstat-value">{{ preview.totalBetCount ?? 0 }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.bet_count') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="8" :md="4">
|
||
<div class="pstat">
|
||
<div class="pstat-value">{{ formatRate(preview.avgRate) }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.avg_rate') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="8" :md="4">
|
||
<div class="pstat">
|
||
<div class="pstat-value">{{ previewItems.length }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.lines') }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<el-card class="data-card" shadow="never">
|
||
<div class="table-title">{{ t('cashback.table_title') }}</div>
|
||
<div class="table-wrap">
|
||
<el-table
|
||
:data="previewItems"
|
||
stripe
|
||
class="cashback-table"
|
||
show-summary
|
||
:summary-method="tableSummary"
|
||
:empty-text="t('cashback.empty_items')"
|
||
>
|
||
<el-table-column type="index" :label="t('cashback.col.index')" width="56" align="center" />
|
||
<el-table-column
|
||
prop="username"
|
||
:label="t('cashback.col.player')"
|
||
min-width="120"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
prop="agentUsername"
|
||
:label="t('cashback.col.agent')"
|
||
min-width="120"
|
||
show-overflow-tooltip
|
||
>
|
||
<template #default="{ row }">{{ row.agentUsername || '—' }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="availableBalance"
|
||
:label="t('cashback.col.balance')"
|
||
min-width="110"
|
||
align="right"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-tooltip :content="formatAmountFull(row.availableBalance)" placement="top">
|
||
<span>{{ formatAmount(row.availableBalance) }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="betCount"
|
||
:label="t('cashback.col.bet_count')"
|
||
width="88"
|
||
align="right"
|
||
/>
|
||
<el-table-column
|
||
prop="effectiveStake"
|
||
:label="t('cashback.col.effective_stake')"
|
||
min-width="120"
|
||
align="right"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-tooltip :content="formatAmountFull(row.effectiveStake)" placement="top">
|
||
<span>{{ formatAmount(row.effectiveStake) }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="rate" :label="t('cashback.col.rate')" width="96" align="right">
|
||
<template #default="{ row }">{{ formatRate(row.rate) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="amount" :label="t('cashback.col.amount')" min-width="120" align="right">
|
||
<template #default="{ row }">
|
||
<el-tooltip :content="formatAmountFull(row.amount)" placement="top">
|
||
<span class="amount-cell">{{ formatAmount(row.amount) }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<div v-if="preview.batch.status === 'PREVIEW' && canConfirmCashback" class="preview-actions">
|
||
<el-button type="success" :disabled="previewItems.length === 0" @click="confirm">
|
||
{{ t('cashback.confirm_issue') }}
|
||
</el-button>
|
||
<el-button type="danger" plain @click="cancelBatchId(preview.batch.id)">
|
||
{{ t('cashback.cancel_issue') }}
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<el-card class="data-card history-card" shadow="never">
|
||
<div class="history-head">
|
||
<div class="table-title">{{ t('cashback.history_title') }}</div>
|
||
<el-select
|
||
v-model="historyStatus"
|
||
clearable
|
||
:placeholder="t('common.all')"
|
||
style="width: 140px"
|
||
@change="onHistoryStatusChange"
|
||
>
|
||
<el-option :label="t('cashback.status.PREVIEW')" value="PREVIEW" />
|
||
<el-option :label="t('cashback.status.CONFIRMED')" value="CONFIRMED" />
|
||
<el-option :label="t('cashback.status.CANCELLED')" value="CANCELLED" />
|
||
</el-select>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<el-table v-loading="historyLoading" :data="history" stripe>
|
||
<template #empty>
|
||
<AdminTableEmpty :text="t('cashback.history_empty')" />
|
||
</template>
|
||
<el-table-column type="index" :index="(i: number) => (historyPage - 1) * historyPageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
|
||
<el-table-column prop="batchNo" :label="t('cashback.batch_no')" min-width="140" show-overflow-tooltip />
|
||
<el-table-column :label="t('cashback.col.period')" min-width="190">
|
||
<template #default="{ row }">{{ formatPeriodRange(row) }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('cashback.col.status')" width="96" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="playerCount" :label="t('cashback.stat.players')" width="96" align="right" />
|
||
<el-table-column prop="totalBetCount" :label="t('cashback.col.bet_count')" width="88" align="right">
|
||
<template #default="{ row }">{{ row.totalBetCount ?? 0 }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('cashback.stat.effective_stake')" min-width="120" align="right">
|
||
<template #default="{ row }">{{ formatAmount(row.totalEffectiveStake ?? 0) }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('cashback.stat.total')" min-width="110" align="right">
|
||
<template #default="{ row }">
|
||
<span class="amount-cell">{{ formatAmount(row.totalAmount) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('cashback.col.created_at')" min-width="150">
|
||
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('cashback.col.confirmed_at')" min-width="150">
|
||
<template #default="{ row }">{{ formatTime(row.confirmedAt) }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('cashback.col.operator')" min-width="100" show-overflow-tooltip>
|
||
<template #default="{ row }">{{ row.operatorUsername || '—' }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="t('common.actions')" width="200" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary" @click="openDetail(row.id)">
|
||
{{ t('cashback.view_detail') }}
|
||
</el-button>
|
||
<template v-if="row.status === 'PREVIEW' && canConfirmCashback">
|
||
<el-button link type="success" @click="confirmBatchId(row.id)">
|
||
{{ t('cashback.confirm_issue') }}
|
||
</el-button>
|
||
<el-button link type="danger" @click="cancelBatchId(row.id)">
|
||
{{ t('cashback.cancel_issue') }}
|
||
</el-button>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="pager">
|
||
<el-pagination
|
||
v-model:current-page="historyPage"
|
||
v-model:page-size="historyPageSize"
|
||
:total="historyTotal"
|
||
:page-sizes="[10, 20, 50]"
|
||
layout="total, sizes, prev, pager, next"
|
||
background
|
||
@current-change="onHistoryPageChange"
|
||
@size-change="onHistorySizeChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-dialog
|
||
v-model="detailVisible"
|
||
:title="t('cashback.detail_title')"
|
||
width="920px"
|
||
destroy-on-close
|
||
>
|
||
<div v-loading="detailLoading">
|
||
<template v-if="detail">
|
||
<div class="detail-meta">
|
||
<span>{{ t('cashback.batch_no') }}：{{ detail.batch.batchNo }}</span>
|
||
<span class="meta-sep">·</span>
|
||
<span>{{ formatPeriodRange(detail.batch) }}</span>
|
||
<el-tag :type="statusTagType(detail.batch.status)" size="small" class="detail-tag">
|
||
{{ statusLabel(detail.batch.status) }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="detail-summary">{{ t('cashback.detail_summary') }}</div>
|
||
<el-row :gutter="12" class="preview-stats detail-stats">
|
||
<el-col :span="8">
|
||
<div class="pstat pstat-compact">
|
||
<div class="pstat-value">{{ detail.batch.playerCount ?? 0 }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.players') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="pstat pstat-compact">
|
||
<div class="pstat-value pstat-green">{{ formatAmount(detail.totalAmount) }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.total') }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="pstat pstat-compact">
|
||
<div class="pstat-value">{{ detail.totalBetCount ?? 0 }}</div>
|
||
<div class="pstat-label">{{ t('cashback.stat.bet_count') }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="table-wrap">
|
||
<el-table
|
||
:data="detailItems"
|
||
stripe
|
||
max-height="360"
|
||
show-summary
|
||
:summary-method="tableSummary"
|
||
>
|
||
<el-table-column type="index" :label="t('cashback.col.index')" width="56" align="center" />
|
||
<el-table-column prop="username" :label="t('cashback.col.player')" min-width="110" />
|
||
<el-table-column prop="agentUsername" :label="t('cashback.col.agent')" min-width="100">
|
||
<template #default="{ row }">{{ row.agentUsername || '—' }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="availableBalance" :label="t('cashback.col.balance')" min-width="100" align="right">
|
||
<template #default="{ row }">{{ formatAmount(row.availableBalance) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="betCount" :label="t('cashback.col.bet_count')" width="88" align="right" />
|
||
<el-table-column prop="effectiveStake" :label="t('cashback.col.effective_stake')" min-width="110" align="right">
|
||
<template #default="{ row }">{{ formatAmount(row.effectiveStake) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="rate" :label="t('cashback.col.rate')" width="96" align="right">
|
||
<template #default="{ row }">{{ formatRate(row.rate) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="amount" :label="t('cashback.col.amount')" min-width="110" align="right">
|
||
<template #default="{ row }">
|
||
<span class="amount-cell">{{ formatAmount(row.amount) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div v-if="detail?.batch.status === 'PREVIEW' && canConfirmCashback" class="detail-actions">
|
||
<el-button type="success" :disabled="detailItems.length === 0" @click="confirmBatchId(detail.batch.id)">
|
||
{{ t('cashback.confirm_issue') }}
|
||
</el-button>
|
||
<el-button type="danger" plain @click="cancelBatchId(detail.batch.id)">
|
||
{{ t('cashback.cancel_issue') }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tool-card { margin-bottom: 16px; border-radius: 12px; }
|
||
|
||
.rules-help-btn {
|
||
margin-left: 10px;
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
border: 1px solid #3a3a3a;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
color: #aaa;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||
}
|
||
|
||
.rules-help-btn:hover {
|
||
color: #f5f5f5;
|
||
border-color: rgba(255, 255, 255, 0.14);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.rules-list {
|
||
margin: 0;
|
||
padding-left: 18px;
|
||
font-size: 13px;
|
||
line-height: 1.75;
|
||
color: #ccc;
|
||
}
|
||
|
||
.rules-note {
|
||
color: #888;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.preview-card,
|
||
.data-card {
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.history-card {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.preview-head,
|
||
.history-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.preview-title,
|
||
.table-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.preview-meta,
|
||
.detail-meta {
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
color: #888;
|
||
}
|
||
|
||
.detail-tag {
|
||
margin-left: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.detail-summary {
|
||
margin: 12px 0 8px;
|
||
font-size: 13px;
|
||
color: #aaa;
|
||
}
|
||
|
||
.meta-sep {
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.preview-stats {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-stats {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.pstat {
|
||
padding: 14px 12px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pstat-compact {
|
||
padding: 12px 10px;
|
||
}
|
||
|
||
.pstat-value {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.pstat-green {
|
||
color: var(--green-glow);
|
||
text-shadow: none;
|
||
}
|
||
|
||
.pstat-label {
|
||
font-size: 12px;
|
||
color: #888;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.amount-cell {
|
||
color: var(--green-glow);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.preview-actions,
|
||
.detail-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pager {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.tool-card,
|
||
.preview-card,
|
||
.data-card {
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.rules-help-btn {
|
||
border-color: var(--border);
|
||
background: #ffffff;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.rules-help-btn:hover {
|
||
border-color: #d5cfc3;
|
||
background: var(--accent-hover);
|
||
color: var(--text);
|
||
}
|
||
|
||
.rules-list,
|
||
.detail-summary,
|
||
.preview-title,
|
||
.table-title,
|
||
.pstat-value {
|
||
color: var(--text);
|
||
}
|
||
|
||
.rules-note,
|
||
.preview-meta,
|
||
.detail-meta,
|
||
.pstat-label {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.pstat {
|
||
border-color: var(--border);
|
||
background: #fbfaf7;
|
||
}
|
||
|
||
.amount-cell,
|
||
.pstat-green {
|
||
color: var(--success-text);
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.preview-head,
|
||
.history-head {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.preview-actions,
|
||
.detail-actions,
|
||
.pager {
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
</style>
|