47 lines
2.7 KiB
Vue
47 lines
2.7 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import Dialog from 'primevue/dialog';
|
|
import UiButton from '../ui/UiButton.vue';
|
|
import PaymentSuccessSvg from '../svg/paymentSuccess.svg';
|
|
import PaymentFailedSvg from '../svg/paymentFailed.svg';
|
|
|
|
const visible = defineModel('visible');
|
|
|
|
const props = defineProps({
|
|
result: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const isPaid = computed(() => props.result?.status === 'paid');
|
|
|
|
const isWalletTopUp = computed(() => props.result?.purpose === 'WalletTopUp');
|
|
|
|
const closeModal = () => {
|
|
visible.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:visible="visible" :modal="true" :closable="true" :dismissableMask="false" :maximizable="false" :style="{ width: '688px' , minHeight: '376px' }" class="fast-request-dialog">
|
|
<div v-if="result" class="w-full flex flex-col items-center justify-center gap-2 py-6">
|
|
<component :is="isPaid ? PaymentSuccessSvg : PaymentFailedSvg" class="w-[180px] h-[150px]" />
|
|
<h2 class="text-[15px] font-[700] text-[#3E4C63] mt-2">
|
|
<template v-if="isPaid">{{ isWalletTopUp ? 'کیف پول شما با موفقیت شارژ شد.' : 'پرداخت شما با موفقیت انجام شد.' }}</template>
|
|
<template v-else>متاسفانه پرداخت شما با خطا روبه‌رو شده است.</template>
|
|
</h2>
|
|
<p class="max-w-[480px] text-center text-[13px] font-[400] text-[#576989] leading-7">
|
|
<template v-if="isPaid && isWalletTopUp">مبلغ پرداختی به موجودی کیف پول شما اضافه شد و می‌توانید از آن برای پرداخت فاکتورها استفاده کنید.</template>
|
|
<template v-else-if="isPaid">کارشناسان پرداخت و درخواست شما را به زودی بررسی خواهند کرد.</template>
|
|
<template v-else>لطفا دوباره نسبت به پرداخت اقدام نمایید. در صورتیکه مبلغ از حساب شما کسر شده و یا فکر می‌کنید اشتباهی رخ داده است، با کارشناسان ما در تماس باشید.</template>
|
|
</p>
|
|
<p class="text-[13px] font-[700] text-[#3E4C63] mt-2">شماره پیگیری: {{ result.track_id }}</p>
|
|
<div class="flex items-center justify-center gap-2 mt-4">
|
|
<ui-button label="بازگشت به داشبورد" severity="success" size="small" @click="closeModal" />
|
|
<ui-button v-if="!isPaid" label="تماس با پشتیبانی" severity="secondary" size="small" @click="closeModal" />
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|