danielGe/ASINEA-FRONT
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

panel de admin

Browse Source
This commit is contained in:
DanielRamirezGe
2020-09-27 02:03:11 -05:00
parent f7d760b0ea
commit 1de3a6aeb8
4 changed files with 386 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config/config.js
+2 -2
View File
@@ -3,12 +3,12 @@ const config = {
//api: "https://f8d86328e778.ngrok.io"
//Local
//api: "http://localhost:3000"
api: "http://localhost:3001"
//Pruebas
//api: "https://venus.acatlan.unam.mx/asinea_nuevo_test"
//produccion
api: "http://132.248.43.238:3000"
//api: "http://132.248.43.238:3000"
};
module.exports = config;
src/view/login.vue
+39 -38
View File
@@ -109,7 +109,8 @@ export default {
text: response.data.msj || response,
icon: 'success'
});
location.reload();
window.localStorage.setItem("idAdmin", response.data.idAdmin);
this.$router.push("/admin");
}
else{
Swal.fire({
@@ -176,47 +177,47 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.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);
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
.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;
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
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);
}
}
}
.banner{
src/view/panelAdmin.vue
+153 -17
View File
@@ -30,17 +30,17 @@
<tr v-for="item in enviar" v-bind:key="item.idPersona">
<th scope="row">{{item.number}}</th>
<td>{{item.nombre}}</td>
<td>{{item.apellidoP}}</td>
<td>{{item.apellidoM}}</td>
<td>{{item.apellidoPaterno}}</td>
<td>{{item.apellidoMaterno}}</td>
<td>{{item.correo}}</td>
<td>{{item.comunidad}}</td>
<td>{{item.pago}}</td>
<td ><button type="button" class="btn btn-outline-success" v-b-modal.fichaDeposito >Enviar ficha</button></td>
<td>{{item.totalPagar}}</td>
<td ><button type="button" @click="correoEnviar = item.correo, idPersona=item.idPersona, nombreEscogido=`${item.nombre} ${item.apellidoPaterno} ${item.apellidoMaterno}`, cantidadPagar=item.totalPagar" class="btn btn-outline-success" v-b-modal.fichaDeposito >Enviar ficha</button></td>
</tr>
</tbody>
</table>
</div>
<input type="submit" class="fadeIn fourth" value="Descargar">
<input type="submit" class="fadeIn fourth" value="Descargar" >
</form>
</b-tab>
@@ -57,19 +57,17 @@
<th scope="col">Correo</th>
<th scope="col">Comunidad</th>
<th scope="col">Pago total</th>
<th scope="col">Fecha de envio</th>
</tr>
</thead>
<tbody>
<tr v-for="item in pendientes" v-bind:key="item.idPersona">
<th scope="row">{{item.number}}</th>
<td>{{item.nombre}}</td>
<td>{{item.apellidoP}}</td>
<td>{{item.apellidoM}}</td>
<td>{{item.apellidoPaterno}}</td>
<td>{{item.apellidoMaterno}}</td>
<td>{{item.correo}}</td>
<td>{{item.comunidad}}</td>
<td>{{item.pago}}</td>
<td >{{item.fecha}}</td>
<td>{{item.totalPagar}}</td>
</tr>
</tbody>
</table>
@@ -183,10 +181,35 @@
<b-modal id="fichaDeposito" centered title="BootstrapVue">
<p class="my-4">Enviar Ficha de deposito</p>
<b-modal id="fichaDeposito" centered title="Enviar Ficha de deposito" hide-footer>
<div class="loader" v-if="enviando">Loading...</div>
<div v-else>
<p class="my-4">Nombre : {{nombreEscogido}}</p>
<p class="my-4">Cantidad a pagar : ${{cantidadPagar}}.00</p>
<div>
<!-- Styled -->
<b-form-file
v-model="file1"
id="file1"
:state="Boolean(file1)"
placeholder="Escoge la ficha de deposito"
drop-placeholder="Carga la ficha de deposito aqui"
accept=".pdf"
browseText= "Cargar"
></b-form-file>
</div>
<div style="margin-top: 2rem;">
<b-button class="btn btn-outline-success float-right" @click="enviarFicha()" style="width: 30%; ">Enviar</b-button>
<b-button @click="$bvModal.hide('fichaDeposito')" variant="outline-danger" class="btn float-left" style="width: 30%; ">Cancelar</b-button>
</div>
</div>
</b-modal>
<b-modal id="mostrarPago" centered title="Pago de Daniel Adrian">
<p class="my-4">Pago </p>
</b-modal>
@@ -205,17 +228,22 @@
<script>
import Header from "./../components/header.vue";
import axios from "axios";
import config from "../config/config.js";
import Swal from "sweetalert2";
export default {
name: "panel",
components: {
Header
},
data() {
return {
enviar: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
{number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
pendientes: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00",fecha: "01/09/2020"},
{number: 1,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00", fecha: "01/09/2020"}],
enviar: [],
pendientes: [],
revisar: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
{number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
pagados: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
@@ -224,10 +252,73 @@ export default {
{number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
selected: 1,
idPersona: "",
file1: null,
file2: null,
nombreEscogido: "",
cantidadPagar: "",
correoEnviar: "",
enviando: false
};
},
async beforeCreate() {
methods: {
async enviarFicha (){
this.enviando = true;
var formData = new FormData();
var fichaDeposito = document.querySelector('#file1');
formData.append("fichaDeposito", fichaDeposito.files[0]);
formData.append("correo", this.correoEnviar);
formData.append("idPersona", this.idPersona);
try{
await axios.post(
`${config.api}/enviarFicha`, formData ,{
headers: {
'Content-Type': 'multipart/form-data'
}
}
);
this.enviando = false;
await Swal.fire({
title: "Exito",
text: 'Exito al enviar la factura',
icon: "success"
});
location.reload();
}
catch(error){
this.enviando = false;
console.log(error.response);
await Swal.fire({
title: "Error",
text: error.response.data.msj || 'Ocurrio un problema',
icon: "error"
});
location.reload();
}
}
},
async beforeCreate() {
if (!window.localStorage.getItem("idAdmin")) this.$router.push("/");
this.enviar = await axios.get(
`${config.api}/getPersonasInscritas`
);
this.enviar = this.enviar.data.datos;
this.pendientes = await axios.get(
`${config.api}/getPersonasPendientes`
);
this.pendientes = this.pendientes.data.datos;
}
@@ -238,6 +329,51 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.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);
}
}
.principal{
padding: 3rem;
}
src/view/usuario.vue
+192 -73
View File
@@ -23,7 +23,7 @@
<h2>Total a pagar: ${{pago}}.00</h2>
</div>
<div class="row">
<h2>Pronto se te mandara tu ficha de pago por correo</h2>
<h2>En breve se recibiras tu referencia bancaria</h2>
</div>
<div class="row">
@@ -50,12 +50,32 @@
</table>
</div>
</div>
<router-link to="/">
<input style="margin-top: 3rem;" type="button" class="fadeIn fourth" value="Salir" @>
</router-link>
<!--
<form>
<div class=" wrapperRow row">
<h2>Datos del comprobante de pago</h2>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Banco de procedencia" v-model="bancoProcedencia">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Fecha de la operación" v-model="fechaOperacion">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" placeholder="Clave de rastreo" v-model="claveRastreo">
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="text" class="fadeIn second" placeholder="Cuenta de retiro" v-model="cuentaRetiro">
</div>
<div class="col-md-6">
<input type="text" class="fadeIn second" placeholder="Cuenta de depósito e importe" v-model="importe">
</div>
</div>
</form>
<div class="row">
<p>Por favor adjunta tu comprobante de pago</p>
@@ -64,77 +84,89 @@
<div class="row">
<div class="form-group">
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<input accept=".pdf,.png, .jpg" type="file" class="form-control-file mar" id="exampleFormControlFile1">
</div>
</div>
<input type="submit" class="fadeIn fourth" value="Enviar">
<div class="row">
<div class="row mar">
<b-form-checkbox
id="checkbox-1"
name="checkbox-1"
value="accepted"
unchecked-value="not_accepted"
id="pedirFactura"
v-model="pedirFactura"
name="pedirFactura"
value= true
unchecked-value= false
>
Quiero Factura
</b-form-checkbox>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Nombre">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Apellido paterno">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Apellido Materno">
</div>
<div v-if="pedirFactura==='true'">
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Nombre" v-model="nombrePersona">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Apellido paterno" v-model="apellidoPaterno">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Apellido Materno" v-model="apellidoMaterno">
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="fadeIn second" name="login" placeholder="RFC" v-model="rfc">
</div>
</div>
<div class="row">
<div class="col-md-8">
<input type="text" class="fadeIn second" name="login" placeholder="Correo" v-model="correoPersona">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Telefono" v-model="telefono">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Calle" v-model="calle">
</div>
<div class="col-md-2">
<input type="text" class="fadeIn second" name="login" placeholder="No. Interior" v-model="noInterior">
</div>
<div class="col-md-2">
<input type="text" class="fadeIn second" name="login" placeholder="No. Exterior" v-model="noExterior">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Colonia" v-model="colonia">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Municipio" v-model="municipio">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Estado" v-model="estado">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Codigo Postal" v-model="codigoPostal">
</div>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="fadeIn second" name="login" placeholder="RFC">
</div>
</div>
<div class="row">
<div class="col-md-8">
<input type="text" class="fadeIn second" name="login" placeholder="Correo">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Telefono">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Calle">
</div>
<div class="col-md-2">
<input type="text" class="fadeIn second" name="login" placeholder="No. Interior">
</div>
<div class="col-md-2">
<input type="text" class="fadeIn second" name="login" placeholder="No. Exterior">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Colonia">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Municipio">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Estado">
</div>
<div class="col-md-4">
<input type="text" class="fadeIn second" name="login" placeholder="Codigo Postal">
</div>
</div>
<input type="submit" class="fadeIn fourth" value="Enviar"> -->
<router-link to="/">
<input type="button" class="fadeIn fourth " value="Salir" style="margin-top: 3rem; background-color: #A60101;">
</router-link>
<input type="button" class="fadeIn fourth" value="Enviar" style=" background-color: #47A601;" @click="enviarArchivo()">
</form>
<!-- Remind Passowrd -->
@@ -153,7 +185,7 @@
<script>
import axios from "axios";
import config from "../config/config.js";
//import Swal from "sweetalert2";
import Swal from "sweetalert2";
export default {
name: 'Login',
@@ -165,15 +197,84 @@ export default {
eventos: [],
pago: "",
file1: "",
correo: "",
password: "",
enviarPass: "",
enviando: false
enviando: false,
pedirFactura: false,
bancoProcedencia:"",
fechaOperacion: "",
claveRastreo: "",
cuentaRetiro:"",
importe:"",
nombrePersona: "",
apellidoPaterno: "",
apellidoMaterno: "",
rfc: "",
correoPersona: "",
telefono: "",
calle: "",
noInterior: "",
noExterior: "",
colonia: "",
municipio: "",
estado: "",
codigoPostal: "",
};
},
methods: {
async login() {
async menssajeWar(titulo){
await Swal.fire({
title: titulo,
icon: "warning"
});
},
async enviarArchivo() {
if(this.bancoProcedencia === "") return this.menssajeWar('Falta llenar banco de procedencia');
if(this.fechaOperacion === "") return this.menssajeWar('Falta escoger la fecha de en que se realizo la operacion');
if(this.claveRastreo === "") return this.menssajeWar('Falta llenar la clave de rastreo');
if(this.cuentaRetiro === "") return this.menssajeWar('Falta llenar la cuenta de retiro');
if(this.importe === "") return this.menssajeWar('Falta llenar el importe');
if( `${this.pedirFactura}` === `true` ){
if(this.nombrePersona === "") return this.menssajeWar('Falta llenar el nombre de la persona a quien se le hara la factura');
if(this.apellidoPaterno === "") return this.menssajeWar('Falta llenar el apellido paterno de la persona a quien se le hara la factura');
if(this.apellidoMaterno === "") return this.menssajeWar('Falta llenar el apellido materno de la persona a quien se le hara la factura');
if(this.rfc === "") return this.menssajeWar('Falta llenar el RFC de la persona a quien se le hara la factura');
if(this.correoPersona === "") return this.menssajeWar('Falta llenar el correo de la persona a quien se le hara la factura');
if(this.telefono === "") return this.menssajeWar('Falta llenar el telefono de la persona a quien se le hara la factura');
if(this.calle === "") return this.menssajeWar('Falta llenar la calle de la persona a quien se le hara la factura');
if(this.noInterior === "") return this.menssajeWar('Falta llenar el numero interior de la persona a quien se le hara la factura');
if(this.noExterior === "") return this.menssajeWar('Falta llenar el numero exterior de la persona a quien se le hara la factura');
if(this.colonia === "") return this.menssajeWar('Falta llenar la colonia de la persona a quien se le hara la factura');
if(this.municipio === "") return this.menssajeWar('Falta llenar el municipio de la persona a quien se le hara la factura');
if(this.estado === "") return this.menssajeWar('Falta llenar el estado de la persona a quien se le hara la factura');
if(this.codigoPostal === "") return this.menssajeWar('Falta llenar el codigo postal de la persona a quien se le hara la factura');
}
}
@@ -205,6 +306,10 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mar{
margin-left: 40px ;
margin-bottom: 12px;
}
tr:hover{
background-color: #BEBEBE;
}
@@ -244,9 +349,19 @@ h2 {
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
margin-left: 40px ;
margin-bottom: 12px;
color: #cccccc;
}
p {
text-align: left;
font-size: 16px;
font-weight: 600;
margin-left: 40px;
margin-top: 10px;
}
@@ -309,7 +424,7 @@ h2.active {
/* FORM TYPOGRAPHY*/
input[type=button], input[type=submit], input[type=reset] {
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: white;
@@ -319,8 +434,8 @@ input[type=button], input[type=submit], input[type=reset] {
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-box-shadow: 0 10px 30px 0 rgba(0,0,0,0);
box-shadow: 0 10px 30px 0 rgba(0,0,0,0);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
@@ -331,8 +446,9 @@ input[type=button], input[type=submit], input[type=reset] {
transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: #39ace7;
background-color: #000000;
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
@@ -514,5 +630,8 @@ input[type=text]:placeholder {
#icon {
width:60%;
}
.red{
background-color: #A60101;
}
</style>