feat: 开户备注、账单展示优化与后台代理管理增强
- 新增初始上分备注（日常上分/开户赠金/自定义）及前后台校验与展示 - 优化钱包流水类型与备注显示，区分管理员/代理/玩家上下分 - 修复登录后语言被后端覆盖的问题，登录时同步当前语言到服务端 - 后台代理/玩家表格操作栏重构，充值订单增加备注列 - 前台个人中心、充值、账单与验证码组件体验优化 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,252 +1,168 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import SlideVerify, { type SlideVerifyInstance } from 'vue3-slide-verify';
|
||||
import 'vue3-slide-verify/dist/style.css';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const slideRef = ref<SlideVerifyInstance>();
|
||||
const input = ref('');
|
||||
const code = ref('');
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null);
|
||||
const honeypot = ref('');
|
||||
const validated = ref(false);
|
||||
const showPopup = ref(false);
|
||||
const errorMsg = ref('');
|
||||
|
||||
function openPopup() {
|
||||
if (validated.value) return;
|
||||
showPopup.value = true;
|
||||
errorMsg.value = '';
|
||||
// Refresh captcha after popup renders
|
||||
nextTick(() => {
|
||||
slideRef.value?.refresh();
|
||||
});
|
||||
}
|
||||
const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
|
||||
|
||||
function closePopup() {
|
||||
showPopup.value = false;
|
||||
}
|
||||
|
||||
function onSuccess() {
|
||||
validated.value = true;
|
||||
errorMsg.value = '';
|
||||
showPopup.value = false;
|
||||
}
|
||||
|
||||
function onFail() {
|
||||
validated.value = false;
|
||||
}
|
||||
|
||||
function onAgain() {
|
||||
validated.value = false;
|
||||
slideRef.value?.refresh();
|
||||
}
|
||||
|
||||
function validate(): boolean {
|
||||
if (!validated.value) {
|
||||
errorMsg.value = t('auth.captcha_wrong');
|
||||
function generateCode() {
|
||||
let result = '';
|
||||
for (let i = 0; i < 4; i++) {
|
||||
result += CHARS[Math.floor(Math.random() * CHARS.length)];
|
||||
}
|
||||
code.value = result;
|
||||
}
|
||||
|
||||
function drawCaptcha() {
|
||||
const canvas = canvasRef.value;
|
||||
if (!canvas) return;
|
||||
const w = 108, h = 44;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
ctx.fillStyle = '#2a2210';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
for (let i = 0; i < 28; i++) {
|
||||
ctx.fillStyle = `rgba(212, 175, 55, ${0.1 + Math.random() * 0.2})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(Math.random() * w, Math.random() * h, Math.random() * 2.2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = `rgba(212, 175, 55, ${0.15 + Math.random() * 0.25})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(Math.random() * w, Math.random() * h);
|
||||
ctx.lineTo(Math.random() * w, Math.random() * h);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
const charWidth = w / (code.value.length + 1);
|
||||
for (let i = 0; i < code.value.length; i++) {
|
||||
ctx.save();
|
||||
const x = charWidth * (i + 0.5) + (Math.random() - 0.5) * 4;
|
||||
const y = h / 2 + (Math.random() - 0.5) * 6;
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((Math.random() - 0.5) * 0.4);
|
||||
ctx.font = `bold ${18 + Math.random() * 6}px 'Courier New', monospace`;
|
||||
ctx.fillStyle = `hsl(${40 + Math.random() * 20}, ${80 + Math.random() * 20}%, ${65 + Math.random() * 20}%)`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(code.value[i], 0, 0);
|
||||
ctx.restore();
|
||||
}
|
||||
return validated.value;
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
generateCode();
|
||||
input.value = '';
|
||||
validated.value = false;
|
||||
errorMsg.value = '';
|
||||
drawCaptcha();
|
||||
}
|
||||
|
||||
function validate(): boolean {
|
||||
if (honeypot.value) { refresh(); return false; }
|
||||
if (!input.value.trim()) {
|
||||
errorMsg.value = t('auth.captcha_wrong');
|
||||
return false;
|
||||
}
|
||||
if (input.value.trim().toUpperCase() !== code.value.toUpperCase()) {
|
||||
errorMsg.value = t('auth.captcha_wrong');
|
||||
refresh();
|
||||
return false;
|
||||
}
|
||||
validated.value = true;
|
||||
errorMsg.value = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
onMounted(refresh);
|
||||
defineExpose({ validate, refresh });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="captcha-trigger-wrapper">
|
||||
<!-- Trigger row -->
|
||||
<div class="captcha-trigger" :class="{ verified: validated }" @click="openPopup">
|
||||
<span v-if="validated" class="captcha-success-icon">✓</span>
|
||||
<span class="captcha-trigger-text">
|
||||
{{ validated ? t('auth.verified') : t('auth.click_to_verify') }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="errorMsg && !validated" class="slide-error">{{ errorMsg }}</p>
|
||||
|
||||
<!-- Popup overlay -->
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="showPopup" class="captcha-overlay" @click.self="closePopup">
|
||||
<div class="captcha-popup">
|
||||
<div class="captcha-popup-header">
|
||||
<span>{{ t('auth.slide_to_verify') }}</span>
|
||||
<button class="captcha-popup-close" @click="closePopup">✕</button>
|
||||
</div>
|
||||
<div class="captcha-popup-body">
|
||||
<SlideVerify
|
||||
ref="slideRef"
|
||||
:w="300"
|
||||
:h="150"
|
||||
:l="42"
|
||||
:r="9"
|
||||
:accuracy="3"
|
||||
:slider-text="t('auth.slide_to_verify')"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@again="onAgain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
<div class="captcha-row">
|
||||
<input v-model="honeypot" type="text" name="website" tabindex="-1"
|
||||
autocomplete="off" class="hp-field" aria-hidden="true" />
|
||||
<input v-model="input" type="text" maxlength="4"
|
||||
class="captcha-input" :placeholder="t('auth.captcha_placeholder')" autocomplete="off" />
|
||||
<canvas ref="canvasRef" class="captcha-canvas"
|
||||
:title="t('auth.captcha_refresh')" role="button" tabindex="0"
|
||||
@click="refresh" @keydown.enter="refresh" />
|
||||
</div>
|
||||
<p v-if="errorMsg" class="captcha-error">{{ errorMsg }}</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.captcha-trigger-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.captcha-trigger {
|
||||
.captcha-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.captcha-trigger:active {
|
||||
border-color: var(--primary, #c8a84e);
|
||||
}
|
||||
|
||||
.captcha-trigger.verified {
|
||||
border-color: rgba(34, 197, 94, 0.5);
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.captcha-success-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.captcha-trigger-text {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.captcha-trigger.verified .captcha-trigger-text {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
.captcha-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.captcha-popup {
|
||||
background: #1e1e1e;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
max-width: 340px;
|
||||
width: calc(100vw - 40px);
|
||||
}
|
||||
|
||||
.captcha-popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.captcha-popup-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.captcha-popup-close:active {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.captcha-popup-body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify) {
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-slider) {
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-info) {
|
||||
background-color: #2a2a2a;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-slider .slide-verify-slider__text) {
|
||||
background-color: #2a2a2a;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-slider .slide-verify-slider__handler) {
|
||||
background-color: var(--primary, #c8a84e);
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-slider__bg-fill) {
|
||||
background-color: rgba(200, 168, 78, 0.25);
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-slider__icon--success) {
|
||||
background-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.captcha-popup-body :deep(.slide-verify-slider__icon--fail) {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
.hp-field {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slide-error {
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-right: none;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.captcha-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.captcha-input:focus {
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.captcha-canvas {
|
||||
flex-shrink: 0;
|
||||
width: 108px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 0 8px 8px 0;
|
||||
border: 1px solid var(--border);
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.captcha-error {
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -50,25 +50,25 @@ const stats = computed(() => {
|
||||
<div class="wallet-stats-panel">
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_income') }}</span>
|
||||
<span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
<div class="stat-item">
|
||||
<span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_expense') }}</span>
|
||||
<span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
</div>
|
||||
<div class="stats-divider" />
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">{{ t('wallet.stats_net') }}</span>
|
||||
<span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
|
||||
{{ formatMoneyCompact(stats.net, locale) }}
|
||||
</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_net') }}</span>
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
<div class="stat-item">
|
||||
<span class="stat-val cashback">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
|
||||
<span class="stat-val cashback">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,9 +79,8 @@ const stats = computed(() => {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
@@ -93,19 +92,22 @@ const stats = computed(() => {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: var(--border);
|
||||
flex-shrink: 0;
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.03em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -116,12 +118,9 @@ const stats = computed(() => {
|
||||
.stat-val.expense { color: #e05050; }
|
||||
.stat-val.cashback { color: #f0b90b; }
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 3px;
|
||||
.stats-divider {
|
||||
height: 1px;
|
||||
margin: 6px 8px;
|
||||
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -44,11 +44,25 @@ export function useAppLocale() {
|
||||
applyLocale(code);
|
||||
}
|
||||
|
||||
/** 将当前语言同步到后端，仅在有 token 时执行，不修改本地 locale */
|
||||
async function syncLocaleToBackend() {
|
||||
if (!auth.token) return;
|
||||
try {
|
||||
await api.post('/player/language', { locale: locale.value });
|
||||
if (auth.user) {
|
||||
auth.user = { ...auth.user, locale: locale.value };
|
||||
localStorage.setItem('user', JSON.stringify(auth.user));
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function initFromUser(userLocale?: string | null) {
|
||||
if (userLocale && (SUPPORTED_LOCALES as readonly string[]).includes(userLocale)) {
|
||||
applyLocale(userLocale);
|
||||
}
|
||||
}
|
||||
|
||||
return { locales: APP_LOCALES, setLocale, applyLocale, initFromUser };
|
||||
return { locales: APP_LOCALES, setLocale, applyLocale, initFromUser, syncLocaleToBackend };
|
||||
}
|
||||
|
||||
@@ -16,8 +16,10 @@ export function usePullToRefresh(options: PullToRefreshOptions) {
|
||||
const progress = computed(() => Math.min(pullDistance.value / maxPull, 1));
|
||||
|
||||
let scrollEl: HTMLElement | null = null;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let pulling = false;
|
||||
let locked = false;
|
||||
|
||||
function findScrollEl(): HTMLElement | null {
|
||||
return document.querySelector('.layout > .main') as HTMLElement | null;
|
||||
@@ -41,19 +43,38 @@ export function usePullToRefresh(options: PullToRefreshOptions) {
|
||||
if (!scrollEl || refreshing.value) return;
|
||||
if (scrollEl.scrollTop > 4) return;
|
||||
if (isInsideScrollableChild(e.target)) return;
|
||||
startX = e.touches[0].clientX;
|
||||
startY = e.touches[0].clientY;
|
||||
pulling = true;
|
||||
locked = false;
|
||||
}
|
||||
|
||||
function handleTouchMove(e: TouchEvent) {
|
||||
if (!pulling || refreshing.value) return;
|
||||
const delta = e.touches[0].clientY - startY;
|
||||
if (delta <= 0) {
|
||||
const dx = e.touches[0].clientX - startX;
|
||||
const dy = e.touches[0].clientY - startY;
|
||||
|
||||
if (!locked) {
|
||||
if (Math.abs(dx) > Math.abs(dy) * 1.5) {
|
||||
pulling = false;
|
||||
pullDistance.value = 0;
|
||||
spinning.value = false;
|
||||
return;
|
||||
}
|
||||
if (dy > 0) {
|
||||
locked = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!locked) return;
|
||||
|
||||
if (dy <= 0) {
|
||||
pullDistance.value = 0;
|
||||
spinning.value = false;
|
||||
return;
|
||||
}
|
||||
const damped = Math.min(delta * 0.7, maxPull);
|
||||
e.preventDefault();
|
||||
const damped = Math.min(dy * 0.7, maxPull);
|
||||
pullDistance.value = damped;
|
||||
spinning.value = damped >= threshold * 0.5;
|
||||
}
|
||||
@@ -61,6 +82,7 @@ export function usePullToRefresh(options: PullToRefreshOptions) {
|
||||
function handleTouchEnd() {
|
||||
if (!pulling) return;
|
||||
pulling = false;
|
||||
locked = false;
|
||||
if (pullDistance.value >= threshold && !refreshing.value) {
|
||||
refreshing.value = true;
|
||||
spinning.value = true;
|
||||
|
||||
@@ -69,10 +69,10 @@ watch(
|
||||
() => auth.token,
|
||||
(token) => {
|
||||
// 首页数据（公告、热门赛事）对所有人公开，始终加载
|
||||
void loadPlayerHome();
|
||||
void loadPlayerHome(true);
|
||||
// 个人资料仅登录用户需要
|
||||
if (token) {
|
||||
void loadProfile();
|
||||
void loadProfile(true);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
|
||||
@@ -17,6 +17,8 @@ const i18n = createI18n({
|
||||
refreshing: '刷新中…',
|
||||
loading_more: '加载更多…',
|
||||
no_more: '没有更多了',
|
||||
load_failed: '加载失败',
|
||||
retry: '重试',
|
||||
},
|
||||
nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
|
||||
home: {
|
||||
@@ -76,9 +78,9 @@ const i18n = createI18n({
|
||||
password: '密码',
|
||||
invite_code: '邀请码',
|
||||
optional: '选填',
|
||||
captcha_placeholder: 'Captcha',
|
||||
captcha_placeholder: '验证码',
|
||||
captcha_refresh: '点击换一张',
|
||||
captcha_wrong: '请完成滑块验证',
|
||||
captcha_wrong: '验证码错误',
|
||||
slide_to_verify: '向右滑动完成验证',
|
||||
click_to_verify: '点击验证',
|
||||
verified: '验证成功',
|
||||
@@ -110,7 +112,12 @@ const i18n = createI18n({
|
||||
available: '可用',
|
||||
no_records: '暂无账单记录',
|
||||
tx_deposit: '充值',
|
||||
tx_admin_deposit: '管理员上分',
|
||||
tx_agent_deposit: '代理上分',
|
||||
tx_player_deposit: '自助充值',
|
||||
tx_withdraw: '人工提款',
|
||||
tx_admin_withdraw: '管理员下分',
|
||||
tx_agent_withdraw: '代理下分',
|
||||
tx_adjust: '人工调整',
|
||||
tx_bet_freeze: '投注冻结',
|
||||
tx_bet_deduct: '投注扣款',
|
||||
@@ -121,6 +128,8 @@ const i18n = createI18n({
|
||||
tx_bet_void: '投注撤销',
|
||||
tx_cashback: '返水入账',
|
||||
tx_resettle: '重新结算',
|
||||
summary_bet: '注单 {betNo}',
|
||||
summary_opening_bonus: '开户赠金',
|
||||
stats_income: '收入',
|
||||
stats_expense: '支出',
|
||||
stats_net: '净额',
|
||||
@@ -179,7 +188,7 @@ const i18n = createI18n({
|
||||
submit_failed: '提交失败，请重试',
|
||||
file_must_be_image: '请上传图片文件',
|
||||
file_too_large: '文件不能超过 10MB',
|
||||
status_pending: '审核中',
|
||||
status_pending: '充值中',
|
||||
status_approved: '已通过',
|
||||
status_rejected: '已拒绝',
|
||||
no_orders: '暂无充值记录',
|
||||
@@ -391,6 +400,8 @@ const i18n = createI18n({
|
||||
refreshing: 'Refreshing…',
|
||||
loading_more: 'Loading more…',
|
||||
no_more: 'No more',
|
||||
load_failed: 'Failed to load',
|
||||
retry: 'Retry',
|
||||
},
|
||||
nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
|
||||
home: {
|
||||
@@ -450,9 +461,9 @@ const i18n = createI18n({
|
||||
password: 'Password',
|
||||
invite_code: 'Invitation Code',
|
||||
optional: 'Optional',
|
||||
captcha_placeholder: 'Captcha',
|
||||
captcha_placeholder: 'Code',
|
||||
captcha_refresh: 'Click to refresh',
|
||||
captcha_wrong: 'Please complete the slider verification',
|
||||
captcha_wrong: 'Incorrect captcha code',
|
||||
slide_to_verify: 'Slide to verify',
|
||||
click_to_verify: 'Click to verify',
|
||||
verified: 'Verified',
|
||||
@@ -484,7 +495,12 @@ const i18n = createI18n({
|
||||
available: 'Available',
|
||||
no_records: 'No records',
|
||||
tx_deposit: 'Deposit',
|
||||
tx_admin_deposit: 'Admin top-up',
|
||||
tx_agent_deposit: 'Agent top-up',
|
||||
tx_player_deposit: 'Self deposit',
|
||||
tx_withdraw: 'Withdrawal',
|
||||
tx_admin_withdraw: 'Admin withdraw',
|
||||
tx_agent_withdraw: 'Agent withdraw',
|
||||
tx_adjust: 'Manual Adjust',
|
||||
tx_bet_freeze: 'Bet Frozen',
|
||||
tx_bet_deduct: 'Bet Deducted',
|
||||
@@ -495,6 +511,8 @@ const i18n = createI18n({
|
||||
tx_bet_void: 'Bet Voided',
|
||||
tx_cashback: 'Cashback credit',
|
||||
tx_resettle: 'Resettlement',
|
||||
summary_bet: 'Bet {betNo}',
|
||||
summary_opening_bonus: 'Opening bonus',
|
||||
stats_income: 'Income',
|
||||
stats_expense: 'Expense',
|
||||
stats_net: 'Net',
|
||||
@@ -553,7 +571,7 @@ const i18n = createI18n({
|
||||
submit_failed: 'Submit failed, please retry',
|
||||
file_must_be_image: 'Please upload an image file',
|
||||
file_too_large: 'File exceeds 10MB',
|
||||
status_pending: 'Pending',
|
||||
status_pending: 'Processing',
|
||||
status_approved: 'Approved',
|
||||
status_rejected: 'Rejected',
|
||||
no_orders: 'No recharge records',
|
||||
@@ -765,6 +783,8 @@ const i18n = createI18n({
|
||||
refreshing: 'Menyegarkan…',
|
||||
loading_more: 'Memuat lagi…',
|
||||
no_more: 'Tiada lagi',
|
||||
load_failed: 'Gagal dimuat',
|
||||
retry: 'Cuba lagi',
|
||||
},
|
||||
nav: {
|
||||
home: 'Laman Utama',
|
||||
@@ -830,9 +850,9 @@ const i18n = createI18n({
|
||||
password: 'Kata Laluan',
|
||||
invite_code: 'Kod Jemputan',
|
||||
optional: 'Pilihan',
|
||||
captcha_placeholder: 'Captcha',
|
||||
captcha_placeholder: 'Kod',
|
||||
captcha_refresh: 'Klik untuk muat semula',
|
||||
captcha_wrong: 'Sila lengkapkan pengesahan gelongsor',
|
||||
captcha_wrong: 'Kod captcha salah',
|
||||
slide_to_verify: 'Gelongsor untuk mengesahkan',
|
||||
click_to_verify: 'Klik untuk mengesahkan',
|
||||
verified: 'Disahkan',
|
||||
@@ -864,7 +884,12 @@ const i18n = createI18n({
|
||||
available: 'Tersedia',
|
||||
no_records: 'Tiada rekod',
|
||||
tx_deposit: 'Deposit',
|
||||
tx_admin_deposit: 'Tambah baki admin',
|
||||
tx_agent_deposit: 'Tambah baki ejen',
|
||||
tx_player_deposit: 'Deposit sendiri',
|
||||
tx_withdraw: 'Pengeluaran',
|
||||
tx_admin_withdraw: 'Pengeluaran admin',
|
||||
tx_agent_withdraw: 'Pengeluaran ejen',
|
||||
tx_adjust: 'Pelarasan Manual',
|
||||
tx_bet_freeze: 'Pertaruhan Ditahan',
|
||||
tx_bet_deduct: 'Pertaruhan Ditolak',
|
||||
@@ -875,6 +900,8 @@ const i18n = createI18n({
|
||||
tx_bet_void: 'Pertaruhan Dibatalkan',
|
||||
tx_cashback: 'Kredit rebat',
|
||||
tx_resettle: 'Penyelesaian Semula',
|
||||
summary_bet: 'Pertaruhan {betNo}',
|
||||
summary_opening_bonus: 'Bonus pembukaan',
|
||||
stats_income: 'Pendapatan',
|
||||
stats_expense: 'Perbelanjaan',
|
||||
stats_net: 'Bersih',
|
||||
@@ -933,7 +960,7 @@ const i18n = createI18n({
|
||||
submit_failed: 'Gagal, sila cuba lagi',
|
||||
file_must_be_image: 'Sila muat naik fail imej',
|
||||
file_too_large: 'Fail melebihi 10MB',
|
||||
status_pending: 'Menunggu',
|
||||
status_pending: 'Memproses',
|
||||
status_approved: 'Diluluskan',
|
||||
status_rejected: 'Ditolak',
|
||||
no_orders: 'Tiada rekod topup',
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
export const TX_KEY_MAP: Record<string, string> = {
|
||||
MANUAL_DEPOSIT: 'wallet.tx_deposit',
|
||||
ADMIN_DEPOSIT: 'wallet.tx_admin_deposit',
|
||||
AGENT_DEPOSIT: 'wallet.tx_agent_deposit',
|
||||
INITIAL_DEPOSIT: 'wallet.tx_admin_deposit',
|
||||
MANUAL_WITHDRAW: 'wallet.tx_withdraw',
|
||||
ADMIN_WITHDRAW: 'wallet.tx_admin_withdraw',
|
||||
AGENT_WITHDRAW: 'wallet.tx_agent_withdraw',
|
||||
MANUAL_ADJUST: 'wallet.tx_adjust',
|
||||
BET_FREEZE: 'wallet.tx_bet_freeze',
|
||||
BET_DEDUCT: 'wallet.tx_bet_deduct',
|
||||
@@ -16,13 +21,36 @@ export const TX_KEY_MAP: Record<string, string> = {
|
||||
RESETTLE_REVERSE: 'wallet.tx_resettle',
|
||||
DEPOSIT: 'wallet.tx_deposit',
|
||||
WITHDRAW: 'wallet.tx_withdraw',
|
||||
PLAYER_DEPOSIT: 'wallet.tx_deposit',
|
||||
PLAYER_DEPOSIT: 'wallet.tx_player_deposit',
|
||||
};
|
||||
|
||||
export function txTypeKey(type: string): string {
|
||||
return TX_KEY_MAP[type.toUpperCase()] ?? '';
|
||||
}
|
||||
|
||||
export function txDisplayType(tx: { displayType?: string; transactionType: string }): string {
|
||||
return tx.displayType?.trim() || tx.transactionType;
|
||||
}
|
||||
|
||||
export function txSummaryLabel(
|
||||
tx: {
|
||||
summary?: string | null;
|
||||
summaryKind?: 'opening_bonus' | null;
|
||||
referenceType?: string | null;
|
||||
},
|
||||
t: (key: string, params?: Record<string, unknown>) => string,
|
||||
): string {
|
||||
if (tx.summaryKind === 'opening_bonus') {
|
||||
return t('wallet.summary_opening_bonus');
|
||||
}
|
||||
const summary = tx.summary?.trim();
|
||||
if (!summary) return '';
|
||||
if (tx.referenceType === 'BET') {
|
||||
return t('wallet.summary_bet', { betNo: summary });
|
||||
}
|
||||
return summary;
|
||||
}
|
||||
|
||||
export function isDepositType(type: string): boolean {
|
||||
const t = type.toUpperCase();
|
||||
return (t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT') && !isCashbackType(type);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
@@ -31,7 +31,13 @@ type CashbackRecord = {
|
||||
};
|
||||
|
||||
const items = ref<CashbackRecord[]>([]);
|
||||
const loading = ref(true);
|
||||
const loading = ref(false);
|
||||
const initialLoading = ref(true);
|
||||
const page = ref(1);
|
||||
const hasMore = ref(true);
|
||||
|
||||
const sentinel = ref<HTMLElement | null>(null);
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
const totalAmount = computed(() =>
|
||||
items.value.reduce((sum, row) => sum + Math.abs(parseFloat(row.amount) || 0), 0),
|
||||
@@ -61,25 +67,59 @@ function formatTime(v: string | null) {
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchRecords() {
|
||||
async function fetchRecords(p = 1) {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/cashbacks');
|
||||
items.value = data.data ?? [];
|
||||
const { data } = await api.get('/player/cashbacks', { 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];
|
||||
}
|
||||
|
||||
const pageSize = result.pageSize ?? 20;
|
||||
hasMore.value = newItems.length >= pageSize;
|
||||
page.value = p;
|
||||
} catch {
|
||||
items.value = [];
|
||||
if (p === 1) items.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
initialLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
useOnLocaleChange(fetchRecords);
|
||||
|
||||
const { pullDistance, spinning, progress } = usePullToRefresh({
|
||||
onRefresh: fetchRecords,
|
||||
useOnLocaleChange(() => {
|
||||
items.value = [];
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
initialLoading.value = true;
|
||||
fetchRecords(1);
|
||||
});
|
||||
|
||||
onMounted(fetchRecords);
|
||||
const { pullDistance, spinning, progress } = usePullToRefresh({
|
||||
onRefresh: async () => { await fetchRecords(1); },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchRecords(1);
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
|
||||
fetchRecords(page.value + 1);
|
||||
}
|
||||
},
|
||||
{ rootMargin: '200px' },
|
||||
);
|
||||
if (sentinel.value) observer.observe(sentinel.value);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect();
|
||||
});
|
||||
|
||||
const pullIndicatorStyle = () => ({
|
||||
height: `${pullDistance.value}px`,
|
||||
@@ -144,6 +184,16 @@ const pullIndicatorStyle = () => ({
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div ref="sentinel" class="sentinel" />
|
||||
|
||||
<div v-if="loading && items.length > 0" class="load-more-spinner">
|
||||
<GoldSpinner :size="24" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
|
||||
{{ t('common.no_more') }}
|
||||
</div>
|
||||
|
||||
<div v-else class="empty">
|
||||
<p class="empty-title">{{ t('cashback.empty') }}</p>
|
||||
<p class="empty-hint">{{ t('cashback.empty_hint') }}</p>
|
||||
@@ -351,4 +401,23 @@ const pullIndicatorStyle = () => ({
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.load-more-spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0 8px;
|
||||
}
|
||||
|
||||
.end-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@ import RobotVerify from '../components/RobotVerify.vue';
|
||||
import loginBg from '../assets/images/h5bg.png';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { initFromUser } = useAppLocale();
|
||||
const { syncLocaleToBackend } = useAppLocale();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@@ -29,7 +29,7 @@ async function submit() {
|
||||
error.value = '';
|
||||
try {
|
||||
await auth.login(username.value, password.value);
|
||||
initFromUser(auth.user?.locale);
|
||||
await syncLocaleToBackend();
|
||||
const redirectTo = (route.query.redirect as string) || '/';
|
||||
router.push(redirectTo);
|
||||
} catch (e: unknown) {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter, RouterLink } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import LocaleFlag from '../components/LocaleFlag.vue';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useAppLocale } from '../composables/useAppLocale';
|
||||
@@ -21,49 +21,49 @@ const profile = ref<{
|
||||
wallet?: { availableBalance: string; frozenBalance: string };
|
||||
} | null>(null);
|
||||
|
||||
const loading = ref(true);
|
||||
const error = ref(false);
|
||||
const rulesExpanded = ref(false);
|
||||
const cashbackTotal = ref('0');
|
||||
|
||||
const displayAmount = ref(0);
|
||||
const animating = ref(false);
|
||||
|
||||
function amountValue(value: unknown): number {
|
||||
if (value == null) return 0;
|
||||
const n = Number(value);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function runCountUp(target: number) {
|
||||
const duration = 3000;
|
||||
const start = performance.now();
|
||||
animating.value = true;
|
||||
function step(now: number) {
|
||||
const progress = Math.min((now - start) / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 5);
|
||||
displayAmount.value = target * eased;
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
} else {
|
||||
displayAmount.value = target;
|
||||
animating.value = false;
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
const displayedBalance = computed(() =>
|
||||
animating.value
|
||||
? formatMoney(displayAmount.value, locale.value)
|
||||
: formatMoneyCompact(profile.value?.wallet?.availableBalance, locale.value),
|
||||
);
|
||||
|
||||
async function fetchProfile() {
|
||||
const { data } = await api.get('/player/profile');
|
||||
profile.value = data.data;
|
||||
initFromUser(data.data?.locale);
|
||||
runCountUp(amountValue(data.data?.wallet?.availableBalance));
|
||||
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
|
||||
void fetchCashbackTotal();
|
||||
} catch {
|
||||
error.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(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();
|
||||
} catch {
|
||||
// Ignore errors, keep default value
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void fetchProfile();
|
||||
});
|
||||
|
||||
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
|
||||
onRefresh: async () => { await fetchProfile(); },
|
||||
@@ -82,6 +82,19 @@ function logout() {
|
||||
auth.logout();
|
||||
router.push('/');
|
||||
}
|
||||
|
||||
const balanceDisplay = computed(() =>
|
||||
formatMoney(profile.value?.wallet?.availableBalance, locale.value),
|
||||
);
|
||||
|
||||
const balanceAmountClass = computed(() => {
|
||||
const len = balanceDisplay.value.length;
|
||||
if (len <= 10) return 'balance-amount--xl';
|
||||
if (len <= 13) return 'balance-amount--lg';
|
||||
if (len <= 16) return 'balance-amount--md';
|
||||
if (len <= 19) return 'balance-amount--sm';
|
||||
return 'balance-amount--xs';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -93,30 +106,55 @@ function logout() {
|
||||
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading-state">
|
||||
<GoldSpinner :size="36" :active="true" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-state">
|
||||
<p class="error-text">{{ t('common.load_failed') }}</p>
|
||||
<button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="wallet-banner">
|
||||
<img class="wallet-banner-img" :src="walletBg" alt="" />
|
||||
<img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
|
||||
<div class="wallet-banner-info">
|
||||
<div class="card-balance-block">
|
||||
<span class="card-kicker">
|
||||
<LocaleFlag :locale="locale" :size="14" />
|
||||
{{ t('wallet.balance') }}
|
||||
</span>
|
||||
<div class="card-balance-row">
|
||||
<p class="card-balance">{{ displayedBalance }}</p>
|
||||
<button type="button" class="card-recharge-btn" @click.stop="router.push('/wallet/recharge')">
|
||||
{{ t('recharge.title') }}
|
||||
</button>
|
||||
<div class="wallet-banner-scrim" aria-hidden="true" />
|
||||
|
||||
<div class="card-overlay">
|
||||
<div class="bank-card-top">
|
||||
<div class="bank-card-top-left">
|
||||
<div class="bank-card-chip" aria-hidden="true">
|
||||
<span /><span /><span />
|
||||
</div>
|
||||
<img src="/logo.png" alt="TheBet365" class="brand-logo" />
|
||||
<div class="bank-card-brand-text">
|
||||
<span class="brand-name">THEBET365</span>
|
||||
<span class="bank-card-type">MEMBER</span>
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink to="/wallet/recharge" class="recharge-btn">
|
||||
<span class="recharge-icon">+</span>
|
||||
<span>{{ t('recharge.title') }}</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<div class="card-holder">
|
||||
<span class="card-kicker">{{ t('wallet.card_holder') }}</span>
|
||||
<span class="card-name">{{ profile?.username }}</span>
|
||||
|
||||
<div class="bank-card-balance">
|
||||
<span class="bank-card-label">当前余额</span>
|
||||
<p class="bank-card-number balance-amount" :class="balanceAmountClass">{{ balanceDisplay }}</p>
|
||||
</div>
|
||||
|
||||
<div class="bank-card-footer">
|
||||
<div class="bank-card-field">
|
||||
<span class="bank-card-label">持卡人</span>
|
||||
<span class="bank-card-holder">{{ profile?.username }}</span>
|
||||
</div>
|
||||
<div class="card-pending">
|
||||
<span class="card-kicker">{{ t('wallet.unsettled') }}</span>
|
||||
<span class="card-pending-val">{{ formatMoney(profile?.wallet?.frozenBalance, locale) }}</span>
|
||||
<div class="bank-card-field bank-card-field--center">
|
||||
<span class="bank-card-label">累计返水</span>
|
||||
<span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,17 +162,46 @@ function logout() {
|
||||
|
||||
<section class="settings-group">
|
||||
<RouterLink to="/wallet/detail" class="settings-cell settings-cell--gold-entry">
|
||||
<span class="cell-label">{{ t('wallet.view_all') }}</span>
|
||||
<span class="cell-main">
|
||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<path d="M9 5H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V9" />
|
||||
<path d="M9 5a2 2 0 012-2h2a2 2 0 012 2v0M9 12h6M9 16h4" />
|
||||
</svg>
|
||||
<span class="cell-label">{{ t('wallet.view_all') }}</span>
|
||||
</span>
|
||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/profile/cashbacks" class="settings-cell settings-cell--gold-entry">
|
||||
<span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
|
||||
<span class="cell-main">
|
||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
<path d="M12 8v4l2.5 2.5" />
|
||||
</svg>
|
||||
<span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
|
||||
</span>
|
||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/wallet/recharge/history" class="settings-cell settings-cell--gold-entry">
|
||||
<span class="cell-main">
|
||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<path d="M12 8v8M8 12h8" />
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
</svg>
|
||||
<span class="cell-label">{{ t('recharge.history_title') }}</span>
|
||||
</span>
|
||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/profile/edit" class="settings-cell">
|
||||
<span class="cell-label">{{ t('profile.edit') }}</span>
|
||||
<span class="cell-main">
|
||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<circle cx="12" cy="8" r="3.5" />
|
||||
<path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
|
||||
</svg>
|
||||
<span class="cell-label">{{ t('profile.edit') }}</span>
|
||||
</span>
|
||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
||||
</RouterLink>
|
||||
|
||||
@@ -145,7 +212,13 @@ function logout() {
|
||||
:aria-expanded="rulesExpanded"
|
||||
@click="rulesExpanded = !rulesExpanded"
|
||||
>
|
||||
<span class="cell-label">{{ t('profile.rules_title') }}</span>
|
||||
<span class="cell-main">
|
||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<path d="M7 4h10v16H7z" />
|
||||
<path d="M10 8h6M10 12h6M10 16h4" />
|
||||
</svg>
|
||||
<span class="cell-label">{{ t('profile.rules_title') }}</span>
|
||||
</span>
|
||||
<span class="cell-chevron" :class="{ open: rulesExpanded }" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<div v-show="rulesExpanded" class="rules-body">
|
||||
@@ -159,6 +232,10 @@ function logout() {
|
||||
|
||||
<div class="settings-cell settings-cell--stack">
|
||||
<div class="cell-head">
|
||||
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
|
||||
</svg>
|
||||
<span class="cell-label">{{ t('profile.language') }}</span>
|
||||
</div>
|
||||
<div class="lang-segment" role="group" :aria-label="t('profile.language')">
|
||||
@@ -180,6 +257,7 @@ function logout() {
|
||||
<button type="button" class="logout-btn" @click="logout">
|
||||
{{ t('auth.logout') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -196,173 +274,292 @@ function logout() {
|
||||
padding: 8px 0 12px;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
padding: 8px 24px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--primary);
|
||||
background: transparent;
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-btn:active {
|
||||
background: rgba(200, 168, 78, 0.15);
|
||||
}
|
||||
|
||||
.wallet-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
aspect-ratio: 2 / 1;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 3px 10px rgba(0, 0, 0, 0.28),
|
||||
0 1px 3px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.wallet-banner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wallet-banner-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wallet-card-logo {
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
right: 5.5%;
|
||||
z-index: 2;
|
||||
width: clamp(42px, 12.8vw, 64px);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
transform: scale(1.12);
|
||||
transform-origin: center center;
|
||||
filter: brightness(0.86);
|
||||
pointer-events: none;
|
||||
filter:
|
||||
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
|
||||
drop-shadow(0 0 5px rgba(212, 175, 55, 0.32))
|
||||
drop-shadow(0 0 10px rgba(240, 216, 117, 0.18));
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wallet-banner-info {
|
||||
.wallet-banner-scrim {
|
||||
position: absolute;
|
||||
inset: 11% 12% 9% 19%;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0.18) 42%,
|
||||
rgba(0, 0, 0, 0.46) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(14px, 3.5vw, 20px);
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-stretch: semi-expanded;
|
||||
padding: 14px 16px 12px;
|
||||
line-height: 1.3;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.card-kicker {
|
||||
.bank-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bank-card-top-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bank-card-chip {
|
||||
width: 34px;
|
||||
height: 24px;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(135deg, #e8c96a 0%, #c9a227 40%, #a8841f 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
padding: 0 7px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bank-card-chip span {
|
||||
display: block;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.bank-card-chip span:nth-child(2) { width: 70%; }
|
||||
.bank-card-chip span:nth-child(3) { width: 50%; }
|
||||
|
||||
.brand-logo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.bank-card-brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.14em;
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bank-card-type {
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
color: rgba(212, 175, 55, 0.65);
|
||||
font-style: italic;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bank-card-label {
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
line-height: 1.3;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.recharge-btn {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: clamp(10px, 2.5vw, 11px);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(180, 180, 185, 0.92);
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.75),
|
||||
0 2px 5px rgba(0, 0, 0, 0.35);
|
||||
gap: 3px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 14px;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
color: var(--primary-light);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
backdrop-filter: blur(6px);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.card-balance-block {
|
||||
.recharge-btn:active {
|
||||
background: rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
|
||||
.recharge-icon {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bank-card-balance {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: clamp(3px, 1vw, 6px);
|
||||
min-height: clamp(44px, 12vw, 60px);
|
||||
min-height: 0;
|
||||
padding: 2px 0;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.card-balance {
|
||||
.bank-card-number {
|
||||
margin: 0;
|
||||
font-size: clamp(22px, 6.8vw, 36px);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.05;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
background: var(--gradient-gold);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter:
|
||||
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
|
||||
drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45))
|
||||
drop-shadow(0 0 10px rgba(212, 175, 55, 0.22));
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.card-balance-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.balance-amount {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.balance-amount--xl { font-size: clamp(24px, 6.2vw, 30px); }
|
||||
.balance-amount--lg { font-size: clamp(21px, 5.6vw, 26px); }
|
||||
.balance-amount--md { font-size: clamp(18px, 4.9vw, 22px); }
|
||||
.balance-amount--sm { font-size: clamp(16px, 4.2vw, 19px); }
|
||||
.balance-amount--xs { font-size: clamp(14px, 3.6vw, 16px); }
|
||||
|
||||
.bank-card-footer {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.card-foot {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: auto;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.card-holder,
|
||||
.card-pending {
|
||||
.bank-card-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-pending {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
.bank-card-field--center { text-align: center; }
|
||||
.bank-card-field--right { text-align: right; }
|
||||
|
||||
.card-name {
|
||||
font-size: clamp(12px, 3.2vw, 15px);
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 44vw;
|
||||
background: linear-gradient(180deg, #fff6d8 0%, #e8c96a 38%, #c9a227 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter:
|
||||
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
|
||||
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
|
||||
.card-pending-val {
|
||||
font-size: clamp(12px, 3.2vw, 14px);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.01em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: rgba(210, 210, 215, 0.95);
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.75),
|
||||
0 2px 5px rgba(0, 0, 0, 0.35);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-recharge-btn {
|
||||
z-index: 3;
|
||||
background: linear-gradient(135deg, #f0d060, #d4a830);
|
||||
color: #1a1a1a;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
padding: 5px 14px;
|
||||
.bank-card-holder {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.4),
|
||||
0 0 12px rgba(212, 175, 55, 0.25);
|
||||
pointer-events: auto;
|
||||
transition: transform 0.1s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.card-recharge-btn:active {
|
||||
transform: scale(0.95);
|
||||
.bank-card-stat {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.settings-group {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
@@ -429,9 +626,28 @@ function logout() {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.cell-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.settings-cell--gold-entry .cell-icon {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.cell-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cell-label {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
@@ -25,24 +25,58 @@ interface DepositOrder {
|
||||
}
|
||||
|
||||
const items = ref<DepositOrder[]>([]);
|
||||
const loading = ref(true);
|
||||
const loading = ref(false);
|
||||
const initialLoading = ref(true);
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
const hasMore = ref(true);
|
||||
|
||||
async function fetchOrders() {
|
||||
const sentinel = ref<HTMLElement | null>(null);
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
async function fetchOrders(p = 1) {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/deposit-orders', { params: { page: page.value } });
|
||||
const result = data.data ?? { items: [], total: 0 };
|
||||
items.value = result.items ?? [];
|
||||
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;
|
||||
page.value = p;
|
||||
} catch { /* */ } finally {
|
||||
loading.value = false;
|
||||
initialLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const { pullDistance, spinning, progress } = usePullToRefresh({
|
||||
onRefresh: fetchOrders,
|
||||
onRefresh: async () => { await fetchOrders(1); },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchOrders(1);
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
|
||||
fetchOrders(page.value + 1);
|
||||
}
|
||||
},
|
||||
{ rootMargin: '200px' },
|
||||
);
|
||||
if (sentinel.value) observer.observe(sentinel.value);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect();
|
||||
});
|
||||
|
||||
function statusClass(s: string) {
|
||||
@@ -123,6 +157,16 @@ onMounted(fetchOrders);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="sentinel" class="sentinel" />
|
||||
|
||||
<div v-if="loading && items.length > 0" class="load-more-spinner">
|
||||
<GoldSpinner :size="24" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
|
||||
{{ t('common.no_more') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -205,4 +249,23 @@ onMounted(fetchOrders);
|
||||
border-left: 2px solid rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
.reject-reason { margin-top: 8px; font-size: 12px; color: #f56c6c; background: #2a1515; padding: 6px 10px; border-radius: 6px; }
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.load-more-spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0 8px;
|
||||
}
|
||||
|
||||
.end-hint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -154,6 +154,12 @@ function copyText(text: string) {
|
||||
navigator.clipboard?.writeText(text);
|
||||
}
|
||||
|
||||
function formatCardNumber(num: string | null): string {
|
||||
if (!num) return '—';
|
||||
const digits = num.replace(/\s/g, '');
|
||||
return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
|
||||
}
|
||||
|
||||
onMounted(fetchMethods);
|
||||
</script>
|
||||
|
||||
@@ -202,25 +208,43 @@ onMounted(fetchMethods);
|
||||
</div>
|
||||
<div v-else class="empty-methods">{{ t('recharge.no_methods') }}</div>
|
||||
|
||||
<div v-if="selectedMethod" class="method-info">
|
||||
<template v-if="selectedMethod.methodType === 'BANK'">
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('recharge.bank_name') }}</span>
|
||||
<span class="info-value">{{ selectedMethod.bankName }}</span>
|
||||
<div v-if="selectedMethod && selectedMethod.methodType === 'BANK'" class="bank-card-wrap">
|
||||
<div class="bank-card-face">
|
||||
<div class="bank-card-shine" aria-hidden="true" />
|
||||
<div class="bank-card-deco bank-card-deco--1" aria-hidden="true" />
|
||||
<div class="bank-card-deco bank-card-deco--2" aria-hidden="true" />
|
||||
<div class="bank-card-top">
|
||||
<div class="bank-card-chip" aria-hidden="true">
|
||||
<span /><span /><span />
|
||||
</div>
|
||||
<div class="bank-card-bank">{{ selectedMethod.bankName }}</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('recharge.account_holder') }}</span>
|
||||
<span class="info-value">{{ selectedMethod.accountHolder }}</span>
|
||||
<div class="bank-card-number-row">
|
||||
<span class="bank-card-number">{{ formatCardNumber(selectedMethod.accountNumber) }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="bank-card-copy"
|
||||
:aria-label="t('recharge.account_number')"
|
||||
@click="copyText(selectedMethod.accountNumber || '')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" />
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('recharge.account_number') }}</span>
|
||||
<span class="info-value copyable" @click="copyText(selectedMethod!.accountNumber || '')">
|
||||
{{ selectedMethod.accountNumber }}
|
||||
<svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
||||
</span>
|
||||
<div class="bank-card-bottom">
|
||||
<div class="bank-card-holder">
|
||||
<span class="bank-card-holder-label">{{ t('recharge.account_holder') }}</span>
|
||||
<span class="bank-card-holder-name">{{ selectedMethod.accountHolder }}</span>
|
||||
</div>
|
||||
<div class="bank-card-type">DEBIT</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="selectedMethod" class="method-info">
|
||||
<template v-if="selectedMethod.methodType !== 'BANK'">
|
||||
<div class="info-row">
|
||||
<span class="info-label">{{ t('recharge.usdt_address') }}</span>
|
||||
<span class="info-value copyable" @click="copyText(selectedMethod!.usdtAddress || '')">
|
||||
@@ -317,6 +341,203 @@ onMounted(fetchMethods);
|
||||
.pill-sub { font-size: 10px; color: var(--text-muted); }
|
||||
.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }
|
||||
|
||||
.bank-card-wrap {
|
||||
margin-bottom: 16px;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.bank-card-face {
|
||||
position: relative;
|
||||
aspect-ratio: 2 / 1;
|
||||
border-radius: 14px;
|
||||
padding: 14px 18px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 55%),
|
||||
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212, 175, 55, 0.1), transparent 50%),
|
||||
linear-gradient(135deg, #2a2218 0%, #1a1610 35%, #12100c 70%, #0a0908 100%);
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.55),
|
||||
0 2px 8px rgba(212, 175, 55, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.bank-card-shine {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
115deg,
|
||||
transparent 30%,
|
||||
rgba(255, 255, 255, 0.04) 45%,
|
||||
rgba(255, 255, 255, 0.08) 50%,
|
||||
rgba(255, 255, 255, 0.04) 55%,
|
||||
transparent 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bank-card-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(212, 175, 55, 0.12);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bank-card-deco--1 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
right: -60px;
|
||||
bottom: -80px;
|
||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
|
||||
}
|
||||
|
||||
.bank-card-deco--2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
right: 40px;
|
||||
bottom: 20px;
|
||||
border-color: rgba(212, 175, 55, 0.08);
|
||||
}
|
||||
|
||||
.bank-card-top,
|
||||
.bank-card-number-row,
|
||||
.bank-card-bottom {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bank-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.bank-card-chip {
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #e8c96a 0%, #c9a227 40%, #a8841f 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bank-card-chip span {
|
||||
display: block;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.bank-card-chip span:nth-child(2) { width: 70%; }
|
||||
.bank-card-chip span:nth-child(3) { width: 50%; }
|
||||
|
||||
.bank-card-bank {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
line-height: 1.3;
|
||||
max-width: 58%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.bank-card-number-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin: 4px 0 2px;
|
||||
}
|
||||
|
||||
.bank-card-number {
|
||||
font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
|
||||
font-size: clamp(15px, 4.2vw, 19px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--primary-light);
|
||||
text-shadow: 0 0 12px rgba(240, 216, 117, 0.25);
|
||||
word-break: break-all;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.bank-card-copy {
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: var(--primary-light);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.bank-card-copy svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.bank-card-copy:active {
|
||||
opacity: 0.65;
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
|
||||
.bank-card-bottom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.bank-card-holder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bank-card-holder-label {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.bank-card-holder-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.04em;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.bank-card-type {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.18em;
|
||||
color: rgba(212, 175, 55, 0.55);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.method-info {
|
||||
background: rgba(17, 17, 17, 0.9);
|
||||
border-radius: 8px; padding: 10px 12px;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey } from '../utils/walletTx';
|
||||
import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey, txDisplayType, txSummaryLabel } from '../utils/walletTx';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import WalletStatsPanel from '../components/WalletStatsPanel.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
@@ -14,6 +14,10 @@ const { t, locale } = useI18n();
|
||||
|
||||
type Transaction = {
|
||||
transactionType: string;
|
||||
displayType?: string;
|
||||
summary?: string | null;
|
||||
summaryKind?: 'opening_bonus' | null;
|
||||
referenceType?: string | null;
|
||||
amount: string;
|
||||
createdAt: string;
|
||||
transactionId: string;
|
||||
@@ -57,13 +61,17 @@ async function fetchCashbackTotal() {
|
||||
}
|
||||
}
|
||||
|
||||
function txLabel(type: string): string {
|
||||
const key = txTypeKey(type);
|
||||
function txLabel(tx: Transaction): string {
|
||||
const key = txTypeKey(txDisplayType(tx));
|
||||
if (key) {
|
||||
const translated = t(key);
|
||||
if (translated !== key) return translated;
|
||||
}
|
||||
return type;
|
||||
return tx.transactionType;
|
||||
}
|
||||
|
||||
function txSubtitle(tx: Transaction): string {
|
||||
return txSummaryLabel(tx, t);
|
||||
}
|
||||
|
||||
function goDetail(tx: Transaction) {
|
||||
@@ -186,7 +194,10 @@ const pullIndicatorStyle = () => ({
|
||||
@click="goDetail(tx)"
|
||||
>
|
||||
<div class="tx-main">
|
||||
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
|
||||
<div class="tx-text">
|
||||
<span class="tx-type">{{ txLabel(tx) }}</span>
|
||||
<span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
|
||||
</div>
|
||||
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
|
||||
{{ formatMoney(tx.amount, locale) }}
|
||||
</span>
|
||||
@@ -321,6 +332,22 @@ const pullIndicatorStyle = () => ({
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tx-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tx-summary {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tx-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -4,13 +4,16 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import { txTypeKey, isCashbackType } from '../utils/walletTx';
|
||||
import { txTypeKey, isCashbackType, txDisplayType, txSummaryLabel } from '../utils/walletTx';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
|
||||
type TransactionDetail = {
|
||||
transactionId: string;
|
||||
transactionType: string;
|
||||
displayType?: string;
|
||||
summary?: string | null;
|
||||
summaryKind?: 'opening_bonus' | null;
|
||||
amount: string;
|
||||
balanceBefore: string;
|
||||
balanceAfter: string;
|
||||
@@ -21,6 +24,7 @@ type TransactionDetail = {
|
||||
remark: string | null;
|
||||
createdAt: string;
|
||||
betNo: string | null;
|
||||
cashbackBatchNo?: string | null;
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
@@ -67,6 +71,16 @@ function txLabel(type: string): string {
|
||||
return type;
|
||||
}
|
||||
|
||||
const displayTypeLabel = computed(() => {
|
||||
if (!tx.value) return '';
|
||||
return txLabel(txDisplayType(tx.value));
|
||||
});
|
||||
|
||||
const summaryText = computed(() => {
|
||||
if (!tx.value) return '';
|
||||
return txSummaryLabel(tx.value, t);
|
||||
});
|
||||
|
||||
const amountClass = computed(() => {
|
||||
if (!tx.value) return '';
|
||||
return parseFloat(tx.value.amount) >= 0 ? 'pos' : 'neg';
|
||||
@@ -87,8 +101,8 @@ const isCashbackTx = computed(
|
||||
);
|
||||
|
||||
const cashbackBatchNo = computed(() => {
|
||||
if (!isCashbackTx.value || !tx.value?.referenceId) return null;
|
||||
return tx.value.referenceId;
|
||||
if (!isCashbackTx.value) return null;
|
||||
return tx.value?.cashbackBatchNo ?? tx.value?.referenceId ?? null;
|
||||
});
|
||||
|
||||
const referenceLabel = computed(() => {
|
||||
@@ -132,7 +146,8 @@ function goCashbackDetail() {
|
||||
|
||||
<template v-else>
|
||||
<div class="hero" :class="amountClass">
|
||||
<span class="hero-type">{{ txLabel(tx.transactionType) }}</span>
|
||||
<span class="hero-type">{{ displayTypeLabel }}</span>
|
||||
<span v-if="summaryText" class="hero-summary">{{ summaryText }}</span>
|
||||
<span class="hero-amount">{{ formatMoney(tx.amount, locale) }}</span>
|
||||
<span class="hero-time">{{ formattedTime }}</span>
|
||||
</div>
|
||||
@@ -266,6 +281,14 @@ function goCashbackDetail() {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.hero-summary {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #bbb;
|
||||
max-width: 100%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hero-amount {
|
||||
font-size: 34px;
|
||||
font-weight: 900;
|
||||
|
||||
@@ -3,8 +3,8 @@ import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import { txTypeKey } from '../utils/walletTx';
|
||||
import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
|
||||
import { txTypeKey, txDisplayType, txSummaryLabel } from '../utils/walletTx';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import { usePullToRefresh } from '../composables/usePullToRefresh';
|
||||
|
||||
@@ -13,22 +13,31 @@ const { t, locale } = useI18n();
|
||||
|
||||
type Transaction = {
|
||||
transactionType: string;
|
||||
displayType?: string;
|
||||
summary?: string | null;
|
||||
summaryKind?: 'opening_bonus' | null;
|
||||
referenceType?: string | null;
|
||||
amount: string;
|
||||
createdAt: string;
|
||||
transactionId: string;
|
||||
};
|
||||
|
||||
const items = ref<Transaction[]>([]);
|
||||
const cashbackTotal = ref<string>('0');
|
||||
const loading = ref(true);
|
||||
const PREVIEW_COUNT = 15;
|
||||
|
||||
function txLabel(type: string): string {
|
||||
const key = txTypeKey(type);
|
||||
function txLabel(tx: Transaction): string {
|
||||
const key = txTypeKey(txDisplayType(tx));
|
||||
if (key) {
|
||||
const translated = t(key);
|
||||
if (translated !== key) return translated;
|
||||
}
|
||||
return type;
|
||||
return tx.transactionType;
|
||||
}
|
||||
|
||||
function txSubtitle(tx: Transaction): string {
|
||||
return txSummaryLabel(tx, t);
|
||||
}
|
||||
|
||||
function goDetail(tx: Transaction) {
|
||||
@@ -36,20 +45,21 @@ function goDetail(tx: Transaction) {
|
||||
router.push(`/wallet/transactions/${tx.transactionId}`);
|
||||
}
|
||||
|
||||
function goWalletDetail() {
|
||||
router.push('/wallet/detail');
|
||||
}
|
||||
|
||||
function goCashbacks() {
|
||||
router.push('/wallet/cashbacks');
|
||||
}
|
||||
|
||||
async function fetchTransactions() {
|
||||
async function fetchData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/wallet/transactions', { params: { page: 1 } });
|
||||
const result = data.data ?? { items: [] };
|
||||
const [txRes, cbRes] = await Promise.all([
|
||||
api.get('/player/wallet/transactions', { params: { page: 1 } }),
|
||||
api.get('/player/cashbacks').catch(() => ({ data: { data: { items: [], totalAmount: '0' } } })),
|
||||
]);
|
||||
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';
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
@@ -58,10 +68,10 @@ async function fetchTransactions() {
|
||||
}
|
||||
|
||||
const { pullDistance, spinning, progress } = usePullToRefresh({
|
||||
onRefresh: fetchTransactions,
|
||||
onRefresh: fetchData,
|
||||
});
|
||||
|
||||
onMounted(fetchTransactions);
|
||||
onMounted(fetchData);
|
||||
|
||||
const pullIndicatorStyle = () => ({
|
||||
height: `${pullDistance.value}px`,
|
||||
@@ -92,7 +102,7 @@ const pullIndicatorStyle = () => ({
|
||||
v-if="items.length"
|
||||
type="button"
|
||||
class="more-link"
|
||||
@click="goWalletDetail"
|
||||
@click="router.push('/wallet/detail')"
|
||||
>{{ t('wallet.view_all') }} ›</button>
|
||||
</div>
|
||||
|
||||
@@ -105,7 +115,10 @@ const pullIndicatorStyle = () => ({
|
||||
@click="goDetail(tx)"
|
||||
>
|
||||
<div class="tx-main">
|
||||
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
|
||||
<div class="tx-text">
|
||||
<span class="tx-type">{{ txLabel(tx) }}</span>
|
||||
<span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
|
||||
</div>
|
||||
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
|
||||
{{ formatMoney(tx.amount, locale) }}
|
||||
</span>
|
||||
@@ -184,6 +197,22 @@ const pullIndicatorStyle = () => ({
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tx-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tx-summary {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tx-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user