nova-live/projects/live-app/src/modules/tabs/my/my.component.html

<ion-content class="content">
  <div 
  [ngClass]="{
    'header': true,
    'pad-top-ios': deviceSer.isIOS
  }" [style.background-image]="'url(img/bg.png)'">
    <div class="user-dateil">
      @if(!loading){
      <app-avatar
        [avatar]="user.get('avatar')"
        [frame]="userObj.vip?.rights['avatar']"
      />
      }
      <div class="user-right">
        <div class="user-nikcname">
          {{
            user.get("nickname") || user.get("mobile") || user.get("username")
          }}
          @if (profile?.get('identyType') == 'anchor') {
          <div
            class="level"
            [style.background-color]="
              aiServ.authorLevelColor[user.get('completionRate')]?.color
            "
          >
            LV{{ user.get("completionRate") }}
          </div>
          }@else {
          <div
            class="level"
            [style.background-color]="
              aiServ.userLevelColor[user.get('achievementCount')]?.color
            "
          >
            LV{{ user.get("achievementCount") }}
          </div>
          }
        </div>
        <div class="user-block">
          <div class="tags">
            @if (user.get('sex') == '男') {
            <div class="sex">
              <ion-icon name="male-outline"></ion-icon>
            </div>
            }@else if (user.get('sex') == '女') {
            <div class="sex girl">
              <ion-icon name="male-female-outline"></ion-icon>
            </div>
            }
            <div class="age">
              <img
                src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png"
                alt=""
              />
              {{ profile?.get("birthdate") || "未知" }}
            </div>
            <div class="id">ID:{{ user.id }}</div>
          </div>
          <div class="btn" (click)="toUrl('user/profile/' + user.id)">
            个人主页
          </div>
        </div>
        <div class="user-footer">
          <div class="row" (click)="toUrl('user/friends')">{{ userObj.fans }} 粉丝</div>
          <div class="row" (click)="toUrl('user/friends')">{{ userObj.follow }} 关注</div>
          <div class="row">{{ userObj.friendly_degree }} 亲密度</div>
        </div>
      </div>
    </div>
  </div>
  <div class="ad" [style.background-image]="'url(img/ad-banner.png)'">
    @if (userObj.vip?.expiredAt) {
    <div class="my-vip">
      <div class="lable">
        {{ userObj.vip?.name }}<img src="img/VIP.png" alt="" />
      </div>
      <div class="vip-date" (click)="toUrl('goods/vip')">
        <!-- 到期时间：{{ userObj.vip?.expiredAt | date : "yyyy-MM-dd"
        }} -->
        剩余天数：{{ userObj.vip?.daysLeft }}
        <ion-icon name="chevron-forward"></ion-icon>
      </div>
    </div>
    }@else {
    <div class="ad-left">
      <div class="text">hey聊 <span>VIP</span></div>
      <p>开通VIP，解锁海量专属主播聊天。</p>
    </div>
    <div class="btn" (click)="toUrl('goods/vip')">立即开通</div>
    }
  </div>
  <div class="tool">
    @for (item of tools; track $index) {
    <div class="tool-li" (click)="toUrl(item.path)">
      <div class="icon">
        <img [src]="item.icon" alt="" />
      </div>
      <div class="label">
        {{ item.title }}
      </div>
    </div>
    }
  </div>
  <div class="order" [style.background-image]="'url(img/用户榜底.png)'" (click)="toUrl('user/ranking')">
    <div class="title">
      <div class="link">排行榜</div>
      <!-- <div class="link" (click)="toUrl('user/ranking')">更多</div> -->
    </div>
    <div class="ladder">
      <div class="top-block">
        <div class="top2">
          <div class="user-block">
            <div class="user-avatar">
              <img src="img/2.png" alt="" class="tag" />
              <img [src]="orderList[1]?.avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[1]?.nickname }}
            </div>
          </div>
          <div class="user-detail user-detail2">
            <div class="num">{{ orderList[1]?.credit }}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
        <div class="top1">
          <div class="user-block">
            <div class="user-avatar">
              <img
                src="img/1.png"
                alt=""
                class="tag"
                style="transform: rotate(90deg)"
              />
              <img [src]="orderList[0]?.avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[0]?.nickname }}
            </div>
          </div>
          <div class="user-detail user-detail1">
            <div class="num">{{ orderList[0]?.credit }}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
        <div class="top3">
          <div class="user-block">
            <div class="user-avatar">
              <img src="img/3.png" alt="" class="tag" />
              <img [src]="orderList[2]?.avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[2]?.nickname }}
            </div>
          </div>
          <div class="user-detail user-detail3">
            <div class="num">{{ orderList[2]?.credit }}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
      </div>
    </div>
    @for (item of orderList.slice(3,4); track $index) {
    <div class="row">
      <div class="row-left">
        <span class="row-index">4</span>
        <img [src]="item.avatar" alt="" class="row-avatar" />
        <div class="row-name">{{ item?.nickname }} <span style="color: #ff7d0a;">{{item.credit}}</span> </div>
      </div>
      <div class="row-right">
        <div class="row-tpis">距离第一名</div>
        <div class="row-tpis-num">
          {{ orderList[0].credit  - item.credit}}
        </div>
      </div>
    </div>
    }
  </div>
  <div class="setting">
    <div class="setting-tabs">
      <div class="row">
        <div class="tabs-left">
          <ion-icon name="remove-circle-outline"></ion-icon>
          勿扰开关
        </div>
        <ion-toggle
          [checked]="profile?.get('isCheck')"
          (ionChange)="onChange($event)"
          color="tertiary"
        ></ion-toggle>
      </div>
    </div>
    <div class="list">
      <div class="li" (click)="toUrl('/user/certification')">
        <div class="li-lable">
          <img src="img/实名 (2).png" alt="" class="icon" />
        </div>
        <div class="li-val">
          实名认证
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="toUrl('/user/anchor')">
        <div class="li-lable">
          <img src="img/成为主播.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          成为主播
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="goRoom()">
        <div class="li-lable">
          <img src="img/直播.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          直播间管理
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="showAgreement('registerAgreement')">
        <div class="li-lable">
          <img src="img/隐私.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          隐私协议
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="toUrl('user/feedback')">
        <div class="li-lable">
          <img src="img/意见反馈.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          意见反馈
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="toUrl('user/service')">
        <div class="li-lable">
          <img src="img/在线客服.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          联系客服
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="showAgreement('liveAgreement')">
        <div class="li-lable">
          <img src="img/签署协议.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          直播协议
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="li" (click)="onLogout()">
        <div class="li-lable">
          <img src="img/退出登录.png" alt="" class="icon" />
        </div>
        <div class="li-val">
          退出登录
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <!-- @for (item of settings; track $index) {
      <div class="li">
        <div class="li-lable">
          <img [src]="item.icon" alt="" class="icon" />
        </div>
        <div class="li-val">
          {{ item.title }}
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      } -->
    </div>
  </div>
</ion-content>