177 lines
4.5 KiB
PHP
177 lines
4.5 KiB
PHP
<!DOCTYPE HTML>
|
|
<html lang="es">
|
|
<head>
|
|
<title>Cocina Francesa</title>
|
|
<link rel="stylesheet" href="/ihc/dist/css/base.css?v=2" type="text/css"/>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
rel="stylesheet">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<script src="/ihc/dist/js/topbar.min.js"></script>
|
|
|
|
<div id="vueApp">
|
|
<router-view></router-view>
|
|
</div>
|
|
|
|
<!-- Vue y Vuerouter -->
|
|
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
|
|
<script src="/ihc/dist/dependencias/vuerouter.min.js"></script>
|
|
<script src="/ihc/dist/dependencias/vue.js"></script>
|
|
|
|
<script>
|
|
|
|
Vue.use(VueRouter);
|
|
|
|
const carritoUsuario = [];
|
|
|
|
const footer = {
|
|
template: `<?php include "./src/componentes/mi-footer.vue" ?>`
|
|
};
|
|
|
|
const navBar = {
|
|
template: `<?php include "./src/componentes/navBar.vue" ?>`
|
|
};
|
|
|
|
const headerMin = {
|
|
template: `<?php include "./src/componentes/headerMin.vue" ?>`
|
|
};
|
|
|
|
const headerMini = {
|
|
template: `<?php include "./src/componentes/header-mini.vue"?>`
|
|
};
|
|
|
|
const inicio = {
|
|
template: `<?php include "./src/componentes/inicio.vue" ?>`,
|
|
components: {
|
|
'mi-footer': footer,
|
|
'header-min': headerMin,
|
|
'nav-bar': navBar
|
|
}
|
|
};
|
|
|
|
const tienda = function (resolve, reject) {
|
|
const ajax1 = new XMLHttpRequest();
|
|
const ajax2 = new XMLHttpRequest();
|
|
|
|
ajax1.onreadystatechange = ajax2.onreadystatechange = () => {
|
|
if (ajax1.status === 200 && ajax1.readyState === 4 && ajax2.status === 200 && ajax2.readyState === 4) {
|
|
const platosD = JSON.parse(ajax2.responseText);
|
|
resolve({
|
|
template: `${ajax1.responseText}`,
|
|
data: function () {
|
|
return {
|
|
platos: platosD,
|
|
itemActual: 1
|
|
};
|
|
},
|
|
components: {
|
|
'mi-footer': footer,
|
|
'header-mini': headerMini,
|
|
'nav-bar': navBar
|
|
},
|
|
methods: {
|
|
cambiarContador: function () {
|
|
if (this.itemActual === 1 || this.itemActual === 2){
|
|
this.itemActual++;
|
|
return true;
|
|
} else {
|
|
this.itemActual = 1;
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
ajax1.open("GET","/ihc/src/componentes/tienda.vue",true);
|
|
ajax1.send();
|
|
|
|
ajax2.open("GET","/ihc/src/data/platos.json");
|
|
ajax2.send();
|
|
};
|
|
|
|
const carrito = {
|
|
template: `<?php include "./src/componentes/carrito.vue"?>`,
|
|
components: {
|
|
'mi-footer': footer,
|
|
'header-mini': headerMini,
|
|
'nav-bar': navBar
|
|
},
|
|
data: function () {
|
|
return {
|
|
item: 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.item ) {
|
|
if (this.item.hasOwnProperty(itemI)){
|
|
const item = this.item[itemI];
|
|
subT += (item["precio"] * item["cantidad"]);
|
|
}
|
|
}
|
|
return subT;
|
|
},
|
|
total: function () {
|
|
return this.subTotal - this.descuento;
|
|
},
|
|
noEstaVacio: function () {
|
|
for (const i in this.item) {
|
|
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;
|
|
}
|
|
}
|
|
};
|
|
|
|
const routes = [
|
|
{path: '/ihc/',component: inicio},
|
|
{path: '/ihc/carrito/', component: carrito},
|
|
{path: '/ihc/tienda/', component: tienda}
|
|
];
|
|
|
|
const router = new VueRouter({
|
|
mode: 'history',
|
|
routes: routes
|
|
});
|
|
|
|
|
|
const vm = new Vue({
|
|
el: '#vueApp',
|
|
router: router
|
|
})
|
|
.$mount('#vueApp');
|
|
|
|
</script>
|
|
|
|
<!-- Logica principal -->
|
|
<!--<script src="./dist/js/base.min.js?v=2"></script>-->
|
|
|
|
</body>
|
|
</html>
|