Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 casnet1
|
bd1d82e37a | ||
|
casnet1
|
291ba23569 | ||
|
casnet1
|
0e23f1ebbe |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="my-3">Metodo de Envio</h3>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
</div>
|
||||
</th>
|
||||
<td class="d-flex align-items-center">
|
||||
<img src='../assets/DHL-Logo.png' width="70px" alt="">
|
||||
<p class="mb-0">DHL Express</p>
|
||||
</td>
|
||||
<td>{{tiempo}} dias</td>
|
||||
<td>${{envio}} IVA incl.</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 mt-4">
|
||||
<p>Si deseas dejarnos un comentaro acerca de su pedido, por favor escribalo a continuacion</p>
|
||||
<div class="container">
|
||||
<div class="comment">
|
||||
<textarea class="textinput" placeholder="Comentario"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
envio:'232.00',
|
||||
tiempo:'4'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 820px;
|
||||
margin: 0px auto;
|
||||
|
||||
}
|
||||
|
||||
.comment {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.commenter {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.commenter img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.comment-text-area {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.textinput {
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<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>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<form class="mt-4" role="form" data-toggle="validator" @submit.prevent="checkForm">
|
||||
|
||||
<div class="my-3">
|
||||
<div class="row ">
|
||||
<div class="form-check col-4 ">
|
||||
<input class="form-check-input" type="radio" id="exampleRadios1" v-model="select" value="invitado" checked>
|
||||
<label class="form-check-label" for="exampleRadios1">
|
||||
Invitado
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check col-4">
|
||||
<input class="form-check-input" type="radio" id="exampleRadios2" v-model="select" value="cuenta">
|
||||
<label class="form-check-label" for="exampleRadios2">
|
||||
Ya Tengo Cuenta
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check col-4">
|
||||
<input class="form-check-input" type="radio" id="exampleRadios3" v-model="select" value="newCuenta">
|
||||
<label class="form-check-label" for="exampleRadios2">
|
||||
Crear Cuenta
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="submitted === true">
|
||||
<div v-if="hasErrors" class="error">
|
||||
<strong>Se han producido los siguientes errores:</strong>
|
||||
<ul>
|
||||
<li v-bind:key="error" v-for="error in errors">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-else class="correcto">
|
||||
<strong>Enviado!</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="select == 'invitado' ">
|
||||
<div class="form-group">
|
||||
<label for="InputNombre1">Nombres</label>
|
||||
<input type="text" class="form-control" id="InputNombre1" placeholder="Ingresa tu nombre" v-model="invitado.nombre">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputApellido1">Apellidos</label>
|
||||
<input type="text" class="form-control" id="InputApellido1" placeholder="Ingresa tus apellidos" v-model="invitado.apellido">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputCorreo1">Correo</label>
|
||||
<input type="email" class="form-control" id="InputCorreo1" placeholder="Enter email" v-model="invitado.correo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div v-if="select == 'cuenta' ">
|
||||
<div class="form-group">
|
||||
<label for="InputCorreo2" >Correo</label>
|
||||
<input type="email" class="form-control" id="InputCorreo2" placeholder="Enter email" v-model="cuenta.correo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputPassword2">Contraseña</label>
|
||||
<input type="password" class="form-control" id="InputPassword1" placeholder="Password" v-model="cuenta.contrasena">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div v-if="select == 'newCuenta' ">
|
||||
<div class="form-group">
|
||||
<label for="InputNombre3">Nombres</label>
|
||||
<input type="email" class="form-control" id="InputNombre3" v-model="newCuenta.nombre" placeholder="Ingresa tu nombre">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputApellido3">Apellidos</label>
|
||||
<input type="email" class="form-control" id="InputApellido3" v-model="newCuenta.apellido" placeholder="Ingresa tus apellidos">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="InputCorreo3">Correo</label>
|
||||
<input type="email" class="form-control" id="InputCorreo3" v-model="newCuenta.correo" placeholder="Ingresa tu correo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Fecha de Nacimiento</label>
|
||||
<input class="form-control" type="date" value="2011-08-19" id="dataEjemploFecha" v-model="newCuenta.nacimiento">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Contraseña</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" v-model="newCuenta.contrasena" placeholder="Enter email">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="select != ''">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="check.ofertas" >
|
||||
<label class="form-check-label" for="exampleCheck1">Recibir ofertas de nuestros socios</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck2" v-model="check.suscribirse" >
|
||||
<label class="form-check-label" for="exampleCheck2">Suscribirse a nuestro boletín de noticias</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <pre>{{$data}}</pre> -->
|
||||
|
||||
<div v-if="(invitado.nombre && invitado.apellido && invitado.correo)
|
||||
|| (cuenta.correo && cuenta.contrasena)
|
||||
|| (newCuenta.nombre && newCuenta.apellido && newCuenta.correo && newCuenta.nacimiento && newCuenta.contrasena) != ''">
|
||||
<button type="submit" @click="NextStep()" class="btn btn-success">continuar</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
continuar:false,
|
||||
select:'',
|
||||
errors:[], submitted:false,
|
||||
invitado:{
|
||||
nombre:'',
|
||||
apellido:'',
|
||||
correo:''
|
||||
},
|
||||
cuenta:{
|
||||
correo:'',
|
||||
contrasena:''
|
||||
},
|
||||
newCuenta:{
|
||||
nombre:'',
|
||||
apellido:'',
|
||||
correo:'',
|
||||
nacimiento:'',
|
||||
contrasena:''
|
||||
},
|
||||
check:{
|
||||
ofertas:false,
|
||||
suscribirse:false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
checkForm() {
|
||||
this.submitted = true;
|
||||
switch(this.select){
|
||||
case 'invitado':
|
||||
console.log(this.select)
|
||||
break
|
||||
|
||||
case 'cuenta':
|
||||
console.log(this.select)
|
||||
break
|
||||
|
||||
case 'newCuenta':
|
||||
console.log(this.select)
|
||||
break
|
||||
}
|
||||
this.continuar = true
|
||||
},
|
||||
NextStep(){
|
||||
let pagina = this.$router.currentRoute.name
|
||||
switch(pagina){
|
||||
case 'personalData':
|
||||
this.$router.push({name:'home'})
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
hasError(){
|
||||
return this.errors.length;
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log(this.$router.currentRoute)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+16
-20
@@ -9,29 +9,17 @@
|
||||
<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
|
||||
<ShoppingNav currentStep=2></ShoppingNav>
|
||||
|
||||
<form class="mt-4">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
<DataSection></DataSection>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 bg-primary">
|
||||
<h3 class="text-center">status</h3>
|
||||
<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
|
||||
<!-- <h3 class="text-center">status</h3> -->
|
||||
<ShoppingStatus></ShoppingStatus>
|
||||
</aside>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -44,21 +32,29 @@
|
||||
import Header from '../components/Header'
|
||||
import Footer from '../components/Footer'
|
||||
import ShoppingNav from '../components/ShoppingNav'
|
||||
|
||||
import DataSection from '../components/dataSection'
|
||||
import ShoppingStatus from '../components/ShoppingStatus'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Footer,
|
||||
ShoppingNav
|
||||
ShoppingNav,
|
||||
ShoppingStatus,
|
||||
DataSection
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#CompraStatus{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width:760px ) {
|
||||
#CompraStatus{
|
||||
margin-top: 2rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user