98 lines
3.1 KiB
Vue
98 lines
3.1 KiB
Vue
<template>
|
|
<div class="vehicle_banner mb-4 text-center">
|
|
<img class="vehicle-image img-fluid" :src="vehicleImageToDisplay" alt="" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "vehicle-banner",
|
|
props: {
|
|
displayGenericVehicleImage: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
cmsWidgetName: String,
|
|
displayVehicleImage: {
|
|
type: String,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
displayUnmatchedVehicleIcon: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
vehicleCategory: {
|
|
type: String,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
},
|
|
computed: {
|
|
vehicleImageToDisplay() {
|
|
if (this.displayVehicleImage !== null) {
|
|
return this.displayVehicleImage;
|
|
}
|
|
if (this.displayGenericVehicleImage) {
|
|
return this.genericVehicleImage;
|
|
}
|
|
if (
|
|
this.$store.getters.vehicle.imageUrl === null ||
|
|
this.$store.getters.vehicle.imageUrl === "NULL" ||
|
|
this.displayUnmatchedVehicleIcon
|
|
) {
|
|
return this.getUnmatchedVehicleIcon();
|
|
}
|
|
|
|
return this.$store.getters.vehicle.imageUrl;
|
|
},
|
|
genericVehicleImage() {
|
|
return this.getCmsContent(this.cmsWidgetName, "GenericVehicleImage");
|
|
},
|
|
carUnmatchedVehicleIcon() {
|
|
return this.getCmsContent(this.cmsWidgetName, "CarUnmatchedVehicleIcon");
|
|
},
|
|
truckUnmatchedVehicleIcon() {
|
|
return this.getCmsContent(this.cmsWidgetName, "TruckUnmatchedVehicleIcon");
|
|
},
|
|
vanUnmatchedVehicleIcon() {
|
|
return this.getCmsContent(this.cmsWidgetName, "VanUnmatchedVehicleIcon");
|
|
},
|
|
commercialUnmatchedVehicleIcon() {
|
|
return this.getCmsContent(this.cmsWidgetName, "CommercialVanUnmatchedVehicleIcon");
|
|
},
|
|
suvUnmatchedVehicleIcon() {
|
|
return this.getCmsContent(this.cmsWidgetName, "SuvUnmatchedVehicleIcon");
|
|
},
|
|
},
|
|
methods: {
|
|
getUnmatchedVehicleIcon() {
|
|
const category = this.vehicleCategory ?? this.$store.getters.vehicle.category;
|
|
switch (category) {
|
|
case this.vehicleCategories.CAR:
|
|
return this.carUnmatchedVehicleIcon;
|
|
case this.vehicleCategories.SUV:
|
|
return this.suvUnmatchedVehicleIcon;
|
|
case this.vehicleCategories.TRUCK:
|
|
return this.truckUnmatchedVehicleIcon;
|
|
case this.vehicleCategories.VAN:
|
|
return this.vanUnmatchedVehicleIcon;
|
|
case this.vehicleCategories.COMMERCIALVAN:
|
|
return this.commercialUnmatchedVehicleIcon;
|
|
default:
|
|
return this.carUnmatchedVehicleIcon;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.vehicle-image {
|
|
max-width: 290px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 132px;
|
|
}
|
|
</style>
|