Commit fdf547f44880e5cbd1fa9976d2279e4599202827
1 parent
ab78443c93
Exists in
master
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 |