<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>