feat: 电子药箱小程序 - 4Tab药品管理

- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
2026-07-29 11:20:52 +08:00
commit 994b267f5c
683 changed files with 43849 additions and 0 deletions
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar"
+  }
+}
@@ -0,0 +1,101 @@
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 120rpx;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+.search-section {
+  padding: 20rpx 30rpx;
+}
+
+.search-box {
+  display: flex; align-items: center;
+  background: #ffffff; border-radius: 40rpx;
+  padding: 20rpx 28rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
+}
+
+.search-icon { font-size: 30rpx; margin-right: 14rpx; }
+
+.search-input { flex: 1; font-size: 28rpx; color: #333; height: 50rpx; }
+
+.search-clear {
+  width: 44rpx; height: 44rpx;
+  display: flex; align-items: center; justify-content: center;
+  background: #e0e0e0; border-radius: 50%;
+  font-size: 22rpx; color: #ffffff; margin-left: 14rpx;
+}
+
+.category-scroll { white-space: nowrap; padding: 10rpx 30rpx 20rpx; }
+
+.cat-chip {
+  display: inline-block; padding: 14rpx 28rpx; margin-right: 16rpx;
+  background: #ffffff; border-radius: 28rpx; font-size: 26rpx;
+  color: #666; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.cat-chip.active {
+  background: #4A90D9; color: #ffffff; font-weight: 600;
+  box-shadow: 0 4rpx 16rpx rgba(74, 144, 217, 0.3);
+}
+
+.top-search { padding: 0 30rpx 10rpx; }
+.top-label { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
+.top-tags { display: flex; flex-wrap: wrap; gap: 14rpx; }
+
+.top-tag {
+  padding: 12rpx 24rpx; background: #ffffff;
+  border: 1rpx solid #e8e8e8; border-radius: 24rpx;
+  font-size: 24rpx; color: #555;
+}
+
+.top-tag:active { background: #e8f0fa; border-color: #4A90D9; color: #4A90D9; }
+
+.result-bar { padding: 10rpx 30rpx; }
+.result-text { font-size: 24rpx; color: #999; }
+
+.drug-list { padding: 10rpx 30rpx; }
+
+.drug-card {
+  display: flex; align-items: center;
+  background: #ffffff; border-radius: 20rpx; padding: 28rpx;
+  margin-bottom: 18rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+}
+
+.drug-card:active { transform: scale(0.985); }
+
+.card-icon {
+  width: 90rpx; height: 90rpx;
+  border-radius: 18rpx;
+  margin-right: 20rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.card-img {
+  width: 100%;
+  height: 100%;
+}
+
+.card-body { flex: 1; overflow: hidden; }
+.card-name { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 6rpx; }
+.card-generic { font-size: 22rpx; color: #aaa; margin-bottom: 10rpx; }
+
+.card-footer { display: flex; align-items: center; gap: 12rpx; }
+.card-category { font-size: 20rpx; color: #4A90D9; background: #e8f0fa; padding: 4rpx 14rpx; border-radius: 8rpx; }
+
+.card-otc { font-size: 20rpx; padding: 4rpx 14rpx; border-radius: 8rpx; font-weight: 600; }
+.card-otc.otc { color: #07C160; background: #e8f8ee; }
+.card-otc.rx { color: #FF3B30; background: #ffebea; }
+
+.card-right { text-align: right; margin-left: 14rpx; }
+.card-price { font-size: 26rpx; color: #FF6B35; font-weight: 600; margin-bottom: 6rpx; }
+.card-arrow { font-size: 32rpx; color: #ccc; }
+
+.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
+.empty-icon { font-size: 80rpx; margin-bottom: 20rpx; }
+.empty-text { font-size: 30rpx; color: #999; margin-bottom: 10rpx; }
+.empty-desc { font-size: 24rpx; color: #ccc; }
@@ -0,0 +1,70 @@
+import { wikiDrugs, categories } from '../../../utils/drug-data';
+import type { WikiDrug } from '../../../utils/drug-data';
+import { getDrugImage } from '../../../utils/drug-images';
+
+interface DrugItem extends WikiDrug {
+  image: string;
+}
+
+Page({
+  data: {
+    categories,
+    activeCategory: '全部',
+    searchText: '',
+    drugList: [] as DrugItem[],
+    allDrugs: [] as DrugItem[],
+    topSearches: ['阿莫西林', '布洛芬', '头孢', '二甲双胍', '奥美拉唑', '氯雷他定'],
+  },
+  onLoad() {
+    const list: DrugItem[] = Object.values(wikiDrugs)
+      .filter((d) => d.id < 100)
+      .map((d) => ({ ...d, image: getDrugImage(d.category) }));
+    this.setData({ allDrugs: list, drugList: list });
+  },
+  onShow() {
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({ selected: 1 });
+    }
+  },
+  onSearchInput(e: WechatMiniprogram.Input) {
+    const searchText = e.detail.value.trim();
+    this.setData({ searchText });
+    this.filterDrugs();
+  },
+  onClearSearch() {
+    this.setData({ searchText: '' });
+    this.filterDrugs();
+  },
+  onCategoryTap(e: WechatMiniprogram.TouchEvent) {
+    const { cat } = e.currentTarget.dataset;
+    this.setData({ activeCategory: cat });
+    this.filterDrugs();
+  },
+  onTopSearchTap(e: WechatMiniprogram.TouchEvent) {
+    const { kw } = e.currentTarget.dataset;
+    this.setData({ searchText: kw });
+    this.filterDrugs();
+  },
+  filterDrugs() {
+    const { searchText, activeCategory, allDrugs } = this.data;
+    let list = allDrugs;
+    if (activeCategory !== '全部') {
+      list = list.filter((d) => d.category === activeCategory);
+    }
+    if (searchText) {
+      const kw = searchText.toLowerCase();
+      list = list.filter(
+        (d) =>
+          d.name.includes(kw) ||
+          d.genericName.toLowerCase().includes(kw) ||
+          d.category.includes(kw) ||
+          d.tag.includes(kw),
+      );
+    }
+    this.setData({ drugList: list });
+  },
+  goDetail(e: WechatMiniprogram.TouchEvent) {
+    const { id } = e.currentTarget.dataset;
+    wx.navigateTo({ url: `/pages/drug-guide/index?id=${id}` });
+  },
+});
@@ -0,0 +1,52 @@
+<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>