You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
5.2 KiB
155 lines
5.2 KiB
<!-- 药品推荐主页面 -->
|
|
<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>
|