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" /> -->
      <app-avatar
        [avatar]="user?.get('avatar')"
        style="z-index: 99"
        frameId="vip-avatar-frame"
      />
      <div class="name">
        {{ user.get("nickname") || user.get("name") || user.get("mobile") }}
      </div>
      <div class="text-info">
        @if (myVip?.expiredAt) {
        <div class="text-top">
          <div class="text-span">
            {{ myVip.name }}<img src="img/VIP.png" alt="" />
          </div>
          <div class="text-span">
            <div class="date">
              有效期至：{{ myVip.expiredAt | date : "yyyy年MM月dd日" }}
            </div>
          </div>
        </div>
        } @else{
        <div class="text-top" style="color: #fff">到期或未开通</div>
        }
      </div>
      <div class="alink" (click)="toUrl('account/order')">开通记录</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()"
        >《{{ registerAgreement?.get("title") }}》</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
  (payResult)="onComplete($event)"
  [tradeNo]="tradeNo"
  [gid]="this.currentGoods?.id"
  [orderType]="'vip'"
  [title]="this.currentGoods?.get('name')"
  [price]="price"
  #paycomp
></app-pay-comp>
}