Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 036a5163ae71a07abd24b43382da210380f8e1d3

Authored by Luis Suarez
1 parent 8f0f532fa6
Exists in develop

indicaciones pago tarjeta, rutas y pantalla adaptada

Showing 4 changed files with 36 additions and 17 deletions   Show diff stats
src/app/modules/forma-pago/forma-pago.component.ts
Diff comments   View file @ 036a516
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-forma-pago', 6 selector: 'app-forma-pago',
7 templateUrl: './forma-pago.component.html', 7 templateUrl: './forma-pago.component.html',
8 styleUrls: ['./forma-pago.component.scss'] 8 styleUrls: ['./forma-pago.component.scss']
9 }) 9 })
10 export class FormaPagoComponent implements OnInit { 10 export class FormaPagoComponent implements OnInit {
11 constructor( 11 constructor(
12 private articuloService: ArticuloService, 12 private articuloService: ArticuloService,
13 private router: Router 13 private router: Router
14 ) {} 14 ) {}
15 15
16 ngOnInit() { 16 ngOnInit() {
17 if (!this.articuloService.carrito.length) { 17 if (!this.articuloService.carrito.length) {
18 this.router.navigate(['']); 18 this.router.navigate(['']);
19 return; 19 return;
20 } 20 }
21 this.mediaPantalla(); 21 this.mediaPantalla();
22 } 22 }
23 23
24 medioPago(medioPago: number) { 24 medioPago(medioPago: number) {
25 this.articuloService.medioPago = medioPago; 25 this.articuloService.medioPago = medioPago;
26 switch (medioPago) { 26 switch (medioPago) {
27 case 4: 27 case 4:
28 this.router.navigate(['pago-tarjeta']); 28 this.router.navigate(['indicaciones-pago-tarjeta']);
29 break; 29 break;
30 case 9: 30 case 9:
31 this.router.navigate(['pago-electronico']); 31 this.router.navigate(['pago-electronico']);
32 break; 32 break;
33 } 33 }
34 } 34 }
35 35
36 mediaPantalla() { 36 mediaPantalla() {
37 if ($('body').hasClass('media-pantalla')) { 37 if ($('body').hasClass('media-pantalla')) {
38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
39 } 39 }
40 } 40 }
41 } 41 }
42 42
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
Diff comments   View file @ 036a516
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="(false)" 7 (contextmenu)="(false)"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"/> 9 src="assets/img/logo-spot.svg"/>
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div 14 <div
15 class="col-12 col-sm-10 col-md-4 p-5 ml-auto h-auto align-self-center 15 #card
16 btn-effect border border-primary rounded reduce-card-1"> 16 class="p-5 mx-auto mt-4 h-30 align-self-center
17 btn-effect border border-primary rounded reduce-card-1"
18 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'">
17 <div class="row h-auto"> 19 <div class="row h-auto">
18 <div class="col-12 col-md-12"> 20 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
19 <img 21 <img
20 draggable="false" 22 draggable="false"
21 ondragstart="return false;" 23 ondragstart="return false;"
22 (contextmenu)="(false)" 24 (contextmenu)="(false)"
23 class="w-100 h-auto bg-white" 25 class="w-100 h-auto bg-white"
24 src="assets/img/tarjeta-banda.jpg"/> 26 src="assets/img/tarjeta-banda.jpg"/>
25 </div> 27 </div>
26 <div class="col-12 col-md-12 h-auto"> 28 <div class="h-auto"
29 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
27 <p class="h2 m-0 text-primary">Banda Magnética</p> 30 <p class="h2 m-0 text-primary">Banda Magnética</p>
28 <small class=" m-0"> 31 <small class=" m-0">
29 DESLIZÁ LA TARJETA POR LA RANURA<br> 32 DESLIZÁ LA TARJETA POR LA RANURA<br>
30 CUANDO LA PANTALLA LO INDIQUE 33 CUANDO LA PANTALLA LO INDIQUE
31 </small> 34 </small>
32 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 35 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
33 <div class="row mx-0 bg-primary badge-pill h-auto"> 36 <div class="row mx-0 bg-primary badge-pill h-auto">
34 <div class="col-10 align-self-center text-center text-white"> 37 <div
38 class="col-10 align-self-center text-center text-white"
39 [routerLink]="['/pago-tarjeta']">
35 Continuar 40 Continuar
36 </div> 41 </div>
37 <div class="col-2 align-self-center p-0"> 42 <div class="col-2 align-self-center p-0">
38 <img 43 <img
39 draggable="false" 44 draggable="false"
40 ondragstart="return false;" 45 ondragstart="return false;"
41 (contextmenu)="(false)" 46 (contextmenu)="(false)"
42 class="p-1 icon-50" 47 class="p-1 icon-50"
43 src="assets/img/ir.svg"/> 48 src="assets/img/ir.svg"/>
44 </div> 49 </div>
45 </div> 50 </div>
46 </div> 51 </div>
47 </div> 52 </div>
48 </div> 53 </div>
49 </div> 54 </div>
50 <div 55 <div
51 class="col-12 col-sm-10 col-md-4 p-5 my-auto mx-3 h-auto align-self-center 56 class="p-5 mx-auto mt-6 h-auto align-self-center
52 btn-effect border border-primary rounded reduce-card-1"> 57 btn-effect border border-primary rounded reduce-card-1"
58 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'">
53 <div class="row h-auto"> 59 <div class="row h-auto">
54 <div class="col-12 col-md-12"> 60 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
55 <img 61 <img
56 draggable="false" 62 draggable="false"
57 ondragstart="return false;" 63 ondragstart="return false;"
58 (contextmenu)="(false)" 64 (contextmenu)="(false)"
59 class="w-100 h-auto bg-white" 65 class="w-100 h-auto bg-white"
60 src="assets/img/tarjeta-chip.jpg"/> 66 src="assets/img/tarjeta-chip.jpg"/>
61 </div> 67 </div>
62 <div class="col-12 col-md-12 h-auto"> 68 <div
69 class="h-auto"
70 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
63 <p class="h2 m-0 text-primary">Chip</p> 71 <p class="h2 m-0 text-primary">Chip</p>
64 <small class=" m-0"> 72 <small class=" m-0">
65 INTRODUCÍ TU TARJETA POR LA<br> 73 INTRODUCÍ TU TARJETA POR LA<br>
66 PARTE INFERIOR DE LECTOR <br> 74 PARTE INFERIOR DE LECTOR <br>
67 CUANDO LA PANTALLA LO INDIQUE 75 CUANDO LA PANTALLA LO INDIQUE
68 </small> 76 </small>
69 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 77 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
70 <div class="row mx-0 bg-primary badge-pill h-auto"> 78 <div class="row mx-0 bg-primary badge-pill h-auto">
71 <div class="col-10 align-self-center text-center text-white"> 79 <div
80 class="col-10 align-self-center text-center text-white"
81 [routerLink]="['/pago-tarjeta']">
72 Continuar 82 Continuar
73 </div> 83 </div>
74 <div class="col-2 align-self-center p-0"> 84 <div class="col-2 align-self-center p-0">
75 <img 85 <img
76 draggable="false" 86 draggable="false"
77 ondragstart="return false;" 87 ondragstart="return false;"
78 (contextmenu)="(false)" 88 (contextmenu)="(false)"
79 class="p-1 icon-50" 89 class="p-1 icon-50"
80 src="assets/img/ir.svg"/> 90 src="assets/img/ir.svg"/>
81 </div> 91 </div>
82 </div> 92 </div>
83 </div> 93 </div>
84 </div> 94 </div>
85 </div> 95 </div>
86 </div> 96 </div>
87 <div 97 <div
88 class="col-12 col-sm-10 col-md-4 p-5 mr-auto h-auto align-self-center 98 class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center
89 btn-effect border border-primary rounded reduce-card-1"> 99 btn-effect border border-primary rounded reduce-card-1"
100 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'">
90 <div class="row h-auto"> 101 <div class="row h-auto">
91 <div class="col-12 col-md-12"> 102 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
92 <img 103 <img
93 draggable="false" 104 draggable="false"
94 ondragstart="return false;" 105 ondragstart="return false;"
95 (contextmenu)="(false)" 106 (contextmenu)="(false)"
96 class="w-100 h-auto bg-white" 107 class="w-100 h-auto bg-white"
97 src="assets/img/tarjeta-contact-less.jpg"/> 108 src="assets/img/tarjeta-contact-less.jpg"/>
98 </div> 109 </div>
99 <div class="col-12 col-md-12 h-auto"> 110 <div
111 class="h-auto"
112 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
100 <p class="h2 m-0 text-primary">Contact-less</p> 113 <p class="h2 m-0 text-primary">Contact-less</p>
101 <small class=" m-0"> 114 <small class=" m-0">
102 ACERCÁ LA TARJETA AL POSNET<br> 115 ACERCÁ LA TARJETA AL POSNET<br>
103 CUANDO LA PANTALLA LO INDIQUE 116 CUANDO LA PANTALLA LO INDIQUE
104 </small> 117 </small>
105 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 118 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
106 <div class="row mx-0 bg-primary badge-pill h-auto"> 119 <div class="row mx-0 bg-primary badge-pill h-auto">
107 <div class="col-10 align-self-center text-center text-white"> 120 <div
121 class="col-10 align-self-center text-center text-white"
122 [routerLink]="['/pago-tarjeta']">
108 <small>Continuar</small> 123 <small>Continuar</small>
109 </div> 124 </div>
110 <div class="col-2 align-self-center p-0"> 125 <div class="col-2 align-self-center p-0">
111 <img 126 <img
112 draggable="false" 127 draggable="false"
113 ondragstart="return false;" 128 ondragstart="return false;"
114 (contextmenu)="(false)" 129 (contextmenu)="(false)"
115 class="p-1 icon-50" 130 class="p-1 icon-50"
116 src="assets/img/ir.svg"/> 131 src="assets/img/ir.svg"/>
117 </div> 132 </div>
118 </div> 133 </div>
119 </div> 134 </div>
120 </div> 135 </div>
121 </div> 136 </div>
122 </div> 137 </div>
123 </div> 138 </div>
124 </div> 139 </div>
125 </div> 140 </div>
126 141
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
Diff comments   View file @ 036a516
1 .reduce-card-1.media-pantalla { 1 .reduce-card-1.media-pantalla {
2 max-width: 30% !important; 2 max-width: 30% !important;
3 margin: 0px 15px !important; 3 margin: 0px 15px !important;
4 height: 670px !important; 4 height: 670px !important;
5 } 5 }
6
7 .mt-6 {
8 margin-top: 4.5rem;
9 }
6 10
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
Diff comments   View file @ 036a516
1 import { Component, OnInit, OnChanges } from '@angular/core'; 1 import { Component, OnInit, OnChanges } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-indicaciones-pago-tarjeta', 4 selector: 'app-indicaciones-pago-tarjeta',
5 templateUrl: './indicaciones-pago-tarjeta.component.html', 5 templateUrl: './indicaciones-pago-tarjeta.component.html',
6 styleUrls: ['./indicaciones-pago-tarjeta.component.scss'] 6 styleUrls: ['./indicaciones-pago-tarjeta.component.scss']
7 }) 7 })
8 export class IndicacionesPagoTarjetaComponent implements OnInit { 8 export class IndicacionesPagoTarjetaComponent implements OnInit {
9 constructor() { } 9 constructor() { }
10 10
11 ngOnInit() { 11 ngOnInit() {
12 this.mediaPantalla(); 12 this.mediaPantalla();
13 } 13 }
14 14
15 mediaPantalla() { 15 mediaPantalla() {
16 if ($('body').hasClass('media-pantalla')) { 16 if ($('body').hasClass('media-pantalla')) {
17 $('.reduce-card').addClass('media-pantalla'); 17 $('.reduce-card-1').addClass('media-pantalla');
18 } 18 }
19 } 19 }
20 } 20 }
21 21