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

- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡
- 药品百科: 搜索 + 分类筛选 + 20种药品静态数据
- 惠教中心: 4条药品使用指南课程
- 我的: 家庭成员信息管理
- 自定义TabBar + navigation-bar组件
- SVG药品分类插图

miniprogram/components/static/sku-item/sku-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/static/sku-item/sku-item.scss

@@ -0,0 +1,43 @@
+/* components/sku-item/sku-item.wxss */
+@import "variables";
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  height: 60rpx;
+  margin: 0rpx $primary-gap $primary-gap $primary-gap;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: $primary-border-radius/2;
+  border: 2rpx solid rgba(255, 255, 255, 0); //给一个透明的边框，不然选中会有一个2rpx的左右边框，宽度会有变化
+
+  .img {
+    width: 60rpx;
+    height: 60rpx;
+    margin-right: $primary-gap/2;
+    border-radius: 10rpx;
+    overflow: hidden;
+
+    .pic {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    padding: 0 $primary-gap/2;
+    font-size: $large-font-size;
+    line-height: 60rpx;
+  }
+}
+
+.item-active {
+  color: $primary-color;
+  border: 2rpx solid $primary-color;
+  background-color: #ffddcb50;
+}
+
+.item-disable {
+  color: $gray-color !important;
+  border: 2rpx solid rgba(255, 255, 255, 0);
+  background-color: rgba(0, 0, 0, 0.05);
+}

miniprogram/components/static/sku-item/sku-item.ts

@@ -0,0 +1,43 @@
+// components/sku-item/sku-item.ts
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        item: {
+            type: Object,
+            value: {}
+        },
+        active: {
+            type: Boolean,
+            value: false
+        },
+        disable: {
+            type: Boolean,
+            value: false
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        handleSelect() {
+            // @ts-ignore
+            this.triggerEvent('selectsku', {
+                // @ts-ignore
+                id: this.properties.item.skuId,
+                // @ts-ignore
+                checkItem: this.properties.item
+            });
+        }
+    }
+})

miniprogram/components/static/sku-item/sku-item.wxml

@@ -0,0 +1,7 @@
+<!--components/sku-item/sku-item.wxml-->
+<view class=" item {{active?'item-active': ''}} {{disable?'item-disable':''}}" bind:tap="handleSelect">
+  <view class="img">
+    <image class="pic" mode="aspectFill" src="{{item.picUrl}}"></image>
+  </view>
+  <view class="content">{{item.name}}</view>
+</view>