Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit b4ffe61f3ed23bb1f91c119ced4962f73de9a41a

Authored by Marcelo Puebla
1 parent d2dcb1b9f9
Exists in master and in 1 other branch validar_pve

Arreglo en pantallo de pagos.

Showing 3 changed files with 95 additions and 28 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ b4ffe61
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component'; 7 import { MasterComponent } from './components/master/master.component';
8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 import { PagoComponent } from './components/pago/pago.component'; 9 import { PagoComponent } from './components/pago/pago.component';
10 10
11 const routes: Routes = [ 11 const routes: Routes = [
12 { path: '', component: HomeComponent }, 12 { path: '', component: HomeComponent },
13 { path: 'home', component: HomeComponent }, 13 { path: 'home', component: HomeComponent },
14 { path: 'abm-imagenes', component: AmbImagenesComponent }, 14 { path: 'abm-imagenes', component: AmbImagenesComponent },
15 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
15 { 16 {
16 path: '', 17 path: '',
17 component: MasterComponent, 18 component: MasterComponent,
18 children: [ 19 children: [
19 { path: 'inicio', component: InicioComponent }, 20 { path: 'inicio', component: InicioComponent },
20 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 21 { path: 'busqueda-productos', component: BusquedaProductosComponent },
21 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
22 { path: 'pago', component: PagoComponent } 22 { path: 'pago', component: PagoComponent }
23 ] 23 ]
24 }, 24 },
25 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 25 { path: '**', redirectTo: '/home', pathMatch: 'full' },
26 ]; 26 ];
27 27
28 @NgModule({ 28 @NgModule({
29 imports: [RouterModule.forRoot(routes)], 29 imports: [RouterModule.forRoot(routes)],
30 exports: [RouterModule] 30 exports: [RouterModule]
31 }) 31 })
32 32
33 export class AppRoutingModule { } 33 export class AppRoutingModule { }
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ b4ffe61
1 <div class="row"> 1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2 <div class="col-12"> 2 <div class="col-12 p-0 vh-100">
3
4 <!-- TOP HEADER -->
5 <app-header></app-header>
3 6
4 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 8 <div class="row m-0">
6 <div class="col-12 p-0"> 9 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> 10 <p class="h5 py-1 bg-gray text-muted text-center m-0">
11 Pagar
12 <i class="fa fa-usd"></i>
13 </p>
8 </div> 14 </div>
9 </div> 15 </div>
10 16
11 <div class="row m-3 d-flex align-items-center"> 17 <div class="row m-0">
12 <div class="col-4"> 18 <div class="col-12">
13 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> 19
14 </div> 20 <!-- TEXTO DE IZQUIERDA -->
15 <div class="col-8"> 21 <div class="row mx-2 mt-4 text-white">
16 <h2>¿Desea finalizar su compra?</h2> 22 <div class="col-sm-2 my-auto">
17 <h3>Por favor, controle y confirme su compra.</h3> 23 <p class="h2">Mi Compra
18 </div> 24 <i class="fa fa-shopping-cart "></i>
19 <div class="col-sm-7"> 25 </p>
20 26 </div>
21 <div class="row pr-3 vh-50 overflow-scroll"> 27 <div class="col-sm-4 my-auto">
22 <div class="col-4 p-2" *ngFor="let producto of productos"> 28 <p class="h3">¿Desea finalizar su compra?</p>
23 <div class="card card-effect bg-white rounded-sm shadow border-0"> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
24 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto"> 30 </div>
25 <div class="card-body"> 31 </div>
26 <p class="h5 text-left m-0">{{producto.variable}}</p> 32
27 <div class="text-left"> 33 <div class="row">
28 <p class="m-0"><small>ASDASDSADASDSA</small></p> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
29 <p class="m-0"><small>COD. 1222</small></p> 35 <div class="col-sm-7">
30 <p class="m-0"><strong>$ 563</strong></p> 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">
38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
40 <div class="p-2">
41 <p class="h6 text-left m-0">ZARAZA</p>
42 <div class="row justify-content-between m-0">
43 <div class="col-12 p-0">
44 <div class="text-left">
45 <p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
46 <p class="m-0 h6"><small>COD. 5656</small></p>
47 </div>
48 </div>
49 <div class="col-12 my-auto pt-2 pr-2 p-0">
50 <p class="text-right m-0 h6">{{20 | currency}}</p>
51 </div>
52 </div>
53 </div>
54 </div>
55 </div>
56 </div>
57 </div>
58
59 <div class="col-sm-5">
60 <div class="row h-100 ml-3">
61 <!-- TICKET -->
62 <div class="col-sm-7">
63 <div class="card rounded-sm shadow">
64 <div class="card-body">
65 <p class="h5 card-title">Su Ticket</p>
66 <p class="h6 card-text text-left mt-4">
67 Ticket detalle.
68 </p>
69 <p class="h4 card-text text-right mt-3 mb-0">
70 Total {{230 | currency}}
71 </p>
72 </div>
73 </div>
74 </div>
75
76 <div class="row m-0 fixed-bottom">
77 <!-- OPCIONES ABAJO DERECHA -->
78 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
79 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
80 <div class="card-body row m-0">
81 <div class="col-12 p-3">
82 <button type="button" class="btn btn-block btn-light shadow btn-sm shadow">
83 <span class="pr-1">Volver</span>
84 <i class="fa fa-undo text-warning"></i>
85 </button>
86 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
87 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
88 <i class="fa fa-check text-success"></i>
89 </button>
90 <button type="button" class="btn btn-block btn-light shadow btn-sm shadow">
91 <span class="pr-1">Cancelar</span>
92 <i class="fa fa-times text-danger"></i>
93 </button>
94 </div>
95 </div>
96 </div>
31 </div> 97 </div>
32 </div> 98 </div>
33 </div> 99 </div>
34 </div> 100 </div>
35 </div> 101 </div>
36 </div> 102
37 <div class="col-sm-5">
38 <h3>TOTAL: $553</h3>
39 </div> 103 </div>
40 </div> 104 </div>
105
106
41 </div> 107 </div>
108
src/app/components/header/header.component.html
Diff comments   View file @ b4ffe61
1 <div class="row bg-light p-4 justify-content-between"> 1 <div class="row m-0 bg-light p-4 justify-content-between">
2 <div class="col-auto"> 2 <div class="col-auto">
3 <img src="{{apiUrl}}/imagenes/logoaxion.png"> 3 <img src="{{apiUrl}}/imagenes/logoaxion.png">
4 </div> 4 </div>
5 <div class="col-auto"> 5 <div class="col-auto">
6 <img src="{{apiUrl}}/imagenes/logodebo.png"> 6 <img src="{{apiUrl}}/imagenes/logodebo.png">
7 </div> 7 </div>
8 </div> 8 </div>
9 9