actualizacion de cambios

Reviewed-on: #1

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",
@@ -10978,6 +10968,7 @@
       }
     },
     "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==",
@@ -11000,13 +10991,39 @@
           "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": {
@@ -11038,12 +11055,26 @@
           "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",

src/components/Payment.vue

@@ -1,62 +0,0 @@
-<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

@@ -1,94 +0,0 @@
-<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/ShoppingStatus.vue

@@ -1,109 +0,0 @@
-<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/routes.js

@@ -2,7 +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 = [
     {
@@ -16,9 +20,15 @@ const routes = [
         name: 'home'
     },
     {
+<<<<<<< HEAD
         path: '/datosPersonales',
         component: PersonalData,
         name: 'personalData'
+=======
+        path: '/cart',
+        component: Cart,
+        name: 'cart'
+>>>>>>> origin
     }
 ]
 

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/PersonalData.vue

@@ -14,9 +14,8 @@
 
 </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 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>
 
 
@@ -33,28 +32,21 @@ 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;
-  
  }
 }