promocion.component.html 3.42 KB
<div class="bg-primary rounded">
  <div class="modal-header" *ngIf="articulosPromo.length">
    <img
      draggable="false"
      ondragstart="return false;"
      (contextmenu)="false"
      (click)="selectPromo(articulosPromo[0])"
      class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
      src="assets/img/icono-cancelar-blanco.svg">
    <div class="row w-100 no-gutters justify-content-between">
      <div class="col align-self-center">
        <p class="h3 text-white">{{articulosPromo[0].MKT_DESC ? articulosPromo[0].MKT_DESC.toUpperCase() : articulosPromo[0].DetArt.toUpperCase()}}</p>
      </div>
      <div class="col-auto align-self-center mt-4 pl-2">
        <div
          class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
          (click)="selectPromo(articulosPromo[0])">
          <div class="col-auto align-self-center text-primary">
            <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 
          </div>
          <div class="col-auto px-0">
            <img
              draggable="false"
              ondragstart="return false;"
              (contextmenu)="false"
              class="d-block ml-auto my-1 icon-20"
              src="assets/img/ir-color.svg">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-body" *ngIf="articulosPromo.length">
    <div
      class="row no-gutters w-100"
      *ngIf="promociones.length && !loading">
      <div class="col-9 col-9 align-self-center">
        <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
        <p class="h1 text-white">en un combo?</p>
      </div>
      <div class="col-3">
        <img
          draggable="false"
          ondragstart="return false;"
          (contextmenu)="false"
          src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
          onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
          class="card-img-top img-fluid rounded-circle">
      </div>
    </div>
    <div>
    <div
      class="row no-gutters w-100"
      *ngIf="!promociones.length && !loading">
      <div class="col-12 text-center">
        <p class="text-white"><small>NO HAY PROMOS CON STOCK</small></p>
      </div>
    </div>
    <div
      class="d-flex justify-content-center mt-2"
      *ngIf="loading">
      <div class="spinner-border text-white" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    <div
      class="row mt-3 no-gutters lista-promociones scroll-y-visible"
      (scroll)="scrollEvent($event)">
      <div class="col-12">
        <div *ngFor="let promo of promociones; let i = index">
          <div
            [ngClass]="{ 'mt-2': i !== 0 }"
            class="btn-effect bg-white badge-pill text-primary"
            (click)="selectPromo(promo)">
            <div class="d-flex">
              <p class="text-truncate mr-auto my-auto"><small>{{promo.MKT_DESC ? promo.MKT_DESC.toUpperCase() : promo.DetArt.toUpperCase()}}</small></p>
              <p class="font-weight-bold ml-auto my-auto pr-2">
                <span>{{promo.PreVen | currency}}</span>
              </p>
              <img
                draggable="false"
                ondragstart="return false;"
                (contextmenu)="false"
                class="d-block py-1 icon-30"
                src="assets/img/ir-color.svg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>