Amir
88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<div v-if="props.lelongBidProp.file_marhun_main == null" class="text-danger false-style image-style">
|
|
<span class="material-symbols-rounded icon-image">
|
|
cancel
|
|
</span>
|
|
<div>Gambar Belum Di Muat Naik</div>
|
|
</div>
|
|
<div v-else-if="stringGambar == 0" class="text-primary bg-light image-style">
|
|
<span class="material-symbols-rounded icon-image">
|
|
cycle
|
|
</span>
|
|
<div>No Image in Storage</div>
|
|
</div>
|
|
<div v-else class="images" v-viewer style="cursor:pointer;">
|
|
<img :src="stringGambarMarhun" class="image-style" alt="gambar-marhun">
|
|
</div>
|
|
<div class="my-2">{{ props.lelongBidProp.norujukan }}</div>
|
|
<div class="marhun-div-style">{{ props.lelongBidProp.marhun }}</div>
|
|
<div class="my-2">{{ props.lelongBidProp.berat }}g</div>
|
|
<div class="my-2"><strong>N. Marhun: </strong>RM{{
|
|
props.lelongBidProp.nilaimarhun
|
|
?.toString()
|
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
|
|
}}</div>
|
|
<div class="my-2"><strong>H. Asas: </strong>RM{{
|
|
props.lelongBidProp.hargaasas
|
|
?.toString()
|
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
|
|
}}</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import axios from "axios";
|
|
|
|
const props = defineProps({
|
|
lelongBidProp: Object,
|
|
})
|
|
|
|
const stringGambar = ref();
|
|
const stringGambarMarhun = ref();
|
|
|
|
function getPhotoMarhun() {
|
|
if (props.lelongBidProp.file_marhun_main != null) {
|
|
axios.get("/showPhotoMarhun", {
|
|
params: {
|
|
filemarhun_id: props.lelongBidProp.file_marhun_main.id,
|
|
norujukan: props.lelongBidProp.norujukan,
|
|
},
|
|
}).then((response) => {
|
|
stringGambar.value = response.data;
|
|
stringGambarMarhun.value = "data:image/png;base64, " + stringGambar.value;
|
|
}).catch((error) => { console.log(error); });
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getPhotoMarhun();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.image-style {
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 245px;
|
|
height: 137.812px;
|
|
border-start-start-radius: 7px;
|
|
border-start-end-radius: 7px;
|
|
}
|
|
|
|
.marhun-div-style {
|
|
max-width: 225px;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.icon-image {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.false-style {
|
|
background: #fdf3f3;
|
|
}
|
|
</style> |