Files
astra-frontend/src/pages/clients/components/FormCreateBasicInfo.vue

93 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template lang="pug">
.wrapper-info.h-full
.grid.grid-cols-2.gap-x-4.gap-y-6
base-select(
:items="priorityList",
placeholder="Приоритет клиента",
v-model="basicInfo.priority",
label="Приоритет"
)
base-input(
type="date"
v-model="basicInfo.birth_date",
label="Дата рождения",
outlined,
important
)
base-input(
v-model="phone.username",
placeholder="+7 (915) 6449223",
mask="+7 (###) ###-##-##",
label="Номер телефона",
outlined,
important
)
base-input(
v-model="email.username",
placeholder="user@yandex.ru",
label="Email",
outlined,
important
)
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.kind.id")
base-adding-network(
:items="networksList",
:network="network",
)
span.add-network.cursor-pointer(
v-show="networksList.length !== 0",
@click="addNetwork"
) Добавить соцсеть
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BaseSelect from "@/components/base/BaseSelect";
export default {
name: "FormCreateBasicInfo",
components: {
BaseInput,
BaseAddingNetwork,
BaseSelect,
},
props: {
priorityList: Array,
phone: Object,
email: Object,
basicInfo: Object,
saveClient: Function,
addNetwork: Function,
networksList: Array,
},
};
</script>
<style lang="sass" scoped>
.wrapper-info
max-height: 336px
min-height: 272px
overflow-y: auto
&::-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)
.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
</style>