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

new UI and handle cashing

Browse Source
This commit is contained in:
mohmdsdg
2026-06-16 19:47:28 +03:30
parent e174ae28c5
commit 6e5ea0319f
41 changed files with 2936 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/home/components/AssetsSection.vue
+13 -2
View File
@@ -39,6 +39,17 @@
@click="$emit('openGoldModal', primaryMetalTotal)"
/>
</div>
<div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
دارایی ریالی:
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
<BasicIcon
icon="vuesax-linear:info-circle"
size="18"
:color="iconColor"
@click="$emit('openRialModal')"
/>
</div>
</template>
<template v-else-if="!boursecuLayout">
@@ -61,7 +72,7 @@
<div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
دارایی ریالی:
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
<div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
<BasicIcon
icon="vuesax-linear:info-circle"
size="18"
@@ -119,7 +130,7 @@ const primaryMetalTotal = computed(() => metalTotals.value[0])
const boursecuAssetRows = computed(() =>
props.boursecuLayout ? buildBoursecuHomeAssetRows(assetsSummary.value) : []
)
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
const countBasedInventory = computed(() =>
(assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
src/views/base/home/composables/useHomePage.ts
+20 -10
View File
@@ -1,6 +1,6 @@
import { computed, h, inject, onMounted, onUnmounted, provide, ref, type InjectionKey } from 'vue'
import { computed, h, inject, onUnmounted, provide, ref, type InjectionKey } from 'vue'
import router from '@/router'
import { loading, removeToken } from '@/utils'
import { getToken, removeToken } from '@/utils'
import { useUserStore } from '@/store/userStore'
import { useWalletStore } from '@/store/walletStore'
import { useWalletAssets } from '@/composables/useWalletAssets'
@@ -20,14 +20,14 @@ import { useBanners } from './useBanners'
import { usePriceChart, type ChartMetalType } from './usePriceChart'
import type { HomeActionItem } from '../layouts/types'
import { getHomeLayoutId } from '../layouts/registry'
import { initHomePageData, resetHomePageData } from './useHomePageData'
import { initHomePageData, resetHomePageData, useHomePageLoading } from './useHomePageData'
import { resetWalletPageData } from '../../wallet/composables/useWalletPageData'
import { resetAddressPageData } from '../../address/composables/useAddressPageData'
import { resetTransactionsPageData } from '../../transactions/composables/useTransactionsPageData'
import { resetProductsPageData } from '../../products/composables/useProductsPageData'
export interface HomePageContext {
loading: typeof loading
homePageLoading: ReturnType<typeof useHomePageLoading>['homePageLoading']
isGaroosi: ReturnType<typeof computed<boolean>>
limitedPrice: ReturnType<typeof computed>
showClosedMessage: ReturnType<typeof computed<boolean>>
@@ -65,6 +65,7 @@ export function useHomePage() {
const TextBanner = ref('')
const { banners } = useBanners()
const { homePageLoading } = useHomePageLoading()
const {
updateChartData,
priceChartSeries,
@@ -230,7 +231,7 @@ export function useHomePage() {
}
const context: HomePageContext = {
loading,
homePageLoading,
isGaroosi,
limitedPrice,
showClosedMessage,
@@ -250,15 +251,12 @@ export function useHomePage() {
provide(HOME_PAGE_CONTEXT_KEY, context)
void ensureHomeUserAndData()
onUnmounted(() => {
stopLastPricePolling()
})
onMounted(() => {
// Single shared fetch for mobile + desktop — safe to call on remount (deduped in useHomePageData)
void initHomePageData()
})
return {
userStore,
walletStore,
@@ -279,3 +277,15 @@ export function useHomePageContext() {
}
return context
}
async function ensureHomeUserAndData() {
const userStore = useUserStore()
if (getToken() && !userStore.userInfo) {
await userStore.getMyInfo()
}
if (getToken()) {
await initHomePageData()
}
}
src/views/base/home/composables/useHomePageData.ts
+8 -7
View File
@@ -1,5 +1,4 @@
import { ref } from 'vue'
import { loading } from '@/utils'
import { getLastPrices, startLastPricePolling, stopLastPricePolling } from '@/utils/price'
import { useWalletAssets } from '@/composables/useWalletAssets'
import { clearProductsCatalog } from '@/composables/useProductsCatalog'
@@ -8,13 +7,16 @@ import { fetchHomeChartPrices, loadHomeMaftolOffset, resetHomePriceChart } from
import { loadHomeBanners, resetHomeBanners } from './useBanners'
import { loadHomeFunds, resetHomeFunds } from './useUserFunds'
/**
* Single entry point for all homepage API calls.
* Mobile and desktop layouts must not fetch independently — they consume shared module state.
*/
/** فقط لودینگ صفحه اصلی — نه loading سراسری @/utils */
const homePageLoading = ref(false)
let initPromise: Promise<void> | null = null
const initialized = ref(false)
export function useHomePageLoading() {
return { homePageLoading }
}
export function isHomePageDataInitialized() {
return initialized.value
}
@@ -36,7 +38,6 @@ export async function initHomePageData(force = false) {
initPromise = (async () => {
try {
loading.value = true
const { loadWalletAssets } = useWalletAssets()
await Promise.all([
@@ -56,7 +57,6 @@ export async function initHomePageData(force = false) {
} catch (error) {
console.error('Home page initialization error:', error)
} finally {
loading.value = false
initPromise = null
}
})()
@@ -68,6 +68,7 @@ export async function initHomePageData(force = false) {
export function resetHomePageData() {
initialized.value = false
initPromise = null
homePageLoading.value = false
stopLastPricePolling()
resetHomeBanners()
resetHomeFunds()
src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
+2 -2
View File
@@ -19,7 +19,7 @@ const isBoursecuLayout = computed(() => ctx.isBoursecuHomeLayout.value)
const meta = computed(() => assetsSummary.value?.meta)
const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
const countBasedInventory = computed(() =>
(assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0),
)
@@ -90,7 +90,7 @@ const metrics = computed<MetricItem[]>(() => {
items.push({
id: 'rial',
label: 'دارایی ریالی',
value: `${usePriceWithoutType(totalRialValue.value)} ریال`,
value: `${usePriceWithoutType(cashWallet.value)} ریال`,
showInfo: true,
onInfo: 'rial',
})
src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue
+6 -4
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import { getToken } from '@/utils'
import { useHomePageContext } from '../../composables/useHomePage'
import HomeSkeleton from '../../components/HomeSkeleton.vue'
import DesktopHomeShell from '../components/DesktopHomeShell.vue'
@@ -18,10 +19,11 @@ defineEmits<{
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const ctx = useHomePageContext()
const showSkeleton = computed(() => loading.value || !userStore.userInfo)
const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
const showContent = computed(() => Boolean(userInfo.value))
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
</script>
<template>
@@ -31,7 +33,7 @@ const showContent = computed(() => !loading.value && Boolean(userStore.userInfo)
<HomeSkeleton v-if="showSkeleton" />
<template v-else-if="showContent">
<template v-if="showContent">
<section class="dhome-hero-row">
<DesktopLivePrice />
<DesktopPriceRange />
src/views/base/home/desktop/layouts/DefaultDesktopHome.vue
+6 -4
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import { getToken } from '@/utils'
import { useHomePageContext } from '../../composables/useHomePage'
import HomeSkeleton from '../../components/HomeSkeleton.vue'
import DesktopHomeShell from '../components/DesktopHomeShell.vue'
@@ -21,10 +22,11 @@ defineEmits<{
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const ctx = useHomePageContext()
const showSkeleton = computed(() => loading.value || !userStore.userInfo)
const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
const showContent = computed(() => Boolean(userInfo.value))
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
</script>
<template>
@@ -34,7 +36,7 @@ const showContent = computed(() => !loading.value && Boolean(userStore.userInfo)
<HomeSkeleton v-if="showSkeleton" />
<template v-else-if="showContent">
<template v-if="showContent">
<section class="dhome-hero-row">
<DesktopLivePrice />
<DesktopPriceRange />
src/views/base/home/layouts/HomeLayoutRenderer.vue
+9 -3
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import { getToken } from '@/utils'
import HomeSkeleton from '../components/HomeSkeleton.vue'
import { getHomeLayoutConfig } from './registry'
import { HOME_SECTION_COMPONENTS } from './sections'
@@ -12,6 +13,7 @@ const props = defineProps<{
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const layoutConfig = computed(() => props.layoutConfig ?? getHomeLayoutConfig())
const outerSections = computed(() =>
@@ -22,13 +24,17 @@ const innerSections = computed(() =>
layoutConfig.value.sections.filter((section) => section.visible !== false)
)
/** محتوا با userInfo — داده‌های API در پس‌زمینه لود می‌شوند */
const showContent = computed(() => Boolean(userInfo.value))
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
function resolveSectionComponent(sectionId: HomeSectionId) {
return HOME_SECTION_COMPONENTS[sectionId]
}
</script>
<template>
<div v-if="userStore.userInfo && !loading">
<div v-if="showContent">
<component
:is="resolveSectionComponent(section.id)"
v-for="section in outerSections"
@@ -52,5 +58,5 @@ function resolveSectionComponent(sectionId: HomeSectionId) {
</template>
</div>
<HomeSkeleton v-else class="w-full" />
<HomeSkeleton v-else-if="showSkeleton" class="w-full" />
</template>
src/views/base/home/layouts/registry.ts
+13 -9
View File
@@ -1,21 +1,25 @@
import type { Component } from 'vue'
import { defineAsyncComponent, type Component } from 'vue'
import { getConfigApp, isBoursecuProject } from '@/utils/config'
import type { HomeLayoutConfig, HomeLayoutId } from './types'
import { defaultHomeLayoutConfig } from './configs/default'
import { boursecuHomeLayoutConfig } from './configs/boursecu'
import HomeLayoutRenderer from './HomeLayoutRenderer.vue'
export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
const HOME_LAYOUT_CONFIGS: Record<HomeLayoutId, HomeLayoutConfig> = {
default: defaultHomeLayoutConfig,
boursecu: boursecuHomeLayoutConfig,
}
const HOME_LAYOUT_COMPONENTS: Record<HomeLayoutId, Component> = {
default: HomeLayoutRenderer,
boursecu: HomeLayoutRenderer,
}
let cachedLayoutRenderer: Component | null = null
export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
function getLayoutRenderer(): Component {
if (!cachedLayoutRenderer) {
cachedLayoutRenderer = defineAsyncComponent(() => import('./HomeLayoutRenderer.vue'))
}
return cachedLayoutRenderer
}
export function isHomeLayoutId(value: unknown): value is HomeLayoutId {
return typeof value === 'string' && value in HOME_LAYOUT_CONFIGS
@@ -38,8 +42,8 @@ export function getHomeLayoutConfig(layoutId = getHomeLayoutId()): HomeLayoutCon
return HOME_LAYOUT_CONFIGS[layoutId] ?? HOME_LAYOUT_CONFIGS[DEFAULT_HOME_LAYOUT_ID]
}
export function resolveHomeLayoutComponent(layoutId = getHomeLayoutId()): Component {
return HOME_LAYOUT_COMPONENTS[layoutId] ?? HOME_LAYOUT_COMPONENTS[DEFAULT_HOME_LAYOUT_ID]
export function resolveHomeLayoutComponent(_layoutId = getHomeLayoutId()): Component {
return getLayoutRenderer()
}
export function registerHomeLayoutConfig(layoutId: HomeLayoutId, config: HomeLayoutConfig) {
src/views/base/wallet/components/WalletDepositGuideModal.vue
+167
View File
@@ -0,0 +1,167 @@
<template>
<BasicModal
v-model:visible="localVisible"
custom-footer
:closable="false"
wrap-class-name="deposit-guide-modal-wrap"
width="min(92vw, 380px)"
>
<div class="deposit-guide">
<div class="deposit-guide__icon-wrap" aria-hidden="true">
<BasicIcon icon="vuesax-linear:empty-wallet-add" size="34" color="#16a34a" />
</div>
<h2 class="deposit-guide__title">{{ title }}</h2>
<div class="deposit-guide__body">
<slot />
</div>
<a
v-if="supportLink"
class="deposit-guide__support-link"
:href="supportLink"
target="_blank"
rel="noopener noreferrer"
>
<span class="deposit-guide__support-btn">
<BasicIcon icon="vuesax-linear:headphone" size="18" color="#16a34a" />
<span>پیام به پشتیبانی</span>
</span>
</a>
<a
v-if="smsLink"
class="deposit-guide__support-link"
:class="{ 'deposit-guide__support-link--spaced': supportLink }"
:href="smsLink"
>
<span class="deposit-guide__support-btn">
<BasicIcon icon="vuesax-linear:direct-inbox" size="18" color="#16a34a" />
<span>پیام به پشتیبانی (sms)</span>
</span>
</a>
</div>
<template #footer>
<BasicButton type="primary" class="deposit-guide__confirm w-full" @click="localVisible = false">
متوجه شدم
</BasicButton>
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
const props = withDefaults(
defineProps<{
visible: boolean
title?: string
supportLink?: string
smsLink?: string
}>(),
{
title: 'راهنمای شارژ حساب',
supportLink: '',
smsLink: '',
},
)
const emit = defineEmits<{
'update:visible': [value: boolean]
}>()
const localVisible = computed({
get: () => props.visible,
set: (value: boolean) => emit('update:visible', value),
})
</script>
<style scoped lang="less">
.deposit-guide {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.25rem 0.5rem 0.5rem;
}
.deposit-guide__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
border-radius: 9999px;
background: #ecfdf3;
margin-bottom: 1rem;
}
.deposit-guide__title {
margin: 0 0 0.75rem;
font-size: 1.05rem;
font-weight: 700;
color: #111827;
}
.deposit-guide__body {
width: 100%;
font-size: 0.92rem;
line-height: 1.9;
color: #4b5563;
}
.deposit-guide__support-link {
display: block;
width: 100%;
margin-top: 1.25rem;
text-decoration: none;
&--spaced {
margin-top: 0.65rem;
}
}
.deposit-guide__support-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 2.75rem;
padding: 0.65rem 1rem;
border: 1px solid #bbf7d0;
border-radius: 0.75rem;
background: #f0fdf4;
color: #15803d;
font-size: 0.92rem;
font-weight: 600;
}
.deposit-guide__confirm {
min-height: 2.75rem;
font-weight: 700;
}
</style>
<style lang="less">
.deposit-guide-modal-wrap {
.ant-modal-content {
border-radius: 1rem;
padding-top: 1rem;
}
.ant-modal-header {
display: none;
}
.ant-modal-footer {
border-top: none;
padding-top: 0;
}
}
</style>
src/views/base/wallet/composables/useWalletPage.ts
+10 -6
View File
@@ -51,7 +51,7 @@ export interface WalletPageContext {
mobileDepositScrollEl: Ref<HTMLElement | null>
desktopDepositScrollEl: Ref<HTMLElement | null>
supportMessengerText: ReturnType<typeof computed<string>>
supportMessengerLink: ReturnType<typeof computed<string | undefined>>
depositGuideSupportLink: ReturnType<typeof computed<string>>
depositSmsSupportLink: ReturnType<typeof computed<string>>
isBazretalaProject: typeof isBazretalaProject
usePriceWithoutType: typeof usePriceWithoutType
@@ -91,12 +91,16 @@ export function useWalletPage() {
() => supportMessengerSettings.value.messengerText || DEFAULT_SUPPORT_MESSENGER_TEXT,
)
const supportMessengerLink = computed(() =>
buildSupportMessengerUrl(
const depositGuideSupportLink = computed(() => {
if (config.config?.name === 'garoosi') {
return 'https://ble.ir/garoosigallery'
}
return buildSupportMessengerUrl(
supportMessengerSettings.value.messenger,
supportMessengerSettings.value.messengerId,
),
)
)
})
const depositSmsSupportLink = computed(() =>
buildDepositSmsUrl(supportMessengerSettings.value.depositSmsSupportNumber),
@@ -270,7 +274,7 @@ export function useWalletPage() {
mobileDepositScrollEl,
desktopDepositScrollEl,
supportMessengerText,
supportMessengerLink,
depositGuideSupportLink,
depositSmsSupportLink,
isBazretalaProject,
usePriceWithoutType,
src/views/base/wallet/index.vue
+34 -52
View File
@@ -69,58 +69,30 @@
<SkeletonLoading v-model:show="infoVisible" />
<BasicModal v-model:visible="chargeAccountModal" custom-footer :closable="false">
<div v-if="config.config.name === 'garoosi'" class="text-center">
<div class="font-bold text-red-600">مشتریان گرامی</div>
<div class="mt-2">
<span>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</span>
</div>
<div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
<div class="mt-4">(سیده زهرا موسوی)</div>
<div class="mt-1">شماره کارت:6037701900311389</div>
<div>شماره شبا: IR 080160000000001143804581</div>
<BasicButton class="mt-4">
<a class="w-full" href="https://ble.ir/garoosigallery">پیام به پشتیبانی</a>
</BasicButton>
</div>
<div v-else-if="isBazretalaProject()" class="text-center">
<div class="font-bold text-red-600">همراه گرامی</div>
<div class="mt-2">
<div>جهت شارژ حساب کاربری خود،</div>
<div>مبلغ موردنظر را به شماره کارت زیر واریز نموده</div>
<div>و به شماره پشتیبانی 09121784258 در برنامه ی بله اطلاع دهید.</div>
</div>
<div class="mt-4">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</div>
<div class="mt-1">شماره کارت: 6037998800496928</div>
<div>شماره شبا: IR 110170000000372468150002</div>
</div>
<div v-else class="text-center">
<div class="font-bold text-red-600">مشتریان گرامی</div>
<div class="mt-2">
<span>{{ supportMessengerText }}</span>
</div>
<BasicButton v-if="supportMessengerLink" class="mt-3">
<a
class="w-full"
:href="supportMessengerLink"
target="_blank"
rel="noopener noreferrer"
>
پیام به پشتیبانی
</a>
</BasicButton>
<BasicButton v-if="depositSmsSupportLink" class="mt-2">
<a class="w-full" :href="depositSmsSupportLink">
پیام به پشتیبانی (sms)
</a>
</BasicButton>
</div>
<template #footer>
<a-button type="primary" class="w-full" @click="chargeAccountModal = false">
متوجه شدم
</a-button>
<WalletDepositGuideModal
v-model:visible="chargeAccountModal"
:support-link="depositGuideSupportLink"
:sms-link="depositSmsSupportLink"
>
<template v-if="config.config.name === 'garoosi'">
<p>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</p>
<p class="deposit-guide-note deposit-guide-note--warn">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</p>
<p class="deposit-guide-note">(سیده زهرا موسوی)</p>
<p class="deposit-guide-note">شماره کارت: 6037701900311389</p>
<p class="deposit-guide-note">شماره شبا: IR 080160000000001143804581</p>
</template>
</BasicModal>
<template v-else-if="isBazretalaProject()">
<p>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و به شماره پشتیبانی 09121784258 در برنامه بله اطلاع دهید.</p>
<p class="deposit-guide-note">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</p>
<p class="deposit-guide-note">شماره کارت: 6037998800496928</p>
<p class="deposit-guide-note">شماره شبا: IR 110170000000372468150002</p>
</template>
<template v-else>
<p>{{ supportMessengerText }}</p>
</template>
</WalletDepositGuideModal>
<BasicModal v-model:visible="withdrawInfModal" custom-footer :closable="false">
<div class="text-center">
@@ -152,6 +124,7 @@ import DesktopWalletView from './desktop/DesktopWalletView.vue'
import MobileWalletView from './mobile/MobileWalletView.vue'
import SkeletonLoading from './components/SkeletonLoading.vue'
import WalletAddCardForm from './components/WalletAddCardForm.vue'
import WalletDepositGuideModal from './components/WalletDepositGuideModal.vue'
const isDesktop = useDesktopBreakpoint()
@@ -164,7 +137,7 @@ const {
infoVisible,
refOtpInput,
supportMessengerText,
supportMessengerLink,
depositGuideSupportLink,
depositSmsSupportLink,
isBazretalaProject,
handleOnComplete,
@@ -178,4 +151,13 @@ const {
min-height: 100%;
height: 100%;
}
.deposit-guide-note {
margin: 0.35rem 0 0;
}
.deposit-guide-note--warn {
color: #dc2626;
font-weight: 600;
}
</style>