s202226701018/wisdom-app/src/app/tab3/tab3.page.html

<!-- tab3.page.html -->

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <ion-title class="custom-title">
      药品
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="content-background">
  <!-- 搜索栏 -->
  <ion-searchbar 
  placeholder="搜索" 
  class="custom-searchbar" 
  (ionInput)="searchProducts($event)">
</ion-searchbar>

 <!-- 分类区域（可横向滑动） -->
<div class="category-scroll">
  <div class="category-scroll-inner">
    <ion-grid>
      <ion-row class="category-row">
        <ion-col 
          size="3" 
          size-sm="3" 
          size-md="3" 
          size-lg="3" 
          size-xl="3" 
          *ngFor="let category of categories" 
          class="category-col">
          <div class="category-item" (click)="onCategoryClick(category)">
            <div class="category-image-wrapper">
              <img [src]="category.image" alt="{{category.name}}" class="category-image">
            </div>
            <div class="category-text">{{ category.name }}</div>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</div>

<!-- 热销模块 -->
<div class="marketing-section">
  <h2>热销🔥🔥🔥</h2>
  <div class="product-container">
    <ng-container *ngFor="let product of hotProducts | slice:0:2">
      <ion-card class="product-card" (click)="openDetailModal(product)">
        <ion-card-header class="product-card-header">
          <div class="product-tag">{{ product.get('title') || '热销🔥🔥🔥' }}</div>
        </ion-card-header>
        <ion-card-content class="product-card-content">
          <div class="product-image-wrapper">
            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.get('name') }}</h3>
            <div class="product-price">{{ product.get('price') }}</div>
          </div>
        </ion-card-content>
      </ion-card>
    </ng-container>
    <ion-button fill="clear" (click)="viewMore('hot')">查看更多</ion-button>
  </div>
</div>

<!-- 特价模块 -->
<div class="marketing-section">
  <h2>特价优惠💰💰💰</h2>
  <div class="product-container">
    <ng-container *ngFor="let product of specialProducts | slice:0:2">
      <ion-card class="product-card" (click)="openDetailModal(product)">
        <ion-card-header class="product-card-header">
          <div class="product-tag">{{ product.get('title') || '特价优惠💰💰💰' }}</div>
        </ion-card-header>
        <ion-card-content class="product-card-content">
          <div class="product-image-wrapper">
            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.get('name') }}</h3>
            <div class="product-price">{{ product.get('price') }}</div>
          </div>
        </ion-card-content>
      </ion-card>
    </ng-container>
    <ion-button fill="clear" (click)="viewMore('special')">查看更多</ion-button>
  </div>
</div>

<!-- 商品卡片列表区域 -->
<div class="product-container">
  <ng-container *ngFor="let product of products">
    <ion-card class="product-card" (click)="openDetailModal(product)">
      <ion-card-header class="product-card-header">
        <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
      </ion-card-header>
      <ion-card-content class="product-card-content">
        <div class="product-image-wrapper">
          <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
        </div>
        <div class="product-info">
          <h3 class="product-name">{{ product.get('name') }}</h3>
          <div class="product-price">{{ product.get('price') }}</div>
        </div>
      </ion-card-content>
    </ion-card>
  </ng-container>
</div>

  <!-- 底部弹出模态 -->
  <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">
    <ion-header>
      <ion-toolbar>
        <ion-title>详情</ion-title>
        <ion-buttons slot="end">
          <ion-button fill="clear" (click)="closeDetailModal()">
            <ion-icon name="close"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="modal-content" *ngIf="currentProduct">
        <div class="image-container">
          <img [src]="currentProduct.get('image')" alt="药品图片" class="medicine-image">
        </div>
        <h2 class="product-name">{{ currentProduct.get('name') }}</h2>
        <p><strong>价格：</strong>{{ currentProduct.get('price') }}</p>
        <p><strong>是否处方药：</strong>{{ currentProduct.get('prescription') ? '是' : '否' }}</p>
        <p><strong>用法用量：</strong>{{ currentProduct.get('usage') }}</p>
        <p><strong>主治功能：</strong>{{ currentProduct.get('function') }}</p>
        <p><strong>规格：</strong>{{ currentProduct.get('spec') }}</p>
        <p><strong>成分：</strong>{{ currentProduct.get('composition') }}</p>
        <p><strong>禁忌：</strong>{{ currentProduct.get('taboo') }}</p>
      </div>
    </ion-content>
  </ion-modal>
</ion-content>