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

support ui changed

Browse Source
This commit is contained in:
mohmdsdg
2026-06-13 22:19:01 +03:30
parent 246e666049
commit 956890cc3b
2 changed files with 241 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+74 -12
View File
@@ -90,16 +90,15 @@
class="draggable-support-button"
:class="{ 'is-dragging': supportDragging }"
:style="supportButtonStyle"
title="پشتیبانی"
@pointerdown="onSupportPointerDown"
@pointermove="onSupportPointerMove"
@pointerup="handleSupportPointerUp"
@pointercancel="onSupportPointerCancel"
>
<div class="bg-green-100 text-green-800 flex gap-2 p-2 rounded-lg">
<span>پشتیبانی</span>
<div class="w-5">
<img src="/logo-montzar.png" alt="" draggable="false" />
</div>
<div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
<BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
<span class="support-button-label">پشتیبانی</span>
</div>
</div>
</div>
@@ -168,6 +167,40 @@ const supportLink = computed(() => {
const showSupportButton = computed(() => !!supportLink.value)
const supportIcon = computed(() => {
const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
switch (messenger) {
case 'whatsapp':
return 'vuesax-linear:whatsapp'
case 'telegram':
return 'vuesax-linear:send-2'
case 'bale':
return 'vuesax-linear:messages-2'
default:
return 'vuesax-linear:messages-2'
}
})
const supportAccentColor = computed(() => {
const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
switch (messenger) {
case 'whatsapp':
return '#22c55e'
case 'telegram':
return '#0ea5e9'
case 'bale':
return '#16a34a'
case 'rubika':
return '#7c3aed'
case 'eitaa':
return '#f59e0b'
case 'soroush':
return '#2563eb'
default:
return config.config?.color || '#334155'
}
})
const {
dragging: supportDragging,
fabStyle: supportButtonStyle,
@@ -176,8 +209,8 @@ const {
handlePointerUp: supportPointerUp,
handlePointerCancel: onSupportPointerCancel
} = useDraggableFloatingButton('khaneghi_support_button_position', {
width: 110,
height: 44,
width: 118,
height: 42,
defaultBottomOffset: 120
})
@@ -292,19 +325,48 @@ function update() {
z-index: 9999;
cursor: grab;
user-select: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 0.5rem;
border-radius: 9999px;
&.is-dragging {
cursor: grabbing;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
}
.support-button-inner {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px 9px 12px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 9999px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
color: #1e293b;
font-size: 13px;
font-weight: 600;
line-height: 1;
direction: rtl;
transition: box-shadow 0.2s ease, transform 0.2s ease;
.support-button-icon {
color: var(--support-accent, #334155);
flex-shrink: 0;
}
img {
pointer-events: none;
.support-button-label {
white-space: nowrap;
}
}
#support-button:not(.is-dragging):hover .support-button-inner {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
#support-button.is-dragging .support-button-inner {
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
}
@media screen and (min-width: 426px) {
.desktopConfig {
width: 426px;
src/views/base/wallet/index.vue
+167 -39
View File
@@ -295,75 +295,95 @@
v-model:visible="chargeAccountModal"
custom-footer
:closable="false"
wrap-class-name="wallet-info-modal"
>
<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 class="wallet-info-modal__body">
<div class="wallet-info-modal__icon">
<BasicIcon icon="vuesax-linear:wallet-add" size="26" />
</div>
<div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
<div class="mt-4">(سیده زهرا موسوی)</div>
<div class="mt-1">شماره کارت:6037701900311389</div>
<!-- <div>شماره حساب: 0233273609006</div>-->
<div>شماره شبا: IR 080160000000001143804581</div>
<BasicButton class="mt-4">
<a class="w-full" href="https://ble.ir/garoosigallery">
<div v-if="config.config.name === 'garoosi'" class="wallet-info-modal__content">
<h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
<p class="wallet-info-modal__text">
جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.
</p>
<p class="wallet-info-modal__warn">
در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمی‌شود.
</p>
<div class="wallet-info-modal__card-box">
<div>(سیده زهرا موسوی)</div>
<div>شماره کارت: 6037701900311389</div>
<div>شماره شبا: IR 080160000000001143804581</div>
</div>
<a
class="wallet-info-modal__action wallet-info-modal__action--outline"
href="https://ble.ir/garoosigallery"
target="_blank"
rel="noopener noreferrer"
>
<BasicIcon icon="vuesax-linear:headphone" size="18" />
پیام به پشتیبانی
</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">
<div v-else-if="isBazretalaProject()" class="wallet-info-modal__content">
<h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
<p class="wallet-info-modal__text">
جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و به شماره پشتیبانی
<strong>09121784258</strong>
در برنامه بله اطلاع دهید.
</p>
<div class="wallet-info-modal__card-box">
<div>(گنجینه طلای حاجی ابوالفتح - بانک ملی)</div>
<div>شماره کارت: 6037998800496928</div>
<div>شماره شبا: IR 110170000000372468150002</div>
</div>
</div>
<div v-else class="wallet-info-modal__content">
<h3 class="wallet-info-modal__title">راهنمای شارژ حساب</h3>
<p class="wallet-info-modal__text">{{ supportMessengerText }}</p>
<a
class="w-full"
v-if="supportMessengerLink"
class="wallet-info-modal__action wallet-info-modal__action--outline"
:href="supportMessengerLink"
target="_blank"
rel="noopener noreferrer"
>
<BasicIcon icon="vuesax-linear:headphone" size="18" />
پیام به پشتیبانی
</a>
</BasicButton>
</div>
</div>
<template #footer>
<a-button type="primary" class="w-full" @click="chargeAccountModal = false">
<BasicButton type="primary" class="w-full wallet-info-modal__ok" @click="chargeAccountModal = false">
متوجه شدم
</a-button>
</BasicButton>
</template>
</BasicModal>
<BasicModal
v-model:visible="withdrawInfModal"
custom-footer
:closable="false"
wrap-class-name="wallet-info-modal"
>
<div class="text-center">
<div class=" font-bold text-red-600">مشتری گرامی</div>
<div class="mt-2">
<div>واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام می‌پذیرد.</div>
<div class="wallet-info-modal__body">
<div class="wallet-info-modal__icon wallet-info-modal__icon--info">
<BasicIcon icon="vuesax-linear:info-circle" size="26" />
</div>
<div class="wallet-info-modal__content">
<h3 class="wallet-info-modal__title">زمان واریز برداشت</h3>
<p class="wallet-info-modal__text">
واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام می‌پذیرد.
</p>
</div>
</div>
<template #footer>
<a-button type="primary" class="w-full" @click="withdrawInfModal = false">
<BasicButton type="primary" class="w-full wallet-info-modal__ok" @click="withdrawInfModal = false">
متوجه شدم
</a-button>
</BasicButton>
</template>
</BasicModal>
</div>
@@ -766,4 +786,112 @@ async function handleOnComplete(value: string) {
margin: 0 auto;
}
}
.wallet-info-modal__body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4px 8px 8px;
}
.wallet-info-modal__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 9999px;
background: #ecfdf5;
color: #059669;
margin-bottom: 14px;
}
.wallet-info-modal__icon--info {
background: #eff6ff;
color: #2563eb;
}
.wallet-info-modal__title {
margin: 0 0 10px;
font-size: 17px;
font-weight: 700;
color: #0f172a;
line-height: 1.5;
}
.wallet-info-modal__text {
margin: 0;
font-size: 14px;
line-height: 1.85;
color: #475569;
}
.wallet-info-modal__warn {
margin: 12px 0 0;
padding: 10px 12px;
border-radius: 10px;
background: #fef2f2;
color: #b91c1c;
font-size: 13px;
line-height: 1.7;
}
.wallet-info-modal__card-box {
margin-top: 14px;
width: 100%;
padding: 12px 14px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #334155;
font-size: 13px;
line-height: 1.8;
text-align: right;
direction: rtl;
}
.wallet-info-modal__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 16px;
padding: 11px 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wallet-info-modal__action--outline {
color: #0f766e;
background: #f0fdfa;
border: 1px solid #99f6e4;
}
.wallet-info-modal__action--outline:hover {
background: #ccfbf1;
border-color: #5eead4;
}
.wallet-info-modal__ok {
height: 44px !important;
border-radius: 12px !important;
font-weight: 600;
}
</style>
<style>
.wallet-info-modal .ant-modal-content {
border-radius: 18px;
overflow: hidden;
}
.wallet-info-modal .ant-modal-footer {
border-top: none;
padding: 0 20px 20px;
}
</style>