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 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744786271399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4083" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M816.49 909H211.21c-1.1 0-2-0.9-2-2v-68.18c0-1.1 0.9-2 2-2h605.28c1.1 0 2 0.9 2 2V907c0 1.1-0.9 2-2 2z" fill="#FFF" p-id="4084"></path><path d="M910.24 316.23c-27.11 0-49.1 22.52-49.1 50.31 0 7.28 1.58 14.16 4.3 20.4l-176.13 80.21-147.2-258.57c14.56-8.73 24.46-24.74 24.46-43.28 0-27.79-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 17.99 9.29 33.66 23.15 42.55l-158.16 259.3-176.13-80.21c2.71-6.25 4.3-13.12 4.3-20.4 0-27.78-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 27.78 21.98 50.31 49.1 50.31 3.99 0 7.82-0.62 11.53-1.54l86.65 366.28h601.43l86.65-366.28c3.71 0.92 7.54 1.54 11.53 1.54 27.12 0 49.1-22.52 49.1-50.31 0.01-27.78-21.97-50.31-49.08-50.31z" fill="#FFF" p-id="4085"></path></svg>
@@ -0,0 +1,14 @@
+{
+  "backgroundTextStyle": "light",
+  "backgroundColor": "#ffffff",
+  "navigationBarShareAppMessage": false,
+  "navigationBarShareTimeline": false,
+  "disableScroll": true,
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "my-video":"/components/my-video/my-video",
+    "van-tab": "@vant/weapp/tab/index",
+    "van-tabs": "@vant/weapp/tabs/index",
+    "my-quiz":"/components/my-quiz/my-quiz"
+  }
+}
@@ -0,0 +1,122 @@
+/* pages/video/video.wxss */
+@import "../../../variables";
+page {
+    background: #f9f9f9;
+     height: 100%;
+}
+
+.scrollarea {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  .tabs {
+    flex:1
+  }
+}
+
+
+.scrollarea-inner {
+  height: 50vh;
+  width: 100%;
+   box-sizing: border-box;
+
+   rich-text {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+
+.submit-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20rpx;
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+    z-index: 100;
+}
+
+/* 提交按钮样式 */
+.btn {
+    width: 80%;
+    height: 88rpx;
+    line-height: 88rpx;
+    background: #ff4d4f;
+    color: white;
+    border-radius: 44rpx;
+    font-size: 32rpx;
+    border: none;
+    margin: 0 auto;
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.btn:active {
+    background: #ff7875;
+}
+.scrollarea-inner-text{
+  padding: 40rpx;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+rich-content image {
+  width: 100% !important;
+  height: auto !important;
+  display: block;
+}
+
+rich-content img {
+  width: 100% !important;
+  height: auto !important;
+  display: block;
+}
+
+.error{
+    white-space: nowrap;
+    background: #FF4D4F;
+    color: #fff;
+    font-size: 22rpx;
+    padding: 6rpx 24rpx;
+    border-radius: 20rpx;
+    line-height: 1.5;
+    box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    border: none;
+    outline: none;
+    margin: 0;
+    &::before {
+        content: '⚠';
+        margin-right: 4rpx;
+        font-size: 20rpx;
+    }
+    &::after {
+        border: none;
+    }
+    &:active {
+        opacity: 0.8;
+        transform: scale(0.95);
+    }
+}
+
+.history{
+    position: absolute;
+    right: 10rpx;
+    top: 110rpx;
+    display: flex;
+    justify-content: center;
+    padding-left: 12rpx;
+    border-radius: 48rpx 0rpx 0rpx 48rpx;
+    box-sizing: border-box;
+    .icon{
+        width: 100rpx;
+        height: 80rpx;
+    }
+}
@@ -0,0 +1,381 @@
+// pages/video/video.ts
+
+import UrlParamsHandler from "../../../utils/store";
+import { htmlToWxNodes } from "../../../utils/html-to-wx-nodes";
+import { request } from "../../../utils/request";
+import { version, appversion, appId } from "../../../env";
+import { receiveRedPacket } from "../../../utils/util";
+
+const isMobileEnvironment = (): boolean => {
+  const platform = wx.getSystemInfoSync().platform?.toLowerCase() || '';
+  return platform !== 'windows' && platform !== 'mac';
+};
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    dataList: {},
+    nodes: [] as any[],
+    eveId: null,
+    store: {},
+
+    active: 0,
+    canSubmit: false,
+    safeBottom: 0,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  async onLoad(options: any) {
+    const app = getApp<IAppOption>();
+    wx.hideShareMenu({
+      menus: ["shareAppMessage"], // 单独禁用好友分享
+    });
+    new UrlParamsHandler(options);
+    app.globalData.store = options;
+    let safeBottom = 0;
+    //@ts-ignore
+    if (wx.getWindowInfo) {
+      //@ts-ignore
+      const systemInfo = wx.getWindowInfo();
+      safeBottom =
+        Math.abs(systemInfo.windowHeight - systemInfo.safeArea.bottom) + 10;
+      if (safeBottom === 0) safeBottom = 24;
+    } else {
+      const systemInfo = wx.getSystemInfoSync();
+      safeBottom = systemInfo.safeArea
+        ? Math.abs(systemInfo.windowHeight - systemInfo.safeArea.bottom) + 10
+        : 24;
+    }
+    this.setData({
+      safeBottom: safeBottom,
+      store: options,
+    });
+
+    if (!isMobileEnvironment()) {
+      this.handleEnterError(
+        "当前环境不支持观看，请使用手机观看。",
+        "环境不支持",
+      );
+      return;
+    }
+
+    const bool = await app.login("video");
+    if (!bool) return;
+
+    // 在需要保护的页面调用
+    //@ts-ignore
+    wx.setVisualEffectOnCapture({
+      visualEffect: 'hidden', // 录屏或截图时隐藏内容
+      success: function () {
+        console.log('防截屏录屏保护已开启');
+      }
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() { },
+  handleEnterError(message: string, title = "无法进入") {
+    wx.showModal({
+      title: title,
+      content: message,
+      showCancel: false,
+      confirmText: "确定",
+    });
+  },
+
+  handleBack() {
+    wx.switchTab({
+      url: "/pages/tab-bar/course/course",
+    });
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.search();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() { },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() { },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() { },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() { },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() { },
+
+  onChange(e: any) {
+    this.setData({
+      active: event.detail.index,
+    });
+  },
+
+  // 监听答题变化
+  onAnswerChange() {
+    this.updateProgress();
+  },
+
+  async search() {
+    const app = getApp<IAppOption>();
+    const bool = await app.checkLoginState();
+    if (!bool) return;
+    const code = wx.getStorageSync("code");
+    const params = {
+      openId: wx.getStorageSync("openId"),
+      ...app.globalData.store,
+    };
+    if (code) {
+      const data = await request({
+        options: {
+          url: `/app/video-watch/details?version=${version.details}&appVer=${appversion}`,
+          method: "GET",
+          data: params,
+        },
+      });
+
+      if (!data.watch.url) {
+        wx.reLaunch({
+          url: `/pages/live/registration/registration?content=${data.watch.content}&state=${-1}`,
+        });
+      }
+      const nodes = htmlToWxNodes(data.watch.content);
+      this.setData({
+        dataList: data.watch,
+        eveId: data.watch.eveId,
+        nodes,
+      });
+    } else {
+      const data = await request({
+        options: {
+          url: `/app/watch/details?version=${version.details}&appVer=${appversion}`,
+          data: params,
+        },
+      });
+
+      if (!data.data.url) {
+        wx.reLaunch({
+          url: `/pages/live/registration/registration?content=${data.data.content
+            }&state=${5}`,
+        });
+      }
+      const nodes = htmlToWxNodes(data.data.content);
+      this.setData({
+        dataList: data.data,
+        eveId: data.data.eveId,
+        nodes,
+      });
+    }
+
+    this.selectComponent("#tabs").resize();
+  },
+  // 更新答题进度
+  updateProgress() {
+    const quizComponent = this.selectComponent("#quizComponent");
+    if (quizComponent) {
+      const canSubmit = quizComponent.isAllAnswered();
+      this.setData({
+        canSubmit: canSubmit,
+      });
+    }
+  },
+
+  handleSubmit(this) {
+    const ended = wx.getStorageSync("ended") || false;
+    if (!ended) {
+      wx.showModal({
+        title: "请先观看视频，再答题",
+        showCancel: false,
+        confirmText: "确定",
+        confirmColor: "#FF0000",
+      });
+      return;
+    }
+    //@ts-ignore
+    if (this.data.dataList?.userAnsNum >= this.data.dataList?.answerMax) {
+      wx.showToast({
+        title: "答题次数已用完",
+        icon: "none",
+        duration: 6000,
+      });
+      return;
+    }
+    const quizComponent = this.selectComponent("#quizComponent");
+
+    if (!quizComponent) {
+      wx.showToast({
+        title: "组件加载失败",
+        icon: "none",
+      });
+      return;
+    }
+
+    const isAllAnswered = quizComponent.isAllAnswered();
+    if (!isAllAnswered) {
+      const progress = quizComponent.getProgress();
+      wx.showModal({
+        title: "答题未完成",
+        content: `您已完成 ${progress.answered}/${progress.total} 题，请完成所有题目后再提交。`,
+        showCancel: false,
+        confirmText: "继续答题",
+      });
+      return;
+    }
+
+    const answers = quizComponent.getAllAnswers();
+    if (!answers || answers.length === 0) {
+      wx.showToast({
+        title: "请先完成答题",
+        icon: "none",
+      });
+      return;
+    }
+
+    wx.showModal({
+      title: "确认提交",
+      content: `您已完成 ${answers.length} 道题目，确定要提交答案吗？`,
+      success: (res) => {
+        if (res.confirm) {
+          this.submitAnswers(answers);
+        }
+      },
+    });
+  },
+
+  async submitAnswers(answers: any[]) {
+    const code = wx.getStorageSync("code");
+    const params = {
+      answers,
+      openId: wx.getStorageSync("openId"),
+      eveId: this.data.eveId,
+      ...this.data.store,
+    };
+    wx.showLoading({
+      title: "提交中...",
+    });
+    let res = null;
+
+    if (code) {
+      res = await request({
+        options: {
+          url: "/app/video-watch/interactive?version=" + version.interactive,
+          data: params,
+        },
+      });
+    } else {
+      res = await request({
+        options: {
+          url: "/app/watch/interactive?version=" + version.interactive,
+          data: params,
+        },
+      });
+    }
+
+    if (res.code !== 200) {
+      wx.showToast({
+        title: res.msg || "提交失败",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+
+    const { pass, redId } = res.data;
+    if (redId) {
+      wx.showModal({
+        content: "🎉 领取红包！",
+        showCancel: false,
+        confirmText: "立即领取",
+        confirmColor: "#FF0000",
+        success: (res) => {
+          if (res.confirm) {
+            this.handleReceive(redId);
+          }
+        },
+      });
+      return;
+    }
+    if (pass) {
+
+      wx.showModal({
+        content: "🎉 恭喜您获得红包！",
+        showCancel: false,
+        confirmText: "确定",
+        confirmColor: "#FF0000",
+
+      });
+    } else {
+      wx.showToast({
+        title: "回答错误,您与红包擦肩而过",
+        icon: "none",
+        duration: 6000,
+      });
+    }
+  },
+  async handleReceive(e: any) {
+    const { id } = e.currentTarget.dataset;
+    const { code } = this.data.store as Record<string, any>;
+    const params = {
+      appId,
+      code,
+      openId: wx.getStorageSync("openId"),
+      redId: id,
+    }
+    try {
+      await receiveRedPacket(
+        params,
+        '/app/general/receive-red',
+        appId
+      );
+    } catch (err) {
+      console.error('领取红包失败:', err);
+    }
+  },
+  handleCustomReport() {
+    const { code, state, seeId } = this.data.store as Record<string, any>;
+    const params: Record<string, string> = {};
+    if (code) params.code = code;
+    if (state) params.state = state;
+    if (seeId) params.seeId = seeId;
+    const query = Object.entries(params)
+      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+      .join("&");
+    wx.navigateTo({
+      url: `/pages/live/report/report${query ? `?${query}` : ""}`,
+    });
+  },
+  handleViewHitory() {
+    const { code, state, seeId } = this.data.store as Record<string, any>;
+    const params: Record<string, string> = {};
+    if (code) params.code = code;
+    if (state) params.state = state;
+    if (seeId) params.seeId = seeId;
+    const query = Object.entries(params)
+      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+      .join("&");
+    wx.navigateTo({
+      url: `/pages/live/red-history/red-history${query ? `?${query}` : ""}`,
+    });
+  }
+});
@@ -0,0 +1,40 @@
+<!--pages/video/video.wxml-->
+<navigation-bar title="" back="{{true}}" bind:handleBack="handleBack" color="black" background="#FFF" />
+
+<view style="display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; height: 80rpx; background: #FFF7E6;">
+    <view style="font-size: 22rpx; color: #999;">本视频仅用于科普，无任何恶意引导行为</view>
+    <view style="display: flex; align-items: center; gap: 16rpx;">
+        <!-- <button open-type="feedback" class="error">微信举报</button> -->
+        <view class="error" bind:tap="handleCustomReport">举报</view>
+    </view>
+</view>
+
+<scroll-view class="scrollarea" scroll-y type="list">
+    <my-video src="{{dataList.url}}" backgroundUrl="{{dataList.background}}"></my-video>
+
+    <block wx:if="{{dataList.tipUrl}}">
+        <image alt="提示" mode="widthFix" src="{{dataList.tipUrl}}" style="width: 100%" />
+    </block>
+
+    <van-tabs active="{{ active }}" bind:change="onChange" animated class="tabs" id="tabs">
+        <van-tab wx:if="{{dataList.questions.length != 0}}" title="答题">
+            <!-- 答题有多选单选 -->
+            <form bindsubmit="handleSubmit" form-id="quizForm">
+                <my-quiz id="quizComponent" questions="{{dataList.questions}}" answerList="{{dataList.answerList}}" bind:change="onAnswerChange" />
+                <button wx:if="{{active === 0}}" class="btn" form-type="submit" style="bottom:{{safeBottom===0?24:safeBottom}}rpx">
+                    {{canSubmit ? '提交答案领取红包' : '请观看完视频再前往答题'}}
+                </button>
+            </form>
+        </van-tab>
+        <van-tab title="介绍{{dataList.cusId ? '(' + dataList.cusId + ')' : ''}}">
+            <scroll-view class="scrollarea-inner" scroll-y type="list">
+                <view class="scrollarea-inner-text">
+                    <rich-text nodes="{{nodes}}"></rich-text>
+                </view>
+            </scroll-view>
+        </van-tab>
+        <view class="history" bind:tap="handleViewHitory">
+            <image class="icon" src="./assets/1.png" />
+        </view>
+    </van-tabs>
+</scroll-view>
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744786271399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4083" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M816.49 909H211.21c-1.1 0-2-0.9-2-2v-68.18c0-1.1 0.9-2 2-2h605.28c1.1 0 2 0.9 2 2V907c0 1.1-0.9 2-2 2z" fill="#FFF" p-id="4084"></path><path d="M910.24 316.23c-27.11 0-49.1 22.52-49.1 50.31 0 7.28 1.58 14.16 4.3 20.4l-176.13 80.21-147.2-258.57c14.56-8.73 24.46-24.74 24.46-43.28 0-27.79-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 17.99 9.29 33.66 23.15 42.55l-158.16 259.3-176.13-80.21c2.71-6.25 4.3-13.12 4.3-20.4 0-27.78-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 27.78 21.98 50.31 49.1 50.31 3.99 0 7.82-0.62 11.53-1.54l86.65 366.28h601.43l86.65-366.28c3.71 0.92 7.54 1.54 11.53 1.54 27.12 0 49.1-22.52 49.1-50.31 0.01-27.78-21.97-50.31-49.08-50.31z" fill="#FFF" p-id="4085"></path></svg>