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.
142 lines
4.6 KiB
142 lines
4.6 KiB
<!-- 药品推荐主页面 -->
|
|
<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>
|