FilmTraceExplore/src/app/tab2/smovies/smovies.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/previous-page"></ion-back-button>
    </ion-buttons>
    <ion-title>
      影视
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="search()">
        <ion-icon name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '经典')">经典</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '新片')">新片</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '中国')">中国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '俄罗斯')">俄罗斯</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '美国')">美国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '巴西')">巴西</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '英国')">英国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '法国')">法国</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '日本')">日本</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '西班牙')">西班牙</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '韩国')">韩国</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '爱情')">爱情</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '喜剧')">喜剧</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '科幻')">科幻</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '动作')">动作</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '悬疑')">悬疑</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '犯罪')">犯罪</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '青春')">青春</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '惊悚')">惊悚</ion-col>
        <ion-col size="3" (click)="filterByCategory($event, '文艺')">文艺</ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

    <ion-list>
      
      <ion-card *ngFor="let movie of filteredMovies">
        <ion-card-header>
          <ion-card-title>{{ movie.get('name') }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <p>类型：{{ movie.get('type') }}</p>
          <p>日期：{{ movie.get('releaseDate')}}</p>
          <p>时长：{{ movie.get('duration') }}</p>
          <p>语言：{{ movie.get('language') }}</p>
          <p>介绍：{{ movie.get('introduction') }}</p>
          <p>评分：{{ movie.get('rating') }}</p>
        </ion-card-content>
        <ion-button fill="clear" routerLink="/movie/{{movie.id}}">detail</ion-button>
      </ion-card>
      
    </ion-list>
</ion-content>