feat: add report & report detail pages

app.json

@@ -18,7 +18,8 @@
     "pages/openArea/openArea",
     "pages/rechargeRecord/rechargeRecord",
     "pages/myAppointment/myAppointment",
-    "pages/myFile/myFile"
+    "pages/myFile/myFile",
+    "pages/reportDetail/reportDetail"
   ],
   "usingComponents": {
     "van-icon": "@vant/weapp/icon/index",

app.wxss

@@ -2,6 +2,9 @@
 page {
   height: 100%;
   --maincolor: #45A6B5;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
+    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
+    sans-serif;
 }
 .container {
   height: 100%;

pages/report/report.js

@@ -5,7 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    reportList: [1,1,1,1]
   },
 
   /**
@@ -58,9 +58,11 @@ Page({
   },
 
   /**
-   * 用户点击右上角分享
+   * 点击报告进入详情
    */
-  onShareAppMessage() {
-
+  handleDetail() {
+    wx.navigateTo({
+      url: '/pages/reportDetail/reportDetail',
+    })
   }
 })

pages/report/report.json

@@ -1,3 +1,3 @@
 {
-  "usingComponents": {}
+  "navigationBarTitleText": "报告"
 }

pages/report/report.wxml

@@ -1,2 +1,30 @@
 <!--pages/report/report.wxml-->
-<text>pages/report/report.wxml</text>
+<view class="report-content">
+  <block wx:if="{{reportList.length == 0}}">
+    <view class="nodata" >
+      <van-empty style="margin-top: 200rpx;" description="当前不存在报告，立即去预约检测" />
+      <view class="itt-btn">立即预约</view>
+    </view>
+  </block>
+  <block wx:else>
+    <view class="repot-list">
+      <view class="report-item">
+        <view class="report-name">
+          <text>检测人：</text>
+          <text>范一岚</text>
+        </view>
+        <view class="report-this">
+          <view class="report-tap" wx:for="{{reportList}}" wx:key="index" bindtap="handleDetail">
+            <view class="tap-img">
+              <image class="imagereport" src="../../imaes/baogao@2x.png"></image>
+            </view>
+            <view class="reposttime">
+              <text>2022-09-11</text>
+              <text> 报告</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>

pages/report/report.wxss

@@ -1 +1,69 @@
-/* pages/report/report.wxss */
+/* pages/report/report.wxss */
+.report-content {
+  width: 100%;
+  height: 100%;
+  background-color: #f7f7ff;
+  padding-top: 1rpx;
+}
+.nodata {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+.itt-btn {
+  position: fixed;
+  bottom: 80rpx;
+  width: 690rpx;
+  height: 80rpx;
+  border-radius: 10rpx;
+}
+.repot-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+.report-item {
+  width: 690rpx;
+  margin: 20rpx auto 0;
+}
+.report-name {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333333;
+  font-family: PingFang SC;
+}
+.report-this {
+  width: 640rpx;
+  height: 336rpx;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.report-tap {
+  width: 280rpx;
+  height: 100%;
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tap-img {
+  width: 200rpx;
+  height: 218rpx;
+}
+.imagereport {
+  width: 100%;
+  height: 100%;
+}
+.reposttime {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  margin-top: 20rpx;
+  text-align: center;
+}

pages/reportDetail/reportDetail.js

@@ -0,0 +1,141 @@
+// pages/reportDetail/reportDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    reportType: 1, // 0 小结 1 系统
+    leftNavActive: 1,
+    leftNav: [
+      {
+        index: 0,
+        name: '检测小结'
+      },
+      {
+        index: 1,
+        name: '循环系统'
+      },
+      {
+        index: 2,
+        name: '呼吸系统'
+      },
+      {
+        index: 3,
+        name: '消化系统'
+      },
+      {
+        index: 4,
+        name: '泌尿系统'
+      },
+      {
+        index: 5,
+        name: '血液系统'
+      },
+      {
+        index: 6,
+        name: '内分泌系统'
+      },
+      {
+        index: 7,
+        name: '营养代谢'
+      },
+      {
+        index: 8,
+        name: '神经系统'
+      },
+      {
+        index: 9,
+        name: '免疫系统'
+      },
+      {
+        index: 10,
+        name: '运动系统'
+      },
+      {
+        index: 11,
+        name: '感官系统'
+      }
+    ],
+    systemList: [1,1,1,1,1,1,1,1,1,1]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    wx.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    setTimeout(() => {
+      wx.hideLoading({
+        success: (res) => {},
+      })
+    }, 1500);
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击左侧系统分类
+   */
+  handleSwitchNav(e) {
+    var navIndex = e.currentTarget.dataset.index
+    var that = this
+    wx.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    setTimeout(() => {
+      wx.hideLoading({
+        success: (res) => {
+          that.setData({
+            leftNavActive: navIndex,
+            reportType: navIndex
+          })
+        },
+      })
+    }, 1500);
+  }
+})

pages/reportDetail/reportDetail.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "报告"
+}

pages/reportDetail/reportDetail.wxml

@@ -0,0 +1,64 @@
+<!--pages/reportDetail/reportDetail.wxml-->
+<view class="detail ittflex-jcs">
+  <view class="left-nav">
+    <view class="left-nav-item ittflex {{leftNavActive == index ? 'left-nav-item-active': ''}} {{leftNavActive - 1 == index ? 'noborder' : ''}}" wx:for="{{leftNav}}" wx:key="index" data-index="{{index}}" bindtap="handleSwitchNav">{{item.name}}</view>
+  </view>
+  <view class="right-value">
+    <!-- 检测小结 -->
+    <block wx:if="{{reportType === 0}}">
+      <view class="summary" >
+        <view class="s-title ittflex-jcs">根据检测结果，您的健康风险最高的是：</view>
+        <view class="s-main">
+          <view class="s-item s-item-nomargin">
+            <view class="s-item-title">（1）心血管疾病风险较高</view>
+            <view class="s-item-value">建议您有规律地锻炼，控制血压，保持健康体重，维持情绪平稳，避免吃高热量食物，控制盐的摄入量，停止吸烟，避免饮酒过量，适量补充辅脢Q10等抗氧化物，鱼油或亚麻籽油，复合维生素B，矿物质钙，镁等
+            </view>
+          </view>
+          <view class="s-item">
+            <view class="s-item-title">（2）心血管疾病风险较高</view>
+            <view class="s-item-value">建议您避免吸烟，避免吸入汽车与摩托车产生的尾气，注意各种化学喷剂、清洁剂环、境荷尔蒙及农药残留，避免不必要的阳光暴晒、紫外线照射、X光和CT检查，适量补充抗氧化物并建议接受24小时排毒疗程
+            </view>
+          </view>
+          <view class="s-item">
+            <view class="s-item-title">（2）心血管疾病风险较高</view>
+            <view class="s-item-value">建议您避免吸烟，避免吸入汽车与摩托车产生的尾气，注意各种化学喷剂、清洁剂环、境荷尔蒙及农药残留，避免不必要的阳光暴晒、紫外线照射、X光和CT检查，适量补充抗氧化物并建议接受24小时排毒疗程
+            </view>
+          </view>
+        </view>
+      </view>
+    </block>
+    <block wx:else>
+      <view class="system" >
+        <view class="sys-item" wx:for="{{systemList}}" wx:key="index">
+          <view class="sys-header ittflex">1.头部</view>
+          <view class="sys-content">
+            <view class="sys-content-item ittflex-jcs">
+              <view class="sts-lanel">脑部缺血风险</view>
+              <view class="risk-level ittflex-jcs">
+                <view class="level level-a red"></view>
+                <view class="level level-b"></view>
+                <view class="level level-c"></view>
+              </view>
+            </view>
+            <view class="sys-content-item ittflex-jcs">
+              <view class="sts-lanel">中风风险</view>
+              <view class="risk-level ittflex-jcs">
+                <view class="level level-a red"></view>
+                <view class="level level-b red"></view>
+                <view class="level level-c"></view>
+              </view>
+            </view>
+            <view class="sys-content-item ittflex-jcs">
+              <view class="sts-lanel">脑部血管损伤风险</view>
+              <view class="risk-level ittflex-jcs">
+                <view class="level level-a red"></view>
+                <view class="level level-b red"></view>
+                <view class="level level-c red"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </block>
+  </view>
+</view>

pages/reportDetail/reportDetail.wxss

@@ -0,0 +1,107 @@
+/* pages/reportDetail/reportDetail.wxss */
+.detail {
+  width: 100%;
+  height: 100%;
+}
+.left-nav {
+  width: 220rpx;
+  height: 100%;
+  overflow-y: scroll;
+}
+.right-value {
+  width: 530rpx;
+  height: 100%;
+  overflow-y: scroll;
+}
+.left-nav-item {
+  width: 100%;
+  height: 122rpx;
+  background-color: #f7f7f7;
+  border-bottom: 1rpx solid #dddddd;
+  box-sizing: border-box;
+  font-size: 30rpx;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #999999;
+}
+.left-nav-item-active {
+  background-color: #fff;
+  border: 0;
+  color: var(--maincolor);
+}
+.noborder {
+  border: 0;
+}
+.s-title {
+  width: 100%;
+  height: 122rpx;
+  font-size: 26rpx;
+  color: #333333;
+  text-indent: 30rpx;
+}
+.s-item {
+  margin-top: 40rpx;
+}
+.s-item-nomargin {
+  margin: 0;
+}
+.s-item-title {
+  font-size: 26rpx;
+  color: #333;
+  padding-top: 0 30rpx;
+}
+.s-item-value {
+  font-size: 26rpx;
+  margin-top: 10rpx;
+  color: #666;
+  line-height: 36rpx;
+  padding: 0 30rpx;
+}
+.system {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+}
+.sys-item {
+  width: 100%;
+  min-height: 60rpx;
+}
+.sys-header {
+  width: 100%;
+  height: 60rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  background-color: rgba(69,166,181,.5);
+}
+.sys-content-item {
+  width: 100%;
+  height: 88rpx;
+  border: 1rpx solid #DDDDDD;
+  box-sizing: border-box;
+  border-top: 0;
+}
+.sts-lanel {
+  width: 350rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  height: 100%;
+  text-indent: 30rpx;
+  line-height: 88rpx;
+}
+.level {
+  width: 60rpx;
+  height: 88rpx;
+}
+.level-a {
+  border-left: 1rpx solid #ddd;
+  border-right: 1rpx solid #ddd;
+}
+.level-b {
+  border-right: 1rpx solid #ddd;
+}
+.red {
+  background-color:#9A1D16;
+}