129 lines
4.1 KiB
Vue
129 lines
4.1 KiB
Vue
<template>
|
|
<BasicModal
|
|
v-model:visible="visible"
|
|
custom-footer
|
|
:closable="false"
|
|
:width="modalWidth"
|
|
wrap-class-name="required-kyc-modal-wrap"
|
|
:z-index="99999"
|
|
>
|
|
<div class="kyc-modal-content text-center py-2" dir="rtl">
|
|
<!-- Icon with soft glowing background -->
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-amber-50 text-amber-600 border border-amber-200 mb-4 shadow-sm">
|
|
<BasicIcon icon="vuesax-linear:security-user" size="36" color="#d97706" />
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h2 class="text-base font-bold text-slate-800 mb-2">
|
|
احراز هویت الزامی است
|
|
</h2>
|
|
|
|
<!-- Description: شیک، کوتاه، مختصر و مفید -->
|
|
<p class="text-xs text-slate-600 leading-6 max-w-xs mx-auto mb-5">
|
|
کاربر گرامی، جهت استفاده از کلیه امکانات سامانه و شروع معاملات، لطفاً ابتدا فرایند احراز هویت خود را تکمیل فرمایید.
|
|
</p>
|
|
|
|
<!-- Tip info box -->
|
|
<div class="bg-amber-50/70 border border-amber-200/80 rounded-xl p-3 text-right text-xs text-amber-900 mb-5 space-y-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<BasicIcon icon="vuesax-linear:tick-circle" size="16" color="#d97706" class="shrink-0" />
|
|
<span>استعلام و تایید آنی مشخصات از طریق سامانه جیبیت</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<BasicIcon icon="vuesax-linear:tick-circle" size="16" color="#d97706" class="shrink-0" />
|
|
<span>کد ملی وارد شده باید متعلق به مالک شماره موبایل باشد</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="flex flex-col gap-2.5">
|
|
<BasicButton
|
|
type="primary"
|
|
class="w-full h-11 text-sm font-semibold !rounded-xl flex items-center justify-center gap-2"
|
|
@click="goToKyc"
|
|
>
|
|
<span>تکمیل و احراز هویت</span>
|
|
<BasicIcon icon="vuesax-linear:arrow-left" size="16" />
|
|
</BasicButton>
|
|
|
|
<button
|
|
type="button"
|
|
class="text-xs text-red-600 hover:text-red-700 flex items-center justify-center gap-1.5 py-1.5 cursor-pointer transition-colors"
|
|
@click="onLogout"
|
|
>
|
|
<BasicIcon icon="vuesax-linear:logout" size="14" color="#dc2626" />
|
|
<span>خروج از حساب کاربری</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import { useUserStore } from '@/store/userStore'
|
|
import { getToken } from '@/utils'
|
|
import { performUserLogout } from '@/utils/authSession'
|
|
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const isDesktop = useDesktopBreakpoint()
|
|
|
|
const modalWidth = computed(() => (isDesktop.value ? '420px' : '90vw'))
|
|
|
|
const isKycRequired = computed(() => {
|
|
// قفل سراسری منو برداشته شد؛ احراز روی خود عملیات (معامله، واریز، هدیه) می‌ماند.
|
|
return false
|
|
})
|
|
|
|
const visible = ref(false)
|
|
|
|
watch(
|
|
isKycRequired,
|
|
(val) => {
|
|
visible.value = Boolean(val)
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
onMounted(async () => {
|
|
if (getToken() && !userStore.userInfo) {
|
|
try {
|
|
await userStore.getMyInfo()
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
visible.value = Boolean(isKycRequired.value)
|
|
})
|
|
|
|
function goToKyc() {
|
|
visible.value = false
|
|
void router.push({ name: 'user', query: { showEdit: 'true' } })
|
|
}
|
|
|
|
async function onLogout() {
|
|
visible.value = false
|
|
await performUserLogout()
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.required-kyc-modal-wrap {
|
|
.ant-modal-content {
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.kyc-modal-content {
|
|
font-family: inherit;
|
|
}
|
|
</style>
|