陈誉午
994b267f5c
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
53 lines
2.3 KiB
Plaintext
53 lines
2.3 KiB
Plaintext
<view class="page">
|
||
<navigation-bar title="药品百科" back="{{false}}" color="white" background="#4A90D9" />
|
||
|
||
<view class="search-section">
|
||
<view class="search-box">
|
||
<view class="search-icon">🔍</view>
|
||
<input class="search-input" placeholder="搜索药品名称、功效、分类…" value="{{searchText}}" bindinput="onSearchInput" confirm-type="search" />
|
||
<view class="search-clear" wx:if="{{searchText}}" bindtap="onClearSearch">✕</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-x class="category-scroll" wx:if="{{!searchText}}">
|
||
<view wx:for="{{categories}}" wx:key="*this" class="cat-chip {{activeCategory === item ? 'active' : ''}}" data-cat="{{item}}" bindtap="onCategoryTap">{{item}}</view>
|
||
</scroll-view>
|
||
|
||
<view class="top-search" wx:if="{{!searchText && activeCategory === '全部'}}">
|
||
<view class="top-label">🔥 热门搜索</view>
|
||
<view class="top-tags">
|
||
<view wx:for="{{topSearches}}" wx:key="*this" class="top-tag" data-kw="{{item}}" bindtap="onTopSearchTap">{{item}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="result-bar" wx:if="{{searchText || activeCategory !== '全部'}}">
|
||
<view class="result-text">{{activeCategory !== '全部' ? activeCategory + ' · ' : ''}}共 {{drugList.length}} 个药品</view>
|
||
</view>
|
||
|
||
<view class="drug-list">
|
||
<view wx:for="{{drugList}}" wx:key="id" class="drug-card" data-id="{{item.id}}" bindtap="goDetail">
|
||
<view class="card-icon">
|
||
<image class="card-img" src="{{item.image}}" mode="aspectFit" />
|
||
</view>
|
||
<view class="card-body">
|
||
<view class="card-name">{{item.name}}</view>
|
||
<view class="card-generic">{{item.genericName}} · {{item.form}}</view>
|
||
<view class="card-footer">
|
||
<view class="card-category">{{item.category}}</view>
|
||
<view class="card-otc {{item.isOTC ? 'otc' : 'rx'}}">{{item.isOTC ? 'OTC' : 'Rx'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-right">
|
||
<view class="card-price">{{item.price}}</view>
|
||
<view class="card-arrow">›</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="empty-state" wx:if="{{drugList.length === 0}}">
|
||
<view class="empty-icon">🔍</view>
|
||
<view class="empty-text">没有找到相关药品</view>
|
||
<view class="empty-desc">试试其他关键词或分类</view>
|
||
</view>
|
||
</view>
|