[WIP] Добавил модальное окно выбора услуг
This commit is contained in:
megavrilinvv
221
src/pages/newCalendar/components/ServicesModal.vue
Normal file
221
src/pages/newCalendar/components/ServicesModal.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template lang="pug">
|
||||
.wrapper.flex.flex-col.pt-6.dark-blue.font-medium
|
||||
.flex.flex-col.gap-y-4
|
||||
base-input.search(
|
||||
placeholder="Поиск",
|
||||
:width="422",
|
||||
iconLeft
|
||||
size="M"
|
||||
)
|
||||
template(v-slot:iconLeft)
|
||||
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
|
||||
.flex.gap-x-2
|
||||
base-button(
|
||||
@click="choiceService(item.name)",
|
||||
v-for="item in baseServices",
|
||||
size="S",
|
||||
width="100px",
|
||||
type="grey"
|
||||
) {{item.name}}
|
||||
template(v-for="item in baseServices")
|
||||
.serice-wrapper.flex.flex-col(v-if="item.check")
|
||||
.service.flex.items-center(v-for="serve in item.data")
|
||||
q-checkbox(v-model="serve.checked")
|
||||
.info-block.flex.justify-between.w-full
|
||||
.flex.flex-col.gap-y-1
|
||||
.text-m {{serve.title}}
|
||||
.grey-color.text-smm {{item.name}}
|
||||
.flex.flex-col.gap-y-1
|
||||
.text-m.font-bold {{serve.price}}
|
||||
.grey-color.text-smm {{serve.time}}
|
||||
.footer.flex.gap-2
|
||||
base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
|
||||
base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import BaseButton from "@/components/base/BaseButton.vue";
|
||||
|
||||
export default {
|
||||
name: "SevicesModal",
|
||||
components: { BaseInput, BaseButton },
|
||||
props: {
|
||||
closeServices: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
baseServices: [
|
||||
{
|
||||
name: "Терапия",
|
||||
check: true,
|
||||
data: [
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Консультация стоматолога",
|
||||
price: "1 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "2 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "3 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "5 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "50 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "3 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "5 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "50 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Хирургия",
|
||||
check: false,
|
||||
data: [
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "2 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Консультация стоматолога",
|
||||
price: "1 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Ортопедия ",
|
||||
check: false,
|
||||
data: [
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "2 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Консультация стоматолога",
|
||||
price: "1 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Ортодонтия",
|
||||
check: false,
|
||||
data: [
|
||||
{
|
||||
title: "Пломбирование кариеса",
|
||||
price: "2 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
title: "Консультация стоматолога",
|
||||
price: "1 350 ₽",
|
||||
time: "1 ч. 30 мин.",
|
||||
checked: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
choiceService(name) {
|
||||
this.baseServices.forEach((e) => {
|
||||
e.check = false;
|
||||
if (e.name === name) e.check = true;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.wrapper
|
||||
width: 422px
|
||||
|
||||
.search :deep(path)
|
||||
fill: var(--font-grey-color)
|
||||
|
||||
.search :deep(.q-field__prepend)
|
||||
padding-right: 4px
|
||||
|
||||
.base-service
|
||||
border-radius: 4px
|
||||
border: 1px solid var(--gray-secondary)
|
||||
background: var(--gray-thirdly)
|
||||
|
||||
.serice-wrapper
|
||||
overflow: auto
|
||||
max-height: 546px
|
||||
margin-right: -18px
|
||||
&::-webkit-scrollbar
|
||||
width: 4px
|
||||
&::-webkit-scrollbar-track:vertical
|
||||
margin-bottom: 16px
|
||||
|
||||
.service
|
||||
height: 67px
|
||||
margin-right: 14px
|
||||
&:last-child .info-block
|
||||
border-bottom: none
|
||||
|
||||
.info-block
|
||||
padding: 11px 0px
|
||||
border-bottom: 1px solid var(--gray-secondary)
|
||||
|
||||
.footer
|
||||
border-top: 1px solid var(--gray-secondary)
|
||||
margin: 0px -32px -12px
|
||||
padding: 16px 32px 0px 32px
|
||||
|
||||
.dark-blue
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.grey-color
|
||||
color: var(--font-grey-color)
|
||||
</style>
|
||||
Reference in New Issue
Block a user