componente direcciones solo para reemplazar

Reviewed-on: #3

package-lock.json

@@ -1392,16 +1392,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1796,17 +1786,6 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1833,34 +1812,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1882,13 +1833,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1953,16 +1897,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1979,21 +1913,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.7",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-          "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          }
         }
       }
     },
@@ -6830,6 +6749,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
@@ -11043,6 +10967,127 @@
         }
       }
     },
+    "vue-loader-v16": {
+<<<<<<< HEAD
+      "version": "npm:vue-loader@16.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
+      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+=======
+      "version": "npm:vue-loader@16.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+      "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+>>>>>>> origin
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+<<<<<<< HEAD
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+=======
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+>>>>>>> origin
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+<<<<<<< HEAD
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+=======
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+>>>>>>> origin
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",

package.json

@@ -17,6 +17,7 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.1",
     "core-js": "^3.6.5",
+    "jquery": "^3.5.1",
     "sweetalert2": "^10.1.0",
     "vue": "^2.6.11",
     "vue-router": "^3.4.3"

src/App.vue

@@ -1,14 +1,11 @@
 <template>
   <div id="app">
-    <Header />
       <router-view></router-view>
-    <Footer />
   </div>
 </template>
 
 <script>
-import Header from './components/Header'
+
-import Footer from './components/Footer'
 
 import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
@@ -20,18 +17,16 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 export default {
-  name: 'app',
+  name: 'app'
-  components: {
-        Header,
-        Footer
-    },
 }
 </script>
 
-<style scoped>
 
-#app {
+<style>
-  
+
+.row {
+  margin: 0 !important;
 }
 
-</style>
+
+</style>

src/components/Directions.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+
+<form class="mt-4" role="form" data-toggle="validator" >
+  
+  <div class="my-3">
+  
+  
+  <div class="row tipoComprobante">
+  <div class="form-check col-4 ">
+  <label class="form-check-label" >
+    Tipo de Comprobante:
+  </label>
+</div>
+<div class="form-check col-4">
+  <input class="form-check-input" type="radio"  id="exampleRadios1" v-model="select" value="ticket">
+  <label class="form-check-label" for="exampleRadios1">
+    Ticket
+  </label>
+</div>
+<div class="form-check col-4">
+  <input class="form-check-input" type="radio"  id="exampleRadios2" v-model="select" value="factura">
+  <label class="form-check-label" for="exampleRadios2">
+   Factura
+  </label>
+</div>
+</div>
+
+
+<div class=" datosFactura" v-if="select == 'factura'">
+    <h3 class="my-5">Direccion de Facturacion</h3>
+    <div class="form-group">
+    <label for="InputNombre1">RFC</label>
+    <input type="text" class="form-control" id="InputRFC"   v-model="Facturacion.RFC">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Nombres</label>
+    <input type="text" class="form-control" id="InputNombres"   v-model="Facturacion.nombres">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Apellidos</label>
+    <input type="email" class="form-control" id="InputApellidos"   v-model="Facturacion.apellidos">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Empresa</label>
+    <input type="text" class="form-control" id="InputEmpresa"   v-model="Facturacion.empresa">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">calle</label>
+    <input type="text" class="form-control" id="InputCalle"   v-model="Facturacion.calle">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Numero Exterior</label>
+    <input type="email" class="form-control" id="InputExterior"   v-model="Facturacion.exterior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Numero Interior</label>
+    <input type="text" class="form-control" id="InputInterior"   v-model="Facturacion.interior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Colonia</label>
+    <input type="text" class="form-control" id="InputColonia"   v-model="Facturacion.colonia">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Provincia o estado</label>
+    <input type="email" class="form-control" id="InputEstado"   v-model="Facturacion.estado">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Pais</label>
+    <input type="text" class="form-control" id="InputPais"   v-model="Facturacion.pais">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Telefono</label>
+    <input type="text" class="form-control" id="InputTelefono"   v-model="Facturacion.telefono">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Correo</label>
+    <input type="email" class="form-control" id="InputCorreo"   v-model="Facturacion.correo">
+  </div>
+</div>
+
+
+
+<div class="row direccionIgual" v-if="select == 'factura'">
+  <div class="form-check col-8 ">
+  <label class="form-check-label" >
+    ¿La direccion de facturacion es la misma a la de envio?
+  </label>
+</div>
+<div class="form-check col-2">
+  <input class="form-check-input" type="radio"  id="exampleRadios3" v-model="sameDirection" value="true">
+  <label class="form-check-label" for="exampleRadios3">
+    Si
+  </label>
+</div>
+<div class="form-check col-2">
+  <input class="form-check-input" type="radio"  id="exampleRadios4" v-model="sameDirection" value="false">
+  <label class="form-check-label" for="exampleRadios4">
+   No
+  </label>
+</div>
+</div>
+
+
+
+<div class=" datosEnvio" v-if="select == 'ticket' || (sameDirection == 'false' && select == 'factura')">
+    <h3 class="my-5">Direccion de Envio</h3>
+    
+
+  <div class="form-group">
+    <label for="InputApellido1">Nombres</label>
+    <input type="text" class="form-control" id="InputNombres2"   v-model="Envio.nombres">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Apellidos</label>
+    <input type="email" class="form-control" id="InputApellidos2"   v-model="Envio.apellidos">
+  </div>
+
+ <div class="form-group">
+    <label for="InputCorreo1">Correo</label>
+    <input type="email" class="form-control" id="InputCorreo2"   v-model="Envio.correo">
+  </div>
+
+
+  <div class="form-group">
+    <label for="InputApellido1">calle</label>
+    <input type="text" class="form-control" id="InputCalle2"   v-model="Envio.calle">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Numero Exterior</label>
+    <input type="email" class="form-control" id="InputExterior2"   v-model="Envio.exterior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Numero Interior</label>
+    <input type="text" class="form-control" id="InputInterior2"   v-model="Envio.interior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Colonia</label>
+    <input type="text" class="form-control" id="InputColonia2"   v-model="Envio.colonia">
+  </div>
+
+<div class="form-group">
+    <label for="InputApellido1">Codigo Postal</label>   
+    <input type="text" class="form-control" id="InputPostal"   v-model="Envio.postal">
+  </div>
+
+
+  <div class="form-group">
+    <label for="InputCorreo1">Provincia o estado</label>
+    <input type="email" class="form-control" id="InputEstado2"   v-model="Envio.estado">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Pais</label>
+    <input type="text" class="form-control" id="InputPais2"   v-model="Envio.pais">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Telefono</label>
+    <input type="text" class="form-control" id="InputTelefono2"   v-model="Envio.telefono">
+  </div>
+  
+</div>
+
+
+
+  </div>
+</form>
+</div>
+
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            sameDirection:'',
+            select:'',
+
+            Facturacion:
+                {
+                    RFC:'',
+                    nombres:'',
+                    apellidos:'',
+                    empresa:'',
+                    calle:'',
+                    exterior:'',
+                    interior:'',
+                    colonia:'',
+                    estado:'',
+                    pais:'',
+                    telefono:'',
+                    correo:''
+
+                },
+            Envio:{
+                RFC:'',
+                    nombres:'',
+                    apellidos:'',
+                    postal:'',
+                    calle:'',
+                    exterior:'',
+                    interior:'',
+                    colonia:'',
+                    estado:'',
+                    pais:'',
+                    telefono:'',
+                    correo:''
+            }    
+            
+        }
+    }
+
+}
+</script>
+
+<style>
+
+</style>

src/components/Payment.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+        <h3 class="my-3">Pago</h3>
+
+        <form class="form-check">
+            
+
+            <div class="form-check">
+  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="LineaUnam"   v-model="metodo">
+  <label class="form-check-label" for="exampleRadios1">
+   Pago en linea UNAM
+  </label>
+                </div>
+
+
+                <div class="form-check">
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="Ficha" v-model="metodo">
+                <label class="form-check-label" for="exampleRadios2">
+                  Ficha de Deposito
+                </label>
+
+                </div>
+                            
+            
+            <div class="form-check">
+             <input class="form-check-input" type="checkbox" v-model="terminos" id="defaultCheck1">
+  <label class="form-check-label" for="defaultCheck1">
+   Estoy deacuerdo con los Terminos de servicio y los acepto sin reservas
+  </label>
+            </div>
+
+  <button type="button"  class="btn btn-primary ml-4">Pedido con obligacion de pago</button>
+
+            <div v-if="(metodo)  != '' && (terminos) == true " class="d-flex justify-content-right">
+  
+  <button type="submit" @click="NextStep()" class="btn btn-success">continuar</button>
+</div>
+        </form>
+
+      
+
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            metodo:'',
+            terminos:false
+        }
+    }
+
+}
+</script>
+
+<style>
+.form-check div{
+    margin: 1rem 0;
+}
+
+</style>

src/components/ShippingSection.vue

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

src/components/ShoppingNav.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="BotonesShopping" class="row ">
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris prueba text-white"> Datos Personales  </router-link></div>
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Direcciones  </router-link></div>
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Envio  </router-link></div>
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Pago  </router-link></div>
+  
+  </div>
+</template>
+
+<script>
+const $ = require('jquery')
+
+
+export default {
+  props:['currentStep'],
+data(){
+  return{
+    
+  }
+},
+methods:{
+
+ color(etapa){
+
+var result = $(".colores:first")
+
+  result.removeClass("gris").toggleClass("azul")
+
+ console.log(result)
+ console.log(etapa)
+
+ }
+
+},
+
+ created(){
+    
+this.color(this.currentStep)
+
+
+  }
+}
+</script>
+<style >
+
+.verde{
+    background-color: #29B026 !important;
+}
+.azul{
+    background-color: #1B3D70 !important;
+}
+.gris{
+    background-color: #C4C4C4 !important;
+}
+
+.navshop  a {
+ width: 100%;
+
+}
+
+@media screen and (max-width:1023px ) and (min-width: 760px) {
+  .navshop a {
+    font-size: .6rem !important;
+    }
+}
+
+
+
+</style>

src/components/ShoppingStatus.vue

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

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/icons.js

@@ -0,0 +1,30 @@
+import {library} from '@fortawesome/fontawesome-svg-core'
+import {
+    faUserSecret,
+    faUser,
+    faLock,
+    faGraduationCap,
+    faExternalLinkAlt,
+    faKey,
+    faExclamationCircle,
+    faEnvelope,
+    faShoppingCart,
+    faTrash,
+    faMapMarkerAlt,
+    faPhoneAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+
+library.add(faUserSecret)
+library.add(faUser)
+library.add(faLock)
+library.add(faExternalLinkAlt)
+library.add(faGraduationCap)
+library.add(faExclamationCircle)
+library.add(faKey)
+library.add(faEnvelope)
+library.add(faShoppingCart)
+library.add(faTrash)
+library.add(faMapMarkerAlt)
+library.add(faPhoneAlt)
+

src/main.js

@@ -1,36 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './routes'
+import "bootstrap"
+import "bootstrap/dist/css/bootstrap.min.css"
 
-import {library} from '@fortawesome/fontawesome-svg-core'
-import {
-    faUserSecret,
-    faUser,
-    faLock,
-    faGraduationCap,
-    faExternalLinkAlt,
-    faKey,
-    faExclamationCircle,
-    faEnvelope,
-    faShoppingCart,
-    faTrash,
-    faMapMarkerAlt,
-    faPhoneAlt
-} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
-
+import "./icons"
-library.add(faUserSecret)
-library.add(faUser)
-library.add(faLock)
-library.add(faExternalLinkAlt)
-library.add(faGraduationCap)
-library.add(faExclamationCircle)
-library.add(faKey)
-library.add(faEnvelope)
-library.add(faShoppingCart)
-library.add(faTrash)
-library.add(faMapMarkerAlt)
-library.add(faPhoneAlt)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 

src/routes.js

@@ -2,6 +2,11 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
+<<<<<<< HEAD
+import PersonalData from './view/PersonalData.vue'
+=======
+import Cart from './view/Cart.vue'
+>>>>>>> origin
 
 const routes = [
     {
@@ -14,6 +19,17 @@ const routes = [
         component: Home,
         name: 'home'
     },
+    {
+<<<<<<< HEAD
+        path: '/datosPersonales',
+        component: PersonalData,
+        name: 'personalData'
+=======
+        path: '/cart',
+        component: Cart,
+        name: 'cart'
+>>>>>>> origin
+    }
 ]
 
 Vue.use(VueRouter)

src/view/Cart.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="my-5">
+        <div class="container d-flex flex-wrap justify-content-between">
+            <div class="cont-resum-shop py-2 mb-4">
+                <h2 class="ml-3">Carrito</h2>
+                <hr>
+                <div class="d-flex justify-content-between mx-4 my-4">
+                    <div class="d-flex">
+                        <img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
+                        <p class="mx-4">
+        Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</b></span>
+                        </p>
+                    </div>
+                    <div class="d-flex flex-wrap flex-column align-items-center">
+                        <div>
+                            <input type="number" class="inp-number p-1 d-inline-block" name="" id="">
+                        </div>
+                        <span class="my-4"><b>$180</b></span>
+                        <div>
+                            <a href="#" class="text-dark">
+                                <font-awesome-icon icon="trash" class=""/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex justify-content-between mx-4 my-4">
+                    <div class="d-flex">
+                        <img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
+                        <p class="mx-4">
+        Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</b></span>
+                        </p>
+                    </div>
+                    <div class="d-flex flex-wrap flex-column align-items-center">
+                        <div>
+                            <input type="number" class="inp-number p-1 d-inline-block" name="" id="">
+                        </div>
+                        <span class="my-4"><b>$180</b></span>
+                        <div>
+                            <a href="#" class="text-dark">
+                                <font-awesome-icon icon="trash" class=""/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="g-sec bg-light py-4 px-4 d-flex flex-column align-self-start align-items-center" style="">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">2 Artículos<br>Envío</p>
+                    <p>$980<br>Pendiente</p>
+                </div>
+                <hr style="width:100%">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">Total(IVA incluido)<br>$980</p>
+                </div>
+                <hr style="width:100%">
+                <button class="btn btn-primary mx-auto"><b>IR A LA CAJA</b></button>
+            </div>
+        </div>
+        <div class="container mt-3">
+            <div class="d-inline-block">
+                <a href="#">
+                    <p>
+                        Continuar la compra
+                    </p>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.cont-resum-shop {
+    /* background-color: skyblue; */
+    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    /* border-radius: 5px; */
+    /* font-size: 15px; */
+}
+.inp-number {
+    width: 55px;
+    border-radius: 5px;
+    border: 0.3px solid lightgray;
+}
+.price-style {
+    color: #6C59FE;
+}
+.g-sec {
+    -webkit-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+}
+</style>

src/view/Home.vue

@@ -1,15 +1,22 @@
 <template>
+<div>
+<Header></Header>
 <div class="container my-5">
-  <h1>Hola</h1>
+  <h1 class="text-center">Home</h1>
+</div>
+<Footer></Footer>
 </div>
 </template>
 
 <script>
-export default {
+import Header from '../components/Header'
+import Footer from '../components/Footer'
 
+
+export default {
+components: {
+        Header,
+        Footer
+    }
 }
 </script>
-
-<style>
-
-</style>

src/view/PersonalData.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <DataSection></DataSection>
+
+
+</section>
+
+<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>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+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,
+        ShoppingStatus,
+        DataSection
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>