Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit d3619deea21df6b129aa0a25fedbf4288a8cec14

Authored by Eric Fernandez
2 parents 5962f7dea6 0d76ed2a04
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !73
Showing 2 changed files   Show diff stats
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ d3619de
1 <div 1 <div
2 class="row m-0 fade-in bg-primary-gradient disable-user-select" 2 class="row m-0 fade-in bg-primary-gradient disable-user-select"
3 (click)="reiniciarTimer"> 3 (click)="reiniciarTimer">
4 <div class="col-12 p-0 vh-100"> 4 <div class="col-12 p-0 vh-100">
5 5
6 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
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>
15 </p> 14 </p>
16 </div> 15 </div>
17 </div> 16 </div>
18 17
19 <div class="row m-0"> 18 <div class="row m-0">
20 <div class="col-12"> 19 <div class="col-12">
21 20
22 <!-- TEXTO DE IZQUIERDA --> 21 <!-- TEXTO DE IZQUIERDA -->
23 <div class="row mx-2 mt-4 text-white"> 22 <div class="row mx-2 mt-4 text-white">
24 <div class="col-sm-auto my-auto"> 23 <div class="col-sm-auto my-auto">
25 <p class="h2">Mi Compra 24 <p class="h2">Mi Compra
26 <i class="fa fa-shopping-cart "></i> 25 <i class="fa fa-shopping-cart "></i>
27 </p> 26 </p>
28 </div> 27 </div>
29 <div class="col-sm-7 my-auto"> 28 <div class="col-sm-7 my-auto">
30 <p class="h4">Por favor, controle y confirme su compra.</p> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
31 </div> 30 </div>
32 </div> 31 </div>
33 32
34 <div class="row"> 33 <div class="row">
35 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
36 <div class="col-sm-7"> 35 <div class="col-sm-7">
37 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
38 <div class="col-4 p-2" *ngFor="let producto of productos"> 37 <div class="col-4 p-2" *ngFor="let producto of productos">
39 <div class="bg-white rounded-sm shadow border-0"> 38 <div class="bg-white rounded-sm shadow border-0">
40 <img 39 <img
41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 40 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
42 class="shadow rounded-sm w-100 m-auto"> 41 class="shadow rounded-sm w-100 m-auto">
43 <div class="p-2"> 42 <div class="p-2">
44 <p class="h6 min-h-55 text-left m-0"> 43 <p class="h6 min-h-55 text-left m-0">
45 <small> 44 <small>
46 {{producto.DET_LAR}} 45 {{producto.DET_LAR}}
47 </small> 46 </small>
48 </p> 47 </p>
48 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
49 <small>
50 - {{p.cantidad}} {{p.DET_LAR}}
51 </small>
52 </p>
49 <div class="row m-0"> 53 <div class="row m-0">
50 <div class="col-12 my-auto pt-2 pr-2 p-0"> 54 <div class="col-6 my-auto pt-2 pr-2 p-0">
55 <p class="text-left m-0 h6">
56 {{producto.cantidad}} x {{producto.PreVen | currency}}
57 </p>
58 </div>
59 <div class="col-6 my-auto pt-2 pr-2 p-0">
51 <p class="text-right m-0 h6"> 60 <p class="text-right m-0 h6">
52 {{producto.PreVen | currency}} 61 {{producto.cantidad * producto.PreVen | currency}}
53 </p> 62 </p>
54 </div> 63 </div>
55 </div> 64 </div>
56 </div> 65 </div>
57 </div> 66 </div>
58 </div> 67 </div>
59 </div> 68 </div>
60 </div> 69 </div>
61 70
62 <div class="col-sm-5 pl-0"> 71 <div class="col-sm-5 pl-0">
63 <div class="row ml-3"> 72 <div class="row ml-3">
64 <!-- TICKET --> 73 <!-- TICKET -->
65 <div class="col-sm-7 p-0"> 74 <div class="col-sm-7 p-0">
66 <div class="card rounded-sm shadow"> 75 <div class="card rounded-sm shadow">
67 <div class="card-body"> 76 <div class="card-body">
68 <p class="h5 card-title">Su Ticket</p> 77 <p class="h5 card-title">Su Ticket</p>
69 <div class="row mt-4 m-0"> 78 <div class="row mt-4 m-0">
70 <div class="col-12 p-0 mb-2"> 79 <div class="col-12 p-0 mb-2">
71 <p class="h6 m-0 card-text text-left"> 80 <p class="h6 m-0 card-text text-left">
72 <small class="font-weight-bold">DESCRIPCIÓN</small> 81 <small class="font-weight-bold">DESCRIPCIÓN</small>
73 </p> 82 </p>
74 <p class="h6 m-0 card-text text-left"> 83 <p class="h6 m-0 card-text text-left">
75 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 84 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
76 </p> 85 </p>
77 </div> 86 </div>
78 </div> 87 </div>
79 <div class="row vh-50 px-2 overflow-scroll m-0"> 88 <div class="row vh-50 px-2 overflow-scroll m-0">
80 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 89 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
81 <p class="h6 m-0 card-text text-left"> 90 <p class="h6 m-0 card-text text-left">
82 <small>{{producto.DET_LAR}}</small> 91 <small>{{producto.DET_LAR}}</small>
83 </p> 92 </p>
84 <div class="row d-flex justify-content-between m-0"> 93 <div class="row d-flex justify-content-between m-0">
85 <div class="col p-0"> 94 <div class="col p-0">
86 <p class="h6 m-0 card-text text-left"> 95 <p class="h6 m-0 card-text text-left">
87 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 96 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
88 </p> 97 </p>
89 </div> 98 </div>
90 <div class="col p-0"> 99 <div class="col p-0">
91 <p class="h6 m-0 card-text text-right"> 100 <p class="h6 m-0 card-text text-right">
92 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 101 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
93 </p> 102 </p>
94 </div> 103 </div>
95 </div> 104 </div>
96 </div> 105 </div>
97 </div> 106 </div>
98 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 107 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
99 Total {{getTotal() | currency}} 108 Total {{getTotal() | currency}}
100 </p> 109 </p>
101 </div> 110 </div>
102 </div> 111 </div>
103 </div> 112 </div>
104 </div> 113 </div>
105 </div> 114 </div>
106 </div> 115 </div>
107 116
108 <!-- OPCIONES ABAJO DERECHA --> 117 <!-- OPCIONES ABAJO DERECHA -->
109 <div class="row m-0 fixed-bottom"> 118 <div class="row m-0 fixed-bottom">
110 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 119 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
111 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 120 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
112 <div class="card-body row m-0"> 121 <div class="card-body row m-0">
113 <div class="col-12 p-3"> 122 <div class="col-12 p-3">
114 <button 123 <button
115 type="button" 124 type="button"
116 class="btn btn-block btn-light shadow btn-sm shadow" 125 class="btn btn-block btn-light shadow btn-sm shadow"
117 (click)="volverPreviousPage()"> 126 (click)="volverPreviousPage()">
118 <span class="pr-2">Volver</span> 127 <span class="pr-2">Volver</span>
119 <i class="fa fa-undo text-warning"></i> 128 <i class="fa fa-undo text-warning"></i>
120 </button> 129 </button>
121 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 130 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
122 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 131 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
123 <i class="fa fa-check text-success"></i> 132 <i class="fa fa-check text-success"></i>
124 </button> 133 </button>
125 <button 134 <button
126 type="button" 135 type="button"
127 class="btn btn-block btn-light shadow btn-sm shadow" 136 class="btn btn-block btn-light shadow btn-sm shadow"
128 [routerLink]="['/cancelar-compra']"> 137 [routerLink]="['/cancelar-compra']">
129 <span class="pr-2">Cancelar</span> 138 <span class="pr-2">Cancelar</span>
130 <i class="fa fa-times text-danger"></i> 139 <i class="fa fa-times text-danger"></i>
131 </button> 140 </button>
132 </div> 141 </div>
133 </div> 142 </div>
134 </div> 143 </div>
135 </div> 144 </div>
136 </div> 145 </div>
137 146
138 </div> 147 </div>
139 </div> 148 </div>
140 149
141 </div> 150 </div>
142 151
143 </div> 152 </div>
src/app/components/pago/pago.component.html
Diff comments   View file @ d3619de
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 (click)="reiniciarTimer()"> 4 (click)="reiniciarTimer()">
5 5
6 <div class="col-12 p-0 vh-100"> 6 <div class="col-12 p-0 vh-100">
7 7
8 <app-header></app-header> 8 <app-header></app-header>
9 9
10 <!-- NOMBRE DE SECCION --> 10 <!-- NOMBRE DE SECCION -->
11 <div class="row m-0"> 11 <div class="row m-0">
12 <div class="col-12 p-0"> 12 <div class="col-12 p-0">
13 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 13 <p class="h5 py-1 bg-gray text-muted text-center m-0">
14 Pagar 14 Pagar
15 <i class="fa fa-usd"></i>
16 </p> 15 </p>
17 </div> 16 </div>
18 </div> 17 </div>
19 18
20 <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">
21 <div class="col-7 text-center"> 20 <div class="col-7 text-center">
22 <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>
23 </div> 22 </div>
24 </div> 23 </div>
25 24
26 <div *ngIf="!verQR" class="row fade-in mt-3"> 25 <div *ngIf="!verQR" class="row fade-in mt-3">
27 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
28 <div class="col-sm-7"> 27 <div class="col-sm-7">
29 <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">
30 <div class="col-4 p-2"> 29 <div class="col-4 p-2">
31 <div 30 <div
32 class="bg-white rounded-sm shadow border-0" 31 class="bg-white rounded-sm shadow border-0"
33 (click)="pagoEfectivo('efectivo')"> 32 (click)="pagoEfectivo('efectivo')">
34 <img src="{{apiImagenes}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 33 <img src="{{apiImagenes}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
35 <div class="p-2 card-text text-center"> 34 <div class="p-2 card-text text-center">
36 <p class="h6 text-center m-0">Efectivo</p> 35 <p class="h6 text-center m-0">Efectivo</p>
37 </div> 36 </div>
38 </div> 37 </div>
39 </div> 38 </div>
40 <div class="col-4 p-2"> 39 <div class="col-4 p-2">
41 <div class="bg-white rounded-sm shadow border-0"> 40 <div class="bg-white rounded-sm shadow border-0">
42 <img src="{{apiImagenes}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 41 <img src="{{apiImagenes}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
43 <div class="p-2 card-text text-center"> 42 <div class="p-2 card-text text-center">
44 <p class="h6 text-center m-0">Tarjeta</p> 43 <p class="h6 text-center m-0">Tarjeta</p>
45 </div> 44 </div>
46 </div> 45 </div>
47 </div> 46 </div>
48 <div class="col-4 p-2"> 47 <div class="col-4 p-2">
49 <div 48 <div
50 class="bg-white rounded-sm shadow border-0" 49 class="bg-white rounded-sm shadow border-0"
51 (click)="pagar('electronico')"> 50 (click)="pagar('electronico')">
52 <img src="{{apiImagenes}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 51 <img src="{{apiImagenes}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
53 <div class="p-2 card-text text-center"> 52 <div class="p-2 card-text text-center">
54 <p class="h6 text-center m-0">Pago Electrónico</p> 53 <p class="h6 text-center m-0">Pago Electrónico</p>
55 </div> 54 </div>
56 </div> 55 </div>
57 </div> 56 </div>
58 </div> 57 </div>
59 </div> 58 </div>
60 59
61 <div class="col-sm-5 pl-0"> 60 <div class="col-sm-5 pl-0">
62 <div class="row ml-3"> 61 <div class="row ml-3">
63 <!-- TICKET --> 62 <!-- TICKET -->
64 <div class="col-sm-7 p-0"> 63 <div class="col-sm-7 p-0">
65 <div class="card rounded-sm shadow"> 64 <div class="card rounded-sm shadow">
66 <div class="card-body"> 65 <div class="card-body">
67 <p class="h5 card-title">Su Ticket</p> 66 <p class="h5 card-title">Su Ticket</p>
68 <div class="row mt-4 m-0"> 67 <div class="row mt-4 m-0">
69 <div class="col-12 p-0 mb-2"> 68 <div class="col-12 p-0 mb-2">
70 <p class="h6 m-0 card-text text-left"> 69 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">DESCRIPCIÓN</small> 70 <small class="font-weight-bold">DESCRIPCIÓN</small>
72 </p> 71 </p>
73 <p class="h6 m-0 card-text text-left"> 72 <p class="h6 m-0 card-text text-left">
74 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 73 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
75 </p> 74 </p>
76 </div> 75 </div>
77 </div> 76 </div>
78 <div class="row px-2 vh-50 overflow-scroll m-0"> 77 <div class="row px-2 vh-50 overflow-scroll m-0">
79 <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">
80 <p class="h6 m-0 card-text text-left"> 79 <p class="h6 m-0 card-text text-left">
81 <small>{{producto.DET_LAR}}</small> 80 <small>{{producto.DET_LAR}}</small>
82 </p> 81 </p>
83 <div class="row d-flex justify-content-between m-0"> 82 <div class="row d-flex justify-content-between m-0">
84 <div class="col p-0"> 83 <div class="col p-0">
85 <p class="h6 m-0 card-text text-left"> 84 <p class="h6 m-0 card-text text-left">
86 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 85 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
87 </p> 86 </p>
88 </div> 87 </div>
89 <div class="col p-0"> 88 <div class="col p-0">
90 <p class="h6 m-0 card-text text-right"> 89 <p class="h6 m-0 card-text text-right">
91 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 90 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
92 </p> 91 </p>
93 </div> 92 </div>
94 </div> 93 </div>
95 </div> 94 </div>
96 </div> 95 </div>
97 <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">
98 Total {{getTotal() | currency}} 97 Total {{getTotal() | currency}}
99 </p> 98 </p>
100 </div> 99 </div>
101 </div> 100 </div>
102 </div> 101 </div>
103 </div> 102 </div>
104 </div> 103 </div>
105 </div> 104 </div>
106 105
107 <div *ngIf="verQR" class="row fade-in mt-5"> 106 <div *ngIf="verQR" class="row fade-in mt-5">
108 <div class="col-6 offset-3 border-0 mb-auto"> 107 <div class="col-6 offset-3 border-0 mb-auto">
109 <img src="{{apiImagenes}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> 108 <img src="{{apiImagenes}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
110 </div> 109 </div>
111 </div> 110 </div>
112 111
113 <!-- OPCIONES ABAJO DERECHA --> 112 <!-- OPCIONES ABAJO DERECHA -->
114 <div class="row m-0 fixed-bottom" > 113 <div class="row m-0 fixed-bottom" >
115 <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">
116 <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">
117 <div class="card-body row m-0"> 116 <div class="card-body row m-0">
118 <div class="col-12 p-3"> 117 <div class="col-12 p-3">
119 <button 118 <button
120 type="button" 119 type="button"
121 class="btn btn-block btn-light shadow btn-sm shadow" 120 class="btn btn-block btn-light shadow btn-sm shadow"
122 (click)="volverPreviousPage()"> 121 (click)="volverPreviousPage()">
123 <span class="pr-2">Volver</span> 122 <span class="pr-2">Volver</span>
124 <i class="fa fa-undo text-warning"></i> 123 <i class="fa fa-undo text-warning"></i>
125 </button> 124 </button>
126 <button 125 <button
127 type="button" 126 type="button"
128 class="btn btn-block btn-light shadow btn-sm shadow" 127 class="btn btn-block btn-light shadow btn-sm shadow"
129 [routerLink]="['/cancelar-compra']"> 128 [routerLink]="['/cancelar-compra']">
130 <span class="pr-2">Cancelar</span> 129 <span class="pr-2">Cancelar</span>
131 <i class="fa fa-times text-danger"></i> 130 <i class="fa fa-times text-danger"></i>
132 </button> 131 </button>
133 </div> 132 </div>
134 </div> 133 </div>
135 </div> 134 </div>
136 </div> 135 </div>
137 </div> 136 </div>
138 137
139 </div> 138 </div>
140 139
141 </div> 140 </div>
142 141
143 <div 142 <div
144 *ngIf="compraConQRfinalizada" 143 *ngIf="compraConQRfinalizada"
145 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">
146 <div class="col-12 text-center text-white my-auto"> 145 <div class="col-12 text-center text-white my-auto">
147 <p class="font-weight-bold display-4"> 146 <p class="font-weight-bold display-4">
148 Su pago fue<br> 147 Su pago fue<br>
149 acreditado 148 acreditado
150 exitosamente 149 exitosamente
151 </p> 150 </p>
152 <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>
153 </div> 152 </div>
154 </div> 153 </div>
155 154
156 <div 155 <div
157 *ngIf="compraConEfectivofinalizada" 156 *ngIf="compraConEfectivofinalizada"
158 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">
159 <div class="col-12 text-center text-white my-auto"> 158 <div class="col-12 text-center text-white my-auto">
160 <p class="font-weight-bold display-4"> 159 <p class="font-weight-bold display-4">
161 Retire su ticket<br> 160 Retire su ticket<br>
162 y diríjase a caja para<br> 161 y diríjase a caja para<br>
163 efectuar el pago. 162 efectuar el pago.
164 </p> 163 </p>
165 </div> 164 </div>
166 </div> 165 </div>
167 166