82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Producto</th>
|
|
<th><abbr title="Cantidad">C</abbr></th>
|
|
<th><abbr title="Precio Total">$</abbr></th>
|
|
<th></th>
|
|
<th><abbr title="Eliminar"></abbr></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th><abbr title="Bonos Solidarios">B. Solidarios</abbr></th>
|
|
<th>{{ cantidadBonos }}</th>
|
|
<th>{{ totalBonos }}</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
|
|
<th>{{ cantidadBonosDeTransporte }}</th>
|
|
<th>{{ totalBonosDeTransporte }}</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<th>Total total</th>
|
|
<th></th>
|
|
<th>{{ total }}</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
|
|
</tbody>
|
|
</table>
|
|
<p class="has-text-centered" v-show="productos.length == 0">
|
|
Compa, todavía no agregaste nada a la chismosa.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
subpedido: this.$root.pedido
|
|
}
|
|
},
|
|
computed: {
|
|
productos: function() {
|
|
return this.$root.pedido.productos
|
|
},
|
|
cantidadBonosDeTransporte: function() {
|
|
return this.$root.pedido.subtotal_bonos_de_transporte / 15
|
|
},
|
|
totalBonosDeTransporte: function() {
|
|
return this.$root.pedido.subtotal_bonos_de_transporte
|
|
},
|
|
cantidadBonos: function() {
|
|
return this.$root.pedido.subtotal_bonos / 20
|
|
},
|
|
totalBonos: function() {
|
|
return this.$root.pedido.subtotal_bonos
|
|
},
|
|
total: function() {
|
|
return this.$root.pedido.total
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@media (max-width: 719px) {
|
|
.chismosa-tabla {
|
|
max-width: 80vw;
|
|
}
|
|
}
|
|
</style> |