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,68 @@
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 120rpx;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+.banner {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 40rpx 40rpx 30rpx;
+  background: linear-gradient(135deg, #FF8C42, #FF6B35);
+}
+
+.banner-icon { font-size: 56rpx; margin-bottom: 12rpx; }
+.banner-text { font-size: 26rpx; color: rgba(255, 255, 255, 0.85); }
+
+.content { padding: 30rpx; }
+
+.section-title {
+  font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 24rpx;
+}
+
+.drug-card {
+  display: flex; align-items: center;
+  background: #ffffff; border-radius: 20rpx; padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+.drug-card:active { transform: scale(0.98); }
+
+.card-icon {
+  width: 90rpx; height: 90rpx;
+  margin-right: 24rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.card-img {
+  width: 100%;
+  height: 100%;
+}
+
+.card-info { flex: 1; overflow: hidden; }
+
+.card-title {
+  font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 8rpx;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.card-desc {
+  font-size: 24rpx; color: #888; margin-bottom: 12rpx;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.card-meta { display: flex; align-items: center; gap: 16rpx; }
+
+.card-tag {
+  font-size: 20rpx; color: #FF6B35;
+  background: rgba(255, 107, 53, 0.1);
+  padding: 4rpx 14rpx; border-radius: 8rpx;
+}
+
+.card-read { font-size: 20rpx; color: #bbb; }
+
+.card-arrow { font-size: 40rpx; color: #ccc; margin-left: 12rpx; font-weight: 300; }
@@ -0,0 +1,50 @@
+import { pillImg, syringeImg, heartImg, educationImg } from '../../../utils/drug-images';
+
+Page({
+  data: {
+    drugList: [
+      {
+        id: 101,
+        image: educationImg,
+        title: '阿莫西林使用指南',
+        desc: '了解抗生素的正确使用方法与注意事项',
+        tag: '抗生素',
+        readCount: '12,580',
+      },
+      {
+        id: 102,
+        image: pillImg,
+        title: '布洛芬用药须知',
+        desc: '解热镇痛安全用药，避免过量与禁忌',
+        tag: '解热镇痛',
+        readCount: '9,346',
+      },
+      {
+        id: 103,
+        image: syringeImg,
+        title: '胰岛素注射教程',
+        desc: '糖尿病患者必看：正确注射方法与部位轮换',
+        tag: '降糖药',
+        readCount: '7,892',
+      },
+      {
+        id: 104,
+        image: heartImg,
+        title: '高血压用药管理',
+        desc: '长期服药患者的日常管理与生活方式调整',
+        tag: '心血管',
+        readCount: '15,230',
+      },
+    ],
+  },
+  onLoad() {},
+  onShow() {
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({ selected: 2 });
+    }
+  },
+  goDetail(e: WechatMiniprogram.TouchEvent) {
+    const { id } = e.currentTarget.dataset;
+    wx.navigateTo({ url: `/pages/drug-guide/index?id=${id}` });
+  },
+});
@@ -0,0 +1,26 @@
+<view class="page">
+  <navigation-bar title="惠教中心" back="{{false}}" color="white" background="#FF6B35" />
+
+  <view class="banner">
+    <view class="banner-icon">🎓</view>
+    <view class="banner-text">用药知识，一看就懂</view>
+  </view>
+
+  <view class="content">
+    <view class="section-title">推荐课程</view>
+    <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-info">
+        <view class="card-title">{{item.title}}</view>
+        <view class="card-desc">{{item.desc}}</view>
+        <view class="card-meta">
+          <view class="card-tag">{{item.tag}}</view>
+          <view class="card-read">{{item.readCount}} 人已阅读</view>
+        </view>
+      </view>
+      <view class="card-arrow">›</view>
+    </view>
+  </view>
+</view>