From 62d2afa966346396bff49036d798ccb47eccd15e Mon Sep 17 00:00:00 2001
From: rongweikang <1174906669@qq.com>
Date: Wed, 20 Mar 2024 15:02:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/recoding/pages/recording/recording.less |   3 -
 src/recoding/pages/recording/recording.tsx  | 220 +++++++++++---------
 2 files changed, 127 insertions(+), 96 deletions(-)

diff --git a/src/recoding/pages/recording/recording.less b/src/recoding/pages/recording/recording.less
index 84197bb..97997b0 100644
--- a/src/recoding/pages/recording/recording.less
+++ b/src/recoding/pages/recording/recording.less
@@ -16,7 +16,6 @@ page {
   color: #666;
   padding: 0 32rpx;
   position: sticky;
-  top: 174rpx;
   z-index: 9;
 }
 
@@ -74,8 +73,6 @@ page {
   background: #f8f8f8;
   padding-top: 25rpx;
   padding-bottom: 29rpx;
-  position: sticky;
-  top: 286rpx;
   z-index: 9;
 }
 
diff --git a/src/recoding/pages/recording/recording.tsx b/src/recoding/pages/recording/recording.tsx
index 676d707..8a42d8f 100644
--- a/src/recoding/pages/recording/recording.tsx
+++ b/src/recoding/pages/recording/recording.tsx
@@ -61,6 +61,8 @@ export default class Recording extends Component<any, any> {
         clockImageList: [],
         clockContent: "",
       },
+      navigationBarHeight: '',
+      statusBarHeight: ''
     };
   }
 
@@ -267,13 +269,16 @@ export default class Recording extends Component<any, any> {
     this.getLatestClockRecord();
     this.getClockStatistics();
     this.DayTime();
+    this.setStatusBar();
+
   }
 
   componentDidShow() { }
 
   componentDidHide() { }
 
-  async initData() { }
+  async initData() {
+  }
   // 选择年份
   onChangeYear(event) {
     this.setState({ year: event.detail.value });
@@ -407,6 +412,25 @@ export default class Recording extends Component<any, any> {
       delta: 1,
     });
   }
+
+  setStatusBar() {
+
+    Taro.getSystemInfoAsync({
+      success: (res) => {
+        const statusBarHeight = res.statusBarHeight || 0;
+        // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
+        const custom = Taro.getMenuButtonBoundingClientRect();
+        // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
+        const navigationBarHeight =
+          custom.height + (custom.top - statusBarHeight) * 2;
+        this.setState({
+          statusBarHeight,
+          navigationBarHeight,
+        });
+      },
+    });
+  }
+
   render() {
     let {
       current,
@@ -424,12 +448,19 @@ export default class Recording extends Component<any, any> {
       monthTime,
       show,
       punchInInfo,
+      navigationBarHeight,
+      statusBarHeight
     } = this.state;
-
+    const statusBarHeightRpx = statusBarHeight * 2;
+    const navigationBarHeightRpx = navigationBarHeight * 2;
+    const height = statusBarHeightRpx + navigationBarHeightRpx
     return (
       <Block>
-        <Navbar isBack titleSlot="护理记录"></Navbar>
-        <View className="tabs">
+        <Navbar isBack titleSlot='护理记录'></Navbar>
+        <View className='tabs' style={{
+          top: height + "rpx", position: 'sticky'
+        }}
+        >
           <View
             className={classnames("tab", {
               tab_active: current === 0,
@@ -450,7 +481,10 @@ export default class Recording extends Component<any, any> {
           </View>
         </View>
         {current === 0 && (
-          <ScrollView className="products_list" scroll-x="true">
+          <ScrollView className='products_list' scroll-x='true' style={{
+            top: height + 110 + 'rpx', position: 'sticky'
+          }}
+          >
             <View
               className={classnames("all", {
                 products_item_active: !curIndex,
@@ -468,11 +502,11 @@ export default class Recording extends Component<any, any> {
                 onClick={this.onChangeProduct.bind(this, item.id)}
               >
                 <Image
-                  className="products_cover"
+                  className='products_cover'
                   src={item.logo}
-                  mode="aspectFill"
+                  mode='aspectFill'
                 ></Image>
-                <View className="products_title">{item.name}</View>
+                <View className='products_title'>{item.name}</View>
               </View>
             ))}
           </ScrollView>
@@ -480,17 +514,17 @@ export default class Recording extends Component<any, any> {
 
         {current === 0 && recordList.length === 0 && (
           <View>
-            <View className="nodata">
+            <View className='nodata'>
               <Image
-                className="nodata_img"
+                className='nodata_img'
                 src={require("@/img/nodata.png")}
               ></Image>
-              <View className="nodata_text">暂无数据</View>
+              <View className='nodata_text'>暂无数据</View>
             </View>
           </View>
         )}
         {current === 0 && (
-          <View style="padding-bottom:200px">
+          <View style='padding-bottom:200px'>
             {/* <View className='instrument_item' >
               <View className='instrument_top flex sb aitems'>
                 <View className='time_box flex aitems'>
@@ -517,12 +551,12 @@ export default class Recording extends Component<any, any> {
               </View>
             </View> */}
 
-            <View className="instrument_list ">
+            <View className='instrument_list '>
               {recordList.map((item: any, index: any) => (
-                <View className="recording-box" key={item.id}>
-                  <View className="box-top">
-                    <View className="top-left">
-                      <View className="date">{item.createTime}</View>
+                <View className='recording-box' key={item.id}>
+                  <View className='box-top'>
+                    <View className='top-left'>
+                      <View className='date'>{item.createTime}</View>
                       <View
                         className={classnames("tip", {
                           tag_active: item.online === 2,
@@ -533,7 +567,7 @@ export default class Recording extends Component<any, any> {
                     </View>
                     {item.instrumentType === 2 && (
                       <View
-                        className="top-right"
+                        className='top-right'
                         onClick={this.toReport.bind(
                           this,
                           item.instrumentId,
@@ -543,23 +577,23 @@ export default class Recording extends Component<any, any> {
                       >
                         回看报告
                         <Image
-                          className="arrow_icon"
+                          className='arrow_icon'
                           src={require("@/img/index/right.png")}
-                          mode="aspectFill"
+                          mode='aspectFill'
                         ></Image>
                       </View>
                     )}
                   </View>
-                  <View className="box-bottom">
+                  <View className='box-bottom'>
                     <Image
-                      className="recording_img"
+                      className='recording_img'
                       src={item.modeImage}
                     ></Image>
-                    <View className="bottom-right">
-                      <View className="title">{item.instrumentName}</View>
-                      <View className="subtitle-box">
-                        <View className="subtitle">模式：{item.modeName}</View>
-                        <View className="subtitle">
+                    <View className='bottom-right'>
+                      <View className='title'>{item.instrumentName}</View>
+                      <View className='subtitle-box'>
+                        <View className='subtitle'>模式：{item.modeName}</View>
+                        <View className='subtitle'>
                           护理时间：{item.nursingTime}
                         </View>
                       </View>
@@ -571,7 +605,7 @@ export default class Recording extends Component<any, any> {
           </View>
         )}
         {current === 1 && (
-          <View style="padding-bottom:200px">
+          <View style='padding-bottom:200px'>
             {/* <View className='nodata'>
               <Image
                 className='nodata_img'
@@ -579,52 +613,52 @@ export default class Recording extends Component<any, any> {
               ></Image>
               <View className='nodata_text'>暂无数据</View>
             </View> */}
-            <View style="height: 30rpx; background: #F8F8F8"></View>
-            <View className="clock_in_statistics m-x-30 flex sb">
-              <View className="flex sb ab">
-                <View className="clock_in_statistics_title">年度打卡统计</View>
+            <View style='height: 30rpx; background: #F8F8F8'></View>
+            <View className='clock_in_statistics m-x-30 flex sb'>
+              <View className='flex sb ab'>
+                <View className='clock_in_statistics_title'>年度打卡统计</View>
                 <Picker
-                  mode="date"
-                  fields="year"
+                  mode='date'
+                  fields='year'
                   onChange={this.onChangeYear.bind(this)}
-                  value="{{year}}"
-                  end="{{today}}"
+                  value='{{year}}'
+                  end='{{today}}'
                 >
-                  <View className="clock_in_statistics_date flex aitems">
+                  <View className='clock_in_statistics_date flex aitems'>
                     <View>{year}年</View>
                     <Image
-                      className="more_icon"
+                      className='more_icon'
                       src={require("@/img/arrow-down.png")}
-                      mode="widthFix"
+                      mode='widthFix'
                     ></Image>
                   </View>
                 </Picker>
               </View>
-              <View className="chart flex sb">
+              <View className='chart flex sb'>
                 {monthTime.map((item) => (
-                  <View className="flex fc aitems" key={item.month}>
+                  <View className='flex fc aitems' key={item.month}>
                     {item.time > 0 && (
-                      <View className="buoy">{item.time}天</View>
+                      <View className='buoy'>{item.time}天</View>
                     )}
                     <View
-                      className="column"
+                      className='column'
                       style={{ height: `calc(186/31*${item.time}rpx)` }}
                     ></View>
-                    <View className="month">{item.month}</View>
+                    <View className='month'>{item.month}</View>
                   </View>
                 ))}
               </View>
             </View>
-            <View style="padding-bottom: env(safe-area-inset-bottom)">
-              <View className="month_box m-x-30">
+            <View style='padding-bottom: env(safe-area-inset-bottom)'>
+              <View className='month_box m-x-30'>
                 {clockStatistics.map((item) => (
-                  <View className="month_statistics" key={item.id}>
-                    <View className="flex aitems sb">
-                      <View className="time">
+                  <View className='month_statistics' key={item.id}>
+                    <View className='flex aitems sb'>
+                      <View className='time'>
                         {item.year}年{item.month}月
                       </View>
                       <View
-                        className="more_box flex aitems"
+                        className='more_box flex aitems'
                         onClick={this.onChangeMore.bind(
                           this,
                           item.id,
@@ -632,7 +666,7 @@ export default class Recording extends Component<any, any> {
                           item.month
                         )}
                       >
-                        <View className="more_text">
+                        <View className='more_text'>
                           {" "}
                           {!item.isMore ? "展开更多" : "收起更多"}
                         </View>
@@ -642,51 +676,51 @@ export default class Recording extends Component<any, any> {
                               ? "rotate(180deg)"
                               : "rotate(0deg)",
                           }}
-                          className="more_icon"
+                          className='more_icon'
                           src={require("@/img/arrow-down.png")}
-                          mode="widthFix"
+                          mode='widthFix'
                         ></Image>
                       </View>
                     </View>
-                    <View style="height: 59rpx"></View>
-                    <View className="statistic">
-                      <View className="statistic_item">
-                        <View className="statistic_num">{item.clockNum}</View>
-                        <View className="statistic_desc">本月打卡天数</View>
+                    <View style='height: 59rpx'></View>
+                    <View className='statistic'>
+                      <View className='statistic_item'>
+                        <View className='statistic_num'>{item.clockNum}</View>
+                        <View className='statistic_desc'>本月打卡天数</View>
                       </View>
-                      <View className="statistic_item">
-                        <View className="statistic_num">
+                      <View className='statistic_item'>
+                        <View className='statistic_num'>
                           {(item.percentage * 100).toFixed(2)}%
                         </View>
-                        <View className="statistic_desc">超越花至用户</View>
+                        <View className='statistic_desc'>超越花至用户</View>
                       </View>
-                      <View className="border"></View>
+                      <View className='border'></View>
                     </View>
                     {item.isMore && item.detail && (
                       <View>
                         {item.detail.map((obj) => (
                           <View key={obj.id}>
-                            <View style="height: 57rpx"></View>
-                            <View className="month_item">
-                              <View className="month_item_date">
+                            <View style='height: 57rpx'></View>
+                            <View className='month_item'>
+                              <View className='month_item_date'>
                                 {obj.updateTime}
                               </View>
-                              <View className="month_image_box flex sb">
+                              <View className='month_image_box flex sb'>
                                 {obj.clockImg.map((img) => (
                                   <Image
                                     key={img}
-                                    className="month_item_cover"
+                                    className='month_item_cover'
                                     src={img}
                                   ></Image>
                                 ))}
                               </View>
-                              <View className="month_item_date">
+                              <View className='month_item_date'>
                                 {/* 小紫弹智能射频仪、花至抗老射频仪PRO{" "} */}
                                 {obj.instrumentName === null
                                   ? ""
                                   : obj.instrumentName}
                               </View>
-                              <View className="month_item_note">
+                              <View className='month_item_note'>
                                 {obj.clockContent}
                               </View>
                             </View>
@@ -701,8 +735,8 @@ export default class Recording extends Component<any, any> {
           </View>
         )}
         {!clockShow && ViewAddInstrument === "true" && (
-          <View className="footer flex aitems">
-            <View className="btn" onClick={this.setShow.bind(this, true)}>
+          <View className='footer flex aitems'>
+            <View className='btn' onClick={this.setShow.bind(this, true)}>
               前往打卡
             </View>
             {/* <View className="text" onClick={this.back}>
@@ -712,64 +746,64 @@ export default class Recording extends Component<any, any> {
         )}
 
         <Popup show={show} onClose={() => this.setState({ show: false })}>
-          <View className="popBox">
+          <View className='popBox'>
             <Image
-              className="close_icon"
+              className='close_icon'
               src={require("@/img/close.png")}
-              mode="widthFix"
+              mode='widthFix'
               onClick={this.setShow.bind(this, false)}
             ></Image>
-            <View className="popTitle">今日打卡</View>
-            <View className="popSubtitle">
+            <View className='popTitle'>今日打卡</View>
+            <View className='popSubtitle'>
               本月您已打卡
-              <View className="bold">{clockStatistics[0]?.clockNum}</View>{" "}
+              <View className='bold'>{clockStatistics[0]?.clockNum}</View>{" "}
               天，超越
-              <View className="bold">
+              <View className='bold'>
                 {(clockStatistics[0]?.percentage * 100).toFixed(1)}%
               </View>
               花至用户
             </View>
-            <View className="img_box">
+            <View className='img_box'>
               {punchInInfo.clockImageList.map((item, index) => (
-                <View key={item} className="img">
-                  <Image className="showImg" src={item} mode="widthFix"></Image>
+                <View key={item} className='img'>
+                  <Image className='showImg' src={item} mode='widthFix'></Image>
                   <Image
-                    className="closeImg"
+                    className='closeImg'
                     src={require("@/img/close1.png")}
-                    mode="widthFix"
+                    mode='widthFix'
                     onClick={this.delImg.bind(this, index)}
                   ></Image>
                 </View>
               ))}
               {punchInInfo.clockImageList.length < 3 && (
                 <View
-                  className="addBox"
+                  className='addBox'
                   onClick={this.handleChooseImage.bind(this)}
                 >
                   <Image
-                    className="showImg"
+                    className='showImg'
                     src={require("@/img/clock_in_upload/add-image.png")}
-                    mode="widthFix"
+                    mode='widthFix'
                   ></Image>
                 </View>
               )}
             </View>
-            <View className="info4">
-              <View className="content">
+            <View className='info4'>
+              <View className='content'>
                 <Textarea
-                  placeholderStyle="color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;"
-                  placeholder="请记录一下今天的护理心得吧"
+                  placeholderStyle='color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;'
+                  placeholder='请记录一下今天的护理心得吧'
                   maxlength={120}
                   onInput={this.handleTextareaInput.bind(this)}
                   value={punchInInfo.clockContent}
                 ></Textarea>
               </View>
-              <View className="tip">
+              <View className='tip'>
                 {"（" + (punchInInfo.clockContent.length || 0) + "/120）"}
               </View>
             </View>
-            <View className="popbtnbox flex aitems jcenter">
-              <View className="btn1" onClick={this.submit.bind(this)}>
+            <View className='popbtnbox flex aitems jcenter'>
+              <View className='btn1' onClick={this.submit.bind(this)}>
                 确认提交
               </View>
             </View>