Martin Macola / autoservicio

Download as
Browse Code »

Commit 37e17fbe2d91cd25f0132861b1b641e5756776db

Authored by Marcelo Puebla
1 parent 66f98fbcb5
Exists in master

Agregado flujo de pago efectivo.

Showing 2 changed files with 13 additions and 2 deletions   Show diff stats
src/app/components/pago/pago.component.html
Diff comments   View file @ 37e17fb
1 <div 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" 2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select"> 3 class="row m-0 fade-in bg-primary-gradient disable-user-select">
4 4
5 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
6 6
7 <app-header></app-header> 7 <app-header></app-header>
8 8
9 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
10 <div class="row m-0"> 10 <div class="row m-0">
11 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
12 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 Pagar 13 Pagar
14 <i class="fa fa-usd"></i> 14 <i class="fa fa-usd"></i>
15 </p> 15 </p>
16 </div> 16 </div>
17 </div> 17 </div>
18 18
19 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center"> 19 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
20 <div class="col-7 text-center"> 20 <div class="col-7 text-center">
21 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p> 21 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <div *ngIf="!verQR" class="row fade-in mt-3"> 25 <div *ngIf="!verQR" class="row fade-in mt-3">
26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
27 <div class="col-sm-7"> 27 <div class="col-sm-7">
28 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 28 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
29 <div class="col-4 p-2"> 29 <div class="col-4 p-2">
30 <div class="bg-white rounded-sm shadow border-0"> 30 <div
31 class="bg-white rounded-sm shadow border-0"
32 (click)="pagoEfectivo()">
31 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 33 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
32 <div class="p-2 card-text text-center"> 34 <div class="p-2 card-text text-center">
33 <p class="h6 text-center m-0">Efectivo</p> 35 <p class="h6 text-center m-0">Efectivo</p>
34 </div> 36 </div>
35 </div> 37 </div>
36 </div> 38 </div>
37 <div class="col-4 p-2"> 39 <div class="col-4 p-2">
38 <div class="bg-white rounded-sm shadow border-0"> 40 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 41 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
40 <div class="p-2 card-text text-center"> 42 <div class="p-2 card-text text-center">
41 <p class="h6 text-center m-0">Tarjeta</p> 43 <p class="h6 text-center m-0">Tarjeta</p>
42 </div> 44 </div>
43 </div> 45 </div>
44 </div> 46 </div>
45 <div class="col-4 p-2"> 47 <div class="col-4 p-2">
46 <div 48 <div
47 class="bg-white rounded-sm shadow border-0" 49 class="bg-white rounded-sm shadow border-0"
48 (click)="pagar()"> 50 (click)="pagar()">
49 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 51 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
50 <div class="p-2 card-text text-center"> 52 <div class="p-2 card-text text-center">
51 <p class="h6 text-center m-0">Pago Electrónico</p> 53 <p class="h6 text-center m-0">Pago Electrónico</p>
52 </div> 54 </div>
53 </div> 55 </div>
54 </div> 56 </div>
55 </div> 57 </div>
56 </div> 58 </div>
57 59
58 <div class="col-sm-5 pl-0"> 60 <div class="col-sm-5 pl-0">
59 <div class="row ml-3"> 61 <div class="row ml-3">
60 <!-- TICKET --> 62 <!-- TICKET -->
61 <div class="col-sm-7 p-0"> 63 <div class="col-sm-7 p-0">
62 <div class="card rounded-sm shadow"> 64 <div class="card rounded-sm shadow">
63 <div class="card-body"> 65 <div class="card-body">
64 <p class="h5 card-title">Su Ticket</p> 66 <p class="h5 card-title">Su Ticket</p>
65 <div class="row mt-4 m-0"> 67 <div class="row mt-4 m-0">
66 <div class="col-12 p-0 mb-2"> 68 <div class="col-12 p-0 mb-2">
67 <p class="h6 m-0 card-text text-left"> 69 <p class="h6 m-0 card-text text-left">
68 <small class="font-weight-bold">DESCRIPCIÓN</small> 70 <small class="font-weight-bold">DESCRIPCIÓN</small>
69 </p> 71 </p>
70 <p class="h6 m-0 card-text text-left"> 72 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 73 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
72 </p> 74 </p>
73 </div> 75 </div>
74 </div> 76 </div>
75 <div class="row px-2 vh-50 overflow-scroll m-0"> 77 <div class="row px-2 vh-50 overflow-scroll m-0">
76 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 78 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
77 <p class="h6 m-0 card-text text-left"> 79 <p class="h6 m-0 card-text text-left">
78 <small>{{producto.DetArt}}</small> 80 <small>{{producto.DetArt}}</small>
79 </p> 81 </p>
80 <div class="row d-flex justify-content-between m-0"> 82 <div class="row d-flex justify-content-between m-0">
81 <div class="col p-0"> 83 <div class="col p-0">
82 <p class="h6 m-0 card-text text-left"> 84 <p class="h6 m-0 card-text text-left">
83 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 85 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
84 </p> 86 </p>
85 </div> 87 </div>
86 <div class="col p-0"> 88 <div class="col p-0">
87 <p class="h6 m-0 card-text text-right"> 89 <p class="h6 m-0 card-text text-right">
88 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 90 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
89 </p> 91 </p>
90 </div> 92 </div>
91 </div> 93 </div>
92 </div> 94 </div>
93 </div> 95 </div>
94 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 96 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
95 Total {{getTotal() | currency}} 97 Total {{getTotal() | currency}}
96 </p> 98 </p>
97 </div> 99 </div>
98 </div> 100 </div>
99 </div> 101 </div>
100 </div> 102 </div>
101 </div> 103 </div>
102 </div> 104 </div>
103 105
104 <div *ngIf="verQR" class="row fade-in mt-5"> 106 <div *ngIf="verQR" class="row fade-in mt-5">
105 <div class="col-6 offset-3 border-0 mb-auto"> 107 <div class="col-6 offset-3 border-0 mb-auto">
106 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> 108 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
107 </div> 109 </div>
108 </div> 110 </div>
109 111
110 <!-- OPCIONES ABAJO DERECHA --> 112 <!-- OPCIONES ABAJO DERECHA -->
111 <div class="row m-0 fixed-bottom" > 113 <div class="row m-0 fixed-bottom" >
112 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 114 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
113 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 115 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
114 <div class="card-body row m-0"> 116 <div class="card-body row m-0">
115 <div class="col-12 p-3"> 117 <div class="col-12 p-3">
116 <button 118 <button
117 type="button" 119 type="button"
118 class="btn btn-block btn-light shadow btn-sm shadow" 120 class="btn btn-block btn-light shadow btn-sm shadow"
119 (click)="volverPreviousPage()"> 121 (click)="volverPreviousPage()">
120 <span class="pr-2">Volver</span> 122 <span class="pr-2">Volver</span>
121 <i class="fa fa-undo text-warning"></i> 123 <i class="fa fa-undo text-warning"></i>
122 </button> 124 </button>
123 <button 125 <button
124 type="button" 126 type="button"
125 class="btn btn-block btn-light shadow btn-sm shadow" 127 class="btn btn-block btn-light shadow btn-sm shadow"
126 [routerLink]="['/cancelar-compra']"> 128 [routerLink]="['/cancelar-compra']">
127 <span class="pr-2">Cancelar</span> 129 <span class="pr-2">Cancelar</span>
128 <i class="fa fa-times text-danger"></i> 130 <i class="fa fa-times text-danger"></i>
129 </button> 131 </button>
130 </div> 132 </div>
131 </div> 133 </div>
132 </div> 134 </div>
133 </div> 135 </div>
134 </div> 136 </div>
135 137
136 </div> 138 </div>
137 139
138 </div> 140 </div>
139 141
140 <div 142 <div
141 *ngIf="compraConQRfinalizada" 143 *ngIf="compraConQRfinalizada"
142 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 144 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
143 <div class="col-12 text-center text-white my-auto"> 145 <div class="col-12 text-center text-white my-auto">
144 <p class="font-weight-bold display-4"> 146 <p class="font-weight-bold display-4">
145 Su pago fue<br> 147 Su pago fue<br>
146 acreditado 148 acreditado
147 exitosamente 149 exitosamente
148 </p> 150 </p>
149 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 151 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
150 </div> 152 </div>
151 </div> 153 </div>
152 154
153 <div 155 <div
154 *ngIf="compraConEfectivofinalizada" 156 *ngIf="compraConEfectivofinalizada"
155 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 157 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
156 <div class="col-12 text-center text-white my-auto"> 158 <div class="col-12 text-center text-white my-auto">
157 <p class="font-weight-bold display-4"> 159 <p class="font-weight-bold display-4">
158 Retire su ticket<br> 160 Retire su ticket<br>
159 y diríjase a caja para<br> 161 y diríjase a caja para<br>
160 efectuar el pago. 162 efectuar el pago.
161 </p> 163 </p>
162 </div> 164 </div>
163 </div> 165 </div>
164 166
src/app/components/pago/pago.component.ts
Diff comments   View file @ 37e17fb
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common'; 3 import { Location } from '@angular/common';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { RouterLink, Router } from '@angular/router'; 5 import { RouterLink, Router } from '@angular/router';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-pago', 9 selector: 'app-pago',
10 templateUrl: './pago.component.html', 10 templateUrl: './pago.component.html',
11 styleUrls: ['./pago.component.scss'] 11 styleUrls: ['./pago.component.scss']
12 }) 12 })
13 export class PagoComponent implements OnInit { 13 export class PagoComponent implements OnInit {
14 14
15 private apiUrl: string = appSettings.apiUrl; 15 private apiUrl: string = appSettings.apiUrl;
16 private verQR: boolean = false; 16 private verQR: boolean = false;
17 private productos: Producto[] = []; 17 private productos: Producto[] = [];
18 private total: number = 0; 18 private total: number = 0;
19 19
20 private compraConQRfinalizada: boolean = false; 20 private compraConQRfinalizada: boolean = false;
21 private compraConEfectivofinalizada: boolean = false; 21 private compraConEfectivofinalizada: boolean = false;
22 22
23 constructor( 23 constructor(
24 private productoService: ProductoService, 24 private productoService: ProductoService,
25 private location: Location, 25 private location: Location,
26 private router: Router, 26 private router: Router,
27 ) { } 27 ) { }
28 28
29 ngOnInit() { 29 ngOnInit() {
30 30
31 this.productos = this.productoService.productos; 31 this.productos = this.productoService.productos;
32 } 32 }
33 33
34 pagoEfectivo() {
35
36 this.compraConEfectivofinalizada = true;
37 setTimeout(() => {
38
39 this.router.navigate(['mensaje-final']);
40 }, 3000);
41 }
42
34 pagar() { 43 pagar() {
35 44
36 this.verQR = true; 45 this.verQR = true;
37 alert('Procesando Pago'); 46 alert('Procesando Pago');
38 47
39 this.productoService.pagar() 48 this.productoService.pagar()
40 .subscribe(() => { 49 .subscribe(() => {
41 50
42 // alert('Compra finalizada'); 51 // alert('Compra finalizada');
43 this.compraConQRfinalizada = true; 52 this.compraConQRfinalizada = true;
44 setTimeout(() => { 53 setTimeout(() => {
45 54
46 this.router.navigate(['mensaje-final']); 55 this.router.navigate(['mensaje-final']);
47 }, 3000); 56 }, 3000);
48 }, err => { 57 }, err => {
49 console.log(err); 58 console.log(err);
50 alert('algo salió mal'); 59 alert('algo salió mal');
51 }) 60 })
52 } 61 }
53 62
54 volverPreviousPage() { 63 volverPreviousPage() {
55 64
56 if (this.verQR) { 65 if (this.verQR) {
57 this.verQR = false; 66 this.verQR = false;
58 return; 67 return;
59 } 68 }
60 this.location.back(); 69 this.location.back();
61 } 70 }
62 71
63 getTotal() { 72 getTotal() {
64 73
65 var subTotal = 0; 74 var subTotal = 0;
66 this.productos.forEach(producto => { 75 this.productos.forEach(producto => {
67 76
68 subTotal = subTotal + (producto.PreVen * producto.cantidad); 77 subTotal = subTotal + (producto.PreVen * producto.cantidad);
69 }); 78 });
70 return this.total = subTotal; 79 return this.total = subTotal;
71 } 80 }
72 81
73 } 82 }
74 83