20222670105/novel-app/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">

    <div class="search-bar" >
      <ion-searchbar 
      placeholder="搜索" 
      class="custom-searchbar" 
      (ionInput)="searchProducts($event)">
      </ion-searchbar>
    </div>

    @if(!searchTerm){
    <div class="header">
      <ion-card-header>
        <ion-card-title>
          <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
            <ion-segment-button value="hotdot" content-id="hotdot">
              <ion-label>热点</ion-label>
            </ion-segment-button>
            
            <ion-segment-button value="export" content-id="export">
              <ion-label>专家科普</ion-label>
            </ion-segment-button>
            <ion-segment-button value="短篇小说" content-id="短篇小说">
              <ion-label>短篇小说</ion-label>
             </ion-segment-button>
             <ion-segment-button value="工具箱" content-id="短篇小说">
              <ion-label>工具箱</ion-label>
             </ion-segment-button>
            <!-- <ion-segment-button value="life" content-id="life">
              <ion-label>生活</ion-label>
            </ion-segment-button> 
            <ion-segment-button value="男" content-id="male">
              <ion-label>男性</ion-label>
            </ion-segment-button>
            <ion-segment-button value="女" content-id="female">
              <ion-label>女性</ion-label>
            </ion-segment-button> -->
          </ion-segment>
        </ion-card-title>
      </ion-card-header>
    </div>
  }
  </ion-toolbar>
</ion-header>
<!-- @if(user.id == admin){<p> llll
</p> }  -->
<ion-content class="knowledge" [fullscreen]="true">
  @if(!searchTerm){
    
    <div class="content">
      <ion-card>
        <ion-card-header></ion-card-header>
  
        <ion-card-content>
          <ion-segment-view>
      
            <ion-segment-content id="female">
              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of mycards" [card]="card"></app-article-card>
            </ion-segment-content>
          </ion-segment-view>
        </ion-card-content>
      </ion-card>
    </div>
  }
  @if(searchTerm){
    <div>
      <app-article-card (click)="openDetailModal(product)" *ngFor="let product of products" [card]="product"></app-article-card>
    </div>
    @if (products.length == 0) {
      <div class="no-results" style="margin: 50px auto;">
        <h2>寻找中···   请耐性等待 ····</h2>
      </div>
    }
  }


  <!-- 底部弹出模态 -->
  <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="closeDetailModal()">关闭</ion-button>
          </ion-buttons>
          <ion-title>{{currentProduct.get('category')}}</ion-title>
       
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <div class="modal-content" *ngIf="currentProduct">
          <h1 class="product-name">{{currentProduct.get('title')}}</h1>
          <p><strong>作者：</strong>{{currentProduct.get('username')}}</p>
          <fm-markdown-preview  [content]="currentProduct.get('content2')"></fm-markdown-preview>
          
          <!-- <div class="image-container">
            <img style="width: 100%; height: auto;" [src]="currentProduct.get('image')[0]" alt="图片" class="medicine-image">
          </div> -->
          <!-- <p>{{currentProduct.get('content')[0]}}</p>    -->
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>


</ion-content>