danielGe/TiendaFront
2
0
Fork 0
Code Issues Pull Requests 3 Releases Wiki Activity

mandando llamar en Home

Browse Source
This commit is contained in:
Enrique Maya García
2020-10-27 17:56:33 -06:00
parent 770c060a7d 6c21a132f7
commit adb08a4b4a
5 changed files with 348 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-40
View File
@@ -10968,30 +10968,6 @@
}
},
"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==",
@@ -11010,20 +10986,13 @@
"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": {
@@ -11055,14 +11024,6 @@
"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",
@@ -11074,7 +11035,6 @@
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
>>>>>>> origin
},
"supports-color": {
"version": "7.2.0",
src/components/Directions.vue
+234
View File
@@ -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/Header.vue
+1 -15
View File
@@ -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;
}
src/components/MainMenu.vue
+110
View File
@@ -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>
src/icons.js
+3 -1
View File
@@ -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)