From a778aad7bc980db478bdcfa03c3fbf3274a4c587 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Mon, 9 Nov 2026 11:25:41 +0330
Subject: [PATCH] fix(withdraw): compact mobile receipt preview and deposit
 action buttons

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/WithdrawMobileDetailSheet.vue  | 117 +++++++++++++-----
 src/pages/menuPages/withdraw/index.vue        |  48 ++++++-
 2 files changed, 130 insertions(+), 35 deletions(-)

diff --git a/src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue b/src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue
index b28d560..e8af7f4 100644
--- a/src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue
+++ b/src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue
@@ -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>
diff --git a/src/pages/menuPages/withdraw/index.vue b/src/pages/menuPages/withdraw/index.vue
index c64314c..6a0b218 100644
--- a/src/pages/menuPages/withdraw/index.vue
+++ b/src/pages/menuPages/withdraw/index.vue
@@ -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>