Mauricio Cattafi / autoservicio

Browse Code »

Commit 0d76ed2a04feb761e29c9c77d6181465350536d0

Authored by Marcelo Puebla 2019-09-04 12:37:49 -0300

1 parent 3d313b7d2d

Exists in master and in 1 other branch

Mostrando detalle de los productos en la confirmacion de compra.

Showing 2 changed files with 12 additions and 4 deletions Show diff stats

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 0d76ed2

 <div
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           Pagar
-          <i class="fa fa-usd"></i>
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-12">
         <!-- TEXTO DE IZQUIERDA -->
         <div class="row mx-2 mt-4 text-white">
           <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-7 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div class="row">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div class="col-sm-7">
             <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
               <div class="col-4 p-2" *ngFor="let producto of productos">
                 <div class="bg-white rounded-sm shadow border-0">
                   <img
                     src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
                     class="shadow rounded-sm w-100 m-auto">
                   <div class="p-2">
                     <p class="h6 min-h-55 text-left m-0">
                       <small>
                         {{producto.DET_LAR}}
                       </small>
                     </p>
+                    <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
+                      <small>
+                        - {{p.cantidad}} {{p.DET_LAR}}
+                      </small>
+                    </p>
                     <div class="row m-0">
-                      <div class="col-12 my-auto pt-2 pr-2 p-0">
+                      <div class="col-6 my-auto pt-2 pr-2 p-0">
+                        <p class="text-left m-0 h6">
+                          {{producto.cantidad}} x {{producto.PreVen | currency}}
+                        </p>
+                      </div>
+                      <div class="col-6 my-auto pt-2 pr-2 p-0">
                         <p class="text-right m-0 h6">
-                          {{producto.PreVen | currency}}
+                          {{producto.cantidad * producto.PreVen | currency}}
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="col-sm-5 pl-0">
             <div class="row ml-3">
               <!-- TICKET -->
               <div class="col-sm-7 p-0">
                 <div class="card rounded-sm shadow">
                   <div class="card-body">
                     <p class="h5 card-title">Su Ticket</p>
                     <div class="row mt-4 m-0">
                       <div class="col-12 p-0 mb-2">
                         <p class="h6 m-0 card-text text-left">
                           <small class="font-weight-bold">DESCRIPCIÓN</small>
                         </p>
                         <p class="h6 m-0 card-text text-left">
                           <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                         </p>
                       </div>
                     </div>
                     <div class="row vh-50 px-2 overflow-scroll m-0">
                       <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.DET_LAR}}</small>
                         </p>
                         <div class="row d-flex justify-content-between m-0">
                           <div class="col p-0">
                             <p class="h6 m-0 card-text text-left">
                               <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                             </p>
                           </div>
                           <div class="col p-0">
                             <p class="h6 m-0 card-text text-right">
                               <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                             </p>
                           </div>
                         </div>
                       </div>
                     </div>
                     <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                       Total {{getTotal() | currency}}
                     </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
                     <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
                     <i class="fa fa-check text-success"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/components/pago/pago.component.html

Diff comments View file @ 0d76ed2

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer()">
   <div class="col-12 p-0 vh-100">
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           Pagar
-          <i class="fa fa-usd"></i>
         </p>
       </div>
     </div>
     <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
       <div class="col-7 text-center">
         <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
       </div>
     </div>
     <div *ngIf="!verQR" class="row fade-in mt-3">
       <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
       <div class="col-sm-7">
         <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
           <div class="col-4 p-2">
             <div
               class="bg-white rounded-sm shadow border-0"
               (click)="pagoEfectivo('efectivo')">
               <img src="{{apiImagenes}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
               <div class="p-2 card-text text-center">
                 <p class="h6 text-center m-0">Efectivo</p>
               </div>
             </div>
           </div>
           <div class="col-4 p-2">
             <div class="bg-white rounded-sm shadow border-0">
               <img src="{{apiImagenes}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
               <div class="p-2 card-text text-center">
                 <p class="h6 text-center m-0">Tarjeta</p>
               </div>
             </div>
           </div>
           <div class="col-4 p-2">
             <div
               class="bg-white rounded-sm shadow border-0"
               (click)="pagar('electronico')">
               <img src="{{apiImagenes}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
               <div class="p-2 card-text text-center">
                 <p class="h6 text-center m-0">Pago Electrónico</p>
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="col-sm-5 pl-0">
         <div class="row ml-3">
           <!-- TICKET -->
           <div class="col-sm-7 p-0">
             <div class="card rounded-sm shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row px-2 vh-50 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DET_LAR}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div *ngIf="verQR" class="row fade-in mt-5">
       <div class="col-6 offset-3 border-0 mb-auto">
         <img src="{{apiImagenes}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
       </div>
     </div>
     <!-- OPCIONES ABAJO DERECHA -->
     <div class="row m-0 fixed-bottom" >
       <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
         <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
           <div class="card-body row m-0">
             <div class="col-12 p-3">
               <button
                 type="button"
                 class="btn btn-block btn-light shadow btn-sm shadow"
                 (click)="volverPreviousPage()">
                 <span class="pr-2">Volver</span>
                 <i class="fa fa-undo text-warning"></i>
               </button>
               <button
                 type="button"
                 class="btn btn-block btn-light shadow btn-sm shadow"
                 [routerLink]="['/cancelar-compra']">
                 <span class="pr-2">Cancelar</span>
                 <i class="fa fa-times text-danger"></i>
               </button>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
         Retire su ticket<br>
         y diríjase a caja para<br>
         efectuar el pago.
     </p>
   </div>
 </div>