[WIP] Добавил отображение данных с бэка на форме страховки
This commit is contained in:
megavrilinvv
@@ -0,0 +1,118 @@
|
||||
<template lang="pug">
|
||||
medical-form-wrapper(
|
||||
title="Страховка",
|
||||
:is-edit="isEdit",
|
||||
:open-edit="openEdit",
|
||||
:cancel="cancelEdit"
|
||||
)
|
||||
.form-wrap.gap-24.w-full
|
||||
.data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
|
||||
.font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
|
||||
.flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
|
||||
.label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
|
||||
.avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'photo'")
|
||||
img.avatar.object-cover(
|
||||
v-if="basic[insurance.insuranceKey][field.key]",
|
||||
:src="basic[insurance.insuranceKey][field.key]",
|
||||
alt="AV"
|
||||
)
|
||||
.replace-photo.font-medium.text-base.cursor-pointer(
|
||||
v-if="isEdit"
|
||||
) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
|
||||
.flex.flex-col.relative(v-else)
|
||||
base-input(
|
||||
v-model="basic[insurance.insuranceKey][field?.key]",
|
||||
@update:model-value="checkChangeInput",
|
||||
:disabled="!isEdit",
|
||||
:standout="!isEdit",
|
||||
:outlined="isEdit",
|
||||
:type="field.type",
|
||||
:width="300",
|
||||
text-color="black"
|
||||
)
|
||||
.flex.font-medium.text-smm.absolute.top-10(
|
||||
v-if="basic?.benefit[insurance?.discount]",
|
||||
:style="{color: 'var(--font-grey-color)'}"
|
||||
)
|
||||
span Процент скидки:
|
||||
span(
|
||||
:style="{color: 'var(--font-dark-blue-color)'}"
|
||||
) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
|
||||
import BaseAvatar from "@/components/base/BaseAvatar.vue";
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
|
||||
export default {
|
||||
name: "InsuranceForm",
|
||||
components: { MedicalFormWrapper, BaseAvatar, BaseInput },
|
||||
data() {
|
||||
return {
|
||||
insuranceConfig: baseInsuranceForm,
|
||||
isCheckChange: false,
|
||||
isEdit: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
url: "getUrl",
|
||||
initDataBasic: "getBasicData",
|
||||
}),
|
||||
...mapState({
|
||||
basic: (state) => state.medical.basicData,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
checkChangeInput() {
|
||||
let initData = JSON.stringify(this.initDataBasic);
|
||||
let changeData = JSON.stringify(this.basic);
|
||||
if (initData !== changeData) {
|
||||
this.isCheckChange = true;
|
||||
} else {
|
||||
this.isCheckChange = false;
|
||||
}
|
||||
},
|
||||
cancelEdit() {
|
||||
this.isEdit = false;
|
||||
},
|
||||
openEdit() {
|
||||
this.isEdit = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.select
|
||||
width: 324px
|
||||
|
||||
.avatar-field
|
||||
min-width: 324px
|
||||
|
||||
.avatar
|
||||
height: 100%
|
||||
|
||||
.replace-photo
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.input
|
||||
color: purple
|
||||
|
||||
.form-wrap
|
||||
display: grid
|
||||
grid-template-columns: repeat(3, 1fr)
|
||||
grid-template-rows: repeat(1, 1fr)
|
||||
@media(max-width: 1900px)
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
grid-template-rows: repeat(2, 1fr)
|
||||
@media(max-width: 1320px)
|
||||
grid-template-columns: repeat(1, 1fr)
|
||||
grid-template-rows: repeat(3, 1fr)
|
||||
|
||||
.label-field
|
||||
color: var(--font-grey-color)
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template lang="pug">
|
||||
medical-form-wrapper(
|
||||
title="Страховка"
|
||||
)
|
||||
.form-wrap.gap-24.w-full(@click="click")
|
||||
.data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
|
||||
.font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
|
||||
.flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
|
||||
.label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
|
||||
.avatar-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
|
||||
base-avatar(:size="40")
|
||||
//- img.avatar.object-cover(
|
||||
//- v-if="basic[insurance.insuranceKey]"
|
||||
//- alt="AV"
|
||||
//- )
|
||||
//- span(v-else) {{ avatar }}
|
||||
.replace-photo.font-medium.text-base.cursor-pointer
|
||||
|
||||
base-input(
|
||||
v-model="basic[insurance.insuranceKey][field.key]"
|
||||
:type="field.type"
|
||||
:width="300"
|
||||
text-color="black"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
|
||||
import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/configMedical";
|
||||
import BaseAvatar from "@/components/base/BaseAvatar.vue";
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "BasicDataForm",
|
||||
components: { MedicalFormWrapper, BaseAvatar, BaseInput },
|
||||
data() {
|
||||
return {
|
||||
insuranceConfig: baseInsuranceForm,
|
||||
isCheckChange: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
url: "getUrl",
|
||||
// avatar: "getAvatar",
|
||||
initDataBasic: "getBasicData",
|
||||
}),
|
||||
...mapState({
|
||||
basic: (state) => state.medical.basicData,
|
||||
// basic: (state) => state.medical.medicalCard.person,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
console.log(this.basic);
|
||||
},
|
||||
// checkChangeInput() {
|
||||
// let initInsurance = JSON.stringify(this.initDataBasic);
|
||||
// let changeInsurance = JSON.stringify(this.basic);
|
||||
// if (initInsurance !== changeInsurance) {
|
||||
// this.isCheckChange = true;
|
||||
// } else {
|
||||
// this.isCheckChange = false;
|
||||
// }
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.select
|
||||
width: 324px
|
||||
.avatar-field
|
||||
min-width: 324px
|
||||
.avatar
|
||||
height: 100%
|
||||
border-radius: 50%
|
||||
.replace-photo
|
||||
color: var(--btn-blue-color)
|
||||
.input
|
||||
color: purple
|
||||
.form-wrap
|
||||
display: grid
|
||||
grid-template-columns: repeat(3, 1fr)
|
||||
grid-template-rows: repeat(1, 1fr)
|
||||
@media(max-width: 1900px)
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
grid-template-rows: repeat(2, 1fr)
|
||||
@media(max-width: 1320px)
|
||||
grid-template-columns: repeat(1, 1fr)
|
||||
grid-template-rows: repeat(3, 1fr)
|
||||
.label-field
|
||||
color: var(--font-grey-color)
|
||||
</style>
|
||||
@@ -2,14 +2,17 @@
|
||||
.flex.flex-col.gap-y-2.wrapper
|
||||
basic-data-form
|
||||
documents-form
|
||||
insurance-form
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue";
|
||||
import DocumentsForm from "@/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue";
|
||||
import InsuranceForm from "@/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue";
|
||||
|
||||
export default {
|
||||
name: "MedicalBasicDataWrapper",
|
||||
components: { BasicDataForm, DocumentsForm },
|
||||
components: { BasicDataForm, DocumentsForm, InsuranceForm },
|
||||
};
|
||||
</script>
|
||||
<style lang="sass" scoped>
|
||||
|
||||
Reference in New Issue
Block a user