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

fixed card display &...

Browse Source
This commit is contained in:
safavimohadeseh78
2026-07-01 12:22:43 +02:00
parent bbec5b802d
commit e8c394d71a
7 changed files with 256 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/bankBranding.ts
+6 -1
View File
@@ -56,6 +56,11 @@ export function getBankMonogram(bankName?: string): string {
return 'بانک'
}
const normalized = bankName.replace(/^بانک\s+/u, '').trim()
const trimmed = bankName.trim()
if (/^[A-Za-z]/u.test(trimmed)) {
return trimmed.replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase() || 'BN'
}
const normalized = trimmed.replace(/^بانک\s+/u, '').trim()
return normalized.slice(0, 2) || 'بانک'
}
src/utils/productAssets.ts
+3 -3
View File
@@ -524,14 +524,14 @@ export function enrichInventoryCardsWithCatalog<T extends { product_id?: number;
cards: T[],
catalog: Product[]
): T[] {
return cards.map((card) => {
return cards.map((card) => {
const fromCatalog = catalog.find((product) => product.id === card.product_id)
if (!fromCatalog) {
return card
}
return {
...card,
return {
...card,
file: card.file ?? fromCatalog.file ?? null,
}
})
src/views/base/transactions/components/TransactionDetailPanel.vue
+45 -6
View File
@@ -13,8 +13,16 @@
ریال
</div>
</div>
<div v-if="item.order" :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
<div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
<div
v-if="item.order"
:class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between items-start mb-3'"
>
<div
:class="[
variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary',
'tx-detail-wrap-label',
]"
>
{{ getTransactionTradePriceLabel(tradeProduct) }} حین معامله:
</div>
<div :class="['flex text-xs items-center number-ltr', variant === 'desktop' ? 'dtxn-detail__value' : '']">
@@ -22,8 +30,13 @@
ریال
</div>
</div>
<div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
<div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
<div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between items-start mb-3'">
<div
:class="[
variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary',
'tx-detail-wrap-label',
]"
>
مقدار {{ tradeProductLabel }} مبادله شده:
</div>
<div
@@ -33,8 +46,13 @@
variant === 'desktop' ? 'dtxn-detail__value' : '',
]"
>
<div class="flex items-center">
<div class="text-base ml-1">{{ formatGoldAmount(item.gold) }}</div>
<div class="flex items-center gap-1">
<img
:src="tradeProductImage"
:alt="tradeProductLabel"
class="tx-detail-product-thumb"
/>
<div class="text-base">{{ formatGoldAmount(item.gold) }}</div>
{{ item.unit }}
</div>
<div
@@ -115,6 +133,7 @@ import {
resolveTransactionTradeProduct,
shouldShowTransactionTotalWeightLine,
} from '@/utils/productDealMethod'
import { getProductDisplayImage } from '@/utils/productAssets'
import { toJalaliNotime, toTime } from '@/utils/useDateTime'
const props = withDefaults(
@@ -129,6 +148,9 @@ const tradeProduct = computed(() => resolveTransactionTradeProduct(props.item))
const tradeProductLabel = computed(
() => (tradeProduct.value?.title ?? '').trim() || getMeltedGoldTradeLabel(),
)
const tradeProductImage = computed(() =>
getProductDisplayImage(props.item.product ?? tradeProduct.value ?? props.item.wallet?.product ?? null),
)
const metalWalletProduct = computed(() => {
if (props.item.order && tradeProduct.value?.title) {
return tradeProduct.value
@@ -145,3 +167,20 @@ const showMetalWalletBalance = computed(
|| Math.abs(Number(props.item.balance_gold) || 0) > 0,
)
</script>
<style scoped lang="less">
.tx-detail-wrap-label {
flex: 1 1 42%;
min-width: 0;
max-width: 9.5rem;
line-height: 1.45;
}
.tx-detail-product-thumb {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.25rem;
object-fit: contain;
flex-shrink: 0;
}
</style>
src/views/base/wallet/components/BoursecuBankAccountPicker.vue
+168 -53
View File
@@ -1,56 +1,90 @@
<template>
<div ref="rootRef" class="boursecu-bank-picker">
<div class="boursecu-bank-picker__header">
<span class="boursecu-bank-picker__heading">واریز به</span>
<button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
+ افزودن شبا
</button>
</div>
<div ref="rootRef" class="boursecu-bank-picker" :class="`boursecu-bank-picker--${variant}`">
<template v-if="variant === 'mobile'">
<div class="boursecu-bank-picker__header">
<span class="boursecu-bank-picker__heading">واریز به</span>
<button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
+ افزودن شبا
</button>
</div>
<button
type="button"
class="boursecu-bank-picker__trigger"
:disabled="!items.length"
@click="toggleOpen"
>
<template v-if="selectedCard">
<BoursecuBankAccountOption :card="selectedCard" compact />
<BasicIcon
icon="vuesax-linear:arrow-down"
size="18"
class="boursecu-bank-picker__chevron"
:class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
/>
</template>
<span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
</button>
<div v-if="isOpen && items.length" class="boursecu-bank-picker__dropdown">
<button
v-for="card in items"
:key="card.id"
type="button"
class="boursecu-bank-picker__option"
:class="{ 'boursecu-bank-picker__option--active': card.id === selectedId }"
@click="selectCard(card.id)"
class="boursecu-bank-picker__trigger"
:disabled="!items.length"
@click="toggleOpen"
>
<BoursecuBankAccountOption :card="card" />
<template v-if="selectedCard">
<BoursecuBankAccountOption :card="selectedCard" compact />
<BasicIcon
icon="vuesax-linear:arrow-down"
size="18"
class="boursecu-bank-picker__chevron"
:class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
/>
</template>
<span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
</button>
</div>
<Teleport to="body">
<div v-if="isOpen && items.length" class="boursecu-bank-picker__overlay" @click="close">
<div class="boursecu-bank-picker__sheet" @click.stop>
<button
v-for="card in items"
:key="card.id"
type="button"
class="boursecu-bank-picker__sheet-item"
:class="{ 'boursecu-bank-picker__sheet-item--active': card.id === selectedId }"
@click="selectCard(card.id)"
>
<BoursecuBankAccountOption :card="card" />
</button>
</div>
</div>
</Teleport>
</template>
<template v-else>
<div v-if="!items.length" class="boursecu-bank-picker__empty boursecu-bank-picker__empty--desktop">
حساب بانکی ثبت نشده است
</div>
<div v-else class="boursecu-bank-picker__list">
<button
v-for="card in items"
:key="card.id"
type="button"
class="boursecu-bank-picker__list-item"
:class="{ 'boursecu-bank-picker__list-item--active': card.id === selectedId }"
@click="selectCard(card.id)"
>
<BoursecuBankAccountOption :card="card" />
<BasicIcon
v-if="card.id === selectedId"
icon="vuesax-linear:arrow-up-2"
size="18"
class="boursecu-bank-picker__list-chevron"
/>
</button>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, ref, watch } from 'vue'
import { onClickOutside } from '@vueuse/core'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import type { Card } from '@/models/wallet'
import BoursecuBankAccountOption from './BoursecuBankAccountOption.vue'
const props = defineProps<{
items: Card[]
id?: number | string
}>()
const props = withDefaults(
defineProps<{
items: Card[]
id?: number | string
variant?: 'mobile' | 'desktop'
}>(),
{ variant: 'mobile' },
)
const emit = defineEmits<{
'update:id': [value: number | string | undefined]
@@ -69,6 +103,20 @@ const selectedCard = computed(() =>
props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
)
watch(
() => props.items,
(items) => {
if (!items.length) {
selectedId.value = undefined
return
}
if (!items.some((item) => item.id === selectedId.value)) {
selectedId.value = items[0]?.id
}
},
{ immediate: true },
)
function toggleOpen() {
if (!props.items.length) {
return
@@ -76,13 +124,22 @@ function toggleOpen() {
isOpen.value = !isOpen.value
}
function close() {
isOpen.value = false
}
function selectCard(cardId?: number) {
selectedId.value = cardId
isOpen.value = false
}
onClickOutside(rootRef, () => {
isOpen.value = false
if (props.variant === 'mobile') {
onClickOutside(rootRef, close)
}
watch(isOpen, (open) => {
if (typeof document === 'undefined') return
document.body.style.overflow = open ? 'hidden' : ''
})
</script>
@@ -153,24 +210,38 @@ onClickOutside(rootRef, () => {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
&--desktop {
padding: 24px 0;
}
}
.boursecu-bank-picker__dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
z-index: 30;
.boursecu-bank-picker__overlay {
position: fixed;
inset: 0;
z-index: 5200;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(15, 23, 42, 0.28);
backdrop-filter: blur(2px);
}
.boursecu-bank-picker__sheet {
width: min(100%, 22rem);
max-height: min(70vh, 28rem);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
gap: 6px;
padding: 10px;
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}
.boursecu-bank-picker__option {
.boursecu-bank-picker__sheet-item {
appearance: none;
width: 100%;
border: none;
@@ -180,10 +251,54 @@ onClickOutside(rootRef, () => {
cursor: pointer;
text-align: right;
transition: background-color 0.15s ease;
&--active,
&:hover {
background: #eceff1;
}
}
.boursecu-bank-picker__option--active,
.boursecu-bank-picker__option:hover {
background: #eceff1;
.boursecu-bank-picker--desktop {
gap: 0;
flex: 1;
min-height: 0;
}
.boursecu-bank-picker__list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 24px 24px;
overflow-y: auto;
flex: 1;
}
.boursecu-bank-picker__list-item {
appearance: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: none;
border-radius: 12px;
background: transparent;
padding: 10px 12px;
cursor: pointer;
text-align: right;
transition: background-color 0.15s ease;
&--active {
background: #eceff1;
}
&:hover:not(&--active) {
background: #f8fafc;
}
}
.boursecu-bank-picker__list-chevron {
flex-shrink: 0;
color: #6b7280;
}
</style>
src/views/base/wallet/desktop/DesktopWalletView.vue
+12 -1
View File
@@ -131,7 +131,15 @@
<div class="dwallet-side__header">
<h3 class="dwallet-side__title">{{ isBoursecu ? 'حساب‌های بانکی' : 'کارت‌های بانکی' }}</h3>
<button
v-if="!isBoursecu"
v-if="isBoursecu"
type="button"
class="dwallet-side__add-link"
@click="showAddCard = true"
>
+ افزودن شبا
</button>
<button
v-else
type="button"
class="dwallet-side__add-btn"
@click="showAddCard = true"
@@ -141,6 +149,8 @@
</button>
</div>
<p v-if="isBoursecu && cardItems.length > 0" class="dwallet-side__subtitle">واریز به</p>
<div v-if="!loading && cardItems.length === 0" class="dwallet-side__empty dwallet-side__empty--cards">
<BasicIcon icon="vuesax-linear:card" size="32" />
<p>هیچ کارتی یافت نشد</p>
@@ -152,6 +162,7 @@
<BoursecuBankAccountPicker
v-else-if="isBoursecu"
v-model:id="form.card_id"
variant="desktop"
:items="cardItems"
@add-account="showAddCard = true"
/>
src/views/base/wallet/desktop/styles/desktop-wallet.less
+21
View File
@@ -210,6 +210,27 @@
margin: 0;
}
&__subtitle {
margin: 0;
padding: 0 24px 8px;
font-size: 13px;
font-weight: 600;
color: #6b7280;
text-align: right;
}
&__add-link {
appearance: none;
border: none;
background: transparent;
padding: 0;
font-size: 14px;
font-weight: 700;
color: #2563eb;
cursor: pointer;
font-family: inherit;
}
&__scroll {
flex: 1;
overflow-y: auto;
src/views/base/wallet/mobile/MobileWalletView.vue
+1
View File
@@ -32,6 +32,7 @@
<BoursecuBankAccountPicker
v-if="!isDeposit && isBoursecu"
v-model:id="form.card_id"
variant="mobile"
:items="cardItems"
class="mb-4"
@add-account="showAddCard = true"