Cambio a Vue Cli
This commit is contained in:
Fernando
parent
ab5793e322
commit
8681fd255b
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw*
|
||||||
26
README.md
Normal file
26
README.md
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# ihc-router
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run your tests
|
||||||
|
```
|
||||||
|
npm run test
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/app'
|
||||||
|
]
|
||||||
|
}
|
||||||
30
package.json
Normal file
30
package.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "ihc-router",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^2.5.17",
|
||||||
|
"vue-router": "^3.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^3.0.5",
|
||||||
|
"@vue/cli-service": "^3.0.5",
|
||||||
|
"node-sass": "^4.9.0",
|
||||||
|
"sass-loader": "^7.0.1",
|
||||||
|
"vue-template-compiler": "^2.5.17"
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"plugins": {
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not ie <= 8"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>L'Assiete</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>Ups. La página de L'Assiete no se puede mostrar si tienes el JavaScript desactivado :c <br>
|
||||||
|
Actívalo y recarga la página.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
src/App.vue
Normal file
11
src/App.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
62
src/components/Inicio.vue
Normal file
62
src/components/Inicio.vue
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<header-min></header-min>
|
||||||
|
|
||||||
|
<nav-bar></nav-bar>
|
||||||
|
|
||||||
|
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
|
||||||
|
<div class="row contenido">
|
||||||
|
<div class="col-5">
|
||||||
|
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||||||
|
alt="Plato Francés"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="descripcionComida">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||||
|
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||||
|
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||||
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||||
|
deserunt mollit anim id est laborum.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-7 center">
|
||||||
|
<div class="descripcionComida">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||||
|
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||||||
|
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||||||
|
gravida
|
||||||
|
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||||||
|
sagittis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||||||
|
alt="Plato Francés" class="image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
</section>
|
||||||
|
<mi-footer></mi-footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HeaderMin from './headerMin'
|
||||||
|
import NavBar from './navBar'
|
||||||
|
import MiFooter from './mi-footer'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Inicio',
|
||||||
|
components: {
|
||||||
|
'header-min': HeaderMin,
|
||||||
|
'nav-bar': NavBar,
|
||||||
|
'mi-footer': MiFooter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
34
src/components/headerMin.vue
Normal file
34
src/components/headerMin.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<header id="header">
|
||||||
|
<div class="contenedor">
|
||||||
|
<div id="tituloP" class="center">
|
||||||
|
<router-link to="/"><h1 class="titulo--link">L'Assiette</h1></router-link>
|
||||||
|
<div id="tituloP--descripcion">
|
||||||
|
Descubre un nuevo sabor
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||||
|
<a href="" id="botonRegistro" class="boton">
|
||||||
|
Registrarse
|
||||||
|
</a>
|
||||||
|
<a href="" id="botonInicioSesion" class="boton">
|
||||||
|
Iniciar Sesion
|
||||||
|
</a>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HeaderMin'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
18
src/components/headerMini.vue
Normal file
18
src/components/headerMini.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<header id="header">
|
||||||
|
<div class="contenedor">
|
||||||
|
<div id="tituloP" class="center tituloP--mini">
|
||||||
|
<router-link to="/" class="titulo--link">L'Assiette</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HeaderMini'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
20
src/components/mi-footer.vue
Normal file
20
src/components/mi-footer.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<footer id="footer">
|
||||||
|
<div class="container mi-footer transparent">
|
||||||
|
Cocina Francesa.<br/>
|
||||||
|
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
|
||||||
|
Con lo último en tecnología: Vue.js, BEM, Sass, TypeScript, y nodejs.<br>
|
||||||
|
<br/>
|
||||||
|
Desarrollado por Fernando Araoz, 20173373.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MiFooter'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
19
src/components/navBar.vue
Normal file
19
src/components/navBar.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<nav id="navBar" class="mySeccion" data-collapsed="true">
|
||||||
|
<ul class="linksNavBar">
|
||||||
|
<li><router-link to="/">Inicio</router-link></li>
|
||||||
|
<li><router-link to="/platos/">Platos</router-link></li>
|
||||||
|
<li><router-link to="/usuarios/mi-cuenta">Mi cuenta</router-link></li>
|
||||||
|
<li><router-link to="/carrito/">Carrito</router-link></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'NavBar'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
20
src/main.js
Normal file
20
src/main.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
require('@/materialize/css/materialize.min.css');
|
||||||
|
require('@/sass/base.sass');
|
||||||
|
require('@/material-icons/material-icons.css');
|
||||||
|
require('@/materialize/js/materialize.min.js');
|
||||||
|
|
||||||
|
(() => { window.carritoUsuario = [] })();
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
data: {
|
||||||
|
carritoUsuario: []
|
||||||
|
},
|
||||||
|
router,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
BIN
src/material-icons/MaterialIcons-Regular.eot
Normal file
BIN
src/material-icons/MaterialIcons-Regular.eot
Normal file
Binary file not shown.
BIN
src/material-icons/MaterialIcons-Regular.ttf
Normal file
BIN
src/material-icons/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
BIN
src/material-icons/MaterialIcons-Regular.woff
Normal file
BIN
src/material-icons/MaterialIcons-Regular.woff
Normal file
Binary file not shown.
BIN
src/material-icons/MaterialIcons-Regular.woff2
Normal file
BIN
src/material-icons/MaterialIcons-Regular.woff2
Normal file
Binary file not shown.
36
src/material-icons/material-icons.css
Normal file
36
src/material-icons/material-icons.css
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||||
|
src: local('Material Icons'),
|
||||||
|
local('MaterialIcons-Regular'),
|
||||||
|
url(MaterialIcons-Regular.woff2) format('woff2'),
|
||||||
|
url(MaterialIcons-Regular.woff) format('woff'),
|
||||||
|
url(MaterialIcons-Regular.ttf) format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px; /* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
/* Support for IE. */
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
13
src/materialize/css/materialize.min.css
vendored
Normal file
13
src/materialize/css/materialize.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
src/materialize/js/materialize.min.js
vendored
Normal file
6
src/materialize/js/materialize.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
30
src/router.js
Normal file
30
src/router.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Router from 'vue-router'
|
||||||
|
import Home from './views/Home.vue'
|
||||||
|
|
||||||
|
Vue.use(Router)
|
||||||
|
|
||||||
|
export default new Router({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/platos/',
|
||||||
|
name: 'Platos',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import(/* webpackChunkName: "about" */ './views/Platos.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/carrito/',
|
||||||
|
name: 'Carrito',
|
||||||
|
component: () => import('./views/carrito.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
395
src/sass/base.sass
Normal file
395
src/sass/base.sass
Normal file
@ -0,0 +1,395 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
|
||||||
|
|
||||||
|
$fuenteTitulos: 'Muli'
|
||||||
|
$fuentePrincipal: 'Open Sans'
|
||||||
|
|
||||||
|
$colorPrincipalOscuro: #3d3d7c
|
||||||
|
|
||||||
|
*
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
html, body
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
background-color: #F5F5F5
|
||||||
|
font:
|
||||||
|
family: $fuentePrincipal, sans-serif
|
||||||
|
size: large
|
||||||
|
|
||||||
|
header
|
||||||
|
background-color: #44A
|
||||||
|
box-shadow: 0 5px 5px #999999
|
||||||
|
|
||||||
|
nav
|
||||||
|
background-color: #3d3d7c
|
||||||
|
color: white
|
||||||
|
|
||||||
|
section
|
||||||
|
overflow: hidden
|
||||||
|
transition: height 150ms ease-out
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
footer
|
||||||
|
background-color: #333
|
||||||
|
color: #EEE
|
||||||
|
box-shadow: inset 0 5px 5px #999999
|
||||||
|
padding: 40px
|
||||||
|
|
||||||
|
.container
|
||||||
|
background-color: white
|
||||||
|
margin-top: 10px
|
||||||
|
margin-bottom: 10px
|
||||||
|
padding: 10px
|
||||||
|
|
||||||
|
#tituloP
|
||||||
|
padding: 30px
|
||||||
|
color: white
|
||||||
|
font:
|
||||||
|
size: 50px
|
||||||
|
family: $fuenteTitulos
|
||||||
|
|
||||||
|
#tituloP--descripcion
|
||||||
|
padding: 10px
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
family: $fuentePrincipal
|
||||||
|
|
||||||
|
.tituloP--mini
|
||||||
|
padding: 10px !important
|
||||||
|
font:
|
||||||
|
size: 40px !important
|
||||||
|
|
||||||
|
.titulo--link
|
||||||
|
color: white
|
||||||
|
text-decoration: none
|
||||||
|
font-size: 50px
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
.center
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.boton
|
||||||
|
display: inline-block
|
||||||
|
margin: 20px
|
||||||
|
border-radius: 3px
|
||||||
|
box-shadow: 1px 1px 3px #090909
|
||||||
|
padding: 10px 30px
|
||||||
|
cursor: pointer
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
.mySeccion
|
||||||
|
overflow: hidden
|
||||||
|
transition: height 150ms ease-out
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
#botonRegistro
|
||||||
|
background-color: green
|
||||||
|
color: white
|
||||||
|
font-size: large
|
||||||
|
transition: transform 200ms, box-shadow 200ms
|
||||||
|
|
||||||
|
#botonRegistro:hover
|
||||||
|
transform: translate(-1px, -1px)
|
||||||
|
box-shadow: 2px 2px 7px #050505
|
||||||
|
|
||||||
|
#botonInicioSesion
|
||||||
|
background-color: white
|
||||||
|
transition: transform 200ms, box-shadow 200ms
|
||||||
|
|
||||||
|
#botonInicioSesion:hover
|
||||||
|
transform: translate(-1px, -1px)
|
||||||
|
box-shadow: 2px 2px 7px #050505
|
||||||
|
|
||||||
|
#botonInicioSesion:visited
|
||||||
|
color: black
|
||||||
|
|
||||||
|
.contenido
|
||||||
|
margin: 40px 0
|
||||||
|
|
||||||
|
.image
|
||||||
|
padding: 0 20px
|
||||||
|
width: 100%
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
.descripcionComida
|
||||||
|
padding: 0 30px
|
||||||
|
text-align: center
|
||||||
|
font-size: x-large
|
||||||
|
|
||||||
|
.inicio_registro
|
||||||
|
color: white
|
||||||
|
|
||||||
|
input
|
||||||
|
min-width: 80%
|
||||||
|
min-height: 40px
|
||||||
|
padding: 10px
|
||||||
|
color: #44A
|
||||||
|
font-size: large
|
||||||
|
|
||||||
|
.botonEnviarForm
|
||||||
|
background-color: white
|
||||||
|
box-shadow: 1px 1px 2px gray
|
||||||
|
cursor: pointer
|
||||||
|
border: none
|
||||||
|
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms
|
||||||
|
|
||||||
|
.botonEnviarForm:hover
|
||||||
|
background-color: #4949e2
|
||||||
|
color: white
|
||||||
|
transform: translate(-1px, -1px)
|
||||||
|
box-shadow: 2px 2px 2px gray
|
||||||
|
|
||||||
|
.google-button
|
||||||
|
height: 40px
|
||||||
|
border-width: 0
|
||||||
|
background: white
|
||||||
|
color: #737373
|
||||||
|
border-radius: 5px
|
||||||
|
white-space: nowrap
|
||||||
|
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
|
||||||
|
transition-property: background-color, box-shadow
|
||||||
|
transition-duration: 150ms
|
||||||
|
transition-timing-function: ease-in-out
|
||||||
|
padding: 0
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.google-button:focus, .google-button:hover
|
||||||
|
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
|
.google-button:active
|
||||||
|
background-color: #e5e5e5
|
||||||
|
box-shadow: none
|
||||||
|
transition-duration: 10ms
|
||||||
|
|
||||||
|
.google-button__icon
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
margin: 8px 0 8px 8px
|
||||||
|
width: 18px
|
||||||
|
height: 18px
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
.google-button__text
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
padding: 0 24px
|
||||||
|
font-size: 14px
|
||||||
|
font-weight: bold
|
||||||
|
font-family: 'Roboto', arial, sans-serif
|
||||||
|
|
||||||
|
.unseen
|
||||||
|
visibility: hidden
|
||||||
|
|
||||||
|
.botonAddCart
|
||||||
|
background-color: white
|
||||||
|
padding: 5px
|
||||||
|
color: #4444aa
|
||||||
|
box-shadow: 0.1px 0.1px grey
|
||||||
|
border-radius: 2px
|
||||||
|
cursor: pointer
|
||||||
|
font-size: large
|
||||||
|
transition: background-color 250ms, color 250ms
|
||||||
|
user-select: none
|
||||||
|
|
||||||
|
.botonAddCart:hover
|
||||||
|
background-color: #4444AA
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.caja
|
||||||
|
border-radius: 4px
|
||||||
|
box-shadow: 1px 1px 2px gray
|
||||||
|
padding: 15px
|
||||||
|
|
||||||
|
.botonPayPal
|
||||||
|
background-color: #0070ba
|
||||||
|
color: white
|
||||||
|
font-size: large
|
||||||
|
padding: 10px
|
||||||
|
border: none
|
||||||
|
border-radius: 5px
|
||||||
|
cursor: pointer
|
||||||
|
margin: 0 5px
|
||||||
|
|
||||||
|
.botonVisa
|
||||||
|
@extend .botonPayPal
|
||||||
|
background-color: #1a1f5e
|
||||||
|
|
||||||
|
.linksNavBar
|
||||||
|
margin: 0
|
||||||
|
li
|
||||||
|
list-style: none
|
||||||
|
float: left
|
||||||
|
transition: background-color 250ms
|
||||||
|
line-height: 50px
|
||||||
|
a
|
||||||
|
cursor: pointer
|
||||||
|
display: inline-block
|
||||||
|
padding: 0 15px
|
||||||
|
color: white
|
||||||
|
text-decoration: none
|
||||||
|
&:after
|
||||||
|
clear: both
|
||||||
|
&:hover
|
||||||
|
background-color: #35356a
|
||||||
|
|
||||||
|
.plato--Titulo
|
||||||
|
font:
|
||||||
|
size: x-large
|
||||||
|
weight: bold
|
||||||
|
family: $fuenteTitulos
|
||||||
|
color: #3d3d7c
|
||||||
|
|
||||||
|
.plato--Descripcion
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
color: #333333
|
||||||
|
|
||||||
|
.plato--Precio
|
||||||
|
font-size: large
|
||||||
|
&:before
|
||||||
|
color: green
|
||||||
|
content: "Precio unitario: "
|
||||||
|
&:after
|
||||||
|
content: " S/."
|
||||||
|
|
||||||
|
.plato--Cantidad
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
weight: bold
|
||||||
|
display: inline-table
|
||||||
|
padding: 15px
|
||||||
|
|
||||||
|
.plato--Cantidad--Icon
|
||||||
|
display: table-cell
|
||||||
|
vertical-align: top
|
||||||
|
cursor: pointer
|
||||||
|
transition: color 250ms
|
||||||
|
-webkit-user-select: none
|
||||||
|
-moz-user-select: none
|
||||||
|
-ms-user-select: none
|
||||||
|
user-select: none
|
||||||
|
&:hover
|
||||||
|
color: #4444aa
|
||||||
|
|
||||||
|
.carrito
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
#carrito--elementos, #carrito--precio
|
||||||
|
padding: 0 10px
|
||||||
|
|
||||||
|
.carritoElem
|
||||||
|
&:after
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
.carritoElem--img
|
||||||
|
float: left
|
||||||
|
margin: 10px 20px
|
||||||
|
width: 200px
|
||||||
|
|
||||||
|
.carrito--subTotal
|
||||||
|
text-align: right
|
||||||
|
font:
|
||||||
|
weight: bold
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
size: x-large
|
||||||
|
&:before
|
||||||
|
content: "Subtotal: "
|
||||||
|
&:after
|
||||||
|
content: " S/."
|
||||||
|
|
||||||
|
.carrito--precio--contenido--titulo
|
||||||
|
text-align: center
|
||||||
|
font:
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
size: x-large
|
||||||
|
weight: 900
|
||||||
|
|
||||||
|
.carrito--precio--contenido--botonPagar
|
||||||
|
display: inline-block
|
||||||
|
width: 100%
|
||||||
|
text-align: center
|
||||||
|
padding: 10px
|
||||||
|
background-color: #4444aa
|
||||||
|
color: white
|
||||||
|
border-radius: 3px
|
||||||
|
cursor: pointer
|
||||||
|
&:hover
|
||||||
|
background-color: #3d3d7c
|
||||||
|
|
||||||
|
#carrito--boton--seguircomprando
|
||||||
|
margin: 10px 0
|
||||||
|
padding: 10px 20px
|
||||||
|
background-color: green
|
||||||
|
color: white
|
||||||
|
text-decoration: none
|
||||||
|
border-radius: 4px
|
||||||
|
&:visited
|
||||||
|
color: white
|
||||||
|
|
||||||
|
#carrito--tituloprincipal
|
||||||
|
text-align: center
|
||||||
|
font:
|
||||||
|
size: xx-large
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
weight: 900
|
||||||
|
margin: 10px 0
|
||||||
|
|
||||||
|
.responsive-image
|
||||||
|
padding: 0 20px
|
||||||
|
width: 100%
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
|
||||||
|
.tienda--titulo
|
||||||
|
text-align: center
|
||||||
|
font:
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
size: xx-large
|
||||||
|
weight: 900
|
||||||
|
margin: 10px 0
|
||||||
|
|
||||||
|
.tienda--tarjeta
|
||||||
|
padding: 10px
|
||||||
|
margin: 20px 5px
|
||||||
|
border-radius: 3px
|
||||||
|
|
||||||
|
.tienda--tarjeta--titulo
|
||||||
|
font:
|
||||||
|
size: x-large
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
color: $colorPrincipalOscuro
|
||||||
|
|
||||||
|
.tienda--tarjeta--descripcion
|
||||||
|
|
||||||
|
.tienda--tarjeta--precio
|
||||||
|
&:before
|
||||||
|
content: "Precio unitario: "
|
||||||
|
color: green
|
||||||
|
&:after
|
||||||
|
content: " S/."
|
||||||
|
|
||||||
|
.tienda--tarjeta--cantidad
|
||||||
|
&:before
|
||||||
|
content: "Cantidad "
|
||||||
|
|
||||||
|
.tienda--tarjeta--botonComprar
|
||||||
|
background-color: white
|
||||||
|
color: $colorPrincipalOscuro
|
||||||
|
padding: 10px
|
||||||
|
cursor: pointer
|
||||||
|
border-radius: 3px
|
||||||
|
transition: color 100ms, background-color 100ms
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
weight: bold
|
||||||
|
family: $fuenteTitulos
|
||||||
|
&:hover
|
||||||
|
background-color: $colorPrincipalOscuro
|
||||||
|
color: white
|
||||||
|
&:focus
|
||||||
|
background-color: white
|
||||||
|
color: $colorPrincipalOscuro
|
||||||
|
|
||||||
|
.img-inicio
|
||||||
|
height: 130px
|
||||||
|
margin: 0 20px
|
||||||
6
src/typescript/main.ts
Normal file
6
src/typescript/main.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
class Anuma {
|
||||||
|
anuma: number;
|
||||||
|
constructor () {
|
||||||
|
this.anuma = 80;
|
||||||
|
}
|
||||||
|
}
|
||||||
83
src/views/Home.vue
Normal file
83
src/views/Home.vue
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<header-min></header-min>
|
||||||
|
|
||||||
|
<nav-bar></nav-bar>
|
||||||
|
|
||||||
|
<section id="sectionP" class="container mySeccion" data-collapsed="false">
|
||||||
|
<div class="row contenido">
|
||||||
|
<div class="col l5">
|
||||||
|
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||||||
|
alt="Plato Francés"/>
|
||||||
|
</div>
|
||||||
|
<div class="col l7">
|
||||||
|
<div class="descripcionComida">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||||
|
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||||
|
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||||
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||||
|
deserunt mollit anim id est laborum.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col l7 center">
|
||||||
|
<div class="descripcionComida">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||||
|
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||||||
|
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||||||
|
gravida
|
||||||
|
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||||||
|
sagittis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col l5">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||||||
|
alt="Plato Francés" class="image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
Implementado con lo último en tecnología <br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div style="text-align: center">
|
||||||
|
<a href="https://vuejs.org/" title="Vuejs" target="_blank">
|
||||||
|
<img src="https://vuejs.org/images/logo.png" alt="vuejs" class="img-inicio hoverable">
|
||||||
|
</a>
|
||||||
|
<a href="http://getbem.com/" title="BEM" target="_blank">
|
||||||
|
<img src="http://getbem.com/assets/b_.svg" alt="bem" class="img-inicio hoverable" style="background-color: black">
|
||||||
|
</a>
|
||||||
|
<a href="https://sass-lang.com/" title="Sass" target="_blank">
|
||||||
|
<img src="https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" class="img-inicio hoverable" alt="sass">
|
||||||
|
</a>
|
||||||
|
<a href="https://www.typescriptlang.org/" title="TypeScript" target="_blank">
|
||||||
|
<img src="https://cdn-images-1.medium.com/max/1187/1*JsyV8lXMuTbRVLQ2FPYWAg.png" class="img-inicio hoverable" alt="typescript">
|
||||||
|
</a>
|
||||||
|
<a href="https://nodejs.org/es/" title="nodejs" target="_blank">
|
||||||
|
<img src="https://pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d.png" alt="nodejs" class="img-inicio hoverable">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<mi-footer></mi-footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HeaderMin from '@/components/headerMin'
|
||||||
|
import NavBar from '@/components/navBar'
|
||||||
|
import MiFooter from '@/components/mi-footer'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'home',
|
||||||
|
components: {
|
||||||
|
'header-min': HeaderMin,
|
||||||
|
'nav-bar': NavBar,
|
||||||
|
'mi-footer': MiFooter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
151
src/views/Platos.vue
Normal file
151
src/views/Platos.vue
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<header-mini></header-mini>
|
||||||
|
|
||||||
|
<nav-bar></nav-bar>
|
||||||
|
|
||||||
|
<section class="tienda container mySeccion" data-collapsed="false">
|
||||||
|
<h2 class="tienda--titulo">Platos</h2>
|
||||||
|
<br>
|
||||||
|
Ver mi cuenta | Ver mi carrito
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<template v-for="(item,key) in platos">
|
||||||
|
<div v-bind:key="key" class="row tienda--tarjeta hoverable">
|
||||||
|
<div class="col l4">
|
||||||
|
<img class="responsive-image" :src="item.imgUrl"/>
|
||||||
|
</div>
|
||||||
|
<div class="col l8">
|
||||||
|
<div class="tienda--tarjeta--titulo">
|
||||||
|
{{ item.nombre }}
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="tienda--tarjeta--descripcion">
|
||||||
|
{{ item.descripcion }}
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="tienda--tarjeta--precio">
|
||||||
|
{{ item.precio }}
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="tienda--tarjeta--cantidad">
|
||||||
|
<i class='material-icons plato--Cantidad--Icon' v-on:click="disminuirCantidad('itemNum' + key)">
|
||||||
|
remove
|
||||||
|
</i>
|
||||||
|
<span :id=" 'itemNum' + key ">1</span>
|
||||||
|
<i class='material-icons plato--Cantidad--Icon' v-on:click="aumentarCantidad('itemNum' + key)">
|
||||||
|
add
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<button class="tienda--tarjeta--botonComprar" v-on:click="addAlCarro(item, 'itemNum' + key)">
|
||||||
|
<i class='material-icons'>add_shopping_cart</i> Añadir al carrito
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<mi-footer></mi-footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import MiFooter from "../components/mi-footer.vue";
|
||||||
|
import HeaderMini from '../components/headerMini.vue';
|
||||||
|
import NavBar from '../components/navBar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Platos',
|
||||||
|
components: {
|
||||||
|
'mi-footer': MiFooter,
|
||||||
|
'header-mini': HeaderMini,
|
||||||
|
'nav-bar': NavBar
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
platos: [
|
||||||
|
{
|
||||||
|
"nombre": "Soupe à l'oignon",
|
||||||
|
"descripcion": "Sopa tradicional hecha con cebolla y carne.",
|
||||||
|
"imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
|
||||||
|
"precio": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Coq au vin",
|
||||||
|
"descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
|
||||||
|
"imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
|
||||||
|
"precio": 50
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Beef bourguignon",
|
||||||
|
"descripcion": "Filete cocinado en vino, sasonado con especias",
|
||||||
|
"imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
|
||||||
|
"precio": 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Cassoulet",
|
||||||
|
"descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
|
||||||
|
"precio": 22
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Fondue de queso",
|
||||||
|
"descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
|
||||||
|
"precio": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Ratatouille",
|
||||||
|
"descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
|
||||||
|
"precio": 35
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Magret de canard",
|
||||||
|
"descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
|
||||||
|
"precio": 17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Merluza al beurre blanc",
|
||||||
|
"descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
|
||||||
|
"precio": 22
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addAlCarro: function (plato, id) {
|
||||||
|
const cantidad = parseInt(document.getElementById(id).innerText);
|
||||||
|
const obj = JSON.parse(JSON.stringify(plato));
|
||||||
|
obj["cantidad"] = cantidad;
|
||||||
|
carritoUsuario.push(obj);
|
||||||
|
M.toast({html: 'Añadido al carrito'})
|
||||||
|
},
|
||||||
|
aumentarCantidad: function (id) {
|
||||||
|
const elem = document.getElementById(id);
|
||||||
|
const valorActual = parseInt(elem.innerText);
|
||||||
|
if (valorActual > 0) {
|
||||||
|
elem.innerText = valorActual + 1;
|
||||||
|
} else {
|
||||||
|
elem.innerText = 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disminuirCantidad: function (id) {
|
||||||
|
const elem = document.getElementById(id);
|
||||||
|
const valorActual = parseInt(elem.innerText);
|
||||||
|
if (valorActual > 1) {
|
||||||
|
elem.innerText = valorActual - 1;
|
||||||
|
} else {
|
||||||
|
elem.innerText = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
157
src/views/carrito.vue
Normal file
157
src/views/carrito.vue
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<header-mini></header-mini>
|
||||||
|
|
||||||
|
<nav-bar></nav-bar>
|
||||||
|
|
||||||
|
<section id="sectionCarrito" class="container mySeccion">
|
||||||
|
<div class="center">
|
||||||
|
<div id="carrito--tituloprincipal">
|
||||||
|
Carrito de compras
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<router-link id="carrito--boton--seguircomprando" to="/tienda/" class="hoverable">Seguir comprando</router-link>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div id="carrito" class="row carrito">
|
||||||
|
|
||||||
|
<div id="carrito--elementos" class="col l8">
|
||||||
|
<div id="carrito--elementos--contenido" class="caja">
|
||||||
|
<template v-if="noEstaVacio">
|
||||||
|
<template v-for="(producto,key) in carrito">
|
||||||
|
<div v-bind:key="key" class="carritoElem">
|
||||||
|
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||||||
|
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||||||
|
<br>
|
||||||
|
<div class="plato--Precio">{{ producto.precio }}</div>
|
||||||
|
<div class="plato--Cantidad">Cantidad:
|
||||||
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||||||
|
<span>{{ producto.cantidad }}</span>
|
||||||
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
No hay nada en tu carrito de compras :c
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="carrito--precio" class="col l4">
|
||||||
|
|
||||||
|
<div id="carrito--precio--contenido" class="caja">
|
||||||
|
<template v-if="noEstaVacio">
|
||||||
|
<div id="pagos">
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ subTotal }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
Descuentos:
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ descuento }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div>
|
||||||
|
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||||||
|
Total:
|
||||||
|
</div>
|
||||||
|
<div class="carrito--precio--contenido--titulo"
|
||||||
|
style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ total }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a class="carrito--precio--contenido--botonPagar">
|
||||||
|
Completar Transaccion
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
No hay nada en tu carrito de compras :c
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<mi-footer></mi-footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HeaderMini from '@/components/headerMini'
|
||||||
|
import NavBar from '@/components/navBar'
|
||||||
|
import MiFooter from '@/components/mi-footer'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Carrito',
|
||||||
|
components: {
|
||||||
|
'header-mini': HeaderMini,
|
||||||
|
'nav-bar': NavBar,
|
||||||
|
'mi-footer': MiFooter
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
carrito: window.carritoUsuario,
|
||||||
|
descuento: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cantidadItems: function () {
|
||||||
|
let items = 0;
|
||||||
|
for (const i in this.item)
|
||||||
|
items++;
|
||||||
|
return items;
|
||||||
|
},
|
||||||
|
subTotal: function () {
|
||||||
|
let subT = 0;
|
||||||
|
for (const itemI in this.carrito ) {
|
||||||
|
if (this.carrito.hasOwnProperty(itemI)){
|
||||||
|
const item = this.carrito[itemI];
|
||||||
|
subT += (item["precio"] * item["cantidad"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return subT;
|
||||||
|
},
|
||||||
|
total: function () {
|
||||||
|
return this.subTotal - this.descuento;
|
||||||
|
},
|
||||||
|
noEstaVacio: function () {
|
||||||
|
for (const i in this.carrito) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
restarCantidad: function (elem) {
|
||||||
|
const cantidad = parseInt(elem.cantidad);
|
||||||
|
if (cantidad > 0)
|
||||||
|
elem.cantidad = cantidad -1;
|
||||||
|
},
|
||||||
|
aumentarCantidad: function (elem) {
|
||||||
|
const cantidad = parseInt(elem.cantidad);
|
||||||
|
if (cantidad >= 0)
|
||||||
|
elem.cantidad = cantidad+1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
// this aligns with Vue's browser support
|
||||||
|
"target": "es5",
|
||||||
|
// this enables stricter inference for data properties on `this`
|
||||||
|
"strict": true,
|
||||||
|
// if using webpack 2+ or rollup, to leverage tree shaking:
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user