患者端页面

README.md

@@ -1,82 +1,7 @@
 ## global color
 
 <!--图片文件夹svn地址-->
+svn://39.106.86.127:28386/projects/wutian_xueyoubing_b/proj_src/shop/frontend/web/GeneB
 
-svn://39.106.86.127:28386/projects/zd/proj_src/shop/frontend/web/zd
 
-1. 视频根据列表滚动自动播放
-2. 患者来源渠道以及渠道值需要记录
-3. iframe 嵌套第三方网页,小程序 webview 试验
-4. 上传完诊断证明之后才记录额度
-5. 我的故事编辑姓名和手机号直接读出来就行
-
-```json
-{
-  "ignore": [
-    {
-      "value": "images/**/*.png",
-      "type": "glob"
-    }
-  ],
-  "include": [
-    {
-      "value": "images/tabbar/*.png",
-      "type": "glob"
-    }
-  ]
-}
-```
-
-(/images/)(\S*(?=["|']))
-{{imageUrl}}$2?t={{Timestamp}}
-
-首页banner对应变量
-MINIDOCTOR 微医弹窗
-
-1. 互动消息列表 时间展示规则
-   1. 当天展示 时分
-   2. 超过一天 年月日
-
-```js
-wx.showModal({
-  title: '',
-  confirmColor: '#cf5375',
-})
-// 医生端 confirmColor: '#62bed0',
-```
-
-1）提供3中的3个路径链接；
-a.跳转到患者端小程序的路径；
-/pages/index/index?es=201501
-b.带商保参数的ADL引导页路径；
-/pages/adl/index?m_d=1&es=201502
-c.微医webview页面路径；
-/pages/webview/index?es=201503
-
-过滤微医路径的banner标题
-BANNER-MINIDOVTOR
-
-### 下载文件到本地
-
-```js
-const handleDownload = () => {
-  const url =
-    'https://circlehbsaas.oss-cn-beijing.aliyuncs.com/doc/20250506353_%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%9D%90%E6%96%99.xlsx'
-  wx.showLoading({
-    title: '加载中',
-  })
-  wx.downloadFile({
-    url,
-    success(res) {
-      wx.shareFileMessage({
-        fileName: '测试.xlsx',
-        filePath: res.tempFilePath,
-        success() {
-          wx.hideLoading()
-        },
-      })
-    },
-  })
-}
-```
 https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567

project.private.config.json

@@ -23,13 +23,20 @@
     "miniprogram": {
       "list": [
         {
-          "name": "患者-录入个人信息",
+          "name": "患者-首页",
-          "pathName": "patient/pages/entryInfo/index",
+          "pathName": "patient/pages/home/index",
           "query": "",
           "scene": null,
           "launchMode": "default"
         },
         {
+          "name": "患者-录入个人信息",
+          "pathName": "patient/pages/entryInfo/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "患者-登录",
           "pathName": "patient/pages/login/index",
           "query": "",

src/app.json

@@ -13,7 +13,7 @@
   "subPackages": [
     {
       "root": "patient",
-      "pages": ["pages/protocol/index", "pages/login/index", "pages/entryInfo/index"]
+      "pages": ["pages/protocol/index", "pages/login/index", "pages/entryInfo/index","pages/home/index"]
     }
   ],
   "tabBar": {

src/pages/index/index.scss

@@ -14,11 +14,14 @@
         height: 100%;
       }
     }
+    .wx-swiper-dots.wx-swiper-dots-horizontal {
+      margin-bottom: 80rpx;
+    }
   }
   .page-containr {
     position: relative;
     z-index: 1;
-    margin-top: -26rpx;
+    margin-top: -80rpx;
     padding: 42rpx 40rpx;
     background: linear-gradient(346deg, #f7f7fa 0%, #ffe5dc 100%);
     border-radius: 32rpx 32rpx 0 0;

src/patient/components/patient-tab-bar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-tabbar": "@vant/weapp/tabbar/index",
+    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
+  }
+}

src/patient/components/patient-tab-bar/index.scss

@@ -0,0 +1,19 @@
+/* custom-tab-bar/index.wxss */
+
+
+.tab-item {
+  .icon {
+    width: 50rpx;
+    height: 50rpx;
+  }
+  .name {
+    font-size: 24rpx;
+    color: #010105;
+    &.active{
+      color: #F23A2F;
+    }
+    &.drug-active{
+      color: #25D9C8;
+    }
+  }
+}

src/patient/components/patient-tab-bar/index.ts

@@ -0,0 +1,59 @@
+import { getCurrentPageUrl } from '@/utils/util'
+const app = getApp()
+
+Component({
+  properties: {},
+  data: {
+    imageUrl: app.globalData.imageUrl,
+    isChild: 0,
+    active: 0,
+    list: [
+      {
+        pagePath: '/patient/pages/home/index',
+        text: '首页',
+        icon: 'tabbar2-1',
+        iconActive: 'tabbar2-1-active',
+      },
+      {
+        pagePath: '/pages/knowledge/index',
+        text: '知识库',
+        icon: 'tabbar2-2',
+        iconActive: 'tabbar2-2-active',
+      },
+      {
+        pagePath: '/pages/knowledge/index',
+        text: '档案',
+        icon: 'tabbar2-3',
+        iconActive: 'tabbar2-3-active',
+      },
+      {
+        pagePath: '/pages/my/index',
+        text: '我的',
+        icon: 'tabbar2-4',
+        iconActive: 'tabbar2-4-active',
+      },
+    ],
+  },
+  observers: {},
+  lifetimes: {
+    ready() {
+      const pagePath = getCurrentPageUrl()
+      const active = this.data.list.findIndex((item) => item.pagePath === pagePath)
+      this.setData({
+        active,
+        anyWhere: app.globalData.anyWhere,
+      })
+    },
+  },
+  methods: {
+    onChange() {},
+    handleNav(e) {
+      const { index } = e.currentTarget.dataset
+      const { list } = this.data
+      const pagePath = list[index].pagePath
+      wx.switchTab({
+        url: pagePath,
+      })
+    },
+  },
+})

src/patient/components/patient-tab-bar/index.wxml

@@ -0,0 +1,14 @@
+<van-tabbar active="{{ active }}" active-color="#F23A2F" bind:change="onChange" inactive-color="#010105">
+  <block wx:for="{{list}}" wx:key="*this">
+    <van-tabbar-item
+      class="tab-item"
+      wx:if="{{ index != 3 || !anyWhere}}"
+      bind:tap="handleNav"
+      data-index="{{index}}"
+      icon="/images/tabbar/{{active==index ? item.iconActive : item.icon}}.png"
+    >
+      <view class="name {{index==active && 'active'}}">{{item.text}}</view>
+      <view class="hot"></view>
+    </van-tabbar-item>
+  </block>
+</van-tabbar>

src/patient/pages/entryInfo/index.scss

@@ -2,7 +2,7 @@ page {
   background-color: rgba(247, 247, 250, 1);
 }
 .page {
-  padding: 0 70rpx  80rpx;
+  padding: 0 70rpx 80rpx;
   .logo {
     display: block;
     margin: 0 auto;
@@ -99,4 +99,11 @@ page {
     border-radius: 84rpx 84rpx 84rpx 84rpx;
     background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
   }
+  .cancel {
+    margin-top: 30rpx;
+    padding: 30rpx;
+    font-size: 32rpx;
+    color: rgba(161, 164, 172, 1);
+    text-align: center;
+  }
 }

src/patient/pages/entryInfo/index.ts

@@ -1,8 +1,13 @@
-const _app = getApp<IAppOption>();
+const _app = getApp<IAppOption>()
 
 Page({
   data: {},
   onLoad() {},
-});
+  handleSubmit() {
+    wx.reLaunch({
+      url: '/patient/pages/home/index',
+    })
+  },
+})
 
 export {}

src/patient/pages/entryInfo/index.wxml

@@ -30,5 +30,6 @@
       </picker>
     </view>
   </view>
-  <view class="submit">登录</view>
+  <view class="submit" bind:tap="handleSubmit">登录</view>
+  <view class="cancel">取消</view>
 </view>

src/patient/pages/home/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "patient-tab-bar": "/patient/components/patient-tab-bar/index",
+    "navbar": "/components/navbar/index"
+  }
+}

src/patient/pages/home/index.scss

@@ -0,0 +1,300 @@
+page {
+  background-color: rgba(247, 247, 250, 1);
+}
+.page-title {
+  width: 319rpx;
+  height: 92rpx;
+}
+
+.page {
+  padding: 0 40rpx 180rpx;
+  .user {
+    margin-top: 42rpx;
+    display: flex;
+    align-items: center;
+    .avatar {
+      flex-shrink: 0;
+      border: 2px solid #fff;
+      border-radius: 50%;
+      width: 98rpx;
+      height: 98rpx;
+      background-color: #fff;
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+      }
+    }
+    .wrap {
+      padding-left: 24rpx;
+      .name {
+        font-size: 32rpx;
+        color: rgba(255, 255, 255, 1);
+        font-weight: bold;
+      }
+      .content {
+        margin-top: 8rpx;
+        font-size: 28rpx;
+        color: rgba(255, 255, 255, 0.6);
+        .num {
+          font-weight: bold;
+          font-size: 40rpx;
+          color: rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  }
+  .doctor {
+    margin-top: 30rpx;
+    .none-doctor {
+      padding: 26rpx 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(255, 255, 255, 0.56);
+      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(40, 0, 0, 0.06);
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      border: 2rpx solid #ffffff;
+      .content {
+        font-size: 26rpx;
+        color: rgba(161, 164, 172, 1);
+        line-height: 46rpx;
+      }
+      .btn {
+        flex-shrink: 0;
+        width: 204rpx;
+        height: 56rpx;
+        font-size: 28rpx;
+        color: rgba(242, 58, 47, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 162, 165, 0.13);
+        border-radius: 86rpx;
+        border: 2rpx solid rgba(242, 58, 47, 1);
+      }
+    }
+    .container {
+      margin-top: 76rpx;
+      padding: 26rpx 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(255, 255, 255, 0.56);
+      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(40, 0, 0, 0.06);
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      border: 2rpx solid #ffffff;
+      .wrap {
+        .bind-list {
+          margin-top: -68rpx;
+          display: flex;
+          gap: 32rpx;
+          .item {
+            .avatar-img {
+              display: block;
+              margin: 0 auto;
+              width: 92rpx;
+              height: 92rpx;
+              border-radius: 50%;
+            }
+            .name {
+              margin: -20rpx auto 0;
+              padding: 4rpx 20rpx;
+              font-size: 20rpx;
+              color: #fff;
+              line-height: 24rpx;
+              background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
+              border-radius: 28rpx 28rpx 28rpx 28rpx;
+            }
+          }
+          .add {
+            .icon {
+              display: block;
+              margin: 0 auto;
+              width: 92rpx;
+              height: 92rpx;
+              border-radius: 50%;
+            }
+            .name {
+              margin: -20rpx auto 0;
+              padding: 4rpx 20rpx;
+              font-size: 20rpx;
+              color: rgba(161, 164, 172, 1);
+              line-height: 24rpx;
+            }
+          }
+        }
+        .content {
+          margin-top: 18rpx;
+          font-size: 26rpx;
+          color: rgba(161, 164, 172, 1);
+        }
+      }
+      .btn {
+        flex-shrink: 0;
+        width: 160rpx;
+        height: 56rpx;
+        font-size: 28rpx;
+        color: rgba(242, 58, 47, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 162, 165, 0.13);
+        border-radius: 86rpx;
+        border: 2rpx solid rgba(242, 58, 47, 1);
+      }
+    }
+  }
+  .process {
+    margin-top: 32rpx;
+    background: rgba(255, 255, 255, 0.68);
+    border-radius: 24rpx 24rpx 24rpx 24rpx;
+    border: 2rpx solid #ffffff;
+    .header {
+      padding: 28rpx 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .title {
+        font-size: 32rpx;
+        color: rgba(242, 58, 47, 1);
+        font-weight: bold;
+      }
+      .dots {
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        .item {
+          width: 40rpx;
+          height: 40rpx;
+          font-size: 24rpx;
+          color: rgba(225, 36, 42, 1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          &.active {
+            background-color: rgba(242, 58, 47, 1);
+            color: #fff;
+          }
+        }
+      }
+    }
+    .container {
+      padding: 40rpx 58rpx;
+      background: #ffffff;
+      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(40, 0, 0, 0.06);
+      border-radius: 24rpx 24rpx 24rpx 24rpx;
+      border: 2rpx solid #ffffff;
+      .c-header {
+        display: flex;
+        .num {
+          flex-shrink: 0;
+          width: 40rpx;
+          height: 40rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #f23a2f;
+          border-radius: 50%;
+          font-size: 35rpx;
+          color: #fff;
+        }
+        .wrap {
+          padding-left: 16rpx;
+          .title {
+            font-size: 32rpx;
+            color: rgba(1, 1, 5, 1);
+            font-weight: bold;
+          }
+          .content {
+            margin-top: 10rpx;
+            font-size: 28rpx;
+            color: rgba(161, 164, 172, 1);
+          }
+        }
+      }
+      .btn {
+        margin-top: 22rpx;
+        font-size: 28rpx;
+        color: rgba(255, 255, 255, 1);
+        width: 556rpx;
+        height: 64rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
+        border-radius: 84rpx 84rpx 84rpx 84rpx;
+      }
+    }
+  }
+  .module1 {
+    margin-top: 48rpx;
+    .m-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .title {
+        font-size: 36rpx;
+        color: rgba(1, 1, 5, 1);
+        font-weight: bold;
+      }
+      .more {
+        font-size: 24rpx;
+        color: rgba(1, 1, 5, 0.36);
+      }
+    }
+  }
+
+  .module2 {
+    margin-top: 48rpx;
+    .m-header {
+      .title {
+        font-size: 36rpx;
+        color: rgba(1, 1, 5, 1);
+        font-weight: bold;
+      }
+    }
+    .m-container {
+      margin-top: 24rpx;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 22rpx;
+      .item {
+        padding: 28rpx 22rpx 36rpx 30rpx;
+        background: linear-gradient(32deg, #ffffff 0%, #fffcfc 55%, #fff0f0 100%);
+        border-radius: 24rpx 24rpx 24rpx 24rpx;
+        border: 2rpx solid #ffffff;
+        .num {
+          font-size: 44rpx;
+          font-weight: bold;
+          color: rgba(242, 58, 47, 1);
+          .sub {
+            font-size: 24rpx;
+            color: rgba(161, 164, 172, 1);
+            font-weight: normal;
+          }
+        }
+        .content {
+          margin-top: 18rpx;
+          font-size: 24rpx;
+          color: rgba(1, 1, 5, 1);
+        }
+        .footer {
+          margin-top: 8rpx;
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-end;
+          .date {
+            font-size: 24rpx;
+            color: rgba(161, 164, 172, 1);
+          }
+          .add {
+            width: 44rpx;
+            height: 44rpx;
+          }
+        }
+      }
+    }
+  }
+}

src/patient/pages/home/index.ts

@@ -0,0 +1,8 @@
+const _app = getApp<IAppOption>();
+
+Page({
+  data: {},
+  onLoad() {},
+});
+
+export {}

src/patient/pages/home/index.wxml

@@ -0,0 +1,110 @@
+<navbar fixed custom-style="background:{{background}}" back>
+  <image class="page-title" slot="left" src="/images/index-title1.png"></image>
+</navbar>
+<view class="page" style="padding-top:{{pageTop}}px;background:url('/images/bg4.png') no-repeat top center/100% 666rpx">
+  <view class="user">
+    <view class="avatar">
+      <image
+        class="avatar-img"
+        src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567"
+      ></image>
+    </view>
+    <view class="wrap">
+      <view class="name">Hi！王先生</view>
+      <view class="content">
+        今天是您加入的第
+        <text class="num">100</text>
+        天
+      </view>
+    </view>
+  </view>
+  <view class="doctor">
+    <view class="none-doctor" wx:if="{{false}}">
+      <view class="content">
+        <view>您还没有绑定任何医生</view>
+        <view class="view">绑定后可随时随地联系专属医生</view>
+      </view>
+      <view class="btn">扫一扫绑定</view>
+    </view>
+    <view class="container" wx:else>
+      <view class="wrap">
+        <view class="bind-list">
+          <view class="item">
+            <image
+              class="avatar-img"
+              src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567"
+            ></image>
+            <view class="name">王医生</view>
+          </view>
+          <view class="add">
+            <image class="icon" src="/images/icon15.png"></image>
+            <view class="name">添加医生</view>
+          </view>
+        </view>
+        <view class="content">随时随地您可以联系专属医生团队</view>
+      </view>
+      <view class="btn">问医生</view>
+    </view>
+  </view>
+  <view class="process">
+    <view class="header">
+      <view class="title">我的专属诊疗流程</view>
+      <view class="dots">
+        <view class="item active">1</view>
+        <view class="item">2</view>
+        <view class="item">3</view>
+        <view class="item">4</view>
+      </view>
+    </view>
+    <view class="container">
+      <view class="c-header">
+        <view class="num">1</view>
+        <view class="wrap">
+          <view class="title">准备您的诊前筛查</view>
+          <view class="content">了解您筛查全部流程和注意事项</view>
+        </view>
+      </view>
+      <view class="btn">查看我的诊疗计划</view>
+    </view>
+  </view>
+  <view class="module1">
+    <view class="m-header">
+      <view class="title">为他们加油</view>
+      <view class="more">
+        查看更多
+        <van-icon name="arrow" />
+      </view>
+    </view>
+  </view>
+  <view class="module2">
+    <view class="m-header">
+      <view class="title">向往的生活记录</view>
+    </view>
+    <view class="m-container">
+      <!-- prettier-ignore -->
+      <view class="item" style="background: url('/images/icon16.png') no-repeat top 32rpx right 24rpx/84rpx 84rpx, linear-gradient(32deg, #ffffff 0%, #fffcfc 55%, #fff0f0 100%);"
+      >
+        <view class="num">13%</view>
+        <view class="content">上次凝血因子水平（IX）</view>
+        <view class="footer">
+          <view class="date">07月23日</view>
+          <image class="add" src="/images/icon18.png"></image>
+        </view>
+      </view>
+      <!-- prettier-ignore -->
+      <view class="item" style="background: url('/images/icon17.png') no-repeat top 32rpx right 24rpx/84rpx 84rpx, linear-gradient(32deg, #ffffff 0%, #fffcfc 55%, #fff0f0 100%);">
+        <view class="num">
+          50
+          <text class="sub">分钟</text>
+        </view>
+        <view class="content">最近一次运动</view>
+        <view class="footer">
+          <view class="date">4月12日</view>
+          <image class="add" src="/images/icon18.png"></image>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+
+<patient-tab-bar></patient-tab-bar>