wxamp-ymtxUser/pagesA/pages/medicine/medicine.wxml

<!-- 药品推荐主页面 -->
<view class="page-container">
  <!-- 顶部搜索和筛选栏 -->
  <view class="top-bar">
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <view class="search-icon">
              <image src="/pagesB/images/sou.png" mode=""/>
        </view>
        <input 
          class="search-input" 
          placeholder="搜索药品名称、专家或症状" 
          bindinput="onSearchInput"
          value="{{searchKeyword}}"
        />
        <view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch">
          ✕
        </view>
      </view>
    </view>
    
    <!-- 快捷分类筛选 -->
    <view class="category-filters">
      <scroll-view class="filters-scroll" scroll-x="true">
        <view class="filter-tag {{currentCategory === '全部' ? 'active' : ''}}" 
              data-category="全部" bindtap="onCategoryChange">
          全部推荐
        </view>
        <view class="filter-tag {{currentCategory === '处方药' ? 'active' : ''}}" 
              data-category="处方药" bindtap="onCategoryChange">
          处方药
        </view>
        <view class="filter-tag {{currentCategory === '非处方药' ? 'active' : ''}}" 
              data-category="非处方药" bindtap="onCategoryChange">
          非处方药
        </view>
        <view class="filter-tag {{currentCategory === '中成药' ? 'active' : ''}}" 
              data-category="中成药" bindtap="onCategoryChange">
          中成药
        </view>
        <view class="filter-tag {{currentCategory === '保健品' ? 'active' : ''}}" 
              data-category="保健品" bindtap="onCategoryChange">
          保健品
        </view>
      </scroll-view>
    </view>
  </view>
  
  <!-- 药品列表 - 网格布局 -->
  <view class="medicine-grid">
    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredList.length === 0 && !loading}}">
      <view class="empty-text" wx:if="{{searchKeyword}}">
        未找到"{{searchKeyword}}"相关的药品
      </view>
      <view class="empty-text" wx:else>
        暂无药品推荐
      </view>
    </view>
    
    <!-- 药品卡片 -->
    <block wx:for="{{filteredList}}" wx:key="id">
      <view class="medicine-card" bindtap="showMedicineDetail" data-id="{{item.id}}">
        <!-- 药品图片 -->
        <view class="card-image">
          <image 
            src="{{baseUr+item.images}}" 
            mode="aspectFill"
            class="medicine-img"
          />
          <!-- 药品标签 -->
          <view class="card-tag">
            {{item.medicineType}}
          </view>
          <!-- 热销标签 -->
          <view class="hot-tag" wx:if="{{item.salesType}}">
            {{item.salesType}}
          </view>
        </view>
        
        <!-- 药品基本信息 -->
        <view class="card-content">
          <!-- 药品名称 -->
          <view class="medicine-name">{{item.medicineName}}</view>
          
          <!-- 价格和推荐信息 -->
          <view class="card-footer">
            <!-- 价格 -->
            <view class="price-section">
              <view class="current-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{item.price}}</text>
              </view>
              <view class="original-price" wx:if="{{item.originalPrice}}">
                ¥{{item.originalPrice}}
              </view>
            </view>
            
            <!-- 推荐专家 -->
            <view class="expert-brief">
              <image 
                src="{{baseUr+item.expertAvatar}}" 
                class="expert-avatar"
                mode="aspectFill"
              />
              <text class="expert-name">{{item.expertName}}</text>
            </view>
          </view>
          
          <!-- 店铺信息 -->
          <view class="store-brief">
            <view class="store-icon">🏪</view>
            <text class="store-name">{{item.storeName}}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
  
  <!-- 加载更多 -->
  <view class="load-more" wx:if="{{hasMore && !loading}}">
    <view class="load-text">上拉加载更多</view>
  </view>
  
  <!-- 加载中 -->
  <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner"></view>
    <text>加载中...</text>
  </view>
  
  <!-- 没有更多 -->
  <view class="no-more" wx:if="{{!hasMore && filteredList.length > 0}}">
    <text>没有更多药品了</text>
  </view>
  
  
  <!-- 返回顶部按钮 -->
  <view class="back-to-top {{showBackToTop ? 'show' : ''}}" bindtap="scrollToTop">
    ↑
  </view>
</view>