117 lines
3.5 KiB
Vue
117 lines
3.5 KiB
Vue
<template lang="pug">
|
||
.wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
|
||
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4
|
||
.flex.flex-col(class="gap-y-1.5")
|
||
span.text-sm Приоритет
|
||
base-custom-select(
|
||
:items="priorityList",
|
||
placeholder="Приоритет клиента",
|
||
v-model="basicInfo.priority"
|
||
)
|
||
.flex.flex-col(class="gap-y-1.5")
|
||
span.text-sm Дата рождения
|
||
base-input-date.input-date(
|
||
v-model:value="basicInfo.birth_date",
|
||
:width-input="277"
|
||
)
|
||
.flex.flex-col(class="gap-y-1.5")
|
||
span.text-sm Номер телефона
|
||
base-input.input-info(
|
||
v-model:value="phone.username",
|
||
placeholder="+7 (915) 644–92–23",
|
||
v-mask="'+7 (###) ###-##-##'",
|
||
:width-input="277"
|
||
)
|
||
.flex.flex-col(class="gap-y-1.5")
|
||
span.text-sm Email
|
||
base-input.input-info(
|
||
v-model:value="email.username",
|
||
placeholder="user@yandex.ru",
|
||
:width-input="277"
|
||
)
|
||
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
|
||
span.text-sm Ссылки на соцсети
|
||
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
|
||
base-adding-network(
|
||
:list-adding-networks="networks.settings",
|
||
:selected-option="network.icon",
|
||
:value="network",
|
||
:choose-network="chooseOption",
|
||
:save-network-id="saveNetworkId"
|
||
)
|
||
span.add-network.cursor-pointer(
|
||
v-show="networks.settings.length !== basicInfo.contacts.length",
|
||
@click="addNetwork"
|
||
) Добавить соцсеть
|
||
.px-4
|
||
base-button(@click="saveClient" :size="40")
|
||
span.font-semibold Создать клиента
|
||
</template>
|
||
|
||
<script>
|
||
import BaseButton from "@/components/base/BaseButton";
|
||
import BaseInput from "@/components/base/BaseInput";
|
||
import BaseInputDate from "@/components/base/BaseInputDate";
|
||
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
|
||
import { column } from "@/pages/clients/utils/tableConfig";
|
||
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
|
||
import { mask } from "vue-the-mask";
|
||
export default {
|
||
name: "FormCreateBasicInfo",
|
||
components: {
|
||
BaseInput,
|
||
BaseInputDate,
|
||
BaseAddingNetwork,
|
||
BaseButton,
|
||
BaseCustomSelect,
|
||
},
|
||
props: {
|
||
choosePriority: Function,
|
||
priorityList: Array,
|
||
saveNetworkId: Function,
|
||
chooseOption: Function,
|
||
phone: Object,
|
||
email: Object,
|
||
basicInfo: Object,
|
||
saveClient: Function,
|
||
addNetwork: Function,
|
||
},
|
||
directives: { mask },
|
||
data() {
|
||
return {
|
||
networks: column.find((el) => el.name === "networks"),
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.wrapper-info
|
||
min-height: 443px
|
||
max-height: 443px
|
||
overflow-y: auto
|
||
color: var(--font-grey-color)
|
||
&::-webkit-scrollbar
|
||
width: 4px
|
||
&::-webkit-scrollbar-track
|
||
background-color: rgba(211, 212, 220, 0.5)
|
||
border-radius: 8px
|
||
&::-webkit-scrollbar-thumb
|
||
border-radius: 8px
|
||
background-color: var(--btn-blue-color)
|
||
.input-info
|
||
color: var(--font-dark-blue-color)
|
||
.obligatory
|
||
color: var(--font-obligatory-color)
|
||
.add-network
|
||
color: var(--btn-blue-color)
|
||
.icon
|
||
color: var(--border-light-grey-color)
|
||
width: 48px
|
||
height: 100%
|
||
border: 2px solid var(--border-light-grey-color)
|
||
border-radius: 4px
|
||
.input-date
|
||
border: 1.5px solid var(--border-light-grey-color)
|
||
</style>
|