96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<script>
|
|
import ProductoCantidad from "./ProductoCantidad.vue";
|
|
import { mapGetters, mapState } from "vuex";
|
|
|
|
export default {
|
|
name: "ProductoCard",
|
|
components: { ProductoCantidad },
|
|
props: {
|
|
producto: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('ui', ["show_chismosa"]),
|
|
...mapState('pedido', ["aprobado"]),
|
|
...mapGetters('pedido', ["enChismosa", "cantidad"]),
|
|
fuePedido() {
|
|
return this.enChismosa(this.producto.id);
|
|
},
|
|
cantidadEnChismosa() {
|
|
return this.cantidad(this.producto.id);
|
|
},
|
|
conIconos() {
|
|
return this.producto.economia_solidaria || this.producto.nacional;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="box is-flex is-flex-direction-column" style="height:100%">
|
|
<div class="columns is-mobile">
|
|
<div class="column">
|
|
<p class="title is-6">
|
|
{{ producto.nombre }}
|
|
</p>
|
|
</div>
|
|
<div class="column is-one-quarter has-text-right">
|
|
<p class="has-text-weight-bold has-text-primary block">
|
|
${{ producto.precio }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="columns mt-auto is-justify-content-left is-mobile">
|
|
<div v-if="conIconos" class="column has-text-left">
|
|
<span>
|
|
<img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
|
|
<img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
|
|
</span>
|
|
</div>
|
|
<div class="column mt-auto"
|
|
:class="conIconos ? 'is-three-quarters-mobile is-two-thirds-tablet' : 'is-full'">
|
|
<producto-cantidad
|
|
v-if="!aprobado"
|
|
:producto_id="producto.id"
|
|
:requiere_notas="producto.requiere_notas">
|
|
</producto-cantidad>
|
|
<div class="has-text-centered mt-2" v-if="fuePedido && aprobado">
|
|
<p class="subtitle is-7">{{ cantidadEnChismosa }} en chismosa</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "../../../../node_modules/bulma/sass/utilities/mixins";
|
|
|
|
@include mixins.until(mixins.$desktop) {
|
|
.hidden-until-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include mixins.from(mixins.$desktop) {
|
|
.min-width-from-desktop {
|
|
min-width: 25rem;
|
|
}
|
|
.hidden-from-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include mixins.from(mixins.$tablet) {
|
|
.hidden-from-tablet {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include mixins.mobile() {
|
|
.is-left-mobile {
|
|
float: left;
|
|
}
|
|
}
|
|
</style>
|