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

<!-- <nav title="主页信息"></nav> -->
<div
  [ngClass]="{
    nav: true,
    'nav-pad-ios': deviceSer.isIOS
  }"
>
  <div class="back" (click)="back()">
    <ion-icon name="chevron-back-outline"></ion-icon>
  </div>
</div>
<ion-content
  [fullscreen]="true"
  [ngClass]="{
    content: true,
    'content-pad-ios': deviceSer.isIOS
  }"
>
  <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">
          @if(!loading){
          <app-avatar
            [avatar]="profile?.get('user')?.get('avatar')"
            style="z-index: 99"
            frameId="profile-avatar-frame"
            [frame]="userVip['rights']['avatar']"
            (click)="onShowImg(profile?.get('user')?.get('avatar'))"
          />
          }
          <div class="top-right-block">
            <div class="top-left-title">
              {{
                profile?.get("user")?.get("nickname") ||
                  profile?.get("user")?.id
              }}
            </div>
            @if (profile?.get('user')?.get('sex') == '男') {
            <div class="sex">
              <ion-icon name="male-outline"></ion-icon>
            </div>
            }@else if (profile?.get('user')?.get('sex') == '女') {
            <div class="sex girl">
              <ion-icon name="male-female-outline"></ion-icon>
            </div>
            }@else {
            <!-- <div class="sex">未知</div> -->
            } @if (profile?.get('identyType') == 'anchor') {
            <div
              class="level"
              [style.background-color]="
                aiChatServ.authorLevelColor[
                  profile?.get('user').get('completionRate')
                ]?.color
              "
            >
              LV{{ profile?.get("user").get("completionRate") }}
            </div>
            }@else {
            <div
              class="level"
              [style.background-color]="
                aiChatServ.userLevelColor[
                  profile?.get('user').get('achievementCount')
                ]?.color
              "
            >
              LV{{ profile?.get("user").get("achievementCount") }}
            </div>
            }
          </div>
        </div>
        <div class="user-status">
          <span class="id">爱聊ID：{{ profile?.get("user")?.id }}</span>
          <div class="state">
            <span class="spot" [style.background]="state.color"></span>
            <span class="tag">{{ state.val }}</span>
          </div>

          <div
            [ngClass]="{
              gril: profile?.get('user')?.get('sex') == '女',
              age: true
            }"
          >
            <img
              src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png"
              alt=""
            />
            {{ profile?.get("birthdate") || "未知" }}
          </div>
        </div>
      </div>
      <div class="user-right">
        @if (profile?.get('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>粉丝：{{ profile?.get("degreeNumber") || numsObject.fans }}</span>
      <!-- <span>送出：{{ numsObject.gift }}</span>
      @if (profile?.get('identyType') == 'anchor') {
      <span>累计通话：{{ connectTime | secondsToTime }}</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">生日：{{ birthdat }}</span>
        <span class="label">星座：{{ constellation }}</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>
    @if (profile?.get('identyType') == 'anchor') {
    <div class="data-row">
      <!-- <div class="title-text">对ta的评价</div> -->
      <div class="comment-room">
        <div class="title-text comment-title">
          <div class="coulum">
            对ta的评价
            <!-- （{{ commentObj.score ? commentObj.score + "分" : "暂无评价"}}） -->
          </div>
          <div
            class="coulum"
            (click)="tourl('/user/comment', { rid: this.room?.id })"
          >
            {{ commentObj.count }}条<ion-icon
              name="chevron-forward-outline"
            ></ion-icon>
          </div>
        </div>
        <div class="comment-list">
          @for (item of commentObj.list; track $index) {
          <div class="li">
            <div class="li-user">
              <img
                [src]="item?.get('user')?.get('avatar')"
                alt=""
                class="avatar"
              />
              <div class="username">
                {{ item?.get("user")?.get("nickname") }}
              </div>
              <div
                class="level"
                [style.background-color]="
                  aiChatServ.userLevelColor[
                    item?.get('user').get('achievementCount')
                  ]?.color
                "
              >
                LV{{ item?.get("user").get("achievementCount") }}
              </div>
            </div>
            <div class="li-score">
              @for(i of item?.get("tags"); track $index){
              <span>{{ i }}</span>
              }
            </div>
          </div>
          }
        </div>
      </div>
    </div>
    <div class="data-row">
      <div class="title-text flex">
        ta的礼物墙
        <div
          class="coulum"
          (click)="tourl('/user/income', { uid: profile?.get('user')?.id })"
        >
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
      <div class="gift">
        @for (item of giftList; track $index) {
        <div class="gift-card">
          <img [src]="item?.image" alt="" />
          <div class="gift-name">x{{ item.count }}</div>
        </div>
        }
      </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>
    } @if (uid !== currentUser?.id &&
    !accServ.userVip?.rights?.['view-profile']) {
    <div class="view-auth">
      <div class="lock-tips">
        <ion-icon name="lock-closed"></ion-icon>
        <div class="auth-text">开通高级会员查看更多</div>
      </div>
      <div class="auth-text-url" (click)="tourl('/goods/vip')">去开通</div>
    </div>
    }
  </div>
</ion-content>
<ion-footer class="footer">
  <ion-toolbar class="footer-tool">
    <div
      [ngClass]="{
        btns: true,
        'pad-bottom': deviceSer.isIOS
      }"
    >
      @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' && userProfile.identyType !== 'anchor'){
      <div class="gift" (click)="gift.openModal()">
        <ion-icon name="gift-outline"></ion-icon>
      </div>
      <div class="round live" (click)="call.toLiveContact()">
        <ion-icon name="videocam-outline"></ion-icon>
        <div style="display: flex; flex-direction: column">
          <span>直播通话</span>
          <span>{{ profile?.get("laborCosts") }}钻石/分</span>
        </div>
      </div>
      } @if(friends?.get('isPass')){
      <div class="round" (click)="toMsg()">
        <ion-icon name="chatbubble-outline"></ion-icon>私信
      </div>
      }@else if(userProfile.identyType !== 'anchor'){
      <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">
      <div style="margin-bottom: 10px">建议图片比例 2:1</div>
      <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(profile?.id){
<app-call-modal #call [profile]="profile"></app-call-modal>
}
<app-appraise></app-appraise>