diff --git a/src/assets/icons/camera.svg b/src/assets/icons/camera.svg
new file mode 100644
index 0000000..d2ff0e4
--- /dev/null
+++ b/src/assets/icons/camera.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/computer.svg b/src/assets/icons/computer.svg
new file mode 100644
index 0000000..a061306
--- /dev/null
+++ b/src/assets/icons/computer.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/photo.svg b/src/assets/icons/photo.svg
new file mode 100644
index 0000000..98069ba
--- /dev/null
+++ b/src/assets/icons/photo.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue
index 637ff11..9a30140 100644
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/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();
+ }
},
};
@@ -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