nova-live/projects/live-app/src/app/components/gift-modal/gift-modal.component.html

<ion-modal
  #modal
  [isOpen]="isOpenGift"
  [initialBreakpoint]="1"
  [breakpoints]="[0, 1]"
  (didDismiss)="isOpenGift = false"
  class="gift-modal"
>
  <ng-template>
    <div class="gift-region">
      <ion-toolbar>
        <div class="gift-tabs">
          @for (item of tabs; track $index) {
          <div
            [style.color]="activeTab == item.val ? '#000' : '#6b6b6b'"
            class="tab"
            (click)="selectTab(item.val)"
          >
            {{ item.name }}
          </div>
          }
        </div>
      </ion-toolbar>
      <div class="gift-content">
        <div class="gift-list">
          @for (item of giftList; track $index) {
          <div
            [ngClass]="{
              'gift-item-acitve': currentGift?.id == item?.id,
              'gift-item': true
            }"
            (click)="currentGift = item"
          >
            <div class="img">
              <img [src]="item.imgUrl" alt="" />
            </div>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="price">
                <img class="credit" src="img/credit.png" alt="" />{{
                  item.price
                }}
              </div>
            </div>
          </div>
          }
        </div>
      </div>
      <div class="gift-footer">
        <div class="left">
          <img src="img/credit.png" alt="" class="credit" />
          <span class="credit-num">{{ wallet.balance }}</span>
          <div class="recharge" (click)="showRechargeModal = true">充值</div>
        </div>
        <div class="btns">
          @if (currentGift?.id) {
          <div class="chang-gift">
            {{ currentGift?.name }} {{ currentGift?.price }}/个
          </div>
          }
          <input
            [(ngModel)]="giftCount"
            min="1"
            type="number"
            class="input-num"
            (blur)="onChange()"
            [disabled]="!currentGift?.id"
          />
          @if (currentGift?.type == 'vip' &&
          !accServ.userVip?.rights?.['exclusive-gift']) {
          <div class="btn-item btn-disabled">
            <span>会员专享</span>
          </div>
          }@else {
          <div class="btn-item" (click)="sendGift()">
            <span>赠送</span>
          </div>
          }
        </div>
      </div>
    </div>
  </ng-template>
</ion-modal>
<!-- @if (isShowGiftModal) {
<div class="modal-gift-img" (click)="onCloseGiftModal()">
  <img [src]="currentGift?.imgUrl" alt="" />
</div>
} -->
<div class="vap-warp" [id]="domId"></div>

<ion-modal
  #modal
  [isOpen]="showRechargeModal"
  [initialBreakpoint]="1"
  [breakpoints]="[0, 1]"
  (didDismiss)="showRechargeModal = false"
  class="recharge-modal"
>
  <ng-template>
    <app-recharge
      [isComp]="true"
      (complete)="onRecharge($event)"
    ></app-recharge>
  </ng-template>
</ion-modal>