support ui changed

This commit is contained in:
2026-06-13 22:19:01 +03:30
parent 246e666049
commit 956890cc3b
2 changed files with 241 additions and 51 deletions
+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>