Commit fdf547f44880e5cbd1fa9976d2279e4599202827
1 parent
ab78443c93
Exists in
master
and in
1 other branch
Agregada funcion para regresar a la pagina previa.
Showing
2 changed files
with
7 additions
and
2 deletions
Show diff stats
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
1 | <div class="row m-0 fade-in bg-primary-gradient disable-user-select"> | 1 | <div class="row m-0 fade-in bg-primary-gradient disable-user-select"> |
2 | <div class="col-12 p-0 vh-100"> | 2 | <div class="col-12 p-0 vh-100"> |
3 | 3 | ||
4 | <!-- TOP HEADER --> | 4 | <!-- TOP HEADER --> |
5 | <app-header></app-header> | 5 | <app-header></app-header> |
6 | 6 | ||
7 | <!-- NOMBRE DE SECCION --> | 7 | <!-- NOMBRE DE SECCION --> |
8 | <div class="row m-0"> | 8 | <div class="row m-0"> |
9 | <div class="col-12 p-0"> | 9 | <div class="col-12 p-0"> |
10 | <p class="h5 py-1 bg-gray text-muted text-center m-0"> | 10 | <p class="h5 py-1 bg-gray text-muted text-center m-0"> |
11 | Pagar | 11 | Pagar |
12 | <i class="fa fa-usd"></i> | 12 | <i class="fa fa-usd"></i> |
13 | </p> | 13 | </p> |
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
16 | 16 | ||
17 | <div class="row m-0"> | 17 | <div class="row m-0"> |
18 | <div class="col-12"> | 18 | <div class="col-12"> |
19 | 19 | ||
20 | <!-- TEXTO DE IZQUIERDA --> | 20 | <!-- TEXTO DE IZQUIERDA --> |
21 | <div class="row mx-2 mt-4 text-white"> | 21 | <div class="row mx-2 mt-4 text-white"> |
22 | <div class="col-sm-2 my-auto"> | 22 | <div class="col-sm-2 my-auto"> |
23 | <p class="h2">Mi Compra | 23 | <p class="h2">Mi Compra |
24 | <i class="fa fa-shopping-cart "></i> | 24 | <i class="fa fa-shopping-cart "></i> |
25 | </p> | 25 | </p> |
26 | </div> | 26 | </div> |
27 | <div class="col-sm-4 my-auto"> | 27 | <div class="col-sm-4 my-auto"> |
28 | <p class="h3">¿Desea finalizar su compra?</p> | 28 | <p class="h3">¿Desea finalizar su compra?</p> |
29 | <p class="h4">Por favor, controle y confirme su compra.</p> | 29 | <p class="h4">Por favor, controle y confirme su compra.</p> |
30 | </div> | 30 | </div> |
31 | </div> | 31 | </div> |
32 | 32 | ||
33 | <div class="row"> | 33 | <div class="row"> |
34 | <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> | 34 | <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> |
35 | <div class="col-sm-7"> | 35 | <div class="col-sm-7"> |
36 | <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"> |
37 | <div class="col-4 p-2" *ngFor="let producto of productos"> | 37 | <div class="col-4 p-2" *ngFor="let producto of productos"> |
38 | <div class="bg-white rounded-sm shadow border-0"> | 38 | <div class="bg-white rounded-sm shadow border-0"> |
39 | <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> | 39 | <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> |
40 | <div class="p-2"> | 40 | <div class="p-2"> |
41 | <p class="h6 text-left m-0">ZARAZA</p> | 41 | <p class="h6 text-left m-0">ZARAZA</p> |
42 | <div class="row justify-content-between m-0"> | 42 | <div class="row justify-content-between m-0"> |
43 | <div class="col-12 p-0"> | 43 | <div class="col-12 p-0"> |
44 | <div class="text-left"> | 44 | <div class="text-left"> |
45 | <p class="m-0 h6"><small>ZARAZA DETALLE</small></p> | 45 | <p class="m-0 h6"><small>ZARAZA DETALLE</small></p> |
46 | <p class="m-0 h6"><small>COD. 5656</small></p> | 46 | <p class="m-0 h6"><small>COD. 5656</small></p> |
47 | </div> | 47 | </div> |
48 | </div> | 48 | </div> |
49 | <div class="col-12 my-auto pt-2 pr-2 p-0"> | 49 | <div class="col-12 my-auto pt-2 pr-2 p-0"> |
50 | <p class="text-right m-0 h6">{{20 | currency}}</p> | 50 | <p class="text-right m-0 h6">{{20 | currency}}</p> |
51 | </div> | 51 | </div> |
52 | </div> | 52 | </div> |
53 | </div> | 53 | </div> |
54 | </div> | 54 | </div> |
55 | </div> | 55 | </div> |
56 | </div> | 56 | </div> |
57 | </div> | 57 | </div> |
58 | 58 | ||
59 | <div class="col-sm-5"> | 59 | <div class="col-sm-5"> |
60 | <div class="row ml-3"> | 60 | <div class="row ml-3"> |
61 | <!-- TICKET --> | 61 | <!-- TICKET --> |
62 | <div class="col-sm-7"> | 62 | <div class="col-sm-7"> |
63 | <div class="card rounded-sm shadow"> | 63 | <div class="card rounded-sm shadow"> |
64 | <div class="card-body"> | 64 | <div class="card-body"> |
65 | <p class="h5 card-title">Su Ticket</p> | 65 | <p class="h5 card-title">Su Ticket</p> |
66 | <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> | 66 | <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> |
67 | Ticket detalle. | 67 | Ticket detalle. |
68 | </p> | 68 | </p> |
69 | <p class="h4 card-text text-right mt-3 mb-0"> | 69 | <p class="h4 card-text text-right mt-3 mb-0"> |
70 | Total {{230 | currency}} | 70 | Total {{230 | currency}} |
71 | </p> | 71 | </p> |
72 | </div> | 72 | </div> |
73 | </div> | 73 | </div> |
74 | </div> | 74 | </div> |
75 | </div> | 75 | </div> |
76 | </div> | 76 | </div> |
77 | </div> | 77 | </div> |
78 | 78 | ||
79 | <!-- OPCIONES ABAJO DERECHA --> | 79 | <!-- OPCIONES ABAJO DERECHA --> |
80 | <div class="row m-0 fixed-bottom"> | 80 | <div class="row m-0 fixed-bottom"> |
81 | <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> | 81 | <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> |
82 | <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> | 82 | <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> |
83 | <div class="card-body row m-0"> | 83 | <div class="card-body row m-0"> |
84 | <div class="col-12 p-3"> | 84 | <div class="col-12 p-3"> |
85 | <button | 85 | <button |
86 | type="button" | 86 | type="button" |
87 | class="btn btn-block btn-light shadow btn-sm shadow" | 87 | class="btn btn-block btn-light shadow btn-sm shadow" |
88 | [routerLink]="['/inicio']"> | 88 | (click)="volverPreviousPage()"> |
89 | <span class="pr-2">Volver</span> | 89 | <span class="pr-2">Volver</span> |
90 | <i class="fa fa-undo text-warning"></i> | 90 | <i class="fa fa-undo text-warning"></i> |
91 | </button> | 91 | </button> |
92 | <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> | 92 | <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> |
93 | <span class="font-weight-bold pr-2">Finalizar y Pagar</span> | 93 | <span class="font-weight-bold pr-2">Finalizar y Pagar</span> |
94 | <i class="fa fa-check text-success"></i> | 94 | <i class="fa fa-check text-success"></i> |
95 | </button> | 95 | </button> |
96 | <button | 96 | <button |
97 | type="button" | 97 | type="button" |
98 | class="btn btn-block btn-light shadow btn-sm shadow" | 98 | class="btn btn-block btn-light shadow btn-sm shadow" |
99 | [routerLink]="['/cancelar-compra']"> | 99 | [routerLink]="['/cancelar-compra']"> |
100 | <span class="pr-2">Cancelar</span> | 100 | <span class="pr-2">Cancelar</span> |
101 | <i class="fa fa-times text-danger"></i> | 101 | <i class="fa fa-times text-danger"></i> |
102 | </button> | 102 | </button> |
103 | </div> | 103 | </div> |
104 | </div> | 104 | </div> |
105 | </div> | 105 | </div> |
106 | </div> | 106 | </div> |
107 | </div> | 107 | </div> |
108 | 108 | ||
109 | </div> | 109 | </div> |
110 | </div> | 110 | </div> |
111 | 111 | ||
112 | </div> | 112 | </div> |
113 | 113 | ||
114 | </div> | 114 | </div> |
115 | 115 |
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
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 | 4 | ||
4 | @Component({ | 5 | @Component({ |
5 | selector: 'app-confirmacion-carrito', | 6 | selector: 'app-confirmacion-carrito', |
6 | templateUrl: './confirmacion-carrito.component.html', | 7 | templateUrl: './confirmacion-carrito.component.html', |
7 | styleUrls: ['./confirmacion-carrito.component.scss'] | 8 | styleUrls: ['./confirmacion-carrito.component.scss'] |
8 | }) | 9 | }) |
9 | export class ConfirmacionCarritoComponent implements OnInit { | 10 | export class ConfirmacionCarritoComponent implements OnInit { |
10 | 11 | ||
11 | productos = [{}, {}, {}]; | 12 | productos = [{}, {}, {}]; |
12 | private apiUrl: string = appSettings.apiUrl; | 13 | private apiUrl: string = appSettings.apiUrl; |
13 | 14 | ||
14 | constructor() { } | 15 | constructor(private location: Location) { } |
15 | 16 | ||
16 | ngOnInit() { | 17 | ngOnInit() { |
17 | } | 18 | } |
18 | 19 | ||
20 | volverPreviousPage() { | ||
21 | this.location.back(); | ||
22 | } | ||
23 | |||
19 | } | 24 | } |
20 | 25 |