159 lines
3.6 KiB
Vue
159 lines
3.6 KiB
Vue
<template>
|
|
<form
|
|
class="verification"
|
|
@submit="onSubmit"
|
|
>
|
|
<UiButton
|
|
icon="chevron-left"
|
|
color="secondary"
|
|
type="link"
|
|
class="mb-8"
|
|
:href="step === 0 ? '/verification/status' : ''"
|
|
@click="step--"
|
|
>
|
|
{{ $t('back') }}
|
|
</UiButton>
|
|
|
|
<h1 class="mb-40">
|
|
Identity verification
|
|
</h1>
|
|
|
|
<!-- TODO: бырбырбыр -->
|
|
<Stepper
|
|
:step="step"
|
|
:items="[
|
|
'Personal <br> information',
|
|
'Identity <br> verification',
|
|
'Organization <br> data',
|
|
]"
|
|
/>
|
|
|
|
<Transition
|
|
name="fade"
|
|
mode="out-in"
|
|
>
|
|
<div v-if="step === 0" class="mt-40">
|
|
<UiInput
|
|
id="name"
|
|
label="Name"
|
|
class="mb-10"
|
|
rules="required"
|
|
/>
|
|
<UiInput
|
|
id="surname"
|
|
label="Surname"
|
|
class="mb-10"
|
|
rules="required"
|
|
/>
|
|
<UiInput
|
|
id="patronymic"
|
|
label="Patronymic (optional)"
|
|
class="mb-28"
|
|
/>
|
|
<UiInput
|
|
id="bday"
|
|
label="Date of birth"
|
|
class="mb-10"
|
|
rules="required"
|
|
/>
|
|
<UiSelect
|
|
id="region"
|
|
class="w-100"
|
|
label="Country / Region of residence"
|
|
placeholder="Choose an option"
|
|
:options="['Россия', 'священная', 'наша', 'держава']"
|
|
/>
|
|
|
|
<UiButton
|
|
class="w-100 mt-40"
|
|
size="large"
|
|
@click="step++"
|
|
>
|
|
{{ $t('next') }}
|
|
</UiButton>
|
|
</div>
|
|
|
|
<div v-else-if="step === 1" class="mt-40">
|
|
<UiAlert class="mb-40">
|
|
Upload a photo of the <strong> front </strong> and <strong> back </strong> of your document
|
|
</UiAlert>
|
|
|
|
<VerificationWeAccept
|
|
class="mb-40"
|
|
:list="[{ title: 'Identity document', underTitle: '(For example: passport, residence permit, driver\'s license.)' }]"
|
|
/>
|
|
|
|
<!-- TODO: zaglushka -->
|
|
<div class="zaglushka" />
|
|
|
|
<UiButton
|
|
class="w-100 mt-40"
|
|
size="large"
|
|
@click="step++"
|
|
>
|
|
{{ $t('next') }}
|
|
</UiButton>
|
|
</div>
|
|
|
|
<div v-else-if="step === 2" class="mt-22">
|
|
<UiAlert class="mb-24">
|
|
Upload the documents for the right to conduct commercial activities
|
|
</UiAlert>
|
|
|
|
<VerificationWeAccept
|
|
class="mb-24"
|
|
:list="[
|
|
{ title: 'Company registration documents.' },
|
|
{ title: 'License to trade.' },
|
|
{ title: 'Documents on the identity of the individual to the organization,', underTitle: '(power of attorney, inheritance, donation, sub-sponsorship)' },
|
|
]"
|
|
/>
|
|
|
|
<!-- TODO: zaglushka -->
|
|
<div class="zaglushka" />
|
|
|
|
<UiButton
|
|
class="w-100 mt-24"
|
|
size="large"
|
|
href="/verification/processing"
|
|
>
|
|
{{ $t('next') }}
|
|
</UiButton>
|
|
</div>
|
|
</Transition>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useForm } from 'vee-validate'
|
|
|
|
definePageMeta({
|
|
middleware: ['auth'],
|
|
centerContent: true,
|
|
})
|
|
|
|
const { handleSubmit, isSubmitting } = useForm()
|
|
|
|
const step = ref(0)
|
|
|
|
const onSubmit = handleSubmit(async (values) => {
|
|
console.log(values)
|
|
navigateTo('/projects')
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.verification {
|
|
margin: 0 auto;
|
|
width: 500px;
|
|
}
|
|
|
|
.zaglushka {
|
|
height: 143px;
|
|
padding: 24px;
|
|
border-radius: 12px;
|
|
border: 1px dashed var(--grey-grey-400, #A7B9D5);
|
|
background: var(--grey-grey-100, #F4F6FF);
|
|
}
|
|
</style>
|