pago-con-tarjeta.component.html 2.5 KB
<div class="modal-header p-2">
  <div class="row m-0 w-100">
    <div class="col">
      <span class="h4 m-0">Pago con tarjeta</span>
    </div>
  </div>
</div>

<div class="modal-body" id="modal-body">
  <div class="w-75 mx-auto card-columns">
    <div
      class="card card-effect shadow-sm rounded-sm"
      *ngFor="let tarjeta of tarjetas"
      [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
      (click)="seleccionarTarjeta(tarjeta)">
      <img
        class="w-100 p-1"
        src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
    </div>
  </div>
  <div class="border-top w-75 mx-auto" *ngIf="showForm">
    <div class="row mt-2 fade-in">
      <form class="col">
        <div class="row py-3">
          <div class="col-auto pr-1">
            <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
          </div>
          <div class="col-auto pl-2">
            <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
          </div>
        </div>
        <div class="row pb-3">
          <div class="col-auto pr-1">
            <span>Importe</span>
          </div>
          <div class="col-auto pl-2">
            <span class="font-weight-bold">{{ importeTotal | currency}}</span>
          </div>
        </div>
        <div class="row pb-3">
          <div class="col-auto pr-1 my-auto">
            <span>Terminal Nº</span>
          </div>
          <div class="col-12 col-md-auto pl-md-1">
            <input
              class="form-control form-control-sm"
              type="number">
          </div>
        </div>
        <div class="row pb-3">
          <div class="col-auto pr-1 my-auto">
            <span>Número de Cupón</span>
          </div>
          <div class="col-12 col-md-auto pl-md-1">
            <input
              class="form-control form-control-sm"
              type="number">
          </div>
        </div>
        <div class="row pb-3">
          <div class="col-auto pr-1 my-auto">
            <span>Cuotas</span>
          </div>
          <div class="col-12 col-md-auto pl-md-1">
            <input
              class="form-control form-control-sm"
              type="number">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal-footer py-1">
  <button
    class="btn btn-sm btn-secondary"
    type="button"
    (click)="close()">
    Cancelar
  </button>
  <button
    class="btn btn-sm btn-primary"
    type="button">
    Guardar
  </button>
</div>