boursecu/boursecu_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(withdraw): compact mobile receipt preview and deposit action buttons

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
safavimohadeseh78
2026-11-09 11:25:41 +03:30
co-authored by Cursor
parent e0e2b6daa5
commit a778aad7bc
2 changed files with 130 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue
+87 -30
View File
@@ -6,7 +6,7 @@
<div class="flex w-full items-center justify-between gap-3">
<span class="min-w-0 truncate">{{ sheetTitle }}</span>
<div class="flex shrink-0 items-center gap-2">
<template v-if="isPendingDepositRequest(row)">
<template v-if="isPendingDepositRequest(row) && !isMobile">
<MobileIconButton
plain
icon="vuesax-linear:tick-circle"
@@ -131,38 +131,40 @@
full-width
:value="row.reject_reason"
/>
<div v-if="row.receipt_url" class="col-span-2 py-2">
<div class="text-xs text-gray-500 mb-1">فیش واریزی:</div>
<a-image
:src="row.receipt_url"
:height="120"
class="rounded-lg object-contain border max-w-full"
alt="فیش واریزی"
/>
<div v-if="row.receipt_url" class="col-span-2 py-1 min-w-0">
<div class="text-xs text-gray-500 mb-1.5">فیش واریزی (برای بزرگنمایی لمس کنید)</div>
<div class="withdraw-mobile-receipt">
<a-image
:src="row.receipt_url"
class="withdraw-mobile-receipt__img"
alt="فیش واریزی"
/>
</div>
</div>
</MobileInfoGrid>
<div v-if="isPendingDepositRequest(row)" class="mt-4 flex gap-2">
<BaseButton
type="primary"
class="flex-1 !bg-emerald-600 hover:!bg-emerald-700 !border-emerald-600 text-white"
@click="$emit('approveDeposit', row)"
>
<template #icon>
<BaseIcon icon="vuesax-linear:tick-circle" size="16" />
</template>
تایید واریز
</BaseButton>
<BaseButton
danger
class="flex-1"
@click="$emit('rejectDeposit', row)"
>
<template #icon>
<BaseIcon icon="vuesax-linear:close-circle" size="16" />
</template>
رد واریز
</BaseButton>
<div
v-if="isPendingDepositRequest(row)"
class="withdraw-mobile-actions"
>
<div class="withdraw-mobile-actions__grid">
<BaseButton
type="primary"
class="!bg-emerald-600 hover:!bg-emerald-700 !border-emerald-600 text-white"
@click="$emit('approveDeposit', row)"
>
<template #icon>
<BaseIcon icon="vuesax-linear:tick-circle" size="16" />
</template>
تایید واریز
</BaseButton>
<BaseButton danger @click="$emit('rejectDeposit', row)">
<template #icon>
<BaseIcon icon="vuesax-linear:close-circle" size="16" />
</template>
رد واریز
</BaseButton>
</div>
</div>
</template>
</MobileDetailSheet>
@@ -270,3 +272,58 @@ function amountIconColor(row: Withdraw) {
return '#b45309'
}
</script>
<style scoped>
.withdraw-mobile-receipt {
width: 100%;
max-width: 100%;
padding: 0.5rem;
border-radius: 0.5rem;
border: 1px solid var(--admin-border, #e5e7eb);
background: var(--admin-bg-muted, #f9fafb);
display: flex;
justify-content: center;
align-items: center;
}
.withdraw-mobile-receipt :deep(.ant-image) {
width: 100%;
max-width: 100%;
display: flex;
justify-content: center;
}
.withdraw-mobile-receipt :deep(.ant-image-img) {
width: auto !important;
max-width: 100% !important;
max-height: 9rem !important;
height: auto !important;
object-fit: contain;
}
.withdraw-mobile-actions {
position: sticky;
bottom: 0;
z-index: 2;
margin-top: 0.75rem;
padding-top: 0.75rem;
padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
background: var(--admin-bg-elevated, #fff);
border-top: 1px solid var(--admin-border, #e5e7eb);
}
.withdraw-mobile-actions__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
width: 100%;
}
.withdraw-mobile-actions__grid :deep(.ant-btn) {
min-height: 2.5rem;
width: 100%;
padding-inline: 0.5rem;
font-size: 0.8125rem;
line-height: 1.25rem;
}
</style>
src/pages/menuPages/withdraw/index.vue
+43 -5
View File
@@ -100,7 +100,7 @@
v-model:visible="approveDepositModalVisible"
width="28rem"
title="تایید واریز وجه به کیف پول"
wrap-class-name="withdraw-stack-modal"
wrap-class-name="withdraw-stack-modal withdraw-deposit-modal"
:loading="depositActionLoading"
@ok="handleApproveDeposit"
@close="approveDepositModalVisible = false"
@@ -117,12 +117,11 @@
</div>
</div>
<div v-if="selectedDepositRecord.receipt_url" class="rounded border p-2 text-center bg-gray-50">
<div v-if="selectedDepositRecord.receipt_url" class="withdraw-receipt-preview rounded border p-2 text-center bg-gray-50">
<div class="text-xs text-gray-500 mb-2">تصویر فیش واریزی (جهت بزرگنمایی روی عکس کلیک کنید):</div>
<a-image
:src="selectedDepositRecord.receipt_url"
:height="150"
class="rounded object-contain mx-auto max-w-full"
class="withdraw-receipt-preview__img"
alt="فیش واریز"
/>
</div>
@@ -152,7 +151,7 @@
v-model:visible="rejectDepositModalVisible"
width="26rem"
title="رد درخواست واریز"
wrap-class-name="withdraw-stack-modal"
wrap-class-name="withdraw-stack-modal withdraw-deposit-modal"
:loading="depositActionLoading"
@ok="handleRejectDeposit"
@close="rejectDepositModalVisible = false"
@@ -529,4 +528,43 @@ async function handleRejectDeposit() {
.withdraw-stack-modal {
z-index: 1100 !important;
}
.withdraw-receipt-preview :deep(.ant-image) {
width: 100%;
display: flex;
justify-content: center;
}
.withdraw-receipt-preview :deep(.ant-image-img) {
width: auto !important;
max-width: 100% !important;
max-height: 9.5rem !important;
height: auto !important;
object-fit: contain;
margin-inline: auto;
}
@media (max-width: 767.98px) {
.withdraw-deposit-modal .ant-modal {
max-width: calc(100vw - 1rem) !important;
margin: 0.5rem auto !important;
padding-bottom: 0;
}
.withdraw-deposit-modal .ant-modal-body #body {
max-height: min(70vh, 520px);
}
.withdraw-deposit-modal .ant-modal-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
}
.withdraw-deposit-modal .ant-modal-footer .ant-btn {
margin: 0 !important;
width: 100%;
}
}
</style>