From d628022b3ca2060e10fb617002a4545a60db6f55 Mon Sep 17 00:00:00 2001
From: rongweikang <1174906669@qq.com>
Date: Wed, 21 Feb 2024 18:10:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8A=A4=E7=90=86=E6=8A=A5?=
 =?UTF-8?q?=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/recording/recording.less | 124 ++++++++++++-
 src/pages/recording/recording.tsx  | 277 ++++++++++++++++++++++-------
 src/utils/Interface.js             |   2 +-
 3 files changed, 339 insertions(+), 64 deletions(-)

diff --git a/src/pages/recording/recording.less b/src/pages/recording/recording.less
index c949161..d585b30 100644
--- a/src/pages/recording/recording.less
+++ b/src/pages/recording/recording.less
@@ -478,19 +478,28 @@ page {
   height: 153rpx;
   box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
   background: #ffffff;
+  padding-right: 42rpx;
+  justify-content: center;
 }
 
 .btn {
-  width: 690rpx;
+  width: 540rpx;
   height: 90rpx;
   background: #000000;
   border-radius: 45rpx;
   color: #fff;
-  text-align: center; 
+  text-align: center;
   line-height: 90rpx;
   font-weight: bold;
   font-size: 32rpx;
-  margin: 0 auto;
+}
+
+.text {
+  font-size: 32rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #000000;
+  margin-left:48rpx;
 }
 // .empty {
 //   display: flex;
@@ -621,3 +630,112 @@ page {
     }
   }
 }
+
+.van-popup {
+  border-radius: 30rpx;
+  .popBox {
+    box-sizing: border-box;
+    width: 670rpx;
+    height: 840rpx;
+    background: #ffffff;
+    border-radius: 30rpx;
+    position: relative;
+    padding: 42rpx 30rpx 0;
+    .close_icon {
+      position: absolute;
+      width: 50rpx;
+      height: 50rpx;
+      top: 34rpx;
+      right: 34rpx;
+    }
+    .popTitle {
+      font-size: 36rpx;
+      text-align: center;
+      font-family: PingFang SC;
+      font-weight: bold;
+    }
+    .popSubtitle {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      font-size: 28rpx;
+      text-align: center;
+      margin-top: 50rpx;
+      .bold {
+        font-size: 38rpx;
+        font-weight: bold;
+      }
+    }
+    .img_box {
+      margin: 58rpx 0 37rpx 0;
+      display: flex;
+      flex-wrap: wrap;
+
+      .img {
+        position: relative;
+        margin-right: 35rpx;
+        .closeImg {
+          position: absolute;
+          top: 10rpx;
+          right: 10rpx;
+          width: 30rpx;
+        }
+      }
+      .img:last-child {
+        margin-right: 0;
+      }
+      .addBox {
+        width: 180rpx;
+        height: 180rpx;
+        background: #ffffff;
+        border: 1px solid #dddddd;
+        border-radius: 20rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        Image {
+          width: 40rpx;
+        }
+      }
+      .showImg {
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 20rpx;
+      }
+    }
+    .info4 {
+      position: relative;
+      textarea {
+        padding: 28rpx 30rpx;
+        width: 610rpx;
+        height: 186rpx;
+        background: #ffffff;
+        border: 1px solid #dddddd;
+        border-radius: 3rpx;
+        box-sizing: border-box;
+      }
+      .tip {
+        position: absolute;
+        right: 20rpx;
+        bottom: 22rpx;
+        font-size: 22rpx;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #cccccc;
+      }
+    }
+    .btn1 {
+      font-style: normal;
+      width: 270rpx;
+      height: 90rpx;
+      line-height: 90rpx;
+      background: #000000;
+      text-align: center;
+      border-radius: 45rpx;
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-top: 55rpx;
+      color: #ffffff;
+    }
+  }
+}
diff --git a/src/pages/recording/recording.tsx b/src/pages/recording/recording.tsx
index 9b59cc7..25551f5 100644
--- a/src/pages/recording/recording.tsx
+++ b/src/pages/recording/recording.tsx
@@ -2,17 +2,17 @@ import Taro from "@tarojs/taro";
 import classnames from "classnames";
 import { Component, PropsWithChildren, useEffect, useState } from "react";
 
-import { Block, View, Text, Image, Input, Button, ScrollView, Picker } from "@tarojs/components";
+import { Block, View, Text, Image, Input, Button, ScrollView, Picker, Textarea } from "@tarojs/components";
 import { go } from "@/utils/traoAPI";
-import { Tab, Tabs, Dialog } from "@antmjs/vantui";
+import { Tab, Tabs, Dialog, Popup } from "@antmjs/vantui";
 
 /** 自定义组件 **/
 import Navbar from "../../components/navbar/navbar";
 import PopupClock from "../../components/popup/popup-clock";
 /** 自定义组件 **/
-
 import { InstrumentInfo } from '../../utils/Interface'
 import { date, getdates, previewImage } from "../../utils/util";
+import { showModal } from '../../utils/traoAPI.js'
 
 import "./recording.less";
 
@@ -44,14 +44,18 @@ export default class Recording extends Component<any, any> {
         { month: 11, time: 0 },
         { month: 12, time: 0 },
       ],
-      show:true
+      show: false,
+      punchInInfo: {
+        clockImageList: [],
+        clockContent: '',
+      },
     };
   }
 
   componentDidMount() { }
 
   componentWillUnmount() { }
-
+  // 格式化时间
   getTime(time) {
     const hour = time.slice(0, 2);
     const minute = time.slice(3, 5);
@@ -63,14 +67,14 @@ export default class Recording extends Component<any, any> {
       return minute + '分' + second + '秒'
     }
   }
-
+  // 获取仪器列表
   async getBindingInstrumentList() {
     let res = await InstrumentInfo.bindingInstrumentList()
     if (res.data.code === 200) {
       this.setState({ bindingInstrumentList: res.data.data })
     }
   }
-
+  // 获取护理历程
   async getRecord(id) {
     let data = {}
     if (id != null) {
@@ -86,7 +90,22 @@ export default class Recording extends Component<any, any> {
       this.setState({ recordList: res.data.rows })
     }
   }
-
+  // 查询用户当天最新的一条打卡记录
+  async getLatestClockRecord() {
+    let res = await InstrumentInfo.apiClock.getLatestClockRecord()
+    if (res.data.code === 200) {
+      if (!res.data.data) {
+        this.setShow(true)
+      } else {
+        let punchInInfo = {
+          clockImageList: res.data.data.clockImg,
+          clockContent: res.data.data.clockContent,
+        }
+        this.setState({ punchInInfo })
+      }
+    }
+  }
+  // 添加打卡记录（测试用）
   async addLog() {
     let data = {
       instrumentId: 57,
@@ -110,8 +129,10 @@ export default class Recording extends Component<any, any> {
       if (res.data.data.length > 0) {
         res.data.data.map((item, index) => {
           item.isMore = false
+          item.detail = []
           if (index === 0) {
             item.isMore = true
+            this.getList(item.id, item.year, item.month)
           }
           this.state.monthTime.map(monthItem => {
             if (monthItem.month == item.month) {
@@ -141,33 +162,62 @@ export default class Recording extends Component<any, any> {
 
     }
   }
-
-  setShow(show: boolean){
-    this.setState({show})
+  // 文本框输入文字
+  handleTextareaInput(e) {
+    const punchInInfo = this.state.punchInInfo
+    punchInInfo.clockContent = e.detail.value
+    this.setState({ punchInInfo })
   }
-
-  closeAlert(){
-    this.setShow(false)
+  // 打开/关闭弹窗
+  setShow(show: boolean) {
+    this.setState({ show })
   }
-
+  //  选择仪器
   onChangeProduct(id) {
     this.setState({ curIndex: id })
     this.getRecord(id)
-    // this.addLog()
+    this.addLog()
   };
-
-  onChangeMore(id) {
+  // 展开收起
+  onChangeMore(id, year, month) {
     this.state.clockStatistics.map(item => {
       if (item.id === id) {
         item.isMore = !item.isMore
+        if (item.isMore && item.detail.length === 0) {
+          this.getList(id, year, month)
+        }
       }
     })
     this.setState({ clockStatistics: this.state.clockStatistics })
+
+  }
+
+  // 获取当月打卡记录
+  async getList(id, year, month) {
+    let data = {
+      year, month
+    }
+    let res = await InstrumentInfo.apiClock.getList(data)
+    if (res.data.code === 200) {
+      console.log(this.state.clockStatistics, 88888);
+
+      this.state.clockStatistics.map(item => {
+        if (item.id === id) {
+          item.detail = res.data.data
+          item.detail.map(obj => {
+            obj.updateTime = getdates(obj.updateTime).replace(/-/g, '.')
+          })
+        }
+      })
+      this.setState({ clockStatistics: this.state.clockStatistics })
+    }
   }
 
   async onLoad() {
     this.getRecord(null)
     this.getBindingInstrumentList()
+    this.getLatestClockRecord()
+    this.getClockStatistics()
   }
 
   componentDidShow() { }
@@ -175,12 +225,12 @@ export default class Recording extends Component<any, any> {
   componentDidHide() { }
 
   async initData() { }
-
+  // 选择年份
   onChangeYear(event) {
     this.setState({ year: event.detail.value })
     this.getClockStatistics(event.detail.value)
   }
-
+  //  点击tab栏
   onTab = async (event) => {
     const { current } = event.currentTarget.dataset;
     this.setState({ current });
@@ -188,13 +238,76 @@ export default class Recording extends Component<any, any> {
       this.getClockStatistics()
     }
   };
-
+  //  跳转到护理报告
   toReport(id, recordId) {
     go("/pages/face_report/face_report?id=" + id + "&recordId=" + recordId);
   }
+  // 上传图片
+  handleChooseImage() {
+    Taro.chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        const tempFilePaths = res.tempFiles.map((item) => item.tempFilePath)
+        tempFilePaths?.forEach((item) => {
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          InstrumentInfo.apiClock.clockFileUpload({ clockImg: item }).then((res) => {
+            const currentImage = res.data.url
+            const newImageList =
+              this.state.punchInInfo.clockImageList.length >= 3
+                ? this.state.punchInInfo.clockImageList
+                : [... this.state.punchInInfo.clockImageList, currentImage]
+            const punchInInfo = this.state.punchInInfo
+            punchInInfo.clockImageList = newImageList
+            this.setState({ punchInInfo })
+          })
+        })
+      },
+      fail: (err) => {
+        console.info('err', err)
+      },
+    })
+  }
+  // 删除打卡图片
+  delImg(i) {
+    const punchInInfo = this.state.punchInInfo
+    punchInInfo.clockImageList.splice(i, 1)
+    this.setState({ punchInInfo })
+  }
+  async submit() {
+    let punchInInfo = this.state.punchInInfo || {}
+    if (!punchInInfo.clockImageList.length) {
+      Taro.showToast({
+        title: '请上传图片',
+        icon: 'none',
+      })
+      return
+    }
+    if (!punchInInfo.clockContent) {
+      Taro.showToast({
+        title: '请输入打卡心得',
+        icon: 'none',
+      })
+      return
+    }
+    InstrumentInfo.apiClock.postInsertClockLog(punchInInfo).then((res) => {
+      showModal({
+        t2: '您已完成今日打卡',
+        btn1show: false,
+      }).then(() => {
+        this.setShow(false)
+      })
 
+    })
+  }
+  back() {
+    Taro.navigateBack({
+      delta: 1,
+    })
+  }
   render() {
-    let { current, array, name, recordList, bindingInstrumentList, curIndex, clockStatistics, statistics, year, today, monthTime,show } = this.state;
+    let { current, array, name, recordList, bindingInstrumentList, curIndex, clockStatistics, statistics, year, today, monthTime, show, punchInInfo } = this.state;
     return (
       <Block>
         <Navbar isBack titleSlot='护理记录'></Navbar>
@@ -240,7 +353,7 @@ export default class Recording extends Component<any, any> {
         </ScrollView>}
 
         {current === 0 &&
-          array.length ===
+          recordList.length ===
           0 && (
             <View>
               <View className='nodata'>
@@ -292,10 +405,12 @@ export default class Recording extends Component<any, any> {
                       })}
                       >{item.online ? '在线' : '离线'}</View>
                     </View>
-                    <View className='top-right' onClick={this.toReport.bind(this, item.instrumentId, item.id)}>
-                      回看报告
-                      <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
-                    </View>
+                    {item.instrumentType === 2 &&
+                      <View className='top-right' onClick={this.toReport.bind(this, item.instrumentId, item.id)}>
+                        回看报告
+                        <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
+                      </View>
+                    }
                   </View>
                   <View className='box-bottom'>
                     <Image
@@ -347,7 +462,6 @@ export default class Recording extends Component<any, any> {
                     </View>
                   ))
                 }
-
               </View>
             </View>
             <View style='padding-bottom: env(safe-area-inset-bottom)' >
@@ -356,7 +470,7 @@ export default class Recording extends Component<any, any> {
                   <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' onClick={this.onChangeMore.bind(this, item.id)}>
+                      <View className='more_box flex aitems' onClick={this.onChangeMore.bind(this, item.id, item.year, item.month)}>
                         <View className='more_text'> {!item.isMore ? '展开更多' : '收起更多'}</View>
                         <Image style={{ transform: (item.isMore) ? 'rotate(180deg)' : 'rotate(0deg)' }} className='more_icon'
                           src={require("../../img/arrow-down.png")} mode='widthFix'
@@ -370,51 +484,94 @@ export default class Recording extends Component<any, any> {
                         <View className='statistic_desc'>本月打卡天数</View>
                       </View>
                       <View className='statistic_item'>
-                        <View className='statistic_num'>{item.percentage * 100}%</View>
+                        <View className='statistic_num'>{(item.percentage * 100).toFixed(2)}%</View>
                         <View className='statistic_desc'>超越花至用户</View>
                       </View>
                       <View className='border'></View>
                     </View>
-                    {item.isMore &&
-                      <View>
-                        <View style='height: 57rpx' ></View>
-                        <View className='month_item'>
-                          <View className='month_item_date'>2024.5.23</View>
-                          <View className='month_image_box flex sb'>
-                            <Image className='month_item_cover' src={require("../../img/test/1706667011027.jpg")} ></Image>
-                          </View>
-                          <View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
-                          <View className='month_item_note'>护理心得：真棒真棒真棒真棒真棒真棒真棒真棒真棒真棒</View>
-                        </View>
-                      </View>
+                    {item.isMore && item.detail && <View>
+                      {
+                        item.detail.map(obj => (
+                          <View key={obj}>
+                            <View style='height: 57rpx' ></View>
+                            <View className='month_item'>
+                              <View className='month_item_date'>{obj.updateTime}</View>
+                              <View className='month_image_box flex sb'>
+                                {obj.clockImg.map(img => (<Image key={img} className='month_item_cover' src={img} ></Image>))}
+                              </View>
+                              <View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
+                              <View className='month_item_note'>{obj.clockContent}</View>
+                            </View>
+                          </View>))}
+                    </View>
                     }
                   </View>
                 ))
                 }
               </View>
-
             </View>
           </View>
-        )}
+        )
+        }
         <View className='footer flex aitems' >
-          <View className='btn' onClick={this.setShow.bind(this,true)}>前往打卡</View>
+          <View className='btn' onClick={this.setShow.bind(this, true)}>前往打卡</View>
+          <View className="text" onClick={this.back}>
+              跳过 >
+          </View>
         </View>
 
-        <PopupClock
-          isShow={show}
-          isClose
-          title='今日打卡'
-          content='暂未授权注册，请点击注册'
-          confirmButtonText='确认提交'
-          textAlgin='center'
-          type='1'
-          close={this.closeAlert}
-          confirm={this.closeAlert}
-        />
-
-      
-      </Block>
-      
+        <Popup show={show} onClose={() => this.setState({ show: false })}>
+          <View className='popBox'>
+            <Image className='close_icon'
+              src={require("../../img/close.png")} mode='widthFix' onClick={this.setShow.bind(this, false)}
+            ></Image>
+            <View className='popTitle'>今日打卡</View>
+            <View className='popSubtitle'>本月您已打卡<View className='bold'>{clockStatistics[0]?.clockNum}</View> 天，超越<View className='bold'>{(clockStatistics[0]?.percentage * 100).toFixed(1)}%</View>花至用户</View>
+            <View className='img_box'>
+              {
+                punchInInfo.clockImageList.map((item, index) => (
+                  <View key={item} className='img'>
+                    <Image className='showImg'
+                      src={item} mode='widthFix'
+                    ></Image>
+                    <Image className='closeImg'
+                      src={require('../../img/close1.png')}
+                      mode='widthFix'
+                      onClick={this.delImg.bind(this, index)}
+                    ></Image>
+                  </View>
+                ))
+              }
+              {punchInInfo.clockImageList.length < 3 &&
+                <View className='addBox' onClick={this.handleChooseImage.bind(this)}>
+                  <Image className='showImg'
+                    src={require("../../img/clock_in_upload/add-image.png")} mode='widthFix'
+                  ></Image>
+                </View>
+              }
+            </View>
+            <View className='info4'>
+              <View className='content'>
+                <Textarea
+                  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'>
+                {'（' + (punchInInfo.clockContent.length || 0) + '/120）'}
+              </View>
+            </View>
+            <View className='popbtnbox flex aitems jcenter'>
+              <View className='btn1' onClick={this.submit.bind(this)}>
+                确认提交
+              </View>
+            </View>
+          </View>
+        </Popup>
+      </Block >
     );
   }
 } 
diff --git a/src/utils/Interface.js b/src/utils/Interface.js
index 17ed6fc..185b282 100644
--- a/src/utils/Interface.js
+++ b/src/utils/Interface.js
@@ -1,5 +1,5 @@
-import { Ajax, AjaxUploadFile, AjaxFormData } from "./request";
 import Taro from "@tarojs/taro";
+import { Ajax, AjaxUploadFile, AjaxFormData } from "./request";
 
 // params转换url参数
 const paramsToUrlQueryString = (data) => {