feat: add deposit identifier, tip note, and receipt upload in deposit guide modal
This commit is contained in:
@@ -16,6 +16,10 @@ export const deposit = async (obj: Transaction): Promise<any> => {
|
||||
return await useAxios.post<Transaction>(`/customer/charge_account`, obj)
|
||||
}
|
||||
|
||||
export const submitDepositRequest = async (formData: FormData): Promise<any> => {
|
||||
return await useAxios.postForm(`/customer/wallet/deposit_request`, formData)
|
||||
}
|
||||
|
||||
export const createCard = async (obj: Card): Promise<any> => {
|
||||
return await useAxios.post<Transaction>(`/customer/account`, obj)
|
||||
}
|
||||
|
||||
@@ -18,10 +18,10 @@ export const DEFAULT_DEPOSIT_SUPPORT_MESSAGE_TEXT =
|
||||
'باسلام، %نام هستم. کدپیگیری و مبلغ واریزی من:'
|
||||
|
||||
/** الگوی متغیر نام — ٪نام / %نام / % نام / %نام% */
|
||||
const NAME_PLACEHOLDER_RE = /[%٪]\s*نام(?:\s*[%٪])?/gu
|
||||
const CARD_PLACEHOLDER_RE = /[%٪]\s*کارت(?:\s*[%٪])?/gu
|
||||
const ACCOUNT_PLACEHOLDER_RE = /[%٪]\s*حساب(?:\s*[%٪])?/gu
|
||||
const SHEBA_PLACEHOLDER_RE = /[%٪]\s*شبا(?:\s*[%٪])?/gu
|
||||
const NAME_PLACEHOLDER_RE = /[%٪]\s*نام[%٪]?/gu
|
||||
const CARD_PLACEHOLDER_RE = /[%٪]\s*کارت[%٪]?/gu
|
||||
const ACCOUNT_PLACEHOLDER_RE = /[%٪]\s*حساب[%٪]?/gu
|
||||
const SHEBA_PLACEHOLDER_RE = /[%٪]\s*شبا[%٪]?/gu
|
||||
|
||||
export function getCustomerNameFromUser(): string {
|
||||
try {
|
||||
@@ -47,21 +47,72 @@ export function renderDepositSupportMessageText(
|
||||
return template.replace(NAME_PLACEHOLDER_RE, name)
|
||||
}
|
||||
|
||||
/** جایگزینی متغیرها در متن راهنمای واریز — ٪نام / %نام، ٪کارت / %کارت، ٪حساب / %حساب، ٪شبا / %شبا */
|
||||
/**
|
||||
* حذف شماره‌های حساب، شبا و کارت و همچنین ارقام زائد از متن راهنما؛
|
||||
* این اطلاعات در ردیف‌های اختصاصی مودال با دکمه کپی نمایش داده می‌شوند.
|
||||
*/
|
||||
function stripDepositGuideNumbers(text: string, vars?: DepositGuideVars): string {
|
||||
let cleaned = text
|
||||
|
||||
if (vars) {
|
||||
const rawValues = [
|
||||
vars.sheba,
|
||||
vars.sheba ? vars.sheba.replace(/^IR/i, '').trim() : '',
|
||||
vars.sheba ? vars.sheba.replace(/^IR/i, '').replace(/\s+/g, '') : '',
|
||||
vars.sheba ? formatDepositSheba(vars.sheba) : '',
|
||||
vars.cardNumber,
|
||||
vars.cardNumber ? vars.cardNumber.replace(/\s+/g, '') : '',
|
||||
vars.cardNumber ? formatDepositCardNumber(vars.cardNumber) : '',
|
||||
vars.accountNumber,
|
||||
vars.accountNumber ? vars.accountNumber.replace(/\s+/g, '') : '',
|
||||
]
|
||||
.map((v) => String(v ?? '').trim())
|
||||
.filter((v) => v.length >= 6)
|
||||
|
||||
rawValues.sort((a, b) => b.length - a.length)
|
||||
for (const val of rawValues) {
|
||||
if (!val) continue
|
||||
const escaped = val.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
||||
cleaned = cleaned.replace(new RegExp(escaped, 'gi'), '')
|
||||
}
|
||||
}
|
||||
|
||||
// حذف توالی‌های رقمی ۵ رقم یا بیشتر (فارسی و انگلیسی با فاصله یا خط تیره بین ارقام)
|
||||
cleaned = cleaned.replace(/(?:^|[^\w\d۰-۹])[\d۰-۹][\d۰-۹\s-]{3,}[\d۰-۹](?=[^\w\d۰-۹]|$)/gu, '')
|
||||
|
||||
// پالایش خطوط: حذف خطوطی که صرفاً از رقم/فاصله/علائم تشکیل شده‌اند یا برچسب‌های مرده
|
||||
const lines = cleaned.split('\n')
|
||||
const filteredLines = lines
|
||||
.map((line) => {
|
||||
const withoutDigitsAndPunct = line.replace(/[\d۰-۹\s.,:;–—/\\()-]/g, '')
|
||||
if (withoutDigitsAndPunct.length === 0) {
|
||||
return ''
|
||||
}
|
||||
const trimmed = line.trim()
|
||||
if (/^(?:شماره\s*(?:شبا|حساب|کارت)|شبا|حساب|کارت)\s*[:：-]?$/u.test(trimmed)) {
|
||||
return ''
|
||||
}
|
||||
return trimmed
|
||||
})
|
||||
.filter((line) => line.length > 0)
|
||||
|
||||
return filteredLines.join('\n').trim()
|
||||
}
|
||||
|
||||
/** جایگزینی متغیرها در متن راهنمای واریز — ٪نام / %نام (کارت، حساب و شبا چون ردیف جداگانه دارند حذف می‌شوند) */
|
||||
export function renderDepositGuideText(
|
||||
template: string,
|
||||
vars: DepositGuideVars,
|
||||
): string {
|
||||
const accountHolder = String(vars.accountHolder ?? '').trim()
|
||||
const cardNumber = String(vars.cardNumber ?? '').trim()
|
||||
const accountNumber = String(vars.accountNumber ?? '').trim()
|
||||
const sheba = String(vars.sheba ?? '').trim()
|
||||
|
||||
return template
|
||||
.replace(SHEBA_PLACEHOLDER_RE, sheba)
|
||||
.replace(ACCOUNT_PLACEHOLDER_RE, accountNumber)
|
||||
.replace(CARD_PLACEHOLDER_RE, cardNumber)
|
||||
let text = template
|
||||
.replace(SHEBA_PLACEHOLDER_RE, '')
|
||||
.replace(ACCOUNT_PLACEHOLDER_RE, '')
|
||||
.replace(CARD_PLACEHOLDER_RE, '')
|
||||
.replace(NAME_PLACEHOLDER_RE, accountHolder)
|
||||
|
||||
return stripDepositGuideNumbers(text, vars)
|
||||
}
|
||||
|
||||
export function getDepositGuideVarsFromSettings(): DepositGuideVars {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
custom-footer
|
||||
:closable="false"
|
||||
wrap-class-name="app-premium-modal--no-header"
|
||||
width="min(92vw, 380px)"
|
||||
width="min(92vw, 420px)"
|
||||
>
|
||||
<div class="deposit-guide">
|
||||
<div class="deposit-guide__icon-wrap" aria-hidden="true">
|
||||
@@ -72,6 +72,28 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- شناسه واریز اختصاصی (کد ملی شخص) -->
|
||||
<div v-if="nationalCode" class="deposit-guide__account-row">
|
||||
<span class="deposit-guide__account-label">شناسه واریز</span>
|
||||
<button
|
||||
type="button"
|
||||
class="deposit-guide__account-value"
|
||||
aria-label="کپی شناسه واریز"
|
||||
@click="copyNationalCode"
|
||||
>
|
||||
<span class="deposit-guide__account-text" dir="ltr">{{ nationalCode }}</span>
|
||||
<BasicIcon
|
||||
icon="vuesax-linear:copy"
|
||||
size="18"
|
||||
color="#15803d"
|
||||
class="deposit-guide__copy-icon"
|
||||
/>
|
||||
</button>
|
||||
<div class="deposit-guide__tip-box">
|
||||
<BasicIcon icon="vuesax-linear:info-circle" size="16" color="#16a34a" class="shrink-0" />
|
||||
<span>شناسه واریز شما همان کد ملی شما می‌باشد؛ لطفاً هنگام انتقال وجه در همراه بانک یا اینترنت بانک، این شناسه را در بخش شناسه واریز وارد فرمایید.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="hasMessengerLink"
|
||||
@@ -97,17 +119,116 @@
|
||||
<span>پیام به پشتیبانی (sms)</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- بخش آپلود فیش واریزی و ثبت درخواست -->
|
||||
<div class="deposit-guide__receipt-section">
|
||||
<div class="deposit-guide__receipt-header">
|
||||
<BasicIcon icon="vuesax-linear:receipt-text" size="20" color="#16a34a" />
|
||||
<span>ثبت فیش و اطلاعات واریز</span>
|
||||
</div>
|
||||
|
||||
<div class="deposit-guide__form-field">
|
||||
<label class="deposit-guide__form-label">
|
||||
مبلغ واریزی (ریال) <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="depositAmountFormatted"
|
||||
type="text"
|
||||
dir="ltr"
|
||||
class="deposit-guide__input"
|
||||
placeholder="مثال: ۵,۰۰۰,۰۰۰"
|
||||
@input="onAmountInput"
|
||||
/>
|
||||
<span v-if="depositAmountTomanText" class="deposit-guide__amount-hint">
|
||||
{{ depositAmountTomanText }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="deposit-guide__form-field">
|
||||
<label class="deposit-guide__form-label">شماره پیگیری / کد ارجاع فیش</label>
|
||||
<input
|
||||
v-model="trackedNumber"
|
||||
type="text"
|
||||
dir="ltr"
|
||||
class="deposit-guide__input"
|
||||
placeholder="کد پیگیری بانکی (اختیاری)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="deposit-guide__form-field">
|
||||
<label class="deposit-guide__form-label">
|
||||
تصویر فیش واریزی <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,application/pdf"
|
||||
class="hidden"
|
||||
@change="onFileSelected"
|
||||
/>
|
||||
<div
|
||||
v-if="!receiptFile"
|
||||
class="deposit-guide__upload-dropzone"
|
||||
@click="triggerFileInput"
|
||||
>
|
||||
<BasicIcon icon="vuesax-linear:document-upload" size="30" color="#16a34a" />
|
||||
<span class="deposit-guide__upload-title">برای آپلود تصویر فیش کلیک کنید</span>
|
||||
<span class="deposit-guide__upload-subtitle">JPG, PNG, WEBP, PDF (حداکثر ۱۰ مگابایت)</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="deposit-guide__receipt-preview">
|
||||
<img
|
||||
v-if="receiptPreviewUrl"
|
||||
:src="receiptPreviewUrl"
|
||||
alt="پیش‌نمایش فیش"
|
||||
class="deposit-guide__receipt-img"
|
||||
/>
|
||||
<div v-else class="deposit-guide__receipt-file-badge">
|
||||
<BasicIcon icon="vuesax-linear:receipt-text" size="26" color="#16a34a" />
|
||||
<span class="deposit-guide__receipt-file-name">{{ receiptFile.name }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="deposit-guide__receipt-remove"
|
||||
aria-label="حذف فیش"
|
||||
@click="removeReceipt"
|
||||
>
|
||||
<BasicIcon icon="vuesax-linear:trash" size="16" color="#dc2626" />
|
||||
<span>حذف فایل</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="deposit-guide__form-field">
|
||||
<label class="deposit-guide__form-label">توضیحات (اختیاری)</label>
|
||||
<textarea
|
||||
v-model="extraNote"
|
||||
rows="2"
|
||||
class="deposit-guide__textarea"
|
||||
placeholder="توضیحات اضافی در صورت نیاز..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<BasicButton
|
||||
type="primary"
|
||||
class="app-premium-modal__btn-primary deposit-guide__submit-btn w-full"
|
||||
:loading="submitting"
|
||||
@click="handleSubmitDeposit"
|
||||
>
|
||||
ثبت درخواست واریز
|
||||
</BasicButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BasicButton
|
||||
type="primary"
|
||||
class="app-premium-modal__btn-primary deposit-guide__confirm w-full"
|
||||
type="default"
|
||||
class="w-full"
|
||||
@click="localVisible = false"
|
||||
>
|
||||
متوجه شدم
|
||||
بستن
|
||||
</BasicButton>
|
||||
</template>
|
||||
</BasicModal>
|
||||
@@ -115,11 +236,14 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
|
||||
import { useSupportMessenger } from '@/composables/useSupportMessenger'
|
||||
import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { submitDepositRequest } from '@/api/wallet'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -127,14 +251,44 @@ const props = withDefaults(
|
||||
title?: string
|
||||
supportLink?: string
|
||||
smsLink?: string
|
||||
initialAmount?: number
|
||||
}>(),
|
||||
{
|
||||
title: 'راهنمای شارژ حساب',
|
||||
title: 'راهنمای شارژ و ثبت واریز',
|
||||
supportLink: '',
|
||||
smsLink: '',
|
||||
initialAmount: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const nationalCode = computed(() => {
|
||||
return String(userStore.userInfo?.n_code ?? '').trim()
|
||||
})
|
||||
|
||||
async function copyNationalCode() {
|
||||
if (!nationalCode.value) return
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(nationalCode.value)
|
||||
} else {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = nationalCode.value
|
||||
textarea.setAttribute('readonly', 'true')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.left = '-9999px'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
}
|
||||
message.info('شناسه واریز کپی شد')
|
||||
} catch {
|
||||
message.error('خطا در کپی شناسه واریز')
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
depositCardNumber,
|
||||
depositAccountNumber,
|
||||
@@ -160,6 +314,7 @@ function onDepositSupportClick() {
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean]
|
||||
'success': []
|
||||
}>()
|
||||
|
||||
const localVisible = computed({
|
||||
@@ -167,11 +322,146 @@ const localVisible = computed({
|
||||
set: (value: boolean) => emit('update:visible', value),
|
||||
})
|
||||
|
||||
// فیلدهای فرم فیش واریزی
|
||||
const depositAmountRaw = ref<number | undefined>(props.initialAmount)
|
||||
const depositAmountFormatted = ref<string>('')
|
||||
const trackedNumber = ref<string>('')
|
||||
const extraNote = ref<string>('')
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
const receiptFile = ref<File | null>(null)
|
||||
const receiptPreviewUrl = ref<string>('')
|
||||
const submitting = ref(false)
|
||||
|
||||
function formatNumber(num: number): string {
|
||||
return num.toLocaleString('en-US')
|
||||
}
|
||||
|
||||
function updateFormattedAmount(val?: number) {
|
||||
if (val && val > 0) {
|
||||
depositAmountFormatted.value = formatNumber(val)
|
||||
} else {
|
||||
depositAmountFormatted.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function onAmountInput(e: Event) {
|
||||
const target = e.target as HTMLInputElement
|
||||
const digits = target.value.replace(/\D/g, '')
|
||||
if (digits) {
|
||||
const num = parseInt(digits, 10)
|
||||
depositAmountRaw.value = num
|
||||
depositAmountFormatted.value = formatNumber(num)
|
||||
} else {
|
||||
depositAmountRaw.value = undefined
|
||||
depositAmountFormatted.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const depositAmountTomanText = computed(() => {
|
||||
const val = depositAmountRaw.value
|
||||
if (!val || val <= 0) return ''
|
||||
const toman = Math.floor(val / 10)
|
||||
return `معادل ${formatNumber(toman)} تومان`
|
||||
})
|
||||
|
||||
function triggerFileInput() {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
function onFileSelected(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
const file = target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
message.error('حجم فایل نباید بیش از ۱۰ مگابایت باشد.')
|
||||
return
|
||||
}
|
||||
|
||||
receiptFile.value = file
|
||||
if (file.type.startsWith('image/')) {
|
||||
receiptPreviewUrl.value = URL.createObjectURL(file)
|
||||
} else {
|
||||
receiptPreviewUrl.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function removeReceipt() {
|
||||
if (receiptPreviewUrl.value) {
|
||||
URL.revokeObjectURL(receiptPreviewUrl.value)
|
||||
}
|
||||
receiptFile.value = null
|
||||
receiptPreviewUrl.value = ''
|
||||
if (fileInputRef.value) {
|
||||
fileInputRef.value.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
depositAmountRaw.value = undefined
|
||||
depositAmountFormatted.value = ''
|
||||
trackedNumber.value = ''
|
||||
extraNote.value = ''
|
||||
removeReceipt()
|
||||
}
|
||||
|
||||
async function handleSubmitDeposit() {
|
||||
const amount = depositAmountRaw.value
|
||||
if (!amount || amount <= 0) {
|
||||
message.error('لطفاً مبلغ واریزی را وارد فرمایید.')
|
||||
return
|
||||
}
|
||||
|
||||
if (!receiptFile.value) {
|
||||
message.error('لطفاً تصویر فیش واریزی را بارگذاری فرمایید.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true
|
||||
const formData = new FormData()
|
||||
formData.append('cash', String(amount))
|
||||
formData.append('receipt', receiptFile.value)
|
||||
if (trackedNumber.value.trim()) {
|
||||
formData.append('tracked_number', trackedNumber.value.trim())
|
||||
}
|
||||
if (extraNote.value.trim()) {
|
||||
formData.append('extra_note', extraNote.value.trim())
|
||||
}
|
||||
|
||||
const res = await submitDepositRequest(formData)
|
||||
message.success(res?.message || 'درخواست واریز شما با موفقیت ثبت شد و پس از بررسی تایید خواهد شد.')
|
||||
emit('success')
|
||||
localVisible.value = false
|
||||
resetForm()
|
||||
} catch (e: any) {
|
||||
console.error(e)
|
||||
const errorMsg = e?.response?.data?.message || 'خطا در ثبت درخواست واریز'
|
||||
message.error(errorMsg)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
void loadSupportMessengerFromSettings(true)
|
||||
if (props.initialAmount && props.initialAmount > 0) {
|
||||
depositAmountRaw.value = props.initialAmount
|
||||
updateFormattedAmount(props.initialAmount)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.initialAmount,
|
||||
(newVal) => {
|
||||
if (newVal && newVal > 0) {
|
||||
depositAmountRaw.value = newVal
|
||||
updateFormattedAmount(newVal)
|
||||
}
|
||||
},
|
||||
)
|
||||
@@ -183,22 +473,22 @@ watch(
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0.25rem 0.5rem 0.5rem;
|
||||
padding: 0.25rem 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.deposit-guide__icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 9999px;
|
||||
background: #ecfdf3;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.deposit-guide__title {
|
||||
margin: 0 0 0.75rem;
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
@@ -206,8 +496,8 @@ watch(
|
||||
|
||||
.deposit-guide__body {
|
||||
width: 100%;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.9;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
@@ -276,14 +566,28 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
.deposit-guide__tip-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #dcfce7;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
color: #15803d;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.deposit-guide__support-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 1.25rem;
|
||||
margin-top: 0.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
&--spaced {
|
||||
margin-top: 0.65rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -293,19 +597,178 @@ watch(
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 1rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 0.75rem;
|
||||
background: #f0fdf4;
|
||||
color: #15803d;
|
||||
font-size: 0.92rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.deposit-guide__confirm {
|
||||
/* بخش ثبت فیش */
|
||||
.deposit-guide__receipt-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px dashed #e2e8f0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.deposit-guide__receipt-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: #15803d;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.deposit-guide__form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.deposit-guide__form-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.deposit-guide__input {
|
||||
width: 100%;
|
||||
height: 2.6rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.6rem;
|
||||
font-size: 0.88rem;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: #16a34a;
|
||||
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.deposit-guide__textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: #16a34a;
|
||||
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.deposit-guide__amount-hint {
|
||||
font-size: 0.74rem;
|
||||
color: #059669;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.deposit-guide__upload-dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
padding: 1rem;
|
||||
border: 1.5px dashed #86efac;
|
||||
border-radius: 0.75rem;
|
||||
background: #f0fdf4;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #dcfce7;
|
||||
border-color: #4ade80;
|
||||
}
|
||||
}
|
||||
|
||||
.deposit-guide__upload-title {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.deposit-guide__upload-subtitle {
|
||||
font-size: 0.7rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.deposit-guide__receipt-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 0.75rem;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.deposit-guide__receipt-img {
|
||||
max-width: 100%;
|
||||
max-height: 140px;
|
||||
object-fit: contain;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.deposit-guide__receipt-file-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.deposit-guide__receipt-file-name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.deposit-guide__receipt-remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #dc2626;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.35rem;
|
||||
transition: background 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
}
|
||||
|
||||
.deposit-guide__submit-btn {
|
||||
margin-top: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -90,8 +90,10 @@
|
||||
v-model:visible="chargeAccountModal"
|
||||
:support-link="depositGuideSupportLink"
|
||||
:sms-link="depositSmsSupportLink"
|
||||
:initial-amount="form.value"
|
||||
@success="onDepositSuccess"
|
||||
>
|
||||
<p class="deposit-guide-text">{{ supportMessengerText }}</p>
|
||||
<p v-if="supportMessengerText" class="deposit-guide-text">{{ supportMessengerText }}</p>
|
||||
</WalletDepositGuideModal>
|
||||
|
||||
<BasicModal v-model:visible="withdrawInfModal" custom-footer :closable="false">
|
||||
@@ -120,6 +122,7 @@ import OtpInput from 'vue3-otp-input'
|
||||
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
|
||||
import ResponsiveViewPair from '@/layouts/components/ResponsiveViewPair.vue'
|
||||
import { useWalletPage } from './composables/useWalletPage'
|
||||
import { initWalletPageData } from './composables/useWalletPageData'
|
||||
import DesktopWalletView from './desktop/DesktopWalletView.vue'
|
||||
import MobileWalletView from './mobile/MobileWalletView.vue'
|
||||
import SkeletonLoading from './components/SkeletonLoading.vue'
|
||||
@@ -141,6 +144,7 @@ const {
|
||||
infoVisible,
|
||||
identityRequiredVisible,
|
||||
refOtpInput,
|
||||
form,
|
||||
extraNote,
|
||||
supportMessengerText,
|
||||
depositGuideSupportLink,
|
||||
@@ -149,6 +153,11 @@ const {
|
||||
loading,
|
||||
addCard,
|
||||
} = useWalletPage()
|
||||
|
||||
async function onDepositSuccess() {
|
||||
form.value.value = undefined
|
||||
await initWalletPageData()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user