Martin Macola / autoservicio

Download as
Browse Code »

Commit b4ffe61f3ed23bb1f91c119ced4962f73de9a41a

Authored by Marcelo Puebla
1 parent d2dcb1b9f9
Exists in master

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
... ... @@ -12,13 +12,13 @@ const routes: Routes = [
12 12 { path: '', component: HomeComponent },
13 13 { path: 'home', component: HomeComponent },
14 14 { path: 'abm-imagenes', component: AmbImagenesComponent },
  15 + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
15 16 {
16 17 path: '',
17 18 component: MasterComponent,
18 19 children: [
19 20 { path: 'inicio', component: InicioComponent },
20 21 { path: 'busqueda-productos', component: BusquedaProductosComponent },
21   - { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
22 22 { path: 'pago', component: PagoComponent }
23 23 ]
24 24 },
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ b4ffe61
1   -<div class="row">
2   - <div class="col-12">
  1 +<div class="row m-0 fade-in bg-primary-gradient disable-user-select">
  2 + <div class="col-12 p-0 vh-100">
  3 +
  4 + <!-- TOP HEADER -->
  5 + <app-header></app-header>
3 6  
4 7 <!-- NOMBRE DE SECCION -->
5 8 <div class="row m-0">
6 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 14 </div>
9 15 </div>
10 16  
11   - <div class="row m-3 d-flex align-items-center">
12   - <div class="col-4">
13   - <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
14   - </div>
15   - <div class="col-8">
16   - <h2>¿Desea finalizar su compra?</h2>
17   - <h3>Por favor, controle y confirme su compra.</h3>
18   - </div>
19   - <div class="col-sm-7">
20   -
21   - <div class="row pr-3 vh-50 overflow-scroll">
22   - <div class="col-4 p-2" *ngFor="let producto of productos">
23   - <div class="card card-effect bg-white rounded-sm shadow border-0">
24   - <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto">
25   - <div class="card-body">
26   - <p class="h5 text-left m-0">{{producto.variable}}</p>
27   - <div class="text-left">
28   - <p class="m-0"><small>ASDASDSADASDSA</small></p>
29   - <p class="m-0"><small>COD. 1222</small></p>
30   - <p class="m-0"><strong>$ 563</strong></p>
  17 + <div class="row m-0">
  18 + <div class="col-12">
  19 +
  20 + <!-- TEXTO DE IZQUIERDA -->
  21 + <div class="row mx-2 mt-4 text-white">
  22 + <div class="col-sm-2 my-auto">
  23 + <p class="h2">Mi Compra
  24 + <i class="fa fa-shopping-cart "></i>
  25 + </p>
  26 + </div>
  27 + <div class="col-sm-4 my-auto">
  28 + <p class="h3">¿Desea finalizar su compra?</p>
  29 + <p class="h4">Por favor, controle y confirme su compra.</p>
  30 + </div>
  31 + </div>
  32 +
  33 + <div class="row">
  34 + <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
  35 + <div class="col-sm-7">
  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 97 </div>
32 98 </div>
33 99 </div>
34 100 </div>
35 101 </div>
36   - </div>
37   - <div class="col-sm-5">
38   - <h3>TOTAL: $553</h3>
  102 +
39 103 </div>
40 104 </div>
  105 +
  106 +
41 107 </div>
  108 +
42 109 </div>
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 2 <div class="col-auto">
3 3 <img src="{{apiUrl}}/imagenes/logoaxion.png">
4 4 </div>