[WIP] Добавил форму добавления аватара клиента

src/components/base/BaseClientFormCreate.vue

@@ -4,12 +4,37 @@
     span.title.text-xl.font-bold.px-4 Создание клиента
     .flex.gap-x-4.h-fit.px-4
       .flex.gap-x-3.w-full
-        base-button(:rounded="true" :secondary="true" :size="40")
+        base-button.relative(:rounded="true", :secondary="true", :size="40", @click="changeOpenPopup")
           .icon-download.text-xl
+          base-popup.right-5.top-7(v-if="showPopup", :width="230")
+            .flex.items-center.gap-x-2
+              img(src="@/assets/icons/computer.svg")
+              span.text-smm(@click="changeOpenModal") Загрузить с компьютера
+            .flex.items-center.gap-x-2
+              img(src="@/assets/icons/camera.svg")
+              span.text-smm Сделать фото
+          base-modal(v-model="showModal", title="Загрузить изображение мидла")
+            .form-avatar.flex.flex-col.items-center.justify-center
+              .avatar-block.flex.relative.flex-row
+                input.input(
+                  type="file",
+                  id="image-upload",
+                  accept="image/*",
+                  @change="(e) => previewImages(e)"
+                )
+                .avatar.absolute(v-for="img in image")
+                  img.avatar(for="image-upload", :src="img", v-if="img")
+                  base-button(:rounded="true", :secondary="true", :size="48", @click="closeModal")
+                    .icon-ok
         base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex.px-4
-        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(v-for="info in listInfoTitle" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="info.key" :id="info.key") {{info.title}}
+        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
+          v-for="info in listInfoTitle",
+          @click="(e) => selectTab(e)",
+          :class="{active:info.active}",
+          :key="info.key" :id="info.key"
+        ) {{info.title}}
       .flex(:style="{display :'block'}" ref="basic")
         form-create-basic-info(
           :basic-info="infoClient.basic"
@@ -53,6 +78,9 @@ import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses"
 import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
 import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
+import BasePopup from "@/components/base/BasePopup";
+import BaseModal from "@/components/base/BaseModal";
+import addImageIcon from "@/assets/icons/photo.svg";
 export default {
   name: "BaseClientFormClient",
   components: {
@@ -62,6 +90,9 @@ export default {
     FormCreateAddresses,
     FormCreateAdditional,
     BaseButton,
+    BasePopup,
+    BaseModal,
+    addImageIcon,
   },
   props: {
     closeForm: Function,
@@ -166,6 +197,9 @@ export default {
           label: "-",
         },
       ],
+      showModal: false,
+      showPopup: false,
+      image: [addImageIcon],
     };
   },
   computed: {
@@ -176,6 +210,22 @@ export default {
     },
   },
   methods: {
+    closeModal() {
+      this.showModal = false;
+      this.showPopup = false;
+      this.image = [addImageIcon];
+    },
+    previewImages(event) {
+      this.image = [];
+      var pictures = event.target.files;
+      for (var i = 0; i < pictures.length; i++) {
+        var reader = new FileReader();
+        reader.onload = (e) => {
+          this.image.push(e.target.result);
+        };
+        reader.readAsDataURL(pictures[i]);
+      }
+    },
     createIdentityDocument(id) {
       Object.keys(
         this.filterDataEmptyProperty(this.infoClient.identity_document.pass)
@@ -244,6 +294,13 @@ export default {
         this.closeForm();
       }
     },
+    changeOpenModal() {
+      this.showModal = true;
+      this.showPopup = false;
+    },
+    changeOpenPopup() {
+      this.showPopup = true;
+    },
     saveDocFile(e) {
       this.infoClient.doc = e.target.files;
     },
@@ -288,6 +345,14 @@ export default {
       }
       return true;
     },
+    check() {
+      this.showPopup = false;
+    },
+  },
+  showModal: function () {
+    if (this.showModal === false) {
+      this.check();
+    }
   },
 };
 </script>
@@ -320,4 +385,28 @@ export default {
   &.active
     color: var(--btn-blue-color)
     border-bottom: 1.5px solid var(--btn-blue-color)
+.form-avatar
+  width: 1221px
+  height: 793px
+.avatar-block
+  width: 400px
+  height: 400px
+  border-radius: 50%
+.input
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  overflow: hidden
+  z-index: 5
+  opacity: 0
+  cursor: pointer
+.avatar
+  cursor: pointer
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  // background-image: url("../../assets/icons/photo.svg")
+  background-size: cover
+  background-repeat: no-repeat
+  background-position: center
 </style>