feat(wallet): show withdraw history on mobile and desktop

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-11-01 19:30:06 +03:30
co-authored by Cursor
parent 24a98b5448
commit 5d3d7c4ed7
5 changed files with 64 additions and 3 deletions
@@ -25,6 +25,7 @@ import {
loadMoreWalletDeposits,
loadMoreWalletWithdrawals,
refreshWalletCards,
reloadWalletWithdrawals,
walletCardItems,
walletDepositItems,
walletWithdrawItems,
@@ -256,6 +257,7 @@ export function useWalletPage() {
extra_note: extraNote.value.trim() || undefined,
})
await walletStore.getMyWallet()
await reloadWalletWithdrawals()
await message.success('عملیات با موفقیت انجام شد')
withdrawInfModal.value = true
resetData()
@@ -284,6 +286,11 @@ export function useWalletPage() {
await loadSupportMessengerFromSettings(true)
})
watch(isDeposit, () => {
const el = activeDepositScrollEl.value
if (el) el.scrollTop = 0
})
if (!userStore.isSingle) {
useInfiniteScroll(
activeDepositScrollEl,
@@ -119,6 +119,16 @@ export async function loadMoreWalletDeposits() {
await fetchDepositPage(true)
}
export async function reloadWalletWithdrawals() {
walletWithdrawPagination.value.page = 0
try {
walletWithdrawTableOutput.value = await getTransactionTable(walletWithdrawPagination.value)
walletWithdrawItems.value = [...(walletWithdrawTableOutput.value?.rows ?? [])]
} catch (error) {
console.error('Wallet withdraw table error:', error)
}
}
export async function loadMoreWalletWithdrawals() {
if (
!walletWithdrawTableOutput.value
@@ -159,6 +159,25 @@
@add-account="showAddCard = true"
@card-deleted="getCards"
/>
<div class="dwallet-side__header dwallet-side__header--split">
<h3 class="dwallet-side__title">تاریخچه برداشت</h3>
</div>
<div
:ref="(node) => { desktopDepositScrollEl = (node as HTMLElement | null) }"
class="dwallet-side__scroll"
>
<list-anim v-if="!loading" :numberItemsAnim="4">
<Item v-for="item in withdrawItems" :key="item.id" :item="item" />
<TransactionSkeleton v-if="loadingMore" class="mt-1 mb-4" />
</list-anim>
<div v-else class="dwallet-side__skeletons">
<TransactionSkeleton v-for="i in 6" :key="i" class="mt-1" />
</div>
<p v-if="!loading && !withdrawItems.length" class="dwallet-side__empty">
تراکنش برداشتی ثبت نشده است.
</p>
</div>
</template>
</section>
</div>
@@ -187,6 +206,7 @@ const {
disableButton,
cardItems,
depositItems,
withdrawItems,
loading,
loadingMore,
desktopDepositScrollEl,
@@ -201,6 +201,12 @@
justify-content: space-between;
gap: 12px;
padding: 20px 24px 0;
&--split {
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
}
}
&__title {
@@ -117,20 +117,23 @@
class="wallet-withdraw-guide-panel relative z-10"
>
<BoursecuWithdrawGuide />
<p class="wallet-history-title">تاریخچه برداشت</p>
</div>
<div
v-if="isDeposit"
:ref="(node) => { mobileDepositScrollEl = (node as HTMLElement | null) }"
:class="loading ? 'h-screen' : ''"
class="px-3 overflow-y-scroll w-full h-[49vh] pb-16"
style="max-height: var(--mpage-scroll-max-height)"
>
<list-anim v-if="!loading" :numberItemsAnim="4">
<Item v-for="item in depositItems" :key="item.id" :item="item" />
<Item v-for="item in (isDeposit ? depositItems : withdrawItems)" :key="item.id" :item="item" />
<TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
</list-anim>
<TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
<p v-if="!loading && !(isDeposit ? depositItems : withdrawItems).length" class="wallet-history-empty">
{{ isDeposit ? 'تراکنش واریزی ثبت نشده است.' : 'تراکنش برداشتی ثبت نشده است.' }}
</p>
</div>
</div>
</div>
@@ -158,6 +161,7 @@ const {
disableButton,
cardItems,
depositItems,
withdrawItems,
loading,
loadingMore,
mobileDepositScrollEl,
@@ -180,7 +184,21 @@ const {
.wallet-withdraw-guide-panel {
margin-top: 1.25rem;
padding-bottom: 1rem;
padding-bottom: 0.25rem;
}
.wallet-history-title {
margin: 1rem 0 0;
font-size: 0.875rem;
font-weight: 700;
color: #111827;
}
.wallet-history-empty {
margin: 0.75rem 0 0;
text-align: center;
font-size: 0.75rem;
color: #9ca3af;
}
@media screen and (min-width: 426px) {