nathalie
/
pedi2
3
3
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Agregado input para cantidad con botones, todavia sin logica

This commit is contained in:
Alejandro Tasistro 2024-08-29 21:43:13 -03:00
parent 9d96010752
commit 937e7ec16c
1 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
resources/js/components/ProductosContainer.vue
View File

@ -1,22 +1,55 @@
<template>
<div v-show="visible" class="container is-max-desktop">
<div class="columns is-multiline is-mobile">
<div v-for="(producto,i) in productos" :key="i" class="block column is-full">
<div v-for="(producto,i) in productos" :key="i" class="block column is-half-desktop is-full-mobile is-full-tablet">
<div @click.capture="seleccionarProducto(producto)" class="box" style="height:100%">
<div class="columns">
<div class="column is-half">
<div class="column is-three-quarters">
<p class="title is-6">
{{ producto.nombre }}
<img v-show="producto.nacional" height="20px" width="20px" src="/assets/uruguay.png" />
<img v-show="producto.economia_solidaria" height="20px" width="20px" src="/assets/solidaria.png">
</p>
<p class="subtitle is-7" v-text="producto.proveedor"></p>
</div>
<div class="column is-half has-text-right">
<p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
<p class="subtitle is-7" v-if="producto.cantidad != 0">{{ producto.cantidad }} en chismosa</p>
</p>
<p class="subtitle is-7" v-text="producto.proveedor"></p>
</div>
<div class="column is-one-quarter has-text-right">
<p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
<p class="subtitle is-7" v-if="producto.cantidad !== 0">{{ producto.cantidad }} en chismosa</p>
</div>
</div>
<footer class="columns">
<div class="column is-three-quarters">
<div class="field has-addons">
<div class="control">
<button class="button is-small">
<i class="fa fa-solid fa-minus"></i>
</button>
</div>
<div class="control">
<input id="cantidad" v-model="producto.cantidad" class="input is-small" type="number" style="text-align: center">
</div>
<div class="control">
<button class="button is-small">
<i class="fa fa-solid fa-plus"></i>
</button>
</div>
<button class="button is-small is-success ml-3">
<span class="icon">
<i class="fas fa-check"></i>
</span>
</button>
<button class="button is-small is-danger ml-3">
<span class="icon">
<i class="fas fa-trash-alt"></i>
</span>
</button>
</div>
</div>
<div class="column is-one-quarter has-text-right">
<p>
<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"/>
</p>
</div>
</footer>
</div><!-- END BOX -->
</div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS -->
@ -67,4 +100,4 @@ export default {
}
}
}
</script>
</script>