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

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

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/more-button/more-button.js

@@ -0,0 +1 @@
+"use strict";var _liveMenuIcon=require("../../../utils/icons/live-menu-icon");Component({properties:{module:{type:String,value:"toolbar"},sdkInstance:{type:Object,value:null},iconList:{type:Array,value:[]},useExternalDrawer:{type:Boolean,value:!1},hasExternalDrawerItems:{type:Boolean,value:!1}},data:{outerIconList:[],innerIconList:[],showMoreEntry:!1},observers:{"sdkInstance, module":function(){this.bindIconSourceSync()},"module, iconList, useExternalDrawer, hasExternalDrawerItems":function(){this.syncIconList()}},lifetimes:{detached:function(){this.unbindIconSourceSync()}},methods:{bindIconSourceSync:function(){var n=this;this.unbindIconSourceSync();var t=this.data.sdkInstance;if(t&&"player"===this.data.module){var e=t.store,o=function(){return n.syncIconSources()};this._unsubIconSources=e.get({liveInfo:o,"reportInfo.videoType":o,"notification.isNotificationOpen":o,"notification.isShowNotificationButton":o}),this.syncIconSources()}},unbindIconSourceSync:function(){"function"==typeof this._unsubIconSources&&this._unsubIconSources(),this._unsubIconSources=null},syncIconSources:function(){(0,_liveMenuIcon.syncLiveRoomBottomIconSourcesFromStore)(this.data.sdkInstance)},syncIconList:function(){var n=Array.isArray(this.data.iconList)?this.data.iconList:[];if("player"===this.data.module)return this.data.useExternalDrawer?void this.setData({outerIconList:n,innerIconList:[],showMoreEntry:this.data.useExternalDrawer&&this.data.hasExternalDrawerItems}):void this.setData({outerIconList:n.slice(0,1),innerIconList:n.slice(1),showMoreEntry:!1});this.setData({outerIconList:n,innerIconList:[],showMoreEntry:!1})},openDrawer:function(){var n,t;this.data.useExternalDrawer?this.triggerEvent("openmore",{module:this.data.module}):null===(n=this.selectComponent("#volc-landscape-more-button-drawer"))||void 0===n||null===(t=n.showFrame)||void 0===t||t.call(n)},onOuterIconTap:function(n){var t=this.findIconByKey(this.data.outerIconList,n.currentTarget.dataset.key);this.emitIconTap(t)},onInnerIconTap:function(n){this.tapInnerIconByKey(n.currentTarget.dataset.key)},tapInnerIconByKey:function(n){var t,e,o=this.findIconByKey(this.data.innerIconList,n);this.emitIconTap(o),this.data.useExternalDrawer||null===(t=this.selectComponent("#volc-landscape-more-button-drawer"))||void 0===t||null===(e=t.hideFrame)||void 0===e||e.call(t)},findIconByKey:function(n,t){return(Array.isArray(n)?n:[]).find(function(n){return n.key===t})},emitIconTap:function(n){null!=n&&n.key&&this.triggerEvent("tapicon",{icon:n,module:this.data.module})}}});

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/more-button/more-button.json

@@ -0,0 +1 @@
+{"component":true,"usingComponents":{"mp-icon":"weui-miniprogram/icon/icon","Drawer":"../../../pubComponents/drawer/drawer"}}

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/more-button/more-button.wxml

@@ -0,0 +1,37 @@
+<view wx:if="{{outerIconList.length || showMoreEntry || innerIconList.length}}" class="landscape-more-button landscape-more-button-{{module}}">
+  <view
+    class="landscape-more-button-item"
+    style="{{item.containerStyle}}"
+    wx:for="{{outerIconList}}"
+    wx:for-item="item"
+    wx:key="key"
+    data-key="{{item.key}}"
+    bindtap="onOuterIconTap"
+  >
+    <image wx:if="{{item.iconUrl || item.src}}" class="landscape-more-button-image" src="{{item.iconUrl || item.src}}" mode="aspectFit" style="{{item.style}}" />
+    <mp-icon wx:if="{{item.mpIcon}}" icon="{{item.mpIcon.icon}}" color="{{item.mpIcon.color}}" size="{{item.mpIcon.size}}" />
+  </view>
+  <view wx:if="{{module === 'player' && (showMoreEntry || innerIconList.length)}}" class="landscape-more-button-item landscape-more-button-item-more" bindtap="openDrawer">
+    <mp-icon icon="more" color="#fff" size="{{30}}" />
+  </view>
+</view>
+
+<Drawer wx:if="{{module === 'player' && !useExternalDrawer}}" id="volc-landscape-more-button-drawer">
+  <view class="landscape-more-drawer">
+    <view
+      class="landscape-more-drawer-item"
+      style="{{item.containerStyle}}"
+      wx:for="{{innerIconList}}"
+      wx:for-item="item"
+      wx:key="key"
+      data-key="{{item.key}}"
+      bindtap="onInnerIconTap"
+    >
+      <view class="landscape-more-drawer-icon">
+        <image wx:if="{{item.iconUrl || item.src}}" class="landscape-more-drawer-image" src="{{item.iconUrl || item.src}}" mode="aspectFit" style="{{item.style}}" />
+        <mp-icon wx:if="{{item.mpIcon}}" icon="{{item.mpIcon.icon}}" color="{{item.mpIcon.color}}" size="{{item.mpIcon.size}}" />
+      </view>
+      <view class="landscape-more-drawer-name">{{item.title || item.name}}</view>
+    </view>
+  </view>
+</Drawer>

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/more-button/more-button.wxss

@@ -0,0 +1 @@
+.landscape-more-button{display:flex;align-items:center}.landscape-more-button-toolbar{gap:12rpx}.landscape-more-button-player{gap:16rpx}.landscape-more-button-item{width:calc(72rpx + .5 * (1rem - 16px));height:calc(72rpx + .5 * (1rem - 16px));min-width:calc(72rpx + .5 * (1rem - 16px));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.14);position:relative;box-sizing:border-box}.landscape-more-button-image{width:40rpx;height:40rpx}.landscape-more-drawer{display:flex;flex-wrap:wrap;align-content:flex-start;width:100%;overflow-x:hidden;overflow-y:auto;max-height:calc(50vh - 56px - .5 * (1rem - 16px));padding:21px 15px 5px;box-sizing:border-box;-webkit-overflow-scrolling:touch}.landscape-more-drawer-item{display:flex;flex:0 0 calc(58px + 0.5 * (1rem - 16px));flex-direction:column;align-items:center;margin-right:18px;margin-bottom:16px}.landscape-more-drawer-icon{display:flex;align-items:center;justify-content:center;background-color:#2c2d30;height:calc(34px + .5 * (1rem - 16px));width:calc(34px + .5 * (1rem - 16px));border-radius:50%;color:#fff}.landscape-more-drawer-image{width:22px;height:22px}.landscape-more-drawer-name{display:block;width:100%;margin-top:8px;font-size:calc(12px + .5 * (1rem - 16px));line-height:calc(18px + .5 * (1rem - 16px));color:#d2d3d3;text-align:center;white-space:normal;word-break:break-all;overflow-wrap:break-word}

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/volc-live-landscape.json

@@ -0,0 +1 @@
+{"component":true,"usingComponents":{"chat":"../chat/chat","player":"../player/player","mp-tabs":"../../pubComponents/tabs/index","image-preview":"../../pubComponents/image-preview/image-preview","image-text-float":"../image-text-float/image-text-float","image-text-root":"../image-text-float/image-text-root/image-text-root","image-text-card":"../image-text-card/image-text-card","float-card":"../product-card/float-card/float-card","product-card":"../product-card/product","ad-floating":"../ad-floating/ad-floating","card-list":"../product-card/card-list/card-list","coupon-btn-list":"../coupon/couponBtnList/couponBtnList","program-list":"../program-list/index","richText":"../richText/index","ban-page":"../ban-page/ban-page","thumb-button":"../thumb/thumb-button","landscape-more-button":"./more-button/more-button","questionnaire":"../image-text-float/questionnaire/questionnaire","live-countdown":"../live-countdown/live-countdown","live-description":"../live-description/live-description","attention-detection":"../attention-detection/attention-detection","volc-loading":"../../pubComponents/loading/loading","Drawer":"../../pubComponents/drawer/drawer"}}

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/volc-live-landscape.wxml

@@ -0,0 +1,154 @@
+<!-- volc-mini-sdk/components/volc-live-landscape/volc-live-landscape.wxml -->
+<view
+  class="volc-live-landscape-container"
+  style="{{containerStyle + style}}"
+  wx:if="{{!questionnaireBlocking}}"
+  capture-bind:touchstart="onAttentionInteraction"
+  capture-bind:tap="onAttentionInteraction"
+>
+  <image
+    wx:if="{{MobileBackImage}}"
+    class="volc-live-mobile-background-image"
+    src="{{MobileBackImage}}"
+    mode="aspectFill"
+  ></image>
+  <image
+    wx:if="{{MobileBackImage && isMobileBackgroundBlur}}"
+    class="volc-live-mobile-background-image volc-live-mobile-background-image-blur"
+    src="{{MobileBackImage}}"
+    mode="aspectFill"
+  ></image>
+  <view class="userId" bindtap="debugClick">
+    <view wx:if="{{debug}}">v0.1.19</view>
+    <view wx:if="{{debug}}" bindtap="copyText">{{userID}}</view>
+  </view>
+  <image
+    wx:if="{{showHeaderImage}}"
+    class="volc-live-landscape-header-image"
+    src="{{HeaderImageUrl}}"
+    mode="aspectFill"
+  ></image>
+  <player
+    id="landscapePlayer"
+    class="volc-live-landscape-player"
+    wx:if="{{showPlayer}}"
+    isPortrait="{{false}}"
+    sdkInstance="{{sdkInstance}}"
+  >
+    <!-- 播放器 topRight slot 只承载按钮；more 抽屉挂到横屏根节点，避免被播放器容器或原生层级裁剪。 -->
+    <landscape-more-button
+      slot="topRight"
+      module="player"
+      sdkInstance="{{sdkInstance}}"
+      iconList="{{landscapeBottomIconBuckets.playerIconList}}"
+      useExternalDrawer="{{true}}"
+      hasExternalDrawerItems="{{landscapeBottomIconBuckets.playerDrawerIconList.length > 0}}"
+      bind:openmore="openLandscapePlayerMoreDrawer"
+      bind:tapicon="handleLandscapeBottomIconTap"
+    />
+  </player>
+  
+  <live-countdown wx:if="{{showCountdown}}" class="volc-live-landscape-countdown" sdkInstance="{{sdkInstance}}" isLandscape="{{true}}" bind:commentCheck="commentCheck" />
+  <view wx:if="{{hasLiveDescription}}" class="volc-live-landscape-description {{IsUseDarkTheme ? 'volc-live-landscape-description-dark' : ''}}">
+    <live-description sdkInstance="{{sdkInstance}}" isLandscape="{{true}}" />
+  </view>
+  <mp-tabs class="volc-live-landscape-tab" container-style="height: 100%;" tab-class="tab-action" swiper-class="menu-swiper" wx:if="{{tabList.length > 0}}" tabs="{{tabList}}" activeTab="{{activeTab}}" tabActiveTextColor="{{themeColor.FontColor}}" tabInactiveTextColor="{{themeColor.BackFontColor}}" bindtabclick="onTabClick" bindchange="onTabChange">
+    <block wx:for="{{tabList}}" wx:key="index">
+      <view wx:if="{{renderedTabMap[index]}}" class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}">
+        <chat
+          id="landscapeChat"
+          class="tab-chat"
+          wx:if="{{item.key === 'COMMENT'}}"
+          bind:commentCheck="commentCheck"
+          bind:previewimage="openPreviewImage"
+          bind:editorstatechange="onEditorStateChange"
+          sdkInstance="{{sdkInstance}}"
+          isLandscape="{{true}}"
+          externalEditorCloseSignal="{{externalEditorCloseSignal}}"
+        >
+          <landscape-more-button module="toolbar" iconList="{{landscapeBottomIconBuckets.toolbarIconList}}" bind:tapicon="handleLandscapeBottomIconTap" />
+          <thumb-button mode="landscape" sdkInstance="{{sdkInstance}}" />
+        </chat>
+        <image-text-card
+          wx:if="{{item.key === 'IMAGETEXT'}}"
+          bind:commentCheck="commentCheck"
+          bind:previewimage="openPreviewImage"
+          sdkInstance="{{sdkInstance}}"
+        />
+        <view wx:if="{{item.key === 'CARDLIST'}}" class="product-card-container">
+          <view class="product-header" style="color: {{themeColor.FontColor}};">
+            <view class="product-header-left">
+              <view class="product-title">商品卡片</view>
+              <view class="product-count">
+                共
+                <text class="count-number">{{productCounts[item.index] || 0}}</text>
+                件宝贝
+              </view>
+            </view>
+            <view class="header-right">
+              <coupon-btn-list sdkInstance="{{sdkInstance}}" showEntry="{{true}}" mode="landscape" entryTheme="{{IsUseDarkTheme ? 'dark' : 'light'}}" />
+            </view>
+          </view>
+          <view class="product-card-list">
+            <!-- 横屏商品列表在固定头部下方占剩余空间，card-list 内部会按该区域真实高度设置 recycle-view。 -->
+            <card-list class="product-card-list-component" style="display: block; height: 100%;" mode="landscape" sdkInstance="{{sdkInstance}}" productIndex="{{item.index}}" themeColor="{{themeColor}}" />
+          </view>
+        </view>
+        <program-list wx:if="{{item.key === 'PROGRAMLIST'}}" sdkInstance="{{sdkInstance}}" themeColor="{{themeColor}}" />
+        <richText wx:if="{{item.key === 'RICHTEXT'}}" sdkInstance="{{sdkInstance}}" index="{{item.index}}" themeColor="{{themeColor}}" />
+        <!-- 浮窗只属于评论 tab；切到其他 tab 时用 class 隐藏，避免关闭态等内部状态因 wx:if 反复丢失。 -->
+        <view wx:if="{{item.key === 'COMMENT'}}" class="volc-live-right-float-area {{showFloatingContainer ? '' : 'volc-live-right-float-area-hidden'}}">
+          <image-text-float wx:if="{{hasImageFloatConfig}}" bind:commentCheck="commentCheck" bind:previewimage="openPreviewImage" bind:openImageTextTab="openImageTextTab" sdkInstance="{{sdkInstance}}" isLandScape="{{true}}" floatIconNum="{{imageTextFloatIconNum}}" />
+          <view class="volc-live-floating-container">
+            <view class="volc-live-floating-item">
+              <ad-floating sdkInstance="{{sdkInstance}}" bind:visibilityChange="onAdFloatingChange" />
+            </view>
+            <view class="volc-live-floating-item">
+              <float-card sdkInstance="{{sdkInstance}}" bind:visibilityChange="onFloatCardChange" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </block>
+  </mp-tabs>
+  <image-preview
+    visible="{{previewImageVisible}}"
+    src="{{previewImageSrc}}"
+    zIndex="{{12000}}"
+    bind:close="closePreviewImage"
+  />
+  <view wx:if="{{editorEntering}}" class="volc-live-editor-mask" bindtap="closeEditorFromMask"></view>
+  <image-text-root sdkInstance="{{sdkInstance}}" bind:commentCheck="commentCheck" bind:openChatInput="openChatInput" />
+  <product-card id="volc-productContainerLandscape" sdkInstance="{{sdkInstance}}" />
+  <ban-page sdkInstance="{{sdkInstance}}" bind:continue="onBanContinue" />
+  <attention-detection id="attentionDetection" sdkInstance="{{sdkInstance}}" />
+  <Drawer id="volc-landscape-player-more-drawer">
+    <view class="landscape-more-drawer">
+      <view
+        class="landscape-more-drawer-item"
+        style="{{item.containerStyle}}"
+        wx:for="{{landscapeBottomIconBuckets.playerDrawerIconList}}"
+        wx:for-item="item"
+        wx:key="key"
+        data-key="{{item.key}}"
+        bindtap="handleLandscapePlayerMoreDrawerIconTap"
+      >
+        <view class="landscape-more-drawer-icon">
+          <image wx:if="{{item.iconUrl || item.src}}" class="landscape-more-drawer-image" src="{{item.iconUrl || item.src}}" mode="aspectFit" style="{{item.style}}" />
+          <mp-icon wx:if="{{item.mpIcon}}" icon="{{item.mpIcon.icon}}" color="{{item.mpIcon.color}}" size="{{item.mpIcon.size}}" />
+        </view>
+        <view class="landscape-more-drawer-name">{{item.title || item.name}}</view>
+      </view>
+    </view>
+  </Drawer>
+  <volc-loading wx:if="{{sdkInitLoading}}" zIndex="{{20001}}" theme="dark" />
+</view>
+<view class="volc-live-landscape-container" style="{{containerStyle + style}}" wx:if="{{questionnaireBlocking}}"></view>
+<questionnaire
+  id="questionnaire"
+  sdkInstance="{{sdkInstance}}"
+  allowedTriggers="{{['live_page_in']}}"
+  closable="{{false}}"
+  bind:commentCheck="commentCheck"
+  bind:blockingChange="onQuestionnaireBlockingChange"
+/>

miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/volc-live-landscape.wxss

@@ -0,0 +1 @@
+.volc-live-landscape-container{display:flex;flex-direction:column;width:100vw;height:100vh;position:relative;overflow:hidden;box-sizing:border-box;z-index:0}.volc-live-mobile-background-image{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}.volc-live-mobile-background-image-blur{top:56.25vw;height:calc(100vh - 56.25vw);filter:blur(36rpx);transform:scale(1.15);transform-origin:center top}.volc-live-landscape-header-image{position:relative;z-index:1;flex:0 0 120rpx;width:100vw;height:120rpx}.volc-live-right-float-area{position:absolute;right:28rpx;bottom:130rpx;bottom:calc(130rpx + constant(safe-area-inset-bottom));bottom:calc(130rpx + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:16rpx}.volc-live-right-float-area-hidden{display:none}.volc-live-floating-container{display:flex;flex-direction:column;align-items:flex-end}.volc-live-floating-item+.volc-live-floating-item{margin-top:16rpx}.volc-live-landscape-player{width:100vw;height:56.25vw;flex:0 0 56.25vw}.volc-live-landscape-description{display:flex;box-sizing:border-box;flex:0 0 64rpx;width:100vw;height:64rpx;z-index:104;border-bottom:1rpx solid rgba(0,0,0,.1)}.volc-live-landscape-description-dark{border-bottom-color:rgba(255,255,255,.16)}.volc-live-landscape-description live-description{display:block;width:100%;padding:0 32rpx;box-sizing:border-box}.volc-live-landscape-countdown{flex:0 0 auto;width:100vw}.volc-live-landscape-tab{display:flex;flex:1;width:100vw;min-height:0;box-sizing:border-box;position:relative;z-index:103}.tab-action{color:#fff!important}.tab-content{width:100%;height:100%;overflow:auto}.tab-chat{width:100%;height:100%}.volc-live-editor-mask{position:fixed;inset:0;background:rgba(0,0,0,.24);z-index:102}.userId{position:fixed;top:0;left:0;width:150px;height:calc(60px + .5 * (1rem - 16px));color:red;font-size:calc(15px + .5 * (1rem - 16px));z-index:10000}.product-card-container{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.product-card-list{flex:1;min-height:0;overflow:hidden}.product-card-list-component{display:block;height:100%}.product-header{flex:0 0 128rpx;height:128rpx;padding:0 32rpx 24rpx;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.product-header-left{display:flex;flex-direction:column}.product-title{font-size:calc(32rpx + .5 * (1rem - 16px));font-weight:500;color:inherit;line-height:calc(48rpx + .5 * (1rem - 16px));margin-bottom:8rpx}.product-count{font-size:calc(24rpx + .5 * (1rem - 16px));color:currentColor;opacity:.6;line-height:calc(32rpx + .5 * (1rem - 16px))}.count-number{color:#f53f3f;margin:0 4rpx}.header-right{display:flex;align-items:center}.landscape-more-drawer{display:flex;flex-wrap:wrap;align-content:flex-start;width:100%;overflow-x:hidden;overflow-y:auto;max-height:calc(50vh - 56px - .5 * (1rem - 16px));padding:21px 15px 5px;box-sizing:border-box;-webkit-overflow-scrolling:touch}.landscape-more-drawer-item{display:flex;flex:0 0 calc(58px + 0.5 * (1rem - 16px));flex-direction:column;align-items:center;margin-right:18px;margin-bottom:16px}.landscape-more-drawer-icon{display:flex;align-items:center;justify-content:center;background-color:#2c2d30;height:calc(34px + .5 * (1rem - 16px));width:calc(34px + .5 * (1rem - 16px));border-radius:50%;color:#fff}.landscape-more-drawer-image{width:22px;height:22px}.landscape-more-drawer-name{display:block;width:100%;margin-top:8px;font-size:calc(12px + .5 * (1rem - 16px));line-height:calc(18px + .5 * (1rem - 16px));color:#d2d3d3;text-align:center;white-space:normal;word-break:break-all;overflow-wrap:break-word}