90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<script>
|
|
import ProductoCantidad from "./ProductoCantidad.vue";
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
name: "ProductoCard",
|
|
components: { ProductoCantidad },
|
|
props: {
|
|
producto: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('pedido',["enChismosa", "cantidad"]),
|
|
fuePedido() {
|
|
return this.enChismosa(this.producto.id);
|
|
},
|
|
cantidadEnChismosa() {
|
|
return this.cantidad(this.producto.id);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
|
|
<div class="box" style="height:100%">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p class="title is-6">
|
|
{{ producto.nombre }}
|
|
</p>
|
|
<span class="subtitle is-7 hidden-from-tablet" v-if="fuePedido">{{ cantidadEnChismosa }}</span>
|
|
</div>
|
|
<div class="column is-one-quarter has-text-right">
|
|
<p class="has-text-weight-bold has-text-primary">
|
|
<span class="is-left-mobile">
|
|
<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>
|
|
$<span v-text="producto.precio"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<footer class="columns">
|
|
<div class="column is-three-quarters">
|
|
<producto-cantidad
|
|
:producto_id="producto.id"
|
|
:requiere_notas="producto.requiere_notas">
|
|
</producto-cantidad>
|
|
</div>
|
|
<div class="column">
|
|
<p class="subtitle is-7 is-hidden-mobile" v-if="fuePedido">{{ cantidadEnChismosa }} en chismosa</p>
|
|
</div>
|
|
</footer>
|
|
</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>
|