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

<ion-content class="content">
  <div [ngClass]="{
    'header': true,
    'pad-top-ios': deviceSer.isIOS
  }" [style.background-image]="'url(img/bg.png)'">
    <div class="top">
      <ion-segment [scrollable]="true" (ionChange)="segmentChanged($event)" layout="icon-bottom" [value]="currentValue"
        mode="md">
        @for (item of options; track $index) {
        <ion-segment-button (click)="onChangeTab(item?.value)" [value]="item?.value" class="tabs">
          <ion-label>{{ item?.label }}</ion-label>
        </ion-segment-button>
        }
      </ion-segment>
      <div class="more">
        <img (click)="isOpen = true" src="img/more.png" alt="" />
        <img src="img/search.png" alt="" (click)="search()" />
      </div>
    </div>
  </div>
  <div class="banner">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        @for (item of banner; track $index) {
        <div class="swiper-slide" (click)="toUrl(item?.get('url'))">
          <img [src]="item?.get('image')" alt="" />
        </div>
        }
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div class="notice">
    <img src="img/通知广播.png" alt="" class="notice-icon" />
    <div class="swiper swiper-notice">
      <div class="swiper-wrapper">
        @for (item of notices; track $index) {
        <div class="swiper-slide notice-item" (click)="presentAlert(item)">
          <div class="notice-item-title">
            <div class="notice-item-text">【{{ item?.get("title") }}】</div>
            <div class="notice-item-content">
              {{ item?.get("content") }}
            </div>
          </div>
          <div class="notice-item-time">
            {{ item?.createdAt | date : "yyyy-MM-dd HH:mm" }}
          </div>
        </div>
        }
      </div>
    </div>
  </div>
  <div class="bar">
    <ion-select label="主播列表" [placeholder]="sex" cancelText="关闭" okText="确定" (ionChange)="onChangeSex($event)"
      interface="action-sheet">
      <ion-select-option value="all">全部</ion-select-option>
      <ion-select-option value="女">女主播</ion-select-option>
      <ion-select-option value="男">男主播</ion-select-option>
    </ion-select>
    <div class="bar-right">
      <div class="city" (click)="isOpenCity = true">
        <ion-icon name="location-outline"></ion-icon>{{ city ? city : "全部" }}
      </div>
      <ion-icon (click)="isColumn = !isColumn" [name]="!isColumn ? 'grid' : 'list'"
        style="font-size: 24px; color: #fe4d53"></ion-icon>
    </div>
  </div>
  <div [ngClass]="{
    'room-list': true,
    'room-list-column': isColumn,
  }">
    @for (item of roomList; track $index) {
    <div [ngClass]="{
      'list-row': true,
      'list-row-column': isColumn,
    }" (click)="toUrl('user/profile/' + item.uid)" [style.background-image]="'url(' + item?.cover + ')'">
      <div class="title-tag">在线聊天</div>
      @if (userList?.includes(item.uid)) {
      <div class="live-tag">
        <img src="img/live.gif" alt="" />
        {{ userList?.includes(item.uid) ? "在线" : "" }}
      </div>
      }
      <div class="room-footer">
        <div class="user">
          {{ item?.nickname || item?.mobile }}
        </div>
        <div class="desc">{{ item?.title }}</div>
        <div class="city-block">
          <div class="row-li">
            <ion-icon name="location-outline"></ion-icon>
            {{ item.city }}
          </div>
          <div class="row-li" style="margin-left: 4px">
            <img src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png" alt="" />
            {{ item.birthdate }}
          </div>
        </div>
      </div>
    </div>
    }
  </div>
  @if (disbable) {
    <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    }
</ion-content>
<ion-modal trigger="open-modal" [isOpen]="isOpen" (didDismiss)="onDidDismiss($event)">
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="cancel('cancel')">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="cancel('confirm', currentValue)">确认</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column [value]="currentValue" (ionChange)="onIonChange($event)">
        @for (item of options; track $index) {
        <ion-picker-column-option value="{{ item?.value }}">{{
          item?.label
          }}</ion-picker-column-option>
        }
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>

<ion-modal #modal trigger="open-modal" [isOpen]="isOpenCity" backdropDismiss="false">
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="changeCityCancel('cancel')">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="changeCityCancel('confirm')">确定</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column [value]="province" (ionChange)="onIonChangeCity($event, 'province')">
        @for (item of provinceColumns; track $index) {
        <ion-picker-column-option value="{{ item }}">{{
          item
          }}</ion-picker-column-option>
        }
      </ion-picker-column>
      <ion-picker-column [value]="city" (ionChange)="onIonChangeCity($event, 'city')">
        @for (item of cityColumns; track $index) {
        <ion-picker-column-option value="{{ item }}">{{
          item
          }}</ion-picker-column-option>
        }
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>