nova-live/projects/live-app/src/modules/goods/vip/vip.component.html

<nav title="会员购买"></nav>
<ion-content class="content">
  @if (goodsList.length > 0) {
  <div class="combo_index">
    <div class="combo-info">
      <img class="img" [src]="user?.get('avatar')" mode="aspectFill" />
      <div class="name">{{ user.get("nickname") || user.get("mobile") }}</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 goodsList; track $index) {
    <div
      [ngClass]="{
        'combo_box1-currentGoods': item.id == currentGoods?.id,
        combo_box1: true
      }"
      (click)="onchang(item)"
    >
      <div class="title">
        <div class="title-top">
          {{ item?.get("name") }}
          <img src="img/VIP.png" alt="" />
        </div>
        <div class="price">
          ￥{{ item?.get("price") }}
          <span class="duration"
            >{{ item?.get("services")[0]?.get("duration") }}天</span
          >
        </div>
      </div>
      <div class="title-info">
        <div class="list">
          @if (item?.get("services")[0]?.get("rights")['view-profile']) {
          <div class="label">查看主播全部信息</div>
          } @if (item?.get("services")[0]?.get("rights")['vip-service']) {
          <div class="label">专属客服</div>
          } @if (item?.get("services")[0]?.get("rights")['red-envelope']) {
          <div class="label">世界频道抢红包</div>
          } @if (item?.get("services")[0]?.get("rights")['all-chat']) {
          <div class="label">世界频道聊天</div>
          } @if (item?.get("services")[0]?.get("rights")['invisible']) {
          <div class="label">在线隐身</div>
          } @if (item?.get("services")[0]?.get("rights")['privacy']) {
          <div class="label">隐私模式</div>
          } @if (item?.get("services")[0]?.get("rights")['exclusive-gift']) {
          <div class="label">专属礼物购买权益</div>
          }
        </div>
        <div style="width: 100%" [innerHTML]="item?.get('details')"></div>
      </div>
    </div>
    }

    <div class="member-title">会员服务说明</div>
    <div class="detail-title">关于虚拟产品说明</div>
    <div class="detail-text">
      购买即表示同意<span (click)="showAgreement()">《购买协议条款》</span>，会员服务为虚拟产品，因此购买之后无法进行退换货。
    </div>
    <div class="detail-title">会员购买期限</div>
    <div class="detail-text">
      所有权益都将在购买期限内生效，如果购买期限到期，请及时续费以免影响使用。
    </div>
    <div class="detail-title">会员权益说明</div>
    <div class="detail-text">
      所有产品权益已在上方会员简介说明，请按需购买。
    </div>

    <div class="price-info">
      <div class="price-tab">
        <div class="price-info-sum">
          <div class="text">总计：</div>
          <div class="price">￥{{ currentGoods?.get("price") }}</div>
          <div class="vip-tag">
            {{ currentGoods?.get("name") }} <img src="img/VIP.png" alt="" />
            {{currentGoods?.get("services")[0]?.get("duration")}}天
          </div>
        </div>
        <!-- <div class="agreement">
          <ion-checkbox color="primary" [(ngModel)]="isCheck"></ion-checkbox>
          <div class="agreement-content">
            阅读且同意<span (click)="showAgreement()">《购买协议》</span>
          </div>
        </div> -->
      </div>
      <div class="price-btn" (click)="openpay()">
        <div class="open-pay">确认支付</div>
      </div>
    </div>
  </div>
  }
</ion-content>
@if (showPay) {
  <app-pay-comp [tradeNo]="tradeNo" #paycomp [price]="price"></app-pay-comp>
}