[WIP] Добавил форму услуг на форме создания записи

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -56,8 +56,20 @@
     .flex.items-center.gap-x-3.text-smm
       .text.font-semibold Услуги:
       .flex.gap-x-1
-        .services.flex.items-center.px-4.font-medium.text
-          span Выберите услуги
+        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1(
+          :class="{'other-serivices': services.length}"
+        )
+          span(v-if="!services.length") Выберите услуги
+          .service.flex.px-4.items-center(
+            id="miDuv",
+            v-else,
+            v-for="service in services",
+            :style="{background: service.color, display: service.id <=2 ? 'flex' : 'none'}"
+          ) {{service.name}}
+          .other.flex.h-7.items-center.justify-center(
+            v-if="services.length > 3"
+          ) {{`+${services.length - 3}`}}
+        .price.flex.items-center.items-center.justify-center {{sumService}}
         q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
           img(:src="folder")
     base-input-full-name(:info-client="patientData")
@@ -148,6 +160,10 @@ export default {
       currentDate: moment().clone(),
       isShowTime: false,
       times: { from: "8:30", to: "10:30" },
+      services: [
+        { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
+        { id: 1, name: "Осмотр", price: 300, color: "#FFF0CA" },
+      ],
       forms: [
         {
           title: "Основное",
@@ -180,6 +196,9 @@ export default {
       );
       return filteredNetworks;
     },
+    sumService() {
+      return this.services.reduce((acc, el) => acc + el.price, 0) + "₽";
+    },
   },
   methods: {
     changePhoto() {
@@ -252,6 +271,29 @@ export default {
   height: 28px
   width: 560px
 
+.service
+  color: var(--font-dark-blue-color)
+  border-radius: 4px
+  height: 28px
+
+.other-serivices
+  width: 474px
+  padding: 4px
+  border: 1px solid #D3D4DC
+  background: var(--default-white)
+  height: 36px
+
+.other
+  width: 46px
+  height: 28px
+  background: var(--bg-light-grey)
+
+.price
+  background: var(--bg-light-grey)
+  border-radius: 6px
+  width: 82px
+  color: #9294A7
+
 .title-info
   color: var(--font-grey-color)
   border-bottom: 1.5px solid var(--font-grey-color)