<nav title="会员购买"></nav>
<ion-content class="content">
  @if (vips.length > 0) {
  <div class="combo_index">
    <div class="combo-info">
      <img class="img" [src]="user?.get('avatar')" mode="aspectFill" />
      <div class="name">{{ user.name ? user.name : user.nickname }}</div>
      <div class="text-info">
        <div class="text-top">
          @if (myVip) {
          <div class="text1">
            {{ myVip.validity ? myVip.grade : "会员已过期" }}
          </div>
          } @else{
          <div class="text1">未开通</div>
          }
          <!-- <div class="text2">
            钥匙：{{ account.seeKeys ? account.seeKeys : 0 }}
          </div>
          <div class="text3">
            牵线次数：{{ account.together ? account.together : 0 }}
          </div>
          <div class="text3">
            金币余额：{{ account.credit ? account.credit : 0 }}
          </div> -->
        </div>
        <div class="text-bot">
          @if (myVip) {
          <div class="date">有效期至：{{ myVip.expiredAt }}</div>
          }
        </div>
      </div>
    </div>
    @for (item of vips; track $index) {
    <div
      class="combo_box1 {{
        item.id == currentGoods?.id ? 'combo_box1-currentGoods' : ''
      }}"
      (click)="onchang(item)"
    >
      <div class="title">
        <div class="title-top">{{ item?.get("name") }}</div>
        <div class="price">￥{{ item?.get("price") }}</div>
      </div>
      <div class="title-info">
        <div style="width: 100%" [innerHTML]="item?.get('details')"></div>
      </div>
    </div>
    }

    <div class="member-title">会员服务说明</div>
    <div class="member-text">
      让找对象更轻松，找缘来有你来办会员吧，可以帮你快速脱单哦~
    </div>
    <div class="time-limit">会员购买期限</div>
    <div class="limit-text">
      ：请务必在有效期内使用完钥匙、金币、牵线，过期后所有服务都将清零，钥匙可以用来查看嘉宾的联系方式、金币可以用来置顶资料以及给嘉宾赠送虚拟礼物、牵线可以用来让红娘帮你联系嘉宾。
    </div>
    <div class="refund">关于退款说明</div>
    <div class="refund-text">
      ：会员服务为虚拟产品，因此购买之后无法进行退换货，因此购买前请慎重。
    </div>
    <div class="violation">会员违规说明</div>
    @if (vips && vips.length > 0) {
      <div class="violation-text">
        {{ tips[0] }}
        <div>
          {{ tips[1] }}
        </div>
      </div>
    }

    <div class="price-info">
      <div class="price-tab">
        <div class="text">总计</div>
        <div class="price">￥{{ currentGoods?.get('price') }}</div>
      </div>
      <div class="comfirm" bind:tap="openPay">确认支付</div>
    </div>
  </div>
  }
</ion-content>
