casnet1
109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<div class="card sombra">
|
|
<div class="card-body">
|
|
|
|
|
|
<h2 class="card-title">Mi Compra</h2>
|
|
<div class="my-5">
|
|
<div>
|
|
<div v-if="detalles == false">
|
|
<p class="card-text ">Tienes {{articulos.length}} Articulo(s)</p>
|
|
<a @click="detalle()" class="text-primary">mostrar detalles</a>
|
|
</div>
|
|
|
|
<div v-if="detalles == true">
|
|
<ul class="productos">
|
|
<li v-for="articulo in articulos" :key="articulo.id" >
|
|
<p>{{articulo.nombre}}</p>
|
|
<div class="d-flex justify-content-between">
|
|
<p>{{articulo.cantidad}}pz.</p>
|
|
<p>${{articulo.precio * articulo.cantidad}}</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<a @click="detalle()" class="text-primary">ocultar detalles</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between">
|
|
<p >Subtotal </p>
|
|
<p >${{SubTotal}}</p>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<p> Envio </p>
|
|
<p>${{Envio}}</p>
|
|
</div>
|
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center border-top border-bottom">
|
|
<p> Total </p>
|
|
<p>${{Total}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-footer bg-transparent border-top-0 d-flex justify-content-center">
|
|
<a href="#" class="btn doradoColor text-white my-3">Modificar</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
detalles:false,
|
|
articulos:[
|
|
{
|
|
id:0,
|
|
nombre:'ejemploq',
|
|
cantidad:'2',
|
|
precio:'654.00'
|
|
},
|
|
{
|
|
id:1,
|
|
nombre:'asdsa',
|
|
cantidad:'3',
|
|
precio:'4654.00'
|
|
}
|
|
],
|
|
SubTotal:'00.00',
|
|
Envio:'00.00',
|
|
Total:'00.00'
|
|
|
|
}
|
|
},
|
|
methods:{
|
|
detalle(){
|
|
this.detalles = !this.detalles
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.productos{
|
|
list-style: none;
|
|
padding-left: 0%;
|
|
}
|
|
.sombra{
|
|
-webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
|
|
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
|
|
box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
|
|
}
|
|
.doradoColor{
|
|
background-color: #bb8800 !important;
|
|
}
|
|
</style> |