vista descripcion, componente desc y title
This commit is contained in:
casnet1
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row ">
|
||||
<div class="col-md-6 col-sm-12 py-5">
|
||||
|
||||
<div class="row p-0">
|
||||
|
||||
<div class=" p-0 col-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center justify-content-start flex-row flex-lg-column flex-xl-column ">
|
||||
<img :src="src" alt="" class="smalll" />
|
||||
<img :src="src" alt="" class="smalll" />
|
||||
<img :src="src" alt="" class="smalll" />
|
||||
</div>
|
||||
|
||||
<div class="p-0 col-10 d-flex justify-content-center flex-column align-items-center">
|
||||
<img :src="src" alt="" class="libro" />
|
||||
<button class="button pre" @click="showModal()">
|
||||
Previsualizar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<modal v-if="Visible" @close="closeModal()">
|
||||
<transition name="modal">
|
||||
<div class="modal-backdrop" @click.self="closeModal()">
|
||||
<div
|
||||
class="modal"
|
||||
role="dialog"
|
||||
aria-labelledby="modalTitle"
|
||||
aria-describedby="modalDescription"
|
||||
>
|
||||
<section class="modal-body rounded" id="modalDescription">
|
||||
<iframe
|
||||
:src="PDF"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</modal>
|
||||
<br /><br />
|
||||
|
||||
<div class="container">
|
||||
<div class="row izq">
|
||||
<b style="font-size: 18px;" class="izq">Compartir</b><br />
|
||||
</div>
|
||||
<div class="container izq">
|
||||
<a href="https://www.facebook.com/" class="img"
|
||||
><img
|
||||
style="width: 45px; height: 45px"
|
||||
src=""
|
||||
alt="Facebook"
|
||||
/></a>
|
||||
<a href="" class="img"
|
||||
><img
|
||||
style="width: 45px; height: 45px"
|
||||
src=""
|
||||
alt="Instagram"
|
||||
/></a>
|
||||
<a href="" class="img"
|
||||
><img
|
||||
style="width: 45px; height: 45px"
|
||||
src=""
|
||||
alt="Youtube"
|
||||
/></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 py-5 titulo">
|
||||
<b>Titulo:</b>
|
||||
<p>{{ titulo }}</p>
|
||||
<b>Autor: </b>
|
||||
<p>{{ autor }}</p>
|
||||
<b>Paginas: </b>
|
||||
<p>{{ paginas }}</p>
|
||||
<b>ISBN: </b>
|
||||
<p>{{ isbn }}</p>
|
||||
<b>Año de Impresión: </b>
|
||||
<p>{{ edicion }}</p>
|
||||
|
||||
<b>Versión:</b>
|
||||
<p>{{ version }}</p>
|
||||
<b>Descripción:</b>
|
||||
<div class="overflow-auto">{{ desc }}</div>
|
||||
<b>Precio: </b>
|
||||
<p>${{ precio }}</p>
|
||||
|
||||
<b>Cantidad:</b>
|
||||
<div class="row d-flex align-items-center" >
|
||||
|
||||
<div class="col-2 ">
|
||||
|
||||
<select name="num" id="num">
|
||||
<option value="volvo"
|
||||
v-for="n in inventario"
|
||||
:key="n"
|
||||
>
|
||||
{{n}}
|
||||
</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<a
|
||||
href="https://demo-tienda.acatlan.unam.mx/"
|
||||
class="button text-white d-flex justify-content-center align-items-center"
|
||||
id="buttonC"
|
||||
>
|
||||
<p class="text-center">Agregar al carrito</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Title title="Similares" />
|
||||
<div class="divMaster row ">
|
||||
<div class="col-10 offset-1 d-flex flex-wrap justify-content-center mb-5">
|
||||
<div
|
||||
class="card m-3"
|
||||
style="width: 12rem;"
|
||||
v-bind:key="libro.id"
|
||||
v-for="libro in Libros"
|
||||
@click="descripcion(libro.id)"
|
||||
>
|
||||
<div class="textt">
|
||||
<img :src="libro.img" class="card-img-top rounded" alt="libro" />
|
||||
<div class="card-body cd textt">
|
||||
<p class="card-text textt">
|
||||
{{ libro.title }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import config from "../config/config.js";
|
||||
import Title from "../components/titulo.vue";
|
||||
//import modal from "../components/previsual.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Title
|
||||
//modal
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
inventario:5,
|
||||
idLibro: "",
|
||||
titulo: "",
|
||||
autor: "",
|
||||
paginas: "",
|
||||
isbn: "",
|
||||
edicion: "",
|
||||
precio: "",
|
||||
src: "",
|
||||
version: "",
|
||||
desc: ``,
|
||||
boton2: "",
|
||||
categoria: "",
|
||||
Libros: [],
|
||||
Visible: false,
|
||||
|
||||
isModalVisible: false,
|
||||
//PDF: "http://www.ataun.eus/bibliotecagratuita/Cl%C3%A1sicos%20en%20Espa%C3%B1ol/Nicol%C3%A1s%20Maquiavelo/El%20pr%C3%ADncipe.pdf#toolbar=0&navpanes=0&scrollbar=0&zoom=80"
|
||||
PDF: "RUTA.pdf" //nombre del archivo de previsualizacion del libro
|
||||
// "https://www.imprentanacional.go.cr/editorialdigital/libros/literatura%20infantil/el_principito_edincr.pdf"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit("close");
|
||||
},
|
||||
|
||||
async descripcion(idLibro) {
|
||||
localStorage.clear();
|
||||
window.localStorage.setItem("idLibro", idLibro);
|
||||
location.reload();
|
||||
},
|
||||
showModal() {
|
||||
this.Visible = true;
|
||||
},
|
||||
closeModal() {
|
||||
this.Visible = false;
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let path = `${config.api}`;
|
||||
try {
|
||||
this.idLibro = window.localStorage.getItem("idLibro");
|
||||
let detalle = await axios.get(
|
||||
`${config.api}/libroDetalle?idLibro=${this.idLibro}`
|
||||
);
|
||||
|
||||
let detalleDatos = await detalle.data.datos;
|
||||
|
||||
this.titulo = detalleDatos.titulo;
|
||||
this.autor = detalleDatos.autor;
|
||||
this.paginas = detalleDatos.paginas;
|
||||
this.isbn = detalleDatos.isbn;
|
||||
this.edicion = detalleDatos.impresion;
|
||||
this.precio = detalleDatos.precio;
|
||||
this.version = detalleDatos.version;
|
||||
this.desc = detalleDatos.descripcion;
|
||||
this.categoria = detalleDatos.categoria;
|
||||
//let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
|
||||
this.PDF = `${config.api}/PDFget/?nombrePDF=${detalle.data.pdfVis}`;
|
||||
//console.log(`datos: `,detalleDatos.data );
|
||||
console.log(`Esta es el nombred el pdf ${this.PDF}`);
|
||||
|
||||
window.localStorage.setItem("pdfVis", this.PDF);
|
||||
|
||||
if (detalleDatos.precio !== "Gratis") this.boton2 = "Comprar";
|
||||
else this.boton2 = "Descargar";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
try {
|
||||
let config = {
|
||||
// example url
|
||||
url: `${path}/libroImagen?idLibro=${this.idLibro}`,
|
||||
method: "GET",
|
||||
responseType: "blob"
|
||||
};
|
||||
await axios(config).then(response => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(response.data);
|
||||
reader.onload = () => {
|
||||
this.src = reader.result;
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
try {
|
||||
let similares = await axios.get(
|
||||
`${config.api}/librosSimilares?categoria=${this.categoria}`
|
||||
);
|
||||
similares = similares.data.data;
|
||||
console.log(`${similares}`);
|
||||
for (let i = 0; i < similares.length; i++) {
|
||||
let config = {
|
||||
// example url
|
||||
url: `${path}/libroImagen?idLibro=${similares[i].idLibro}`,
|
||||
method: "GET",
|
||||
responseType: "blob"
|
||||
};
|
||||
try {
|
||||
await axios(config).then(response => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(response.data);
|
||||
reader.onload = () => {
|
||||
this.Libros.push({
|
||||
id: similares[i].idLibro,
|
||||
title: similares[i].titulo,
|
||||
img: reader.result
|
||||
});
|
||||
//this.Libros[i].img = reader.result;
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(`Este libro no se encuentra: ${error}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(`Ocurrio un error ${error}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
/* overflow-x: auto; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
/* position: relative; */
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.divMaster {
|
||||
height: auto;
|
||||
}
|
||||
.card {
|
||||
border: none !important;
|
||||
border-bottom: 5px solid #1b3d70 !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: black;
|
||||
}
|
||||
.img {
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.izq {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.button {
|
||||
background-color: rgb(187, 136, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
height: 2.5rem;
|
||||
width: 15rem;
|
||||
text-align: center;
|
||||
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
border-radius: .5rem;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#buttonC{
|
||||
margin-top: 0rem;
|
||||
}
|
||||
#buttonC p{
|
||||
margin: 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #46c200;
|
||||
color: white;
|
||||
}
|
||||
.pre {
|
||||
background-color: #1e3c70;
|
||||
}
|
||||
.pre:hover {
|
||||
background-color: rgb(187, 136, 0);
|
||||
}
|
||||
|
||||
.titulo {
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
color: balck;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.libro {
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
margin-right: 0;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
|
||||
}
|
||||
.smalll {
|
||||
width: 80px;
|
||||
margin: .7rem;
|
||||
|
||||
margin-right: 0;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
.libro {
|
||||
width: 270px;
|
||||
height: 380px;
|
||||
margin-right: auto;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
|
||||
}
|
||||
.button {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.button {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#buttonC{
|
||||
margin-top: 0rem;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="divMaster">
|
||||
<div class="row">
|
||||
<div class="col-10 offset-1 bor d-flex justify-content-center">
|
||||
<div class="bgAzul">
|
||||
<p class="text-white pTitulo">{{ title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["title"]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bor {
|
||||
border: none !important;
|
||||
border-bottom: 5px solid #1b3d70 !important;
|
||||
}
|
||||
.bgAzul {
|
||||
background-color: #1b3d70;
|
||||
width: 40%;
|
||||
|
||||
border-top-right-radius: 20px 20px !important;
|
||||
border-top-left-radius: 20px 20px !important;
|
||||
}
|
||||
.pTitulo {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.pTitulo {
|
||||
font-size: 20px;
|
||||
padding: 0px 3px;
|
||||
}
|
||||
.bgAzul {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
const config = {
|
||||
//ngrok
|
||||
//api: "https://f8d86328e778.ngrok.io"
|
||||
|
||||
//Local
|
||||
//api: "http://localhost:3000"
|
||||
|
||||
//Pruebas
|
||||
api: "https://venus.acatlan.unam.mx/portal"
|
||||
};
|
||||
module.exports = config;
|
||||
+8
-6
@@ -2,12 +2,10 @@ 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
|
||||
|
||||
import Descrip from './view/Descrip.vue'
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
@@ -20,15 +18,19 @@ const routes = [
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
path: '/datosPersonales',
|
||||
component: PersonalData,
|
||||
name: 'personalData'
|
||||
=======
|
||||
},
|
||||
{
|
||||
path: '/cart',
|
||||
component: Cart,
|
||||
name: 'cart'
|
||||
>>>>>>> origin
|
||||
},
|
||||
{
|
||||
path: '/descripcion',
|
||||
component: Descrip,
|
||||
name: 'descripcion'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header />
|
||||
|
||||
|
||||
<Descrip />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./../components/Header.vue";
|
||||
import Descrip from "./../components/Description.vue";
|
||||
import Footer from "./../components/Footer.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
Header,
|
||||
Descrip,
|
||||
Footer
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user