nova-live/projects/live-app/src/app/components/pay-comp/pay-comp.component.html

<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpen"
  [backdropDismiss]="false"
>
  <ng-template>
    <div class="pay-box">
      <div class="close" (click)="onClose()">
        <ion-icon name="close-outline"></ion-icon>
      </div>
      @if (!codeLink) {
      <div class="pay-title">支付订单</div>
      <div class="pay-num">￥{{ price || 0 }}</div>
      <div class="options">
        <div class="row" (click)="onchangPay('wxpay')">
          <div class="label">
            <img src="img/wxpay.png" alt="" class="icon" />
            <div class="text">微信支付</div>
          </div>
          <div
            [ngClass]="{
              'check-active': checkpay == 'wxpay',
              chekc: true
            }"
          >
            <div class="checkbox"></div>
          </div>
        </div>
        <div class="bar"></div>
        <div class="row" (click)="onchangPay('alipay')">
          <div class="label">
            <img src="img/pay_alipay.png" alt="" class="icon" />
            <div class="text">支付宝</div>
          </div>
          <div
            [ngClass]="{
              'check-active': checkpay == 'alipay',
              chekc: true
            }"
          >
            <div class="checkbox"></div>
          </div>
        </div>
      </div>
      <div class="pay-footer">
        <div class="order-num">订单编号{{ tradeNo }}</div>
        <div class="pay-btn" (click)="userPayment()">去付款</div>
      </div>
      } @else{
      <div class="qrcode">
        <img [src]="codeLink" alt="" />
      </div>
      }
    </div>
  </ng-template>
</ion-modal>