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">
  <!-- 搜索栏 -->
  <div class="search-container">
    <ion-searchbar placeholder="搜索" class="custom-searchbar"></ion-searchbar>
  </div>

  <!-- 分类区域（可横向滑动） -->
  <div class="category-scroll">
    <div class="category-scroll-inner">
      <ion-grid>
        <ion-row class="category-row">
          <ion-col size="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="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>