@if (!isComp) {
  <nav title="充值"></nav>
}@else {
  <ion-header [translucent]="true" class="header">
    <ion-toolbar class="toolbar">
        <ion-buttons slot="start" (click)="complete.emit()">
          <ion-icon
            name="chevron-back-outline"
            style="width: 6.4vw; height: 6.4vw; color: #000000"
          ></ion-icon>
        </ion-buttons>
      <ion-title class="title">充值</ion-title>
    </ion-toolbar>
  </ion-header>
}
<div class="recharge-content">
  <div class="options">
    @for (val of options; track $index) {
    <div class="select" (click)="onChange(val)">
      {{ val * 10 }}钻石
    <span>￥{{val}}</span>
    </div>
    }
  </div>
  <div class="h3">
    <span>充值记录</span>
  </div>
  <div class="li">
    <div class="int">
      充值金额(￥)
      <input
        type="number"
        [(ngModel)]="price"
        maxlength="8"
        name="price"
        autocomplete="off"
        min="10"
        placeholder="最低充值金额不少于1元"
        class="input"
        (blur)="onChangeInput()"
      />
    </div>
    <div class="desc">
      钻石：{{price * 10}}
    </div>
  </div>

  <div
    class="confirm"
    [style.background]="price > 0 ? '#92a1ff' : '#b7b7b7'"
    (click)="onShowPay()"
  >
    下一步
  </div>
</div>
@if (showPay) {
  <app-pay-comp
    (payResult)="onComplete($event)"
    [tradeNo]="tradeNo"
    [orderType]="'recharge'"
    [price]="price"
    [credit]="price * 10"
    [title]="'钻石充值'"
    #paycomp
  ></app-pay-comp>
  }
  