130 lines
2.7 KiB
Vue
130 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="position-relative">
|
||
|
|
<form action="">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12" style="margin: 0 25%; max-width: 300px">
|
||
|
|
<img :src="src" class="img-thumbnail" />
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<h5 class="font-weight-bold">{{ value.title }}</h5>
|
||
|
|
<p class="text-justify">{{ value.description }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="popUp-tab__buttons">
|
||
|
|
<div class="d-flex justify-content-between flex-grow-1">
|
||
|
|
<span> </span>
|
||
|
|
|
||
|
|
<div class="d-flex">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="popUp-tab__clear btn"
|
||
|
|
@click.prevent="closeModal"
|
||
|
|
>
|
||
|
|
لغو
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { propertyMixin } from "~/entity/mixins/propertyMixin";
|
||
|
|
|
||
|
|
// import ImageUploader from "vue-image-upload-resize";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [propertyMixin],
|
||
|
|
|
||
|
|
props: {
|
||
|
|
data: { type: Object, default: () => ({}) },
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
const res = this.getPropertyValue(
|
||
|
|
this.data.entity,
|
||
|
|
this.data.keyName,
|
||
|
|
this.data.index
|
||
|
|
);
|
||
|
|
|
||
|
|
if (res) this.value = res;
|
||
|
|
this.src = import.meta.env.VITE_MEDIA_BASE_URL + this.value.file;
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
src: "",
|
||
|
|
value: {
|
||
|
|
title: null,
|
||
|
|
description: null,
|
||
|
|
file: null,
|
||
|
|
},
|
||
|
|
hasImage: false,
|
||
|
|
imageUrl: undefined,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
// propertyObj(){
|
||
|
|
// return this.value;
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
setImage: function (file) {
|
||
|
|
this.hasImage = true;
|
||
|
|
this.imageUrl = file;
|
||
|
|
this.saveFile(file.info);
|
||
|
|
},
|
||
|
|
|
||
|
|
// ...mapActions("entity",['SAVE_PROPERTY']),
|
||
|
|
// saveProperty(){
|
||
|
|
// let self = this;
|
||
|
|
// let property = this.propertyObj;
|
||
|
|
// let index = 0;
|
||
|
|
// if(property.id){
|
||
|
|
// index = property.index;
|
||
|
|
// }
|
||
|
|
// this.SAVE_PROPERTY(property).then(response => {
|
||
|
|
// self.$emit('change', {item: response.data, type: 'necessities', index: index});
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.picture-input input[type="file"],
|
||
|
|
#fileInput {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-uploader-container {
|
||
|
|
position: relative;
|
||
|
|
border: 2px dashed #eee;
|
||
|
|
padding: 0.2em;
|
||
|
|
|
||
|
|
&.hide-preview {
|
||
|
|
.upload-label {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: auto !important;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-label img {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.img-preview {
|
||
|
|
width: 300px;
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
max-height: 200px;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|