inscripciones_front/components/admin/ticket.vue

<template>
  <div class="columns px-2">
    <div class="column is-one-third py-5">
      <figure class="containerImg">
        <b-image class="zoom" :src="urlTicket" alt="Imagen del ticket">
          <b-loading :is-full-page="isFullPage" v-model="isLoading">
          </b-loading>
        </b-image>
      </figure>
    </div>

    <div class="column is-1"></div>

    <div class="column mt-6">
      <p>
        Administrador por favor revisa que todos los datos sean correctos, en
        caso de ser así valida el ticket.
      </p>
      <p>
        Recuerda que al validar el ticket también se confirma la inscripción del
        alumno.
      </p>

      <div class="box">
        <p><b>Número de cuenta</b> {{ numeroCuenta }}</p>
        <p><b>Folio:</b> {{ $route.query.folio }}</p>
        <p><b>Cantidad: </b> {{ $route.query.monto }}</p>
        <p><b>Fecha del ticket:</b> {{ fecha($route.query.fecha) }}</p>
      </div>
      <div class="has-text-centered pb-5">
        <b-button
          type="is-success"
          @click="
            validacion(1),
              imprimirWarning(
                '¿ Estas seguro que los datos son correctos y quieres validar este ticket ?',
                validar
              )
          "
          >Validar</b-button
        >
        <b-button
          type="is-danger"
          @click="
            validacion(0),
              imprimirWarning(
                '¿ Estas seguro que los datos son incorrectos y quieres declinar el ticket ?',
                validar
              )
          "
          >Denegar</b-button
        >
        <b-button type="is-info" @click="regresar()">Regresar</b-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  props: {
    imprimirMensaje: { type: Function, require: true },
    imprimirError: { type: Function, require: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, require: true },
  },
  data() {
    return {
      token: '',

      isImageModalActive: false,
      isLoading: true,
      isFullPage: true,
      urlTicket: '',
      validado: null,

      numeroCuenta: localStorage.getItem('noCuenta'),
    }
  },
  methods: {
    traerTicket() {
      axios
        .get(`${process.env.api}/admin/ticket?folio=${this.$route.query.folio}`)
        .then((res) => {
          this.isLoading = false
          this.urlTicket = res.config.url
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    validacion(value) {
      this.validado = value
    },
    validar() {
      const data = {
        folio: this.$route.query.folio,
        validacion: this.validado,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/admin/validar`, data, this.token)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
        .finally(() => {
          this.$router.go(-1)
        })
    },
    fecha(fecha) {
      return moment(fecha).format('L')
    },
    regresar() {
      this.$router.go(-1)
    },
  },
  created() {
    this.token = {
      headers: { token: localStorage.getItem('token') },
    }
    this.traerTicket()
  },
}
</script>
<style scoped>
.img {
  height: 350px;
  width: 350px;
  padding-bottom: 470px;
}

.zoom {
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(1.6);
  position: relative;
  display: flex;
  height: 350px;
  margin-top: 35%;
  margin-bottom: 35%;
}
</style>