estatus de la compra

src/components/ShoppingStatus.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+      
+    <div class="card">
+      <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%;
+}
+.doradoColor{
+  background-color: #bb8800 !important;
+}
+</style>

src/components/dataSection.vue

@@ -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>

src/view/PersonalData.vue

@@ -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;
+  
  }
 }