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

descricion

Browse Source
This commit is contained in:
casnet1
2020-10-27 19:06:14 -06:00
parent b9e7cf483b
commit 325ab92f16
3 changed files with 94 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Description.vue
+90 -147
View File
@@ -1,26 +1,29 @@
<template>
<div class="container">
<div class="row ">
<div class="col-md-6 col-sm-12 py-5">
<div class="col-md-6 col-sm-12 pt-5">
<div class="row p-0">
<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-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 ">
<div v-bind:key="src.id"
v-for="src in src"
@click="src2 = src">
<img :src="src" alt="" class="smalll" />
</div>
</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 class="p-0 col-10 d-flex justify-content-center flex-column align-items-center">
<img :src="src2" alt="" class="libro" />
<button class="button pre" @click="showModal()">
Previsualizar
</button>
</div>
</div>
</div>
<modal v-if="Visible" @close="closeModal()">
<div v-if="Visible" @close="closeModal()">
<transition name="modal">
<div class="modal-backdrop" @click.self="closeModal()">
<div
@@ -40,39 +43,10 @@
</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>
<br /><br />
</div>
<div class="col-md-6 col-sm-12 py-5 titulo">
<b>Titulo:</b>
<p>{{ titulo }}</p>
@@ -120,9 +94,10 @@
</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
<!-- <div
class="card m-3"
style="width: 12rem;"
v-bind:key="libro.id"
@@ -137,19 +112,36 @@
</p>
</div>
</div>
</div>
</div> -->
<div class="carousel-items card m-3 shadow"
style="width: 12rem;"
v-bind:key="item.id"
v-for="item in Libros"
@click="descripcion(libro.id)"
>
<img :src="item.img" class="card-img-top" alt="img" />
<div class="card-body ">
<h5 class="text-center"> <b >${{item.precio}}</b></h5>
<p class="card-text overflow-clip">{{item.descripcion}}</p>
</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
@@ -159,24 +151,46 @@ export default {
return {
inventario:5,
idLibro: "",
titulo: "",
autor: "",
paginas: "",
isbn: "",
edicion: "",
precio: "",
src: "",
version: "",
desc: ``,
titulo: "Procesos sociopolíticos y el espacio urbano. El desarrollo histórico urbano de San José Río Hondo, Naucalpan de Juárez (1700 a.C al 2000 d.C.)",
autor: "Mario Camacho Cardona",
paginas: "250",
isbn: "978-607-02-8433-5",
edicion: "Primera edición 2016",
precio: "324",
src: [ "https://demo-tienda.acatlan.unam.mx/55-large_default/metodos-numericos-para-sistemas-de-ecuaciones-no-lineales-interpolacion-y-ajuste-de-curvas.jpg",
"https://tienda.acatlan.unam.mx/365-large_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg",
"https://tienda.acatlan.unam.mx/363-large_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg"],
src2:"https://tienda.acatlan.unam.mx/363-large_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg",
version: "Impresa",
desc: `La obra valora la generación y las trasformaciones de la configuración espacial urbano-regional a través del suceder del desarrollo urbano-regional, provocadas por los modelos económico-políticos, administrativos. El sitio de estudio fue: San José Rio Hondo, ubicado en el Estado de México.`,
boton2: "",
categoria: "",
Libros: [],
Libros: [
{
img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
},
{
img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
}
],
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"
//PDF: "RUTA.pdf" //nombre del archivo de previsualizacion del libro
PDF: "https://venus.acatlan.unam.mx/portal/PDFget/?nombrePDF=espacio_semico_ambiental.pdf"
};
},
methods: {
@@ -195,91 +209,9 @@ export default {
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>
@@ -388,6 +320,17 @@ p {
margin-right: 0;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
}
.modal-backdrop{
opacity: 1;
}
.shadow{
-webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
}
@media (max-width: 450px) {
.libro {
width: 270px;
src/view/Descrip.vue
+4 -4
View File
@@ -3,7 +3,7 @@
<Header />
<Descrip />
<Description />
<Footer />
</div>
@@ -11,14 +11,14 @@
<script>
import Header from "./../components/Header.vue";
import Descrip from "./../components/Description.vue";
import Description from "./../components/Description.vue";
import Footer from "./../components/Footer.vue";
export default {
name: "App",
components: {
Header,
Descrip,
Description,
Footer
}
};