89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<template lang="pug">
|
||
.base.flex.flex-col.gap-y-6
|
||
.flex.flex-col.gap-y-6
|
||
span.font-bold Основное
|
||
.flex.flex-col.gap-y-6
|
||
base-input.w-full(placeholder="ФИО*")
|
||
base-radio-buttons-group(
|
||
:items="gendersList",
|
||
radioButtonsLabel="Пол",
|
||
v-model="gender",
|
||
)
|
||
.flex.gap-x-4
|
||
.flex.flex-col.gap-y-2
|
||
.counter.font-semibold.text-smm Дата рождения
|
||
base-input-date.input-date.h-10(:width-input="277")
|
||
.flex.flex-col.gap-y-2
|
||
.counter.font-semibold.text-smm СНИЛС
|
||
base-input(
|
||
:width-input="277",
|
||
placeholder="000–000–000 00",
|
||
v-mask="'###-###-### ##'"
|
||
)
|
||
.flex.flex-col.gap-y-6
|
||
.flex.flex-col.gap-y-2
|
||
.counter.font-semibold.text-smm Адрес регистрации
|
||
base-input(:width-input="277", placeholder="Введите полный адрес")
|
||
.flex.flex-col.gap-y-2
|
||
.counter.font-semibold.text-smm Фактический адрес места жительства
|
||
base-input(:width-input="277", placeholder="Введите полный адрес")
|
||
.flex.gap-x-4
|
||
.flex.flex-col.gap-y-2
|
||
.counter.font-semibold.text-smm Номер телефона
|
||
base-input(
|
||
:width-input="277",
|
||
placeholder="+7 (915) 644–92–23",
|
||
v-mask="'+7 (###) ###-##-##'"
|
||
)
|
||
.flex.flex-col.gap-y-2
|
||
.counter.font-semibold.text-smm Email
|
||
base-input(:width-input="277", placeholder="user@yandex.ru")
|
||
</template>
|
||
|
||
<script>
|
||
import BaseInput from "@/components/base/BaseInput";
|
||
import BaseInputDate from "@/components/base/BaseInputDate";
|
||
import BaseSelect from "@/components/base/BaseSelect";
|
||
import BaseButton from "@/components/base/BaseButton";
|
||
import { mask } from "vue-the-mask";
|
||
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
|
||
|
||
export default {
|
||
name: "MedicalBaseData",
|
||
components: {
|
||
BaseInput,
|
||
BaseInputDate,
|
||
BaseSelect,
|
||
BaseButton,
|
||
BaseRadioButtonsGroup,
|
||
},
|
||
directives: { mask },
|
||
data() {
|
||
return {
|
||
gendersList: [
|
||
{
|
||
id: "1",
|
||
label: "Мужской",
|
||
value: "male",
|
||
},
|
||
{
|
||
id: "2",
|
||
label: "Женский",
|
||
value: "woman",
|
||
},
|
||
],
|
||
gender: "",
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.input-date
|
||
border: 1.5px solid var(--border-light-grey-color)
|
||
border-radius: 4px
|
||
|
||
.counter
|
||
color: var(--font-grey-color)
|
||
</style>
|