nova-live/projects/live-app/src/modules/user/profile/profile.component.html

<nav title="主页信息"></nav>
<ion-content [fullscreen]="true" class="content">
  <div class="bg">
    <img [src]="profile?.get('image') || '/img/bg_duf.jpg'" alt="" />
    <div class="mask" (click)="onShow()"></div>
  </div>
  <div class="header">
    <div class="user-dateil">
      <div class="pendant">
        <div class="top">
          <img
            class="avatar"
            [src]="profile?.get('user')?.get('avatar')"
            alt=""
          />
          <div class="top-right-block">
            <div class="top-left-title">{{ profile?.get("name") }}</div>
            @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>
            }@else {
            <!-- <div class="sex">未知</div> -->
            }
            <div class="age">
              <img
                src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png"
                alt=""
              />
              {{ profiel?.get("age") || "未知" }}
            </div>
          </div>
        </div>
        <div class="user-status">
          <span class="id">爱聊ID：{{ user?.id }}</span>
          @if (profiel?.get('isCheck')) {
          <div class="state">
            <span class="spot"></span>
            <span class="tag">勿扰</span>
          </div>
          }@else {
          <div class="state">
            <span class="spot" [style.background]="state.color"></span>
            <span class="tag">{{ state.val }}</span>
          </div>
          }
        </div>
      </div>
      <div class="user-right">
        @if (user?.id !== currentUser?.id) {
        <ion-icon
          (click)="onCollection()"
          name="heart-circle-sharp"
          [style.color]="isFollow ? '#fe454e' : '#b3b3b3'"
        ></ion-icon>
        }
      </div>
    </div>
    <div class="user-fans">
      <span>关注：{{ numsObject.follow }}</span>
      <span>粉丝：{{ numsObject.fans }}</span>
      <span>送出：{{ numsObject.gift }}</span>
    </div>
    <div class="bar"></div>
  </div>
  <div class="user-data">
    <div class="tabs">
      <div
        [ngClass]="{ active: active == 0, 'title-h2': true }"
        (click)="active = 0"
      >
        资料
      </div>
      <div
        [ngClass]="{ active: active == 1, 'title-h2': true }"
        (click)="active = 1"
      >
        相册
      </div>
    </div>
    @if (active == 0) {
    <div class="data-row">
      <div class="title-text">个人资料</div>
      <div class="tags">
        <span class="label">生日：未知</span>
        <span class="label">星座：未知</span>
        <span class="label">城市：未知</span>
      </div>
      <div class="motto">{{ profile?.get("remark") }}</div>
    </div>
    <div class="data-row">
      <div class="title-text">ta的社交标签</div>
      <div class="tags">
        @for (t of profile?.get('tag'); track $index) {
        <span class="label tag">{{ t }}</span>
        }
      </div>
    </div>
    <div class="data-row">
      <div class="title-text">对ta的评价</div>
      <div class="tags">
        <span class="label assess">漂亮小姐姐</span>
        <span class="label assess">颜值主播</span>
        <span class="label assess">唱歌好听</span>
        <span class="label assess">萝莉控</span>
        <span class="label assess">声优</span>
        <span class="label assess">喜欢日漫</span>
        <span class="label assess">都喜欢</span>
      </div>
    </div>
    <div class="data-row">
      <div class="title-text">ta的礼物墙</div>
      <div class="gift">
        @for (item of giftList; track $index) {
        <img [src]="item?.image" alt="" />
        }
      </div>
    </div>
    }@else {
    <div class="data-row">
      <div class="title-text">个人相册</div>
      <div class="album">
        @for (item of profile?.get('attachment'); track $index) {
        <img [src]="item" alt="" (click)="onShowImg(item)" />
        }
      </div>
    </div>
    }
  </div>
</ion-content>
<ion-footer class="footer">
  <ion-toolbar class="footer-tool">
    <div class="btns">
      @if (user?.id == currentUser?.id) {
      <div class="round" (click)="onEdit()">
        <ion-icon name="create-outline"></ion-icon>编辑资料
      </div>
      }@else{ @if(profile?.get('idcard') && profile?.get('identyType') ==
      'anchor'){
      <div class="gift" (click)="gift.openModal()">
        <ion-icon name="gift-outline"></ion-icon>
      </div>
      <div class="round" (click)="toLiveContact()">
        <ion-icon name="videocam-outline"></ion-icon>直播通话
      </div>
      } @if(friends?.get('isPass')){
      <div class="round" (click)="toMsg()">
        <ion-icon name="chatbubble-outline"></ion-icon>私信
      </div>
      }@else {
      <div class="round" (click)="onFriend()">
        <ion-icon name="person-add-outline"></ion-icon>加为好友
      </div>
      } }
    </div>
  </ion-toolbar>
</ion-footer>
<app-image-preview [image]="currenImg" #preview></app-image-preview>
<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpen"
  (didDismiss)="isOpen = false"
  [backdropDismiss]="false"
>
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="isOpen = false">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="upload.onUpload()">确认更换</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <div class="wrapper">
      <app-upload
        (onChange)="onSaveBackGround($event)"
        #upload
        [maxlenght]="1"
        [files]="profile?.get('image') ? [{ url: profile?.get('image') }] : []"
        [boxWidth]="320"
        [fileWidth]="300"
        [fileHeight]="180"
      ></app-upload>
    </div>
  </ng-template>
</ion-modal>
<app-gift-modal
  #gift
  (sendEmit)="onSendGift()"
  [toUid]="this.uid"
></app-gift-modal>
@if (iscall) {
<div class="loading-box">
  <div class="animation-loading">
    <div class="container">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="loading-title">正在呼叫</div>
  <div class="close" (click)="onCloseCall()">取消</div>
</div>
}