PortaFront/src/components/descripcion.vue

<template>
  <div class="container">
    <div class="row ">
      <div class="col-md-6 col-sm-12 py-5">
        <img :src="src" alt="" class="libro" />
        <button class="button pre" @click="showModal">
          Previsualizar
        </button>

        <modal v-show="isModalVisible" @close="closeModal" :pdfPre="PDF" />
        <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="../assets/facebook.png"
                alt="Facebook"
            /></a>
            <a href="https://www.instagram.com/" class="img"
              ><img
                style="width: 45px; height: 45px"
                src="../assets/Instagram.png"
                alt="Instagram"
            /></a>
            <a href="https://www.youtube.com/" class="img"
              ><img
                style="width: 45px; height: 45px"
                src="../assets/YouTube.png"
                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>Precio: </b>
        <p>{{ precio }}</p>
        <b>Versión:</b>
        <p>{{ version }}</p>
        <b>Descripción:</b>
        <div class="overflow-auto">{{ desc }}</div>

        <a
          href="https://demo-tienda.acatlan.unam.mx/"
          class="button text-white d-flex justify-content-center align-items-center"
        >
          <p class="text-center">Comprar</p>
        </a>
      </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 {
      idLibro: "",
      titulo: "",
      autor: "",
      paginas: "",
      isbn: "",
      edicion: "",
      precio: "",
      src: "",
      version: "",
      desc: ``,
      boton2: "",
      categoria: "",
      Libros: [],

      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: {
    async descripcion(idLibro) {
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      location.reload();
    },
    showModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = 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}`
      );

      detalle = await detalle.data.datos;

      this.titulo = detalle.titulo;
      this.autor = detalle.autor;
      this.paginas = detalle.paginas;
      this.isbn = detalle.isbn;
      this.edicion = detalle.impresion;
      this.precio = detalle.precio;
      this.version = detalle.version;
      this.desc = detalle.descripcion;
      this.categoria = detalle.categoria;
      if (detalle.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>
.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: 4.5rem;
  width: 15rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  border-radius: 1rem;
  -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;
}
.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: auto;
  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;
  }
}
</style>