Compare commits
18 Commits
shippingSection
...
cart
| Author | SHA1 | Date | |
|---|---|---|---|
| adb08a4b4a | |||
| 770c060a7d | |||
| 6c21a132f7 | |||
| 769c9b8a2d | |||
| a614aaccd8 | |||
| bcc7617e79 | |||
| 667d6e34a4 | |||
| 60f40876f7 | |||
| 189b78ebea | |||
| 9f2f2ef7b0 | |||
| 387f0ce6da | |||
| d4e15ddb55 | |||
| aaca0ea583 | |||
| 5eff4a916e | |||
| 1552b7e04f | |||
| 77aead338f | |||
| 39a65ffc0c | |||
| 1cc6644c95 |
Generated
+21
-30
@@ -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,35 +10968,31 @@
|
||||
}
|
||||
},
|
||||
"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==",
|
||||
"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": {
|
||||
"@types/mini-css-extract-plugin": "^0.9.1",
|
||||
"chalk": "^3.0.0",
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"merge-source-map": "^1.1.0",
|
||||
"source-map": "^0.6.1"
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"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==",
|
||||
"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": {
|
||||
"@types/color-name": "^1.1.1",
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@@ -11038,12 +11024,17 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"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
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
<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">
|
||||
<!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
|
||||
<img v-bind:src="infoResume[0].img" alt="Logo" style="height: 150px">
|
||||
<p class="mx-4">
|
||||
{{productInfo[0].descripcion}}<br><span class="price-style"><b>${{productInfo[0].precio}}</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="" v-bind:value="infoResume[0].cantidad">
|
||||
</div>
|
||||
<span class="my-4"><b>${{infoResume[0].cantidad * productInfo[0].precio}}</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">
|
||||
<!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
|
||||
<img v-bind:src="infoResume[1].img" alt="Logo" style="height: 150px">
|
||||
<p class="mx-4">
|
||||
{{productInfo[1].descripcion}}<br><span class="price-style"><b>${{productInfo[1].precio}}</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="" v-bind:value="infoResume[1].cantidad">
|
||||
</div>
|
||||
<span class="my-4"><b>${{infoResume[1].cantidad * productInfo[1].precio}}</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">{{infoResume[0].cantidad}} Artículos<br>Envío</p>
|
||||
<p>${{infoResume[0].cantidad * productInfo[0].precio}}<br>{{infoResume[0].envioStatus}}</p>
|
||||
</div>
|
||||
<hr style="width:100%">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mr-5">Total(IVA incluido)<br>${{infoResume[0].cantidad * productInfo[0].precio}}</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 {
|
||||
data(){
|
||||
return {
|
||||
productInfo: [
|
||||
{
|
||||
id: 1,
|
||||
descripcion: 'Invitacion al psicoanálisis y lazos con la política, Lorem ipsum',
|
||||
precio: 10
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
descripcion: 'Invitacion al derrocamiento de la burguesía, camarada.',
|
||||
precio: 2
|
||||
}
|
||||
],
|
||||
infoResume:[
|
||||
{
|
||||
cantidad: 4,
|
||||
envioStatus: 'pendiente',
|
||||
img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg',
|
||||
},
|
||||
{
|
||||
cantidad: 17,
|
||||
envioStatus: 'pendiente',
|
||||
img: 'https://images-na.ssl-images-amazon.com/images/I/51vHCno0a4L._SY291_BO1,204,203,200_QL40_ML2_.jpg',
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -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>
|
||||
@@ -27,18 +27,7 @@
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="header-f" >
|
||||
<div class="container d-flex py-2 align-items-center justify-content-between">
|
||||
<div>
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
|
||||
<font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -63,9 +52,6 @@ export default {
|
||||
background: #1b3d70;
|
||||
}
|
||||
|
||||
.header-f {
|
||||
background-color: #bb8800;
|
||||
}
|
||||
.cart-icon-custom-properties {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header-f" >
|
||||
<div class="container d-flex py-2 align-items-center justify-content-between">
|
||||
<div class="d-flex">
|
||||
<div>
|
||||
<b-button v-b-toggle.sidebar-backdrop class="mr-3 menu-toggle-sty"><font-awesome-icon icon="bars"/></b-button>
|
||||
|
||||
<b-sidebar
|
||||
id="sidebar-backdrop"
|
||||
title="Menú"
|
||||
:backdrop-variant="variant"
|
||||
backdrop
|
||||
shadow
|
||||
>
|
||||
<div class="px-3 mt-3 py-2 d-flex align-items-center profi-main-text-sty">
|
||||
<font-awesome-icon icon="user" class="mr-2" />
|
||||
<a href="#" class="text-decoration-none">
|
||||
<h5 class="my-auto">Iniciar sesión</h5>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>
|
||||
|
||||
<ul class="px-3">
|
||||
<li v-for="item in items" :key="item.mensaje">
|
||||
<a href="#"> {{ item.mensaje }} </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="px-3 my-4">CONFIGURACIÓN</h6>
|
||||
|
||||
<ul class="px-3">
|
||||
<li v-for="item in configuracion" :key="item.mensaje">
|
||||
<a href="#"> {{ item.mensaje }} </a>
|
||||
</li>
|
||||
</ul>
|
||||
</b-sidebar>
|
||||
</div>
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
|
||||
<font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ mensaje: 'Investigación Aplicada y Multidisciplinaria' },
|
||||
{ mensaje: 'Ciencias Socioeconómicas' }
|
||||
],
|
||||
configuracion: [
|
||||
{ mensaje: 'Mi cuenta' },
|
||||
{ mensaje: 'Ayuda' },
|
||||
{ mensaje: 'Salir' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.header-f {
|
||||
background-color: #bb8800;
|
||||
}
|
||||
.cart-icon-custom-properties {
|
||||
font-size: 20px;
|
||||
}
|
||||
.menu-toggle-sty {
|
||||
background-color: transparent!important;
|
||||
border: 1px solid white!important;
|
||||
color: white!important;
|
||||
}
|
||||
.menu-toggle-sty:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.7)!important;
|
||||
color: rgba(255, 255, 255, 0.7)!important;
|
||||
}
|
||||
.profi-main-text-sty, .profi-main-text-sty a {
|
||||
color: black!important;
|
||||
}
|
||||
.profi-main-text-sty a:hover{
|
||||
color:gray!important;
|
||||
transition: 0.2s;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 10px auto;
|
||||
}
|
||||
ul li a {
|
||||
text-decoration: none;
|
||||
color: black!important;
|
||||
}
|
||||
ul li a:hover {
|
||||
color: rgba(0, 0, 0, 0.6)!important;
|
||||
transition: 0.2s;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
+3
-1
@@ -11,7 +11,8 @@ import {
|
||||
faShoppingCart,
|
||||
faTrash,
|
||||
faMapMarkerAlt,
|
||||
faPhoneAlt
|
||||
faPhoneAlt,
|
||||
faBars
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
|
||||
@@ -27,4 +28,5 @@ library.add(faShoppingCart)
|
||||
library.add(faTrash)
|
||||
library.add(faMapMarkerAlt)
|
||||
library.add(faPhoneAlt)
|
||||
library.add(faBars)
|
||||
|
||||
|
||||
+7
-5
@@ -1,21 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<div class="container my-5">
|
||||
<h1 class="text-center">Home</h1>
|
||||
</div>
|
||||
|
||||
<Cart></Cart>
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Header from '../components/Header'
|
||||
import Cart from '../components/Cart'
|
||||
import Footer from '../components/Footer'
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Cart,
|
||||
Footer
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user