Commit bdb668d721497bb90c858d9628105879d92746c7
1 parent
fa5a6300a2
Exists in
master
carrito con produtos
Showing
2 changed files
with
9 additions
and
7 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/{{producto.imagenes[0].imagen}}" 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">{{producto.DetArt}}</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>{{producto.DET_LAR}}</small></p> |
46 | <p class="m-0 h6"><small>COD. 5656</small></p> | 46 | <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</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">{{producto.PreVen | 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 | (click)="volverPreviousPage()"> | 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 [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> | 92 | <button [routerLink]="['/pago']" 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 | import { Location } from '@angular/common'; |
4 | import { ProductoService } from 'src/app/services/producto.service'; | ||
4 | 5 | ||
5 | @Component({ | 6 | @Component({ |
6 | selector: 'app-confirmacion-carrito', | 7 | selector: 'app-confirmacion-carrito', |
7 | templateUrl: './confirmacion-carrito.component.html', | 8 | templateUrl: './confirmacion-carrito.component.html', |
8 | styleUrls: ['./confirmacion-carrito.component.scss'] | 9 | styleUrls: ['./confirmacion-carrito.component.scss'] |
9 | }) | 10 | }) |
10 | export class ConfirmacionCarritoComponent implements OnInit { | 11 | export class ConfirmacionCarritoComponent implements OnInit { |
11 | 12 | ||
12 | productos = [{}, {}, {}]; | 13 | productos = []; |
13 | private apiUrl: string = appSettings.apiUrl; | 14 | private apiUrl: string = appSettings.apiUrl; |
14 | 15 | ||
15 | constructor(private location: Location) { } | 16 | constructor(private location: Location, private productoService: ProductoService) { } |
16 | 17 | ||
17 | ngOnInit() { | 18 | ngOnInit() { |
19 | this.productos = this.productoService.productos; | ||
18 | } | 20 | } |
19 | 21 | ||
20 | volverPreviousPage() { | 22 | volverPreviousPage() { |
21 | this.location.back(); | 23 | this.location.back(); |
22 | } | 24 | } |
23 | 25 | ||
24 | } | 26 | } |
25 | 27 |