Files
ASINEA-FRONT/src/view/registro.vue
T
2020-09-22 10:45:54 -05:00

1890 lines
77 KiB
Vue

<template>
<div class="container">
<div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><img width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 20px; padding-right: 20px;" type="text/html" allowscriptaccess="always" allowfullscreen=true scrolling="yes" allownetworking="all" src="../assets/asineaImagen.jpg" > </div> </div>
<div class="loader" v-if="enviando">Loading...</div>
<div class="wrapper fadeInDown" v-else>
<div id="formContent">
<div class="container principal">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<h1>Registro</h1>
</div>
<form>
<div class=" wrapperRow row">
<h2>Datos personales</h2>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Nombre" v-model="nombre">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Apellido paterno" v-model="apellidoPaterno">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Apellido Materno" v-model="apellidoMaterno">
</div>
</div>
<div class="row">
<div class="col-md-8">
<input type="text" class="fadeIn second" placeholder="CURP" v-model="curp">
</div>
<div class="col-md-2">
<select type="text" id='genero' v-model='genero' >
<option disabled value="">Genero</option>
<option >Masculino</option>
<option >Femenino</option>
</select>
</div>
<div class="col-md-2">
<input type="number" class="fadeIn second" placeholder="Edad" v-model="edad">
</div>
</div>
<div class="row">
<div class="col-md-8">
<input type="text" class="fadeIn second" placeholder="Correo" v-model="correo">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Telefono" v-model="telefono">
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="password" class="fadeIn second" placeholder="Contraseña" v-model="password">
</div>
<div class="col-md-6">
<input type="password" class="fadeIn second" placeholder="Confirma contraseña" v-model="confPassword">
</div>
</div>
<div class=" wrapperRow row">
<h2>Datos Académicos</h2>
</div>
<div class="row" style="margin-left: 1rem;">
<div class="col-md-4 form-check form-check-inline">
<input @click="institucion=''" class="form-check-input" type="radio" name="comunidad" id="comunidad1" value="Comunidad UNAM" v-model="comunidad">
<label class="form-check-label" for="comunidad1">Comunidad UNAM</label>
</div>
<div class="col-md-4 form-check form-check-inline">
<input @click="institucion=''" class="form-check-input" type="radio" name="comunidad" id="comunidad2" value="Afiliado ASINEA" v-model="comunidad">
<label class="form-check-label" for="comunidad2">Afiliado ASINEA</label>
</div>
<div class="col-md-3 form-check form-check-inline">
<input @click="institucion=''" class="form-check-input" type="radio" name="comunidad" id="comunidad3" value="Publico en general" v-model="comunidad">
<label class="form-check-label" for="comunidad3">Publico en general</label>
</div>
</div>
<div class="row">
<div class="col" v-if="comunidad=='Comunidad UNAM'">
<select id="institucion" type="text" v-model="institucion">
<option disabled value="">Seleccione Institucion</option>
<option>Facultad de Aquitectura</option>
<option>FES-Acatlán</option>
<option>FES-Aragon</option>
</select>
</div>
<div class="col" v-if="comunidad=='Publico en general'">
<input type="text" class=" second" placeholder="Institución" v-model="institucion">
</div>
<div class="col" v-if="comunidad=='Afiliado ASINEA'">
<select id="institucion" type="text" v-model="institucion">
<option disabled value="">Seleccione Institucion</option>
<option v-for="item in escuelas" v-bind:key="item.idUniversidad" >
{{item.nombre}}
</option>
</select>
</div>
</div>
<div class=" wrapperRow row">
<h2>Situación Académica</h2>
</div>
<div class="row" style="margin-left: 1rem;">
<div class="col-md-4 form-check form-check-inline">
<input @click="gradoAcademico='', asignaturaImpartida='', limpiar()" class="form-check-input" type="radio" name="situacionAcademica" id="situacionAcademica1" value="Estudiante" v-model="situacionAcademica">
<label class="form-check-label" for="situacionAcademica1">Estudiante</label>
</div>
<div class="col-md-4 form-check form-check-inline">
<input @click="nivel='', limpiar()" class="form-check-input" type="radio" name="situacionAcademica" id="situacionAcademica2" value="Profesor" v-model="situacionAcademica">
<label class="form-check-label" for="situacionAcademica2">Profesor</label>
</div>
<div class="col-md-3 form-check form-check-inline">
<input @click="nivel='',gradoAcademico='', asignaturaImpartida=''" class="form-check-input" type="radio" name="situacionAcademica" id="situacionAcademica3" value="Director" v-model="situacionAcademica">
<label class="form-check-label" for="situacionAcademica3">Director</label>
</div>
</div>
<div class="row">
<div class="col" v-if="situacionAcademica=='Estudiante'">
<select id="nivel" type="text" v-model="nivel">
<option disabled value="">Nivel o Semestre</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="col" v-if="situacionAcademica=='Profesor'">
<select id="gradoAcademico" type="text" v-model="gradoAcademico" >
<option disabled value="">Grado Académico</option>
<option>Licenciatura</option>
<option>Maestría</option>
<option>Doctorado</option>
</select>
</div>
<div class="col" v-if="situacionAcademica=='Profesor'" >
<input type="text" class=" second" placeholder="Asignatura que imparte" v-model="asignaturaImpartida">
</div>
</div>
<div class=" wrapperRow row">
<h2>Tipo de participación</h2>
</div>
<div class="row" style="margin-left: 1rem;">
<div class="col-md-4 form-check form-check-inline">
<input @click="codigoGrupal=''" class="form-check-input" type="radio" name="tipoParticipacion" id="tipoParticipacion1" value="Individual" v-model="tipoParticipacion">
<label class="form-check-label" for="tipoParticipacion1">Individual</label>
</div>
<div class="col-md-4 form-check form-check-inline">
<input class="form-check-input" type="radio" name="tipoParticipacion" id="tipoParticipacion2" value="Grupal" v-model="tipoParticipacion">
<label class="form-check-label" for="tipoParticipacion2">Grupal</label>
</div>
</div>
<div class="row" style="margin-left: 1rem; text-align: left;" v-if="tipoParticipacion=='Grupal'">
<div class="col alingLeft" >
<p >Las inscripciones grupales aplican para aquellas Instituciones que deseen inscribir a más de un profesor y alumno en la modalidad como asistente. El mínimo grupal deberá ser de 10 académicos y/o 20 alumnos. Los talleres y visitas guiadas, tendrán costo</p>
</div>
</div>
<div class="row" v-if="tipoParticipacion=='Grupal'">
<div class="col">
<input type="text" class=" second" placeholder="Codigo Grupal" v-model="codigoGrupal">
</div>
</div>
<div v-if=" situacionAcademica!='Director' ">
<div class=" wrapperRow row alingLeft">
<h2>Actividades</h2>
<p>Al seleccionar cualquiera de las actividades que se presentas a continuacion tendra un costo de $300.00 para alumnos y $500.00 para profesores</p>
</div>
<div class="alumno" v-if="situacionAcademica=='Estudiante'">
<div class="row">
<div class="col-md-6">
<h6>Miercoles 28 de Octubre 2020</h6>
<ul class="list-group">
<li class="list-group-item accept">
<div class="row " >
<div class="col-8" >
<p>Apertura I Bienvenida</p>
</div>
<div class="col-4">
<p>10:00 - 11:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A2"
name="A2"
value=true
unchecked-value=false
v-model="A2"
>
01_Diálogo Magistral Iberoamericano Idealización
Gabriela Carrillo - Alberto Campo Baeza - Camilo Restrepo
</b-form-checkbox>
</div>
<div class="col-4">
<p>11:00 - 13:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A3"
name="A3"
value=true
unchecked-value=false
v-model="A3"
>
01_Encuentro de estudiante en tiempo rea. Nuestra Imagen Actual
</b-form-checkbox>
</div>
<div class="col-4">
<p>13:00 - 15:00</p>
</div>
</div>
</li>
<li class="list-group-item accept">
<div class="row">
<div class="col-8">
<p>Maratón de Videos</p>
</div>
<div class="col-4">
<p>15:00 - 16:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A5"
name="A5"
value=true
unchecked-value=false
v-model="A5"
>
02_Encuentro de estudiante en tiempo real. Territorios de aprendizaje
</b-form-checkbox>
</div>
<div class="col-4">
<p>16:00 - 18:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A6"
name="A6"
value=true
unchecked-value=false
v-model="A6"
>
Actividades Paralelas. Presentación de la Revista ASINEA no. Segunda época
</b-form-checkbox>
</div>
<div class="col-4">
<p>18:00 - 20:00</p>
</div>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<h6>Jueves 29 de Octubre 2020</h6>
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled=true>Conferencias</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A13"
name="A13"
value=true
unchecked-value=false
v-model="A13"
>
Actividades Paralelas
</b-form-checkbox>
</div>
<div class="col-4">
<p>11:00 - 13:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A14"
name="A14"
value=true
unchecked-value=false
v-model="A14"
>
03_Encuentro de estudiante en tiempo real. Territorios de aprendizaje
</b-form-checkbox>
</div>
<div class="col-4">
<p>13:00 - 15:00</p>
</div>
</div>
</li>
<li class="list-group-item accept">
<div class="row">
<div class="col-8">
<p>Maratón de Videos</p>
</div>
<div class="col-4">
<p>15:00 - 16:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A16"
name="A16"
value=true
unchecked-value=false
v-model="A16"
>
04_Encuentro de estudiante en tiempo real. Construir el futuro
</b-form-checkbox>
</div>
<div class="col-4">
<p>16:00 - 18:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A17"
name="A17"
value=true
unchecked-value=false
v-model="A17"
>
02_Diálogo Magistral Nacional Realidad. Tatiana Bilbao - Jorge Gracia - Juan José Santibañez
</b-form-checkbox>
</div>
<div class="col-4">
<p>18:00 - 20:00</p>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<h6 style="margin-top: 2rem;">Viernes 30 de Octubre 2020</h6>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A24"
name="A24"
value=true
unchecked-value=false
v-model="A24"
>
Actividades Paralelas
</b-form-checkbox>
</div>
<div class="col-4">
<p>11:00 - 13:00</p>
</div>
</div>
</li>
<li class="list-group-item obligatory">
<div class="row">
<div class="col-8" >
<b-form-group >
<b-form-radio v-model="viernesOp" name="some-radios" value='A25'>Conclusiones. Nuestra imagen actual </b-form-radio>
<b-form-radio v-model="viernesOp" name="some-radios" value='A26'>Conclusiones. Territorios de aprendizaje</b-form-radio>
<b-form-radio v-model="viernesOp" name="some-radios" value='A27'>Conclusiones. Construir el futurol</b-form-radio>
</b-form-group>
</div>
<div class="col-4">
<p>13:00 - 15:00</p>
</div>
</div>
</li>
<li class="list-group-item accept">
<div class="row">
<div class="col-8">
<p> Presentación de selección Maratón de videos</p>
</div>
<div class="col-4">
<p>15:00 - 16:00</p>
</div>
</div>
</li>
<li class="list-group-item accept">
<div class="row">
<div class="col-8">
<p>Cierre y Plenaria General. Entrega de estafeta - Presentación de la nueva sede</p>
</div>
<div class="col-4">
<p>16:00 - 18:00</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="profesor" v-if="situacionAcademica=='Profesor'">
<div class="row">
<div class="col-md-6">
<h6>Miercoles 28 de Octubre 2020</h6>
<ul class="list-group">
<li class="list-group-item accept">
<div class="row " >
<div class="col-8" >
<p>Apertura I Bienvenida</p>
</div>
<div class="col-4">
<p>10:00 - 11:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A2"
name="A2"
value=true
unchecked-value=false
v-model="A2"
>
01_Diálogo Magistral Iberoamericano Idealización
Gabriela Carrillo - Alberto Campo Baeza - Camilo Restrepo
</b-form-checkbox>
</div>
<div class="col-4">
<p>11:00 - 13:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-group >
<b-form-radio v-model="miercoles1" name="some-radios" value='A7'>01_Debate abierto Nuestra imagen actual </b-form-radio>
<b-form-radio v-model="miercoles1" name="some-radios" value='A8'>01_Debate abierto Territorios de aprendizaje</b-form-radio>
<b-form-radio v-model="miercoles1" name="some-radios" value='A9'>01_Debate abierto Construir el futuro</b-form-radio>
</b-form-group>
</div>
<div class="col-4">
<p>13:00 - 15:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A4"
name="A4"
value=true
unchecked-value=false
v-model="A4"
>
Maratón de Videos
</b-form-checkbox>
</div>
<div class="col-4">
<p>15:00 - 16:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-group >
<b-form-radio v-model="miercoles2" name="some-radios" value="A10">02_Debate abierto Nuestra imagen actual </b-form-radio>
<b-form-radio v-model="miercoles2" name="some-radios" value="A11">02_Debate abierto Territorios de aprendizaje</b-form-radio>
<b-form-radio v-model="miercoles2" name="some-radios" value="A12">02_Debate abierto Construir el futuro</b-form-radio>
</b-form-group>
</div>
<div class="col-4">
<p>16:00 - 18:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A6"
name="A6"
value=true
unchecked-value=false
v-model="A6"
>
Actividades Paralelas. Presentación de la Revista ASINEA no. Segunda época
</b-form-checkbox>
</div>
<div class="col-4">
<p>18:00 - 20:00</p>
</div>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<h6>Jueves 29 de Octubre 2020</h6>
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled=true>Conferencias</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A13"
name="A13"
value=true
unchecked-value=false
v-model="A13"
>
Actividades Paralelas
</b-form-checkbox>
</div>
<div class="col-4">
<p>11:00 - 13:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-group >
<b-form-radio v-model="jueves1" name="A18" value="A18">03_Debate abierto Nuestra imagen actual </b-form-radio>
<b-form-radio v-model="jueves1" name="A19" value="A19">03_Debate abierto Territorios de aprendizaje</b-form-radio>
<b-form-radio v-model="jueves1" name="A20" value="A20"> 03_Debate abierto Construir el futuro</b-form-radio>
</b-form-group>
</div>
<div class="col-4">
<p>13:00 - 15:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A15"
name="A15"
value=true
unchecked-value=false
v-model="A15"
>
Maratón de Videos
</b-form-checkbox>
</div>
<div class="col-4">
<p>15:00 - 16:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-group >
<b-form-radio v-model="jueves2" name="A21" value="A21">04_Debate abierto Nuestra imagen actual</b-form-radio>
<b-form-radio v-model="jueves2" name="A22" value="A22">04_Debate abierto Territorios de aprendizaje</b-form-radio>
<b-form-radio v-model="jueves2" name="A23" value="A23">04_Debate abierto Construir el futuro</b-form-radio>
</b-form-group>
</div>
<div class="col-4">
<p>16:00 - 18:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A17"
name="A17"
value=true
unchecked-value=false
v-model="A17"
>
02_Diálogo Magistral Nacional Realidad. Tatiana Bilbao - Jorge Gracia - Juan José Santibañez
</b-form-checkbox>
</div>
<div class="col-4">
<p>18:00 - 20:00</p>
</div>
</div>
</li>
</ul>
</div>
<div class="col" >
<h6 style="margin-top: 2rem;">Viernes 30 de Octubre 2020</h6>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A24"
name="A24"
value=true
unchecked-value=false
v-model="A24"
>
Actividades Paralelas
</b-form-checkbox>
</div>
<div class="col-4">
<p>11:00 - 13:00</p>
</div>
</div>
</li>
<li class="list-group-item obligatory">
<div class="row">
<div class="col-8">
<b-form-group >
<b-form-radio v-model="viernesOp" name="some-radios" value='A25'>Conclusiones. Nuestra imagen actual </b-form-radio>
<b-form-radio v-model="viernesOp" name="some-radios" value='A26'>Conclusiones. Territorios de aprendizaje</b-form-radio>
<b-form-radio v-model="viernesOp" name="some-radios" value='A27'>Conclusiones. Construir el futurol</b-form-radio>
</b-form-group>
</div>
<div class="col-4">
<p>13:00 - 15:00</p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-8">
<b-form-checkbox
id="A28"
name="A28"
value=true
unchecked-value=false
v-model="A28"
>
Presentación de selección Maratón de videos
</b-form-checkbox>
</div>
<div class="col-4">
<p>15:00 - 16:00</p>
</div>
</div>
</li>
<li class="list-group-item accept">
<div class="row">
<div class="col-8">
<p>Cierre y Plenaria General. Entrega de estafeta - Presentación de la nueva sede</p>
</div>
<div class="col-4">
<p>16:00 - 18:00</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class=" wrapperRow row alingLeft">
<h2 class="alingLeft">Estudios de practica</h2>
<p class="alingLeft">Se llevarán a cabo del 26-30 de octubre 2020. 20 horas exposición en línea y trabajo práctico. Consultar horarios en la página del evento. El costo será de $200.00. Solo podrá elegir un Estudio de práctica</p>
</div>
<div class="row">
<div class="col">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Nombre</th>
<th scope="col">Cupo Actual</th>
<th scope="col">Cupo maximo</th>
</tr>
</thead>
<tbody >
<tr v-for="item in estudios" v-bind:key="item.idEvento" @click="addEstudio(item)">
<td style="background-color: #39ace7;" class="alingLeft" v-if="buscarEstudio(item)">{{item.nombreEvento}}</td>
<td class="alingLeft" v-else>{{item.nombreEvento}}</td>
<td style="background-color: #39ace7; " v-if="buscarEstudio(item)">{{item.cupo}}</td>
<td v-else>{{item.cupo}}</td>
<td style="background-color: #39ace7; " v-if="buscarEstudio(item)">{{item.cupoMaximo}}</td>
<td v-else>{{item.cupoMaximo}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class=" wrapperRow row">
<h2 class="alingLeft">Recorridos CDMX</h2>
<p class="alingLeft" >Se llevarán a cabo el 31 de octubre. Consultar horarios en la página del evento. Solo podrá elegir máximo dos recorridos y su costo será de $ 200.00</p>
</div>
<div class="row">
<div class="col">
<div>
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag }">
<!-- <b-input-group class="mb-2">
<b-form-input
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="New tag - Press enter to add"
class="form-control"
></b-form-input>
<b-input-group-append>
<b-button @click="addTag()" variant="primary">Add</b-button>
</b-input-group-append>
</b-input-group> -->
<p>Recorridos Escogidos</p>
<div class="" >
<b-form-tag
v-for="tag in tags"
@remove="removeTag(tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1"
>{{ tag }}</b-form-tag>
</div>
</template>
</b-form-tags>
</div>
</div>
</div>
<div class="row">
<div class="col">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Nombre</th>
<th scope="col">Cupo Actual</th>
<th scope="col">Cupo maximo</th>
</tr>
</thead>
<tbody >
<tr v-for="item in recorridos" v-bind:key="item.idEvento" @click="addRecorrido(item)">
<td style="background-color: #39ace7; " class="alingLeft" v-if="buscarTag(item)">{{item.nombreEvento}}</td>
<td class="alingLeft" v-else>{{item.nombreEvento}}</td>
<td style="background-color: #39ace7; " v-if="buscarTag(item)">{{item.cupo}}</td>
<td v-else>{{item.cupo}}</td>
<td style="background-color: #39ace7; " v-if="buscarTag(item)">{{item.cupoMaximo}}</td>
<td v-else>{{item.cupoMaximo}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div class="row" style="margin-left: 1rem; text-align: left;">
<div class="col">
<b-form-checkbox
v-model ="aceptar"
name="checkbox-1"
value=true
unchecked-value=false
>
Referencia Bancaria
</b-form-checkbox>
</div>
</div>
<br/>
<div class="row" style="margin-left: 1rem; text-align: left;">
<div class="col">
<p>Para realizar su pago necesitará un número de referencia único (no es la CLABE). Podrá utilizarla para hacer el depósito directo en el banco BBVA BANCOMER o una transferencia interbancaria de BBVA-BBVA
La referencia será enviada a su correo electrónico en un tiempo no mayor a 2 días hábiles, tendrán una vigencia de 48 horas. En este lapso deberá enviar su el comprobante para poder validar que el pago fue realizado correctamente, de no enviarlo, no podremos asegurar su lugar en las actividades de su interés.
Es necesaria la utilización de la misma o notificar que necesita ser cancelada. Es de uso único.</p>
</div>
</div>
<div class="row" style="margin-left: 1rem; text-align: left;">
<div class="col">
<h2>Total a pagar: ${{suma}}.00</h2>
</div>
</div>
</div>
<input style="margin-top: 3rem;" type="button" class="fadeIn fourth" value="Registrate" @click="registro()">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" href="https://arquitectura.unam.mx/asinea-2020.html">Mas información</a> <br/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import config from "../config/config.js";
import Swal from "sweetalert2";
export default {
name: "registro",
components: {
},
data() {
return {
nombre: "",
apellidoPaterno: "",
apellidoMaterno: "",
curp: "",
genero: "",
edad: "",
correo: "",
telefono: "",
password: "",
confPassword: "",
comunidad: "",
institucion: "",
situacionAcademica: "",
nivel: "",
gradoAcademico: "",
asignaturaImpartida: "",
tipoParticipacion: "",
codigoGrupal: "",
actividaddes : [],
escuelas: [],
value: [],
estudios : [],
recorridos: [],
recorridosEscogidos: [],
estudioElegido: null,
A1:false,
A2:false,
A3:false,
A4:false,
A5:false,
A6:false,
A7:false,
A8:false,
A9:false,
A10:false,
A11:false,
A12:false,
A13:false,
A14:false,
A15:false,
A16:false,
A17:false,
A18:false,
A19:false,
A20:false,
A21:false,
A22:false,
A23:false,
A24:false,
A25:false,
A26:false,
A27:false,
A28:false,
A29:false,
viernesOp: '',
jueves1: '',
jueves2: '',
miercoles1: '',
miercoles2: '',
aceptar: false,
totalPagar : 0,
enviando: false
};
},
methods: {
async menssajeWar(titulo){
await Swal.fire({
title: titulo,
icon: "warning"
});
},
async registro(){
// nombre: "",
// apellidoPaterno: "",
// apellidoMaterno: "",
// curp: "",
// genero: "",
// edad: "",
// correo: "",
// telefono: "",
// password: "",
// confPassword: "",
// comunidad: "",
// institucion: "",
// situacionAcademica: "",
// nivel: "",
// gradoAcademico: "",
// asignaturaImpartida: "",
// tipoParticipacion: "",
// codigoGrupal: "",
if(this.nombre === "") return this.menssajeWar('Falta llenar el nombre');
if(this.apellidoPaterno === "") return this.menssajeWar('Falta llenar el Apellido Paterno')
if(this.apellidoMaterno === "") return this.menssajeWar('Falta llenar el Apellido Materno')
if(this.curp === "") return this.menssajeWar('Falta llenar el CURP');
if(this.curp.length != 18) return this.menssajeWar('CURP no valido');
if(this.genero === "") return this.menssajeWar('Falta seleccionar el genero');
if(this.edad === "") return this.menssajeWar('Falta llenar la edad');
if (parseInt(this.edad, 10) < 10 || parseInt(this.edad, 10) > 99) return this.menssajeWar('Edad no validad');
if (this.telefono === "") return this.menssajeWar('Falta llenar el telefono');
if (this.telefono.length < 10) return this.menssajeWar('Telefono no valido');
if (this.correo < 10) return this.menssajeWar('Falta el correo');
if (this.password != this.confPassword) return this.menssajeWar("Las contraseñas no coinciden");
if (this.comunidad === "") return this.menssajeWar("Falta seleccionar comunidad");
if (this.situacionAcademica === "") return this.menssajeWar("Falta seleccionar situación Académica");
if ( `${this.aceptar}` === `false`) return this.menssajeWar("Falta aceptar la forma de pago");
let num = 0;
let letra = 0;
for (let i = 0; i < this.password.length; i++) {
if (this.password[i] >= "0" && this.password[i] <= "9") num = 1;
if (this.password[i] >= "a" && this.password[i] <= "z") letra = 1;
if (this.password[i] >= "A" && this.password[i] <= "Z") letra = 1;
}
if (!num || !letra)
return this.menssajeWar("La contraseña debe tener al menos un numero o una letra");
if (this.password.length < 8)
return this.menssajeWar("La contraseña debe tener minimo 8 caracteres");
if(this.situacionAcademica === 'Estudiante'){
if(this.nivel === "" ) return this.menssajeWar('Falta llenar el nivel del estudiante');
}
if(this.situacionAcademica === 'Profesor'){
if(this.gradoAcademico === "" ) return this.menssajeWar('Falta llenar el grado academico');
if(this.asignaturaImpartida === "" ) return this.menssajeWar('Falta llenar la asignatura impartida');
}
if (this.tipoParticipacion == "") return this.menssajeWar("Falta seleccionar el tipo de participacion");
if( this.tipoParticipacion === "Grupal" && this.codigoGrupal === "") return this.menssajeWar("Falta seleccionar el codigo grupal");
if (this.institucion == "") return this.menssajeWar("Falta llenar la institucion");
let arroba = 0;
for (let i = 0; i < this.correo.length; i++) {
if (`${this.correo[i]}` === `@`) arroba=1;
}
if(!arroba) return this.menssajeWar("El correo no es valido");
if( `${this. A1}`=== 'true' ||
`${this. A2}`=== 'true' ||
`${this. A3}`=== 'true' ||
`${this. A4}`=== 'true' ||
`${this. A5}`=== 'true' ||
`${this. A6}`=== 'true' ||
`${this. A7}`=== 'true' ||
`${this. A8}`=== 'true' ||
`${this. A9}`=== 'true' ||
`${this.A10}`=== 'true' ||
`${this.A11}`=== 'true' ||
`${this.A12}`=== 'true' ||
`${this.A13}`=== 'true' ||
`${this.A14}`=== 'true' ||
`${this.A15}`=== 'true' ||
`${this.A16}`=== 'true' ||
`${this.A17}`=== 'true' ||
`${this.A18}`=== 'true' ||
`${this.A19}`=== 'true' ||
`${this.A20}`=== 'true' ||
`${this.A21}`=== 'true' ||
`${this.A22}`=== 'true' ||
`${this.A23}`=== 'true' ||
`${this.A24}`=== 'true' ||
`${this.A25}`=== 'true' ||
`${this.A26}`=== 'true' ||
`${this.A27}`=== 'true' ||
`${this.A28}`=== 'true' ||
`${this.A29}`=== 'true' )
if(this.viernesOp === '')
return this.menssajeWar("Falta elegir opcion obligatoria de Actividades");
this.totalPagar = this.suma;
if(this.totalPagar === 0) return this.menssajeWar("No has elejido ninguna actividad aun");
let actividadesInsc= [];
if( `${this. A1}`=== 'true' ) actividadesInsc.push(1);
if( `${this. A2}`=== 'true' ) actividadesInsc.push(2);
if( `${this. A3}`=== 'true' ) actividadesInsc.push(3);
if( `${this. A4}`=== 'true' ) actividadesInsc.push(4);
if( `${this. A5}`=== 'true' ) actividadesInsc.push(5);
if( `${this. A6}`=== 'true' ) actividadesInsc.push(6);
if( `${this. A7}`=== 'true' ) actividadesInsc.push(7);
if( `${this. A8}`=== 'true' ) actividadesInsc.push(8);
if( `${this. A9}`=== 'true' ) actividadesInsc.push(9);
if( `${this.A10}`=== 'true' ) actividadesInsc.push(10);
if( `${this.A11}`=== 'true' ) actividadesInsc.push(11);
if( `${this.A12}`=== 'true' ) actividadesInsc.push(12);
if( `${this.A13}`=== 'true' ) actividadesInsc.push(13);
if( `${this.A14}`=== 'true' ) actividadesInsc.push(14);
if( `${this.A15}`=== 'true' ) actividadesInsc.push(15);
if( `${this.A16}`=== 'true' ) actividadesInsc.push(16);
if( `${this.A17}`=== 'true' ) actividadesInsc.push(17);
if( `${this.A18}`=== 'true' ) actividadesInsc.push(18);
if( `${this.A19}`=== 'true' ) actividadesInsc.push(19);
if( `${this.A20}`=== 'true' ) actividadesInsc.push(20);
if( `${this.A21}`=== 'true' ) actividadesInsc.push(21);
if( `${this.A22}`=== 'true' ) actividadesInsc.push(22);
if( `${this.A23}`=== 'true' ) actividadesInsc.push(23);
if( `${this.A24}`=== 'true' ) actividadesInsc.push(24);
if( `${this.A25}`=== 'true' ) actividadesInsc.push(25);
if( `${this.A26}`=== 'true' ) actividadesInsc.push(26);
if( `${this.A27}`=== 'true' ) actividadesInsc.push(27);
if( `${this.A28}`=== 'true' ) actividadesInsc.push(28);
if( `${this.A29}`=== 'true' ) actividadesInsc.push(29);
if( this.viernesOp === 'A25') actividadesInsc.push(25);
if( this.viernesOp === 'A26') actividadesInsc.push(26);
if( this.viernesOp === 'A27') actividadesInsc.push(27);
if( this.miercoles1 === 'A7') actividadesInsc.push(7);
if( this.miercoles1 === 'A8') actividadesInsc.push(8);
if( this.miercoles1 === 'A9') actividadesInsc.push(9);
if( this.miercoles2 === 'A10') actividadesInsc.push(10);
if( this.miercoles2 === 'A11') actividadesInsc.push(11);
if( this.miercoles2 === 'A12') actividadesInsc.push(12);
if( this.jueves1 === 'A18') actividadesInsc.push(18);
if( this.jueves1 === 'A19') actividadesInsc.push(19);
if( this.jueves1 === 'A20') actividadesInsc.push(20);
if( this.jueves2 === 'A21') actividadesInsc.push(21);
if( this.jueves2 === 'A22') actividadesInsc.push(22);
if( this.jueves2 === 'A23') actividadesInsc.push(23);
if(actividadesInsc.length > 0 && this.situacionAcademica === 'Estudiante'){
actividadesInsc.push(1);
actividadesInsc.push(4);
actividadesInsc.push(15);
actividadesInsc.push(28);
actividadesInsc.push(29);
}
if(actividadesInsc.length > 0 && this.situacionAcademica === 'Profesor'){
actividadesInsc.push(1);
actividadesInsc.push(29);
}
for(let i=0; i < this.recorridos.length; i++){
for(let j=0; j<this.value.length; j++)
if(this.value[j] === this.recorridos[i].nombreEvento)
actividadesInsc.push(this.recorridos[i].idEvento);
}
if(this.estudioElegido !== null)
actividadesInsc.push(this.estudioElegido.idEvento);
const data = {
nombre: this.nombre,
apellidoPaterno: this.apellidoPaterno,
apellidoMaterno: this.apellidoMaterno,
curp: this.curp,
genero: this.genero,
edad: this.edad,
correo: this.correo,
telefono: this.telefono,
password: this.password,
comunidad: this.comunidad,
institucion: this.institucion,
situacionAcademica: this.situacionAcademica,
nivel: this.nivel,
gradoAcademico: this.gradoAcademico,
asignaturaImpartida: this.asignaturaImpartida,
tipoParticipacion: this.tipoParticipacion,
codigoGrupal: this.codigoGrupal,
eventos: actividadesInsc,
pago: this.totalPagar
}
try{
this.enviando = true;
let response = await axios.post(
`${config.api}/registro`,data
)
this.enviando = false;
if( typeof(response.data.registrado) === 'undefined' ){
this.enviando = false;
await Swal.fire({
title: "Error",
text: response.data.msj || 'Ocurrio un problema',
icon: "error"
});
}
else{
this.enviando = false;
//console.log(response);
if( `${response.data.registrado}` === `true`){
await Swal.fire({
title: "Exito",
text: response.data.msj || '',
icon: "success"
});
this.$router.push("/");
}
else{
await Swal.fire({
title: "Tenemos un pequeño inconveniente",
text: response.data.msj || 'Ocurrio un problema',
icon: "warning"
});
this.$router.push("/");
}
}
}
catch(error){
this.enviando = false;
await Swal.fire({
title: "Error",
text: error || 'Ocurrio un problema',
icon: "error"
});
this.$router.push("/");
}
},
limpiar(){
this.A1=false,
this. A2=false;
this. A3=false;
this. A4=false;
this. A5=false;
this. A6=false;
this. A7=false;
this. A8=false;
this. A9=false;
this.A10=false;
this.A11=false;
this.A12=false;
this.A13=false;
this.A14=false;
this.A15=false;
this.A16=false;
this.A17=false;
this.A18=false;
this.A19=false;
this.A20=false;
this.A21=false;
this.A22=false;
this.A23=false;
this.A24=false;
this.A25=false;
this.A26=false;
this.A27=false;
this.A28=false;
this.A29=false;
this.viernesOp= '';
this.jueves1= '';
this.jueves2= '';
this.miercoles1= '';
this.miercoles2= '';
},
cambioGenero(gen){
this.genero=gen;
},
async addRecorrido(add){
if(this.value.length>=2){
await Swal.fire({
title: "Solo puedes elegir dos recorridos",
icon: "warning"
});
return;
}
this.value.push(add.nombreEvento);
},
buscarTag(item){
for(let i in this.value){
//console.log( this.value[i], item.nombreEvento)
if(this.value[i] === item.nombreEvento)
return 1;
}
return 0;
},
addEstudio(item){
if(item === this.estudioElegido)
this.estudioElegido = null;
else
this.estudioElegido = item;
},
buscarEstudio(item){
if(item === this.estudioElegido)
return true;
return false;
},
viernesRad(option){
if(option==='A25'){
this.A25=true;
this.A26=false;
this.A27=false;
}
if(option==='A26'){
this.A26=true;
this.A25=false;
this.A27=false;
}
if(option==='A27'){
this.A26=false;
this.A25=false;
this.A27=true;
}
}
},
async Create() {
},
async beforeCreate() {
let response = await axios.get(
`${config.api}/getEscuelas`
)
// console.log("res b")
// console.log(response)
this.escuelas = response.data.universidad;
this.estudios = response.data.estudios;
this.recorridos = response.data.recorridos;
},
computed: {
// a computed getter
suma: function () {
let tot=0;
if( `${this. A1}`=== 'true' ||
`${this. A2}`=== 'true' ||
`${this. A3}`=== 'true' ||
`${this. A4}`=== 'true' ||
`${this. A5}`=== 'true' ||
`${this. A6}`=== 'true' ||
`${this. A7}`=== 'true' ||
`${this. A8}`=== 'true' ||
`${this. A9}`=== 'true' ||
`${this.A10}`=== 'true' ||
`${this.A11}`=== 'true' ||
`${this.A12}`=== 'true' ||
`${this.A13}`=== 'true' ||
`${this.A14}`=== 'true' ||
`${this.A15}`=== 'true' ||
`${this.A16}`=== 'true' ||
`${this.A17}`=== 'true' ||
`${this.A18}`=== 'true' ||
`${this.A19}`=== 'true' ||
`${this.A20}`=== 'true' ||
`${this.A21}`=== 'true' ||
`${this.A22}`=== 'true' ||
`${this.A23}`=== 'true' ||
`${this.A24}`=== 'true' ||
`${this.A25}`=== 'true' ||
`${this.A26}`=== 'true' ||
`${this.A27}`=== 'true' ||
`${this.A28}`=== 'true' ||
`${this.A29}`=== 'true' ||
this.viernesOp !== '' ||
this.viernesOp!== ''||
this.jueves1!== ''||
this.jueves2!== ''||
this.miercoles1!== ''||
this.miercoles2!== ''
)
if(this.situacionAcademica === 'Profesor')
tot+=500;
else
tot+=300;
if( this.estudioElegido !== null)
tot+=200
if(this.value.length>=1)
tot+=200;
return tot;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.alingLeft{
text-align: left;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(0,44,148, 0.2);
border-right: 1.1em solid rgba(0,44,148, 0.2);
border-bottom: 1.1em solid rgba(0,44,148, 0.2);
border-left: 1.1em solid #002c94;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.accept{
background-color: #46BDED;
}
.obligatory{
background-color: #BEBEBE;
}
tr:hover{
background-color: #81EEF9;
}
.principal{
padding: 3rem;
}
.banner{
position: realtive;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h1{
margin-top:1rem;
margin-bottom:1rem;
}
html {
background-color: #56baed;
}
body {
font-family: "Poppins", sans-serif;
height: 100vh;
}
a {
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: left;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
color: black;
}
/* STRUCTURE */
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
.wrapperRow {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
margin-left: 1rem;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
width: 100%;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
/* TABS */
h2.inactive {
color: #cccccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}
/* FORM TYPOGRAPHY*/
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: #39ace7;
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
input[type=text], input[type=password], input[type=number]{
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 5px;
margin-bottom: 5px;
margin-left:1rem;
width: 100%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
select[type=text] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-top: 5px;
margin-bottom: 5px;
margin-left:1rem;
width: 100%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
input[type=text]:placeholder {
color: #cccccc;
}
/* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
display: block;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}
.underlineHover:hover {
color: #0d0d0d;
}
.underlineHover:hover:after{
width: 100%;
}
/* OTHERS */
*:focus {
outline: none;
}
#icon {
width:60%;
}
</style>