servicio_social_front/components/admin/servicio/vistaServicio.vue

<template>
  <div class="container">
    <div class="mb-5">
      <b-button class="boton is-info" @click="$router.push('./')">
        Regresar
      </b-button>
      <b-button class="boton is-info" @click="$router.push('./servicio/modificar')">
        Editar información
      </b-button>
    </div>
    <div id="Status">
      <p class="is-size-3" v-if="alumno.idStatus == 1">
        Pre Registro
      </p>
      <p class="is-size-3" v-else-if="alumno.idStatus == 2">
        Pre Registro Válidado
      </p>
      <p class="is-size-3" v-else-if="alumno.idStatus == 3">
        Registro
      </p>
      <p class="is-size-3" v-else-if="alumno.idStatus == 4">
        Pre Término
      </p>
      <p class="is-size-3" v-else-if="alumno.idStatus == 5">
        Término
      </p>
      <p class="is-size-3" v-else-if="alumno.idStatus == 6">
          Liberación
      </p>
    </div>
    <div id="programa">
      <br>
      <p class="is-size-4">Datos del programa</p><br>
      <p class="is-size-5">Programa: <span> {{alumno.programa}} </span></p>
      <p class="is-size-5">Clave del programa: <span> {{alumno.clavePrograma}} </span></p>
      <p class="is-size-5">Dependecia: <span> {{alumno.dependecia}} </span></p>
      <p class="is-size-5">Institución: <span> {{alumno.institucion}} </span></p>
      <br>
    </div>
    <div id="datosPersonales">
      <p class="is-size-4" >Datos personales</p><br>
      <p class="is-size-5 mt-5" v-if="alumno.nombre">Nombre: <span> {{alumno.nombre}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.noCuenta">Número de cuenta: <span> {{alumno.noCuenta}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.carrera">Carrera: <span> {{alumno.carrera}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.correo">Correo: <span> {{alumno.correo}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.creditos">Créditos: <span> {{alumno.creditos}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">Fecha de inicio: <span> {{alumno.fechaInicio}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.fechaFin">Fecha de fin: <span> {{alumno.fechaFin}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.telefono">Teléfono: <span> {{alumno.telefono}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.direccion">Dirección: <span> {{alumno.direccion}} </span></p>
      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">Fecha de nacimiento: <span> {{alumno.fechaNacimiento}} </span></p>
    </div>
    <div id="enlaces">
      <br>
      <div class="level">
        <a href="google.com" class="has-text-link link">Ver carta de aceptación</a>
        <b-button class="is-danger" v-if="alumno.idStatus == 1">
          Rechazar
        </b-button>
      </div>
      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 1">Confirmar el pre-registro del alumno</h3>
      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 4">Termino</h3>
      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 5">Validar el término del alumno</h3>
      <div class="level">
        <a href="google.com" class="has-text-link link">Ver carta de término</a>
        <b-button class="is-danger" v-if="alumno.idStatus == 5">
          Rechazar
        </b-button>
      </div>
      <div class="level">
        <a href="google.com" class="has-text-link link">Ver informe global de actividades</a>
        <b-button class="is-danger" v-if="alumno.idStatus == 5">
          Rechazar
        </b-button>
      </div>
      <p v-if="alumno.cuestionarioP">Cuenta con cuestionario de programa resuelto.</p>
      <p v-if="alumno.cuestionarioA">Cuenta con cuestionario de alumno resuelto.</p>
    </div>
    <div id="acciones" class="my-5">
      <b-button class="is-success" v-if="mostrarConfirmar()">
        Confirmar
      </b-button>
      <b-button class="is-danger">
        Cancelar
      </b-button>
      <b-button class="is-info" @click="$router.push('./')">
        Regresar
      </b-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      alumno: {
        fechaInicio: '14/2/2020',
        fechaFin: '14/8/2020',
        idStatus: 5
      },
      idRegistro: window.localStorage.getItem('idRegistro'),
      token: {
        headers: {
          token: window.localStorage.getItem('token')
        }
      },
      linkCartaAceptacion: '',
      linkCartaTermino: '',
      linkInformeGlobal: '',
      enviarMensaje: false,
      enviarCancel: false,
      mensaje: '',
      mensajeCancel: '',
      spinner: false,
      vistoBueno: false,
      acatlan: false
    }
  },
  methods: {
    mostrarConfirmar () {
      if (this.alumno.idStatus === 1) return true
      else if (this.alumno.idStatus === 5) {
        if (!this.alumno.acatlanContigo) return true
        else if (this.vistoBueno) return true
      }
      return false
    }
  }
}
</script>

<style scoped>
.boton {
  margin-top: 2%;
}
.is-size-5{
  margin-bottom: 10px;
}
.link-f {
  font-size: 27px !important;
}
.link {
  display: flex;
  justify-content: flex-start;
  font-size: 20px;
  margin-top: 10px;
}

</style>