feat: 充值订单审计与重新申请，优化赛事展示和余额刷新
- 新增 deposit_order_audit_logs 表，记录提交/审批/拒绝/撤销/重提全链路 - 管理端充值单页增加审计历史；玩家端充值历史支持时间线与重新申请 - 已拒绝订单可原单号重提；撤销入账使用 PLAYER_DEPOSIT_REVERSAL 并加强幂等 - 结算后清除热门标记，允许归档已结算赛事，完善今日赛事时区窗口 - 足球页今日/早盘独立折叠；资料与余额在进入钱包/个人页及下注后自动刷新 - 补充投注玩法、结算返水规则文档；新增 smoke/settlement CLI 脚本 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -8,6 +8,8 @@ import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
|
||||
|
||||
import { parseCashbackApiData, type CashbackRecord } from '../utils/cashback';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
@@ -17,19 +19,6 @@ const highlightBatchNo = computed(() => {
|
||||
return typeof q === 'string' ? q.trim() : '';
|
||||
});
|
||||
|
||||
type CashbackRecord = {
|
||||
id: string;
|
||||
batchNo: string;
|
||||
periodStart: string;
|
||||
periodEnd: string;
|
||||
confirmedAt: string | null;
|
||||
effectiveStake: string;
|
||||
betCount: number;
|
||||
rate: string;
|
||||
amount: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
const items = ref<CashbackRecord[]>([]);
|
||||
const loading = ref(false);
|
||||
const initialLoading = ref(true);
|
||||
@@ -72,8 +61,7 @@ async function fetchRecords(p = 1) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/cashbacks', { params: { page: p } });
|
||||
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
|
||||
const newItems = result.items ?? [];
|
||||
const newItems = parseCashbackApiData(data.data);
|
||||
|
||||
if (p === 1) {
|
||||
items.value = newItems;
|
||||
@@ -81,7 +69,7 @@ async function fetchRecords(p = 1) {
|
||||
items.value = [...items.value, ...newItems];
|
||||
}
|
||||
|
||||
const pageSize = result.pageSize ?? 20;
|
||||
const pageSize = 20;
|
||||
hasMore.value = newItems.length >= pageSize;
|
||||
page.value = p;
|
||||
} catch {
|
||||
|
||||
@@ -68,7 +68,10 @@ const filterNow = ref(new Date());
|
||||
const { summaryMatches, summaryLoading, loadSummary } = usePlayerMatches();
|
||||
const matches = summaryMatches;
|
||||
const loading = summaryLoading;
|
||||
const expandedLeagues = ref<Set<string>>(new Set());
|
||||
const expandedLeagues = ref<Record<TimeTab, Set<string>>>({
|
||||
today: new Set(),
|
||||
early: new Set(),
|
||||
});
|
||||
|
||||
async function loadMatches() {
|
||||
filterNow.value = new Date();
|
||||
@@ -86,23 +89,23 @@ const pullIndicatorStyle = () => ({
|
||||
opacity: Math.min(pullDistance.value / 48, 1),
|
||||
});
|
||||
|
||||
const filteredMatches = computed(() => {
|
||||
function filterMatchesForTab(tab: TimeTab) {
|
||||
if (mainTab.value !== 'matches') return [];
|
||||
const now = filterNow.value;
|
||||
return matches.value.filter((m) => {
|
||||
const timeMatch =
|
||||
timeTab.value === 'today'
|
||||
tab === 'today'
|
||||
? isInTodayMatchWindow(m.startTime, now)
|
||||
: isAfterTodayMatchWindow(m.startTime, now);
|
||||
if (!timeMatch) return false;
|
||||
if (!showAll.value && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
|
||||
return true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const leagueGroups = computed<LeagueGroup[]>(() => {
|
||||
function buildLeagueGroups(source: Match[]): LeagueGroup[] {
|
||||
const map = new Map<string, LeagueGroup>();
|
||||
for (const m of filteredMatches.value) {
|
||||
for (const m of source) {
|
||||
const id = m.leagueId ?? m.leagueName;
|
||||
if (!map.has(id)) {
|
||||
map.set(id, {
|
||||
@@ -127,29 +130,34 @@ const leagueGroups = computed<LeagueGroup[]>(() => {
|
||||
(a.matches[0]?.displayOrder ?? 0) - (b.matches[0]?.displayOrder ?? 0) ||
|
||||
a.leagueName.localeCompare(b.leagueName),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
watch(leagueGroups, (groups) => {
|
||||
const ids = new Set(expandedLeagues.value);
|
||||
const todayLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('today')));
|
||||
const earlyLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('early')));
|
||||
|
||||
function syncExpandedLeagues(groups: LeagueGroup[], tab: TimeTab) {
|
||||
const current = expandedLeagues.value[tab];
|
||||
const ids = new Set(current);
|
||||
for (const id of [...ids]) {
|
||||
if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
|
||||
}
|
||||
if (ids.size !== expandedLeagues.value.size) expandedLeagues.value = ids;
|
||||
// 默认只展开第一个联赛，减少首屏 DOM
|
||||
if (groups.length > 0 && expandedLeagues.value.size === 0) {
|
||||
expandedLeagues.value = new Set([groups[0].leagueId]);
|
||||
if (groups.length > 0 && ids.size === 0) {
|
||||
ids.add(groups[0].leagueId);
|
||||
}
|
||||
if (ids.size !== current.size || [...ids].some((id) => !current.has(id))) {
|
||||
expandedLeagues.value = { ...expandedLeagues.value, [tab]: ids };
|
||||
}
|
||||
});
|
||||
|
||||
function isLeagueExpanded(leagueId: string) {
|
||||
return expandedLeagues.value.has(leagueId);
|
||||
}
|
||||
|
||||
watch(todayLeagueGroups, (groups) => syncExpandedLeagues(groups, 'today'));
|
||||
watch(earlyLeagueGroups, (groups) => syncExpandedLeagues(groups, 'early'));
|
||||
|
||||
function toggleLeague(leagueId: string) {
|
||||
const next = new Set(expandedLeagues.value);
|
||||
const tab = timeTab.value;
|
||||
const next = new Set(expandedLeagues.value[tab]);
|
||||
if (next.has(leagueId)) next.delete(leagueId);
|
||||
else next.add(leagueId);
|
||||
expandedLeagues.value = next;
|
||||
expandedLeagues.value = { ...expandedLeagues.value, [tab]: next };
|
||||
}
|
||||
|
||||
function selectMainTab(tab: MainTab) {
|
||||
@@ -232,24 +240,47 @@ function goMatch(id: string) {
|
||||
<div v-if="loading" class="state">
|
||||
<GoldSpinner :size="36" />
|
||||
</div>
|
||||
<div v-else-if="leagueGroups.length" class="league-list">
|
||||
<LeagueAccordionItem
|
||||
v-for="group in leagueGroups"
|
||||
:key="group.leagueId"
|
||||
:league-id="group.leagueId"
|
||||
:league-name="group.leagueName"
|
||||
:league-logo-url="group.leagueLogoUrl"
|
||||
:matches="group.matches"
|
||||
:expanded="isLeagueExpanded(group.leagueId)"
|
||||
@toggle="toggleLeague(group.leagueId)"
|
||||
@bet="goMatch"
|
||||
/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-show="timeTab === 'today'">
|
||||
<div v-if="todayLeagueGroups.length" class="league-list">
|
||||
<LeagueAccordionItem
|
||||
v-for="group in todayLeagueGroups"
|
||||
:key="`today-${group.leagueId}`"
|
||||
:league-id="group.leagueId"
|
||||
:league-name="group.leagueName"
|
||||
:league-logo-url="group.leagueLogoUrl"
|
||||
:matches="group.matches"
|
||||
:expanded="expandedLeagues.today.has(group.leagueId)"
|
||||
@toggle="toggleLeague(group.leagueId)"
|
||||
@bet="goMatch"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>{{ t('bet.no_matches') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>{{ t('bet.no_matches') }}</p>
|
||||
</div>
|
||||
<div v-show="timeTab === 'early'">
|
||||
<div v-if="earlyLeagueGroups.length" class="league-list">
|
||||
<LeagueAccordionItem
|
||||
v-for="group in earlyLeagueGroups"
|
||||
:key="`early-${group.leagueId}`"
|
||||
:league-id="group.leagueId"
|
||||
:league-name="group.leagueName"
|
||||
:league-logo-url="group.leagueLogoUrl"
|
||||
:matches="group.matches"
|
||||
:expanded="expandedLeagues.early.has(group.leagueId)"
|
||||
@toggle="toggleLeague(group.leagueId)"
|
||||
@bet="goMatch"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>{{ t('bet.no_matches') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<OutrightPanel v-if="mainTab === 'outright'" class="outright-tab" />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { ref, onMounted, onActivated, computed } from 'vue';
|
||||
import { useRouter, RouterLink } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
@@ -7,19 +7,17 @@ import { formatMoney } from '../utils/localeDisplay';
|
||||
import LocaleFlag from '../components/LocaleFlag.vue';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useAppLocale } from '../composables/useAppLocale';
|
||||
import { usePlayerProfile } from '../composables/usePlayerProfile';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
|
||||
import walletBg from '../assets/images/wallet-bg.webp';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const { locales, setLocale, initFromUser } = useAppLocale();
|
||||
|
||||
const profile = ref<{
|
||||
username?: string;
|
||||
wallet?: { availableBalance: string; frozenBalance: string };
|
||||
} | null>(null);
|
||||
const { profileRaw, refreshProfile } = usePlayerProfile();
|
||||
|
||||
const loading = ref(true);
|
||||
const error = ref(false);
|
||||
@@ -33,10 +31,8 @@ async function fetchProfile() {
|
||||
loading.value = true;
|
||||
error.value = false;
|
||||
try {
|
||||
const { data } = await api.get('/player/profile');
|
||||
profile.value = data.data;
|
||||
initFromUser(data.data?.locale);
|
||||
// Fetch cashback total in parallel
|
||||
await refreshProfile();
|
||||
initFromUser(profileRaw.value?.locale);
|
||||
void fetchCashbackTotal();
|
||||
} catch {
|
||||
error.value = true;
|
||||
@@ -47,17 +43,23 @@ async function fetchProfile() {
|
||||
|
||||
async function fetchCashbackTotal() {
|
||||
try {
|
||||
const { data } = await api.get('/player/wallet/transactions/stats');
|
||||
const byType = data.data?.byType ?? [];
|
||||
let sum = 0;
|
||||
for (const g of byType) {
|
||||
if (['CASHBACK', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
|
||||
sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
|
||||
}
|
||||
}
|
||||
cashbackTotal.value = sum.toString();
|
||||
const { data } = await api.get('/player/cashbacks');
|
||||
cashbackTotal.value = sumCashbackAmount(parseCashbackApiData(data.data)).toString();
|
||||
} catch {
|
||||
// Ignore errors, keep default value
|
||||
// Fallback: sum wallet cashback credits when batch detail API is unavailable.
|
||||
try {
|
||||
const { data } = await api.get('/player/wallet/transactions/stats');
|
||||
const byType = data.data?.byType ?? [];
|
||||
let sum = 0;
|
||||
for (const g of byType) {
|
||||
if (['CASHBACK', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
|
||||
sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
|
||||
}
|
||||
}
|
||||
cashbackTotal.value = sum.toString();
|
||||
} catch {
|
||||
// Keep default value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,6 +67,10 @@ onMounted(() => {
|
||||
void fetchProfile();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
void fetchProfile();
|
||||
});
|
||||
|
||||
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
|
||||
onRefresh: async () => { await fetchProfile(); },
|
||||
});
|
||||
@@ -84,7 +90,7 @@ function logout() {
|
||||
}
|
||||
|
||||
const balanceDisplay = computed(() =>
|
||||
formatMoney(profile.value?.wallet?.availableBalance, locale.value),
|
||||
formatMoney(profileRaw.value?.wallet?.availableBalance, locale.value),
|
||||
);
|
||||
|
||||
const balanceAmountClass = computed(() => {
|
||||
@@ -143,7 +149,7 @@ const balanceAmountClass = computed(() => {
|
||||
<div class="bank-card-footer">
|
||||
<div class="bank-card-field">
|
||||
<span class="bank-card-label">持卡人</span>
|
||||
<span class="bank-card-holder">{{ profile?.username }}</span>
|
||||
<span class="bank-card-holder">{{ profileRaw?.username }}</span>
|
||||
</div>
|
||||
<div class="bank-card-field bank-card-field--center">
|
||||
<span class="bank-card-label">累计返水</span>
|
||||
@@ -151,7 +157,7 @@ const balanceAmountClass = computed(() => {
|
||||
</div>
|
||||
<div class="bank-card-field bank-card-field--right">
|
||||
<span class="bank-card-label">未结算</span>
|
||||
<span class="bank-card-stat">{{ formatMoney(profile?.wallet?.frozenBalance, locale) }}</span>
|
||||
<span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,13 +6,32 @@ import api from '../api';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import {
|
||||
auditActionTone,
|
||||
auditActorSecondary,
|
||||
formatDepositAuditRemark,
|
||||
shouldShowAuditRejectInTimeline,
|
||||
} from '../utils/depositAuditDisplay';
|
||||
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
interface DepositAuditLog {
|
||||
id: string;
|
||||
action: string;
|
||||
actorType: string;
|
||||
statusBefore: string | null;
|
||||
statusAfter: string;
|
||||
amount: string | null;
|
||||
approvedAmount: string | null;
|
||||
remark: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface DepositOrder {
|
||||
id: string;
|
||||
orderNo: string;
|
||||
paymentMethodId?: string;
|
||||
methodType: string;
|
||||
amount: string;
|
||||
status: string;
|
||||
@@ -22,6 +41,7 @@ interface DepositOrder {
|
||||
createdAt: string;
|
||||
reviewedAt: string | null;
|
||||
paymentMethodName: string | null;
|
||||
auditLogs?: DepositAuditLog[];
|
||||
}
|
||||
|
||||
const items = ref<DepositOrder[]>([]);
|
||||
@@ -34,6 +54,8 @@ const hasMore = ref(true);
|
||||
const sentinel = ref<HTMLElement | null>(null);
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
const selectedOrder = ref<DepositOrder | null>(null);
|
||||
|
||||
async function fetchOrders(p = 1) {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
@@ -41,13 +63,13 @@ async function fetchOrders(p = 1) {
|
||||
const { data } = await api.get('/player/deposit-orders', { params: { page: p } });
|
||||
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
|
||||
const newItems = result.items ?? [];
|
||||
|
||||
|
||||
if (p === 1) {
|
||||
items.value = newItems;
|
||||
} else {
|
||||
items.value = [...items.value, ...newItems];
|
||||
}
|
||||
|
||||
|
||||
total.value = result.total ?? 0;
|
||||
const pageSize = result.pageSize ?? 20;
|
||||
hasMore.value = newItems.length >= pageSize && items.value.length < total.value;
|
||||
@@ -99,7 +121,107 @@ function goRecharge() {
|
||||
router.push('/wallet/recharge');
|
||||
}
|
||||
|
||||
onMounted(fetchOrders);
|
||||
function openDetail(order: DepositOrder) {
|
||||
selectedOrder.value = order;
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
selectedOrder.value = null;
|
||||
}
|
||||
|
||||
function reapply(order: DepositOrder) {
|
||||
const query: Record<string, string> = {
|
||||
orderId: order.id,
|
||||
methodType: order.methodType,
|
||||
amount: order.amount,
|
||||
};
|
||||
if (order.paymentMethodId) {
|
||||
query.methodId = order.paymentMethodId;
|
||||
}
|
||||
router.push({ path: '/wallet/recharge', query });
|
||||
}
|
||||
|
||||
function normalizeText(value: string | null | undefined) {
|
||||
return value?.trim() ?? '';
|
||||
}
|
||||
|
||||
/** Backend sets remark = rejectReason on reject; show one line only. */
|
||||
function orderNote(order: DepositOrder): { label: string; text: string } | null {
|
||||
const rejectReason = normalizeText(order.rejectReason);
|
||||
const remark = normalizeText(order.remark);
|
||||
|
||||
if (order.status === 'REJECTED') {
|
||||
const text = rejectReason || remark;
|
||||
if (!text) return null;
|
||||
return { label: t('recharge.reject_reason'), text };
|
||||
}
|
||||
|
||||
if (remark) {
|
||||
return { label: t('recharge.remark'), text: remark };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function orderNoteLine(order: DepositOrder) {
|
||||
const note = orderNote(order);
|
||||
return note ? `${note.label}: ${note.text}` : null;
|
||||
}
|
||||
|
||||
function auditActionLabel(action: string) {
|
||||
const key = `recharge.audit_${action.toLowerCase()}` as const;
|
||||
const translated = t(key);
|
||||
return translated !== key ? translated : action;
|
||||
}
|
||||
|
||||
function auditStepClass(action: string) {
|
||||
return `audit-step--${auditActionTone(action)}`;
|
||||
}
|
||||
|
||||
function formatAuditTime(iso: string) {
|
||||
return new Date(iso).toLocaleString(undefined, {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
function formatOrderTime(iso: string) {
|
||||
return new Date(iso).toLocaleString();
|
||||
}
|
||||
|
||||
function auditRemarkForTimeline(log: DepositAuditLog, order: DepositOrder) {
|
||||
if (log.action === 'REJECTED' && !shouldShowAuditRejectInTimeline(log, order.rejectReason)) {
|
||||
return null;
|
||||
}
|
||||
return formatDepositAuditRemark(log, t);
|
||||
}
|
||||
|
||||
function auditLogsForDisplay(order: DepositOrder) {
|
||||
return [...(order.auditLogs ?? [])]
|
||||
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
||||
.map((log) => ({
|
||||
log,
|
||||
actor: auditActorSecondary(log, t),
|
||||
remark: auditRemarkForTimeline(log, order),
|
||||
}));
|
||||
}
|
||||
|
||||
function auditNoteLine(text: string) {
|
||||
return `${t('recharge.audit_remark_label')}: ${text}`;
|
||||
}
|
||||
|
||||
function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
|
||||
if (remark.text === t('wallet.remark_deposit_revoke_generic')) {
|
||||
return remark.text;
|
||||
}
|
||||
return auditNoteLine(remark.text);
|
||||
}
|
||||
|
||||
function auditStepCount(order: DepositOrder) {
|
||||
return order.auditLogs?.length ?? 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -117,7 +239,7 @@ onMounted(fetchOrders);
|
||||
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state">
|
||||
<div v-if="initialLoading && loading" class="state">
|
||||
<GoldSpinner :size="36" />
|
||||
</div>
|
||||
|
||||
@@ -125,7 +247,16 @@ onMounted(fetchOrders);
|
||||
<div v-if="!items.length" class="empty">{{ t('recharge.no_orders') }}</div>
|
||||
|
||||
<div v-else class="order-list">
|
||||
<div v-for="order in items" :key="order.id" class="order-card" :class="{ rejected: order.status === 'REJECTED' }">
|
||||
<div
|
||||
v-for="order in items"
|
||||
:key="order.id"
|
||||
class="order-card"
|
||||
:class="{ rejected: order.status === 'REJECTED' }"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="openDetail(order)"
|
||||
@keydown.enter="openDetail(order)"
|
||||
>
|
||||
<div class="order-header">
|
||||
<span class="method-badge" :class="order.methodType === 'BANK' ? 'bank' : 'usdt'">{{ order.methodType }}</span>
|
||||
<span :class="['status-badge', statusClass(order.status)]">{{ statusLabel(order.status) }}</span>
|
||||
@@ -141,19 +272,33 @@ onMounted(fetchOrders);
|
||||
<div class="order-times">
|
||||
<div class="time-row">
|
||||
<span class="time-label">{{ t('recharge.apply_time') }}</span>
|
||||
<span class="time-value">{{ new Date(order.createdAt).toLocaleString() }}</span>
|
||||
<span class="time-value">{{ formatOrderTime(order.createdAt) }}</span>
|
||||
</div>
|
||||
<div v-if="order.reviewedAt" class="time-row">
|
||||
<span class="time-label">{{ t('recharge.review_time') }}</span>
|
||||
<span class="time-value">{{ new Date(order.reviewedAt).toLocaleString() }}</span>
|
||||
<span class="time-value">{{ formatOrderTime(order.reviewedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="order.remark" class="order-remark">
|
||||
{{ t('recharge.remark') }}: {{ order.remark }}
|
||||
<div
|
||||
v-if="orderNoteLine(order)"
|
||||
:class="order.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
|
||||
>
|
||||
{{ orderNoteLine(order) }}
|
||||
</div>
|
||||
<div v-if="order.status === 'REJECTED' && order.rejectReason" class="reject-reason">
|
||||
{{ t('recharge.reject_reason') }}: {{ order.rejectReason }}
|
||||
<div v-if="auditStepCount(order)" class="card-detail-hint">
|
||||
<span class="card-detail-summary">
|
||||
{{ t('recharge.audit_summary', { count: auditStepCount(order) }) }}
|
||||
</span>
|
||||
<span class="card-detail-link">{{ t('recharge.view_detail') }} ›</span>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="card-detail-link-only"
|
||||
@click.stop="openDetail(order)"
|
||||
>
|
||||
{{ t('recharge.view_detail') }} ›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,6 +313,98 @@ onMounted(fetchOrders);
|
||||
{{ t('common.no_more') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="selectedOrder" class="detail-overlay" @click.self="closeDetail">
|
||||
<div class="detail-modal" role="dialog" aria-modal="true" :aria-label="t('recharge.order_detail')">
|
||||
<button type="button" class="detail-close" :aria-label="t('common.close')" @click="closeDetail">✕</button>
|
||||
|
||||
<h3 class="detail-title">{{ t('recharge.order_detail') }}</h3>
|
||||
|
||||
<div class="detail-summary">
|
||||
<div class="detail-summary-head">
|
||||
<span class="method-badge" :class="selectedOrder.methodType === 'BANK' ? 'bank' : 'usdt'">
|
||||
{{ selectedOrder.methodType }}
|
||||
</span>
|
||||
<span :class="['status-badge', statusClass(selectedOrder.status)]">
|
||||
{{ statusLabel(selectedOrder.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-amount">{{ formatMoney(selectedOrder.amount, locale) }}</div>
|
||||
<div
|
||||
v-if="selectedOrder.approvedAmount && selectedOrder.approvedAmount !== selectedOrder.amount"
|
||||
class="approved-amount"
|
||||
>
|
||||
{{ t('recharge.credited') }}: {{ formatMoney(selectedOrder.approvedAmount, locale) }}
|
||||
</div>
|
||||
<div class="detail-method-name">{{ selectedOrder.paymentMethodName || '-' }}</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">{{ t('recharge.apply_time') }}</span>
|
||||
<span class="detail-value">{{ formatOrderTime(selectedOrder.createdAt) }}</span>
|
||||
</div>
|
||||
<div v-if="selectedOrder.reviewedAt" class="detail-row">
|
||||
<span class="detail-label">{{ t('recharge.review_time') }}</span>
|
||||
<span class="detail-value">{{ formatOrderTime(selectedOrder.reviewedAt) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="orderNoteLine(selectedOrder)"
|
||||
:class="selectedOrder.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
|
||||
>
|
||||
{{ orderNoteLine(selectedOrder) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedOrder.auditLogs?.length" class="detail-audit">
|
||||
<h4 class="detail-audit-title">{{ t('recharge.audit_title') }}</h4>
|
||||
<div class="audit-track">
|
||||
<div
|
||||
v-for="(entry, logIdx) in auditLogsForDisplay(selectedOrder)"
|
||||
:key="entry.log.id"
|
||||
class="audit-step"
|
||||
:class="auditStepClass(entry.log.action)"
|
||||
>
|
||||
<div class="audit-step-rail" aria-hidden="true">
|
||||
<span class="audit-dot" />
|
||||
<span v-if="logIdx < auditLogsForDisplay(selectedOrder).length - 1" class="audit-line" />
|
||||
</div>
|
||||
<div class="audit-step-body">
|
||||
<div class="audit-step-head">
|
||||
<span class="audit-step-title">{{ auditActionLabel(entry.log.action) }}</span>
|
||||
<time class="audit-step-time">{{ formatAuditTime(entry.log.createdAt) }}</time>
|
||||
</div>
|
||||
<p v-if="entry.actor" class="audit-step-actor">{{ entry.actor }}</p>
|
||||
<p
|
||||
v-if="entry.log.approvedAmount && entry.log.action === 'APPROVED'"
|
||||
class="audit-step-credited"
|
||||
>
|
||||
{{ t('recharge.audit_credited') }} {{ formatMoney(entry.log.approvedAmount, locale) }}
|
||||
</p>
|
||||
<div
|
||||
v-if="entry.remark?.kind === 'reject'"
|
||||
class="audit-step-box audit-step-box--reject"
|
||||
>
|
||||
<span class="audit-step-box-label">{{ t('recharge.reject_reason') }}</span>
|
||||
<span class="audit-step-box-text">{{ entry.remark.text }}</span>
|
||||
</div>
|
||||
<p v-else-if="entry.remark?.kind === 'note'" class="audit-step-note">
|
||||
{{ auditNoteDisplayText(entry.remark) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="selectedOrder.status === 'REJECTED'"
|
||||
type="button"
|
||||
class="modal-reapply-btn btn-gold-outline"
|
||||
@click.stop="reapply(selectedOrder)"
|
||||
>
|
||||
{{ t('recharge.reapply') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -189,6 +426,11 @@ onMounted(fetchOrders);
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.order-card:active {
|
||||
opacity: 0.92;
|
||||
}
|
||||
.order-card::before {
|
||||
content: '';
|
||||
@@ -198,21 +440,20 @@ onMounted(fetchOrders);
|
||||
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
|
||||
}
|
||||
.order-card.rejected {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #1f1f1f 40%, #161616 100%);
|
||||
border-color: rgba(100, 100, 100, 0.2);
|
||||
opacity: 0.7;
|
||||
background: #141414;
|
||||
border-color: rgba(245, 108, 108, 0.22);
|
||||
}
|
||||
.order-card.rejected::before {
|
||||
background: linear-gradient(90deg, transparent, rgba(100, 100, 100, 0.4), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(245, 108, 108, 0.35), transparent);
|
||||
}
|
||||
.order-card.rejected .order-amount {
|
||||
background: linear-gradient(135deg, #888, #666);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background: none;
|
||||
-webkit-background-clip: unset;
|
||||
background-clip: unset;
|
||||
color: #bbb;
|
||||
}
|
||||
.order-card.rejected .info-label {
|
||||
color: rgba(150, 150, 150, 0.7);
|
||||
color: #888;
|
||||
}
|
||||
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
||||
.method-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
|
||||
@@ -247,8 +488,54 @@ onMounted(fetchOrders);
|
||||
border-radius: 6px;
|
||||
margin-top: 6px;
|
||||
border-left: 2px solid rgba(212, 175, 55, 0.3);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
.reject-reason {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #c07070;
|
||||
background: transparent;
|
||||
padding: 6px 0 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(245, 108, 108, 0.18);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
.card-detail-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
.card-detail-summary {
|
||||
font-size: 11px;
|
||||
color: rgba(212, 175, 55, 0.65);
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-detail-link {
|
||||
font-size: 11px;
|
||||
color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.card-detail-link-only {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.reject-reason { margin-top: 8px; font-size: 12px; color: #f56c6c; background: #2a1515; padding: 6px 10px; border-radius: 6px; }
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
@@ -268,4 +555,291 @@ onMounted(fetchOrders);
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.detail-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0, 0, 0, 0.48);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.detail-modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: min(88vh, 720px);
|
||||
overflow-y: auto;
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-bottom: none;
|
||||
border-radius: 14px 14px 0 0;
|
||||
padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 28px 12px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
.detail-summary {
|
||||
margin-bottom: 14px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid #222;
|
||||
}
|
||||
|
||||
.detail-summary-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-amount {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: var(--primary-light, #d4af37);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.detail-method-name {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.detail-summary .order-remark {
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
background: transparent;
|
||||
padding: 6px 0 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid #222;
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.detail-summary .reject-reason {
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #b08888;
|
||||
background: transparent;
|
||||
padding: 6px 0 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(245, 108, 108, 0.15);
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.detail-summary .approved-amount {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-audit {
|
||||
margin-top: 2px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #222;
|
||||
}
|
||||
|
||||
.detail-audit-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.audit-track {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.audit-step {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.audit-step-rail {
|
||||
flex: 0 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.audit-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #555;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.audit-line {
|
||||
flex: 1;
|
||||
width: 1px;
|
||||
min-height: 10px;
|
||||
margin: 3px 0;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.audit-step-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.audit-step:last-child .audit-step-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.audit-step-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.audit-step-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #ccc;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.audit-step-time {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.audit-step-actor {
|
||||
margin: 2px 0 0;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.audit-step-credited {
|
||||
margin: 3px 0 0;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #7eb87a;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.audit-step-note {
|
||||
margin: 4px 0 0;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.audit-step-box {
|
||||
margin-top: 4px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.audit-step-box--reject {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(245, 108, 108, 0.22);
|
||||
}
|
||||
|
||||
.audit-step-box-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #c07070;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.audit-step-box-text {
|
||||
font-size: 11px;
|
||||
color: #b08888;
|
||||
}
|
||||
|
||||
.audit-step--submitted .audit-dot {
|
||||
background: #c9a227;
|
||||
}
|
||||
.audit-step--approved .audit-dot {
|
||||
background: #5fad5a;
|
||||
}
|
||||
.audit-step--rejected .audit-dot {
|
||||
background: #d06060;
|
||||
}
|
||||
.audit-step--revoked .audit-dot {
|
||||
background: #777;
|
||||
}
|
||||
.audit-step--reopened .audit-dot {
|
||||
background: #c9a227;
|
||||
}
|
||||
|
||||
.modal-reapply-btn {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
padding: 11px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import imageCompression from 'browser-image-compression';
|
||||
import api from '../api';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const reapplyOrderId = computed(() => {
|
||||
const id = route.query.orderId;
|
||||
return typeof id === 'string' && id ? id : '';
|
||||
});
|
||||
const isReapply = computed(() => !!reapplyOrderId.value);
|
||||
|
||||
interface PaymentMethod {
|
||||
id: string;
|
||||
methodType: string;
|
||||
@@ -36,13 +43,39 @@ const bankMethods = computed(() => methods.value.filter((m) => m.methodType ===
|
||||
const usdtMethods = computed(() => methods.value.filter((m) => m.methodType === 'USDT'));
|
||||
const currentMethods = computed(() => methodType.value === 'BANK' ? bankMethods.value : usdtMethods.value);
|
||||
|
||||
function applyReapplyQuery() {
|
||||
const type = route.query.methodType;
|
||||
if (type === 'BANK' || type === 'USDT') {
|
||||
methodType.value = type;
|
||||
}
|
||||
|
||||
const methodId = typeof route.query.methodId === 'string' ? route.query.methodId : '';
|
||||
if (methodId) {
|
||||
const match = methods.value.find((m) => m.id === methodId);
|
||||
if (match) {
|
||||
selectedMethod.value = match;
|
||||
}
|
||||
}
|
||||
|
||||
if (!selectedMethod.value && currentMethods.value.length) {
|
||||
selectedMethod.value = currentMethods.value[0];
|
||||
}
|
||||
|
||||
const amountQuery = typeof route.query.amount === 'string' ? route.query.amount : '';
|
||||
const parsedAmount = parseFloat(amountQuery);
|
||||
if (amountQuery && parsedAmount > 0) {
|
||||
amount.value = amountQuery;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMethods() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/payment-methods');
|
||||
methods.value = (data.data ?? []).map((m: any) => ({ ...m, id: String(m.id) }));
|
||||
// Auto-select first available
|
||||
if (currentMethods.value.length) {
|
||||
if (isReapply.value) {
|
||||
applyReapplyQuery();
|
||||
} else if (currentMethods.value.length) {
|
||||
selectedMethod.value = currentMethods.value[0];
|
||||
}
|
||||
} catch { /* */ } finally {
|
||||
@@ -145,10 +178,19 @@ async function handleSubmit() {
|
||||
submitting.value = true;
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('paymentMethodId', selectedMethod.value.id);
|
||||
fd.append('amount', String(amt));
|
||||
fd.append('screenshot', screenshotFile.value);
|
||||
|
||||
if (isReapply.value) {
|
||||
fd.append('paymentMethodId', selectedMethod.value.id);
|
||||
const { data } = await api.post(`/player/deposit-orders/${reapplyOrderId.value}/reapply`, fd);
|
||||
const result = data.data;
|
||||
orderNo.value = result?.orderNo ?? '';
|
||||
success.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
fd.append('paymentMethodId', selectedMethod.value.id);
|
||||
const { data } = await api.post('/player/deposit-orders', fd);
|
||||
const result = data.data;
|
||||
orderNo.value = result?.orderNo ?? '';
|
||||
@@ -206,10 +248,12 @@ onMounted(fetchMethods);
|
||||
<h3>{{ t('recharge.submitted') }}</h3>
|
||||
<p class="order-no">{{ orderNo }}</p>
|
||||
<p class="success-hint">{{ t('recharge.pending_review') }}</p>
|
||||
<button class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
|
||||
<button v-if="isReapply" class="btn-primary" @click="goHistory">{{ t('recharge.back_to_history') }}</button>
|
||||
<button v-else class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div v-if="isReapply" class="reapply-banner">{{ t('recharge.reapply_hint') }}</div>
|
||||
<div class="type-tabs">
|
||||
<button
|
||||
:class="['tab', methodType === 'BANK' && 'active']"
|
||||
@@ -330,6 +374,17 @@ onMounted(fetchMethods);
|
||||
|
||||
.state { display: flex; justify-content: center; padding: 48px; }
|
||||
|
||||
.reapply-banner {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #ffd0d0;
|
||||
background: rgba(245, 108, 108, 0.12);
|
||||
border: 1px solid rgba(245, 108, 108, 0.25);
|
||||
}
|
||||
|
||||
.type-tabs {
|
||||
display: flex; margin-bottom: 12px;
|
||||
border-radius: 6px; overflow: hidden;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import { txTypeKey, isCashbackType, txDisplayType, txSummaryLabel } from '../utils/walletTx';
|
||||
import { txTypeKey, isCashbackType, txDisplayType, txSummaryLabel, txRemarkLabel, isDepositReversalType } from '../utils/walletTx';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
|
||||
@@ -108,6 +108,7 @@ const cashbackBatchNo = computed(() => {
|
||||
const referenceLabel = computed(() => {
|
||||
if (isCashbackTx.value) return t('wallet.ref_cashback');
|
||||
if (!tx.value?.referenceType) return '';
|
||||
if (isDepositReversalType(tx.value.transactionType)) return t('wallet.ref_deposit');
|
||||
const rt = tx.value.referenceType.toUpperCase();
|
||||
if (rt === 'BET') return t('wallet.ref_bet');
|
||||
if (rt === 'DEPOSIT') return t('wallet.ref_deposit');
|
||||
@@ -115,6 +116,11 @@ const referenceLabel = computed(() => {
|
||||
return tx.value.referenceType;
|
||||
});
|
||||
|
||||
const remarkText = computed(() => {
|
||||
if (!tx.value) return '';
|
||||
return txRemarkLabel(tx.value, t);
|
||||
});
|
||||
|
||||
function goBetDetail() {
|
||||
if (!tx.value?.betNo) return;
|
||||
router.push(`/bets/${tx.value.betNo}`);
|
||||
@@ -180,7 +186,7 @@ function goCashbackDetail() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="tx.referenceType || tx.remark" class="section">
|
||||
<section v-if="tx.referenceType || remarkText" class="section">
|
||||
<div class="section-title">{{ t('wallet.detail_reference') }}</div>
|
||||
<div class="summary-rows">
|
||||
<div v-if="tx.referenceType" class="sum-row">
|
||||
@@ -191,9 +197,9 @@ function goCashbackDetail() {
|
||||
<span>{{ t('wallet.detail_reference_id') }}</span>
|
||||
<span class="mono">{{ tx.referenceId }}</span>
|
||||
</div>
|
||||
<div v-if="tx.remark" class="sum-row">
|
||||
<div v-if="remarkText" class="sum-row">
|
||||
<span>{{ t('wallet.detail_remark') }}</span>
|
||||
<span class="remark">{{ tx.remark }}</span>
|
||||
<span class="remark">{{ remarkText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="tx.betNo" type="button" class="bet-link" @click="goBetDetail">
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
|
||||
import { txTypeKey, txDisplayType, txSummaryLabel } from '../utils/walletTx';
|
||||
import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
|
||||
@@ -54,12 +55,12 @@ async function fetchData() {
|
||||
try {
|
||||
const [txRes, cbRes] = await Promise.all([
|
||||
api.get('/player/wallet/transactions', { params: { page: 1 } }),
|
||||
api.get('/player/cashbacks').catch(() => ({ data: { data: { items: [], totalAmount: '0' } } })),
|
||||
api.get('/player/cashbacks').catch(() => ({ data: { data: [] } })),
|
||||
]);
|
||||
const result = txRes.data.data ?? { items: [] };
|
||||
items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
|
||||
const cbData = cbRes.data?.data;
|
||||
cashbackTotal.value = cbData?.totalAmount ?? cbData?.items?.reduce((s: number, r: { amount: string }) => s + Math.abs(parseFloat(r.amount) || 0), 0)?.toString() ?? '0';
|
||||
const cbRows = parseCashbackApiData(cbRes.data?.data);
|
||||
cashbackTotal.value = sumCashbackAmount(cbRows).toString();
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
|
||||
Reference in New Issue
Block a user