ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player+api): 桌面端钱包/注单栏重构，首页快速下注与移动端体验优化

Browse Source 
桌面端：
- 新增 DesktopWalletPageHeader 统一钱包子导航，移除重复大标题
- 重构我的余额页布局（居中窄卡片 + 余额/统计/账户设置）
- 新增 DesktopBetSlipRail 可折叠注单侧栏，优化 BetSlipPanel 交互
- 首页 upcoming 赛事卡片支持胜平负/让球/大小球快速下注
- 优化 DesktopShell 布局、3D 轮播、各账户/消息/充值页面样式

移动端：
- 重构 MobileWalletView 钱包页 UI
- 修复 MarketSelectionsPanel 下注区黑色背景问题
- 新增 PageBackButton 与 useSmartBack 智能返回逻辑
- 优化公告/消息/个人中心等详情页导航

API：
- listUpcomingPublished 支持 includeMarkets，返回首页卡片所需核心玩法
This commit is contained in:
Mars
2026-06-30 16:11:27 +08:00
parent ef5b9416cc
commit 7f563326d8
73 changed files with 2866 additions and 1552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
apps/player/src/views/desktop/DesktopWalletDetailView.vue
View File

@@ -1,28 +1,21 @@
<script setup lang="ts">
<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import api from '../../api';
import GoldSpinner from '../../components/GoldSpinner.vue';
import Pagination from '../../components/desktop/Pagination.vue';
import DesktopWalletPageHeader from '../../components/desktop/DesktopWalletPageHeader.vue';
import { formatMoney } from '../../utils/localeDisplay';
import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../../utils/walletTx';
const { t, locale } = useI18n();
const router = useRouter();
function goBack() {
if (window.history.state && window.history.state.back) {
router.back();
} else {
router.push('/wallet');
}
}
type Transaction = {
transactionType: string;
displayType?: string;
summary?: string | null;
referenceType?: string | null;
amount: string;
createdAt: string;
transactionId: string;
@@ -31,9 +24,10 @@ type Transaction = {
const items = ref<Transaction[]>([]);
const loading = ref(true);
const page = ref(1);
const hasMore = ref(true);
const pageSize = ref(20);
const total = ref(0);
function txLabel(tx: Transaction): string {
function txLabel(tx: Transaction) {
const key = txTypeKey(txDisplayType(tx));
if (key) {
const translated = t(key);
@@ -42,152 +36,92 @@ function txLabel(tx: Transaction): string {
return tx.transactionType;
}
async function loadPage(p: number) {
function amountClass(amount: string) {
return `desktop-records-amount ${txAmountClass(amount)}`;
}
async function fetchData(p = 1) {
loading.value = true;
try {
const { data } = await api.get('/player/wallet/transactions', { params: { page: p } });
const result = data.data ?? { items: [], total: 0 };
if (p === 1) {
items.value = result.items ?? [];
} else {
items.value = [...items.value, ...(result.items ?? [])];
}
hasMore.value = items.value.length < (result.total ?? 0);
const { data } = await api.get('/player/wallet/transactions', {
params: { page: p, pageSize: pageSize.value },
});
const result = data.data ?? { items: [], total: 0, pageSize: pageSize.value };
total.value = result.total ?? 0;
items.value = result.items ?? [];
page.value = p;
} catch {
if (p === 1) items.value = [];
total.value = 0;
} finally {
loading.value = false;
}
}
onMounted(() => loadPage(1));
onActivated(() => loadPage(1));
onMounted(() => fetchData(1));
onActivated(() => fetchData(page.value));
</script>
<template>
<div class="desktop-account-page">
<main class="account-main">
<div class="records-layout">
<div class="page-header">
<button type="button" class="back-btn" @click="router.back()">‹ {{ t('common.back') }}</button>
<h1 class="page-title">{{ t('wallet.all_records') }}</h1>
</div>
<div class="desktop-records-page">
<DesktopWalletPageHeader />
<div v-if="loading && items.length === 0" class="loading-state">
<GoldSpinner :size="36" />
</div>
<template v-else>
<div v-if="items.length" class="table-container">
<div class="table-wrap">
<table class="dt">
<thead>
<tr>
<th>{{ t('wallet.type') || '类型' }}</th>
<th>{{ t('wallet.note') || '备注' }}</th>
<th class="num-th">{{ t('wallet.amount') || '金额' }}</th>
<th>{{ t('wallet.time') || '时间' }}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for="tx in items"
:key="tx.transactionId"
class="hover-row"
style="cursor:pointer"
@click="router.push(`/wallet/transactions/${tx.transactionId}`)"
>
<td class="type-cell">{{ txLabel(tx) }}</td>
<td class="note-cell">{{ txSummaryLabel(tx, t) || '-' }}</td>
<td :class="['num-cell', txAmountClass(tx.amount)]">{{ formatMoney(tx.amount, locale) }}</td>
<td class="date-cell">{{ new Date(tx.createdAt).toLocaleString() }}</td>
<td class="arrow-cell">›</td>
</tr>
</tbody>
</table>
<div v-if="hasMore" class="load-more">
<button type="button" class="load-more-btn" :disabled="loading" @click="loadPage(page + 1)">
<GoldSpinner v-if="loading" :size="18" />
<span v-else>{{ t('common.load_more') || '加载更多' }}</span>
</button>
</div>
<p v-else class="end-hint">{{ t('common.no_more') }}</p>
</div>
</div>
<div v-else class="empty-state">{{ t('wallet.no_records') }}</div>
</template>
<section v-if="loading && !items.length" class="desktop-records-panel">
<div class="desktop-records-loading">
<GoldSpinner :size="36" />
</div>
</main>
</section>
<section v-else-if="items.length" class="desktop-records-panel">
<div class="desktop-records-table-wrap">
<table class="desktop-records-table">
<thead>
<tr>
<th>{{ t('wallet.type') }}</th>
<th>{{ t('wallet.note') }}</th>
<th class="num-th">{{ t('wallet.amount') }}</th>
<th>{{ t('wallet.time') }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="tx in items"
:key="tx.transactionId"
class="hover-row"
@click="router.push(`/wallet/transactions/${tx.transactionId}`)"
>
<td class="type-cell">{{ txLabel(tx) }}</td>
<td class="muted-cell">{{ txSummaryLabel(tx, t) || '-' }}</td>
<td :class="['num-cell', amountClass(tx.amount)]">{{ formatMoney(tx.amount, locale) }}</td>
<td class="date-cell">{{ new Date(tx.createdAt).toLocaleString() }}</td>
</tr>
</tbody>
</table>
</div>
<div class="desktop-records-pagination">
<Pagination
v-if="total > 0"
v-model="page"
v-model:pageSize="pageSize"
:total="total"
@change="fetchData"
/>
</div>
</section>
<section v-else class="desktop-records-panel">
<div class="desktop-records-empty">{{ t('wallet.no_records') }}</div>
</section>
</div>
</template>
<style scoped>
.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
.account-main { flex: 1; min-width: 0; padding: 24px 28px; display: flex; flex-direction: column; overflow: hidden; }
.records-layout {
display: flex;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
width: 100%;
flex: 0 1 auto;
min-height: 0;
}
.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.back-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
.back-btn:hover { color: var(--text); }
.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
.loading-state { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
.table-container {
display: flex;
flex-direction: column;
flex: 0 1 auto;
min-height: 0;
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
overflow: hidden;
}
.table-wrap { flex: 1; overflow-x: auto; overflow-y: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt th {
position: sticky;
top: 0;
z-index: 10;
padding: 9px 12px;
text-align: left;
font-size: 11px;
.type-cell {
font-weight: 700;
color: var(--text-muted);
background: #141414;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--desktop-border);
white-space: nowrap;
}
.dt th:first-child { border-top-left-radius: 8px; }
.dt th:last-child { border-top-right-radius: 8px; }
.num-th { text-align: right; }
.dt td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); vertical-align: middle; }
.hover-row { transition: background 0.15s; }
.hover-row:hover { background: rgba(255,255,255,0.03); }
.type-cell { font-weight: 700; }
.note-cell { color: var(--text-muted); font-size: 12px; max-width: 220px; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.date-cell { white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.arrow-cell { color: #555; font-size: 18px; font-weight: 300; text-align: right; width: 24px; }
.pos { color: var(--primary-light); }
.neg { color: var(--danger); }
.zero { color: var(--text-muted); }
.load-more { display: flex; justify-content: center; padding: 20px 0 8px; }
.load-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 28px; border-radius: 6px; border: 1px solid var(--desktop-border); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.load-more-btn:hover:not(:disabled) { border-color: var(--border-active); color: var(--primary-light); }
.load-more-btn:disabled { opacity: 0.5; cursor: default; }
.end-hint { text-align: center; font-size: 12px; color: #444; padding: 16px 0 4px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.muted-cell {
color: var(--text-muted);
max-width: 420px;
}
</style>