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">🔍</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 === 'all' ? 'active' : ''}}" 
              data-category="all" bindtap="onCategoryChange">
          全部推荐
        </view>
        <view class="filter-tag {{currentCategory === 'prescription' ? 'active' : ''}}" 
              data-category="prescription" bindtap="onCategoryChange">
          处方药
        </view>
        <view class="filter-tag {{currentCategory === 'otc' ? 'active' : ''}}" 
              data-category="otc" bindtap="onCategoryChange">
          非处方药
        </view>
        <view class="filter-tag {{currentCategory === 'chinese' ? 'active' : ''}}" 
              data-category="chinese" bindtap="onCategoryChange">
          中成药
        </view>
        <view class="filter-tag {{currentCategory === 'health' ? 'active' : ''}}" 
              data-category="health" bindtap="onCategoryChange">
          保健品
        </view>
      </scroll-view>
    </view>
  </view>
  
  <!-- 药品列表 - 网格布局 -->
  <view class="medicine-grid">
    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredList.length === 0 && !loading}}">
      <image class="empty-image" src="/images/empty-medicine.png" mode="aspectFit" />
      <view class="empty-text" wx:if="{{searchKeyword}}">
        未找到"{{searchKeyword}}"相关的药品
      </view>
      <view class="empty-text" wx:else>
        暂无药品推荐
      </view>
      <button class="empty-btn" bindtap="refreshList">刷新推荐</button>
    </view>
    
    <!-- 药品卡片 -->
    <block wx:for="{{filteredList}}" wx:key="id">
      <view class="medicine-card" bindtap="showMedicineDetail" data-id="{{item.id}}">
        <!-- 药品图片 -->
        <view class="card-image">
          <image 
            src="{{item.image || '/images/default-medicine.png'}}" 
            mode="aspectFill"
            class="medicine-img"
          />
          <!-- 药品标签 -->
          <view class="card-tag {{item.category}}">
            {{item.categoryText}}
          </view>
          <!-- 热销标签 -->
          <view class="hot-tag" wx:if="{{item.isHot}}">
            热销
          </view>
        </view>
        
        <!-- 药品基本信息 -->
        <view class="card-content">
          <!-- 药品名称 -->
          <view class="medicine-name">{{item.name}}</view>
          
          <!-- 适用症状（简短） -->
          <view class="medicine-indication" wx:if="{{item.indication}}">
            {{getShortText(item.indication, 12)}}
          </view>
          
          <!-- 生产厂家 -->
          <view class="manufacturer" wx:if="{{item.manufacturer}}">
            {{getShortText(item.manufacturer, 14)}}
          </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="{{item.expert.avatar || '/images/default-avatar.png'}}" 
                class="expert-avatar"
                mode="aspectFill"
              />
              <text class="expert-name">{{item.expert.name}}</text>
            </view>
          </view>
          
          <!-- 店铺信息 -->
          <view class="store-brief">
            <view class="store-icon">🏪</view>
            <text class="store-name">{{item.store.name}}</text>
            <view class="distance" wx:if="{{item.store.distance}}">
              {{item.store.distance}}km
            </view>
          </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>