felix
/
pedi2
forked from nathalie/pedi2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Agregados botones para cantidad en el modal de agregar producto

This commit is contained in:
Alejandro Tasistro 2022-02-28 13:08:03 -03:00
parent 3bf776b6f7
commit 2f397c88d4
2 changed files with 63 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/productos.css vendored
View File

@ -2,3 +2,9 @@ figure.image.icono {
float: right; float: right;
margin: 4px; margin: 4px;
} }
.is-thin-centered {
width: 50%;
margin-left: auto;
margin-right: auto;
}

32
public/js/productos.js vendored
View File

@ -120,7 +120,8 @@ Vue.component('producto-container', {
<section class="modal-card-body"> <section class="modal-card-body">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-4by3">
<img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'"> <img
v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
</figure> </figure>
<figure v-show="producto.nacional" class="image icono is-32x32"> <figure v-show="producto.nacional" class="image icono is-32x32">
<img src="/assets/uruguay.png"> <img src="/assets/uruguay.png">
@ -133,10 +134,31 @@ Vue.component('producto-container', {
<p class="title is-4" v-text="producto.proveedor"></p> <p class="title is-4" v-text="producto.proveedor"></p>
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p> <p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p> <p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
<button class="button" @click="cant !== 0 ? cant-- : cant">
<span class="icon is-small">
<!-- Habría que ver de poner un ícono de - -->
</span>
<span>-</span>
</button>
</p>
<p class="control">
<input id="cantidad" class="input" type="number" :value=cant style="text-align: center">
</p>
<p class="control">
<button class="button" @click="cant++">
<span class="icon is-small">
<!-- Habría que ver de poner un ícono de + -->
</span>
<span>+</span>
</button>
</p>
</div>
</div> </div>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<button class="button is-success">Agregar a la chismosa</button> <button class="button is-success" @click="agregarProducto">Agregar a la chismosa</button>
<button class="button" @click.capture="cerrar">Cancelar</button> <button class="button" @click.capture="cerrar">Cancelar</button>
</footer> </footer>
</div> </div>
@ -144,7 +166,8 @@ Vue.component('producto-container', {
data() { data() {
return { return {
producto: null, producto: null,
visible: false visible: false,
cant: 0
} }
}, },
computed: { computed: {
@ -159,6 +182,9 @@ Vue.component('producto-container', {
cerrar() { cerrar() {
this.visible = false; this.visible = false;
Event.$emit("migas-pop"); Event.$emit("migas-pop");
},
agregarProducto() {
Event.$emit("producto-add");
} }
}, },
mounted() { mounted() {