update

src/components/basic/Buttons.tsx

@@ -40,6 +40,7 @@ export default function Buttons(props: {
 
     if (props.type == ButtonType.text) {
         mainClass = 'texted'
+        
         return <View style={{ opacity: (props.lowLight || props.disabled) ? 0.4 : 1 }} onClick={onClick}>
             <Text
                 style={{

src/components/view/Timeline.scss

@@ -47,12 +47,25 @@
 
 .timeline-text {
   margin-bottom: 5px;
-  opacity: 0.7;
+  color: #fff;
+  opacity: 0.4;
+  font-size: 28px;
+  line-height: 32px;
+}
+
+.timeline-date {
+  opacity: 0.6;
+  color: #fff;
+  font-size: 20px;
+  margin-left: 6px;
+  margin-top: 8px;
 }
 
 .timeline-time {
-  color: #999;
-  opacity: 0.7;
+  color: #fff;
+  opacity: 0.8;
+  font-size: 32px;
+  line-height: 32px;
 }
 
 .timeline-content-row {
@@ -60,7 +73,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 506px;
+  width: 406px;
   // justify-content: space-between;
   padding-bottom: 16px;
   border-bottom-style: solid;
@@ -68,7 +81,7 @@
   border-bottom-width: 1px;
 }
 
-.timeline-icon-bg{
+.timeline-icon-bg {
   margin-top: 6px;
 }
 

src/components/view/Timeline.tsx

@@ -16,17 +16,17 @@ export default function Component(props: { items: any[], title?: string, type?:
             props.title && <Text>{props.title}</Text>
         }
         {props.items.map((item, index) => (
-            <View className="timeline-item" style={{marginBottom:index !== props.items.length - 1 ?10:0}} key={index}>
+            <View className="timeline-item" style={{ marginBottom: index !== props.items.length - 1 ? 10 : 0 }} key={index}>
                 <View className='timeline-icon-bg'>
-                {
-                    item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
-                }
-                {
-                    item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
-                }
-                {
-                    item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
-                }
+                    {
+                        item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                    }
+                    {
+                        item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
+                    }
+                    {
+                        item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
+                    }
                 </View>
                 {index !== props.items.length - 1 && <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line dash'} />}
                 {
@@ -36,7 +36,10 @@ export default function Component(props: { items: any[], title?: string, type?:
                             <View className="timeline-time">{item.content}</View>
                         </View> :
                         <View className="timeline-content-row" style={{ marginBottom: index !== props.items.length - 1 ? 32 : 0 }}>
-                            <View className="timeline-text">{props.type == TimelineType.timeSecond ? item.title : item.content}</View>
+                            <View className="timeline-time">{props.type == TimelineType.timeSecond ? item.title : item.content}</View>
+                            {
+                                item.date && <View className="timeline-date">{item.date}</View>
+                            }
                             <View style={{ flex: 1 }} />
                             <View className="timeline-text">{props.type == TimelineType.timeSecond ? item.content : item.title}</View>
                         </View>

src/features/common/PostBtn.tsx

@@ -0,0 +1,54 @@
+import Buttons from "@/components/basic/Buttons"
+import { ButtonType } from "@/utils/types"
+import { useEffect, useState } from "react"
+
+export default function Component(props: {
+    onClick: Function,
+    type?: ButtonType,
+    lowLight?: boolean,
+    title: string,
+    btnStyle: any
+}) {
+    //idle normal abnormal
+    const [btnStatus, setBtnStatus] = useState('idle')
+
+    useEffect(() => {
+        if (btnStatus == 'normal') {
+            // setT
+        }
+    }, [btnStatus])
+
+    function updateStatus(status) {
+        setBtnStatus(status)
+    }
+
+    function click() {
+        if (btnStatus != 'idle') {
+            return;
+        }
+        if (global.postBtnUpdateStatus) {
+            global.postBtnUpdateStatus('idle')
+        }
+
+        global.postBtnUpdateStatus = updateStatus;
+        props.onClick();
+    }
+
+    function getLowLight() {
+        var isLowLight = props.lowLight ? props.lowLight : false;
+        if (btnStatus != 'idle') {
+            isLowLight = true;
+        }
+        return isLowLight;
+    }
+
+    return (
+        <Buttons title={props.title} type={props.type}
+            lowLight={getLowLight()}
+            onClick={click}
+            disabled={btnStatus != 'idle'}
+            // lowLight={btnStatus != 'idle'}
+            btnStyle={props.btnStyle}
+        />
+    )
+}

src/features/common/RecordItem.scss

@@ -1,4 +1,6 @@
 
 .recordItem{
-    margin-top: 20px;
-}
+    // margin-top: 20px;
+    position: relative;
+}
+

src/features/common/RecordItem.tsx

@@ -1,7 +1,8 @@
-import { View } from "@tarojs/components";
+import { View,Text } from "@tarojs/components";
 import React from "react";
 import './RecordItem.scss'
 import Taro from "@tarojs/taro";
+import { TimeFormatter } from "@/utils/time_format";
 
 
 export default function Component(props: { children: React.ReactNode,onClick?:Function, delete?: Function, canDel?: boolean }) {
@@ -49,5 +50,6 @@ export default function Component(props: { children: React.ReactNode,onClick?:Fu
     //gesture  onClick onLongPress 有效
     return <View className="recordItem" onLongPress={longPress} onClick={click}>
         {props.children}
+        
     </View>
 }

src/features/common/SpecBtns.tsx

@@ -1,10 +1,13 @@
 import Buttons from "@/components/basic/Buttons"
 import { ButtonType } from "@/utils/types"
 import { View, Text } from "@tarojs/components"
+import { useState } from "react"
+import PostBtn from "./PostBtn"
+
+export const StartFastBtn = (props: { onClick: Function, isLoading?: boolean }) => {
 
-export const StartFastBtn = (props: { onClick: Function }) => {
     return (
-        <Buttons title="开始断食" type={ButtonType.elevated}
+        <PostBtn title="开始断食" type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
             btnStyle={{
                 height: 50,
@@ -18,14 +21,13 @@ export const StartFastBtn = (props: { onClick: Function }) => {
                 alignItems: 'center',
                 justifyContent: 'center',
                 // lineHeight:20
-            }}
-        />
+            }} />
     )
 }
 
-export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean }) => {
+export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
     return (
-        <Buttons title="开始睡眠" type={ButtonType.elevated}
+        <PostBtn title="开始睡眠" type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
@@ -45,9 +47,9 @@ export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean })
     )
 }
 
-export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean }) => {
+export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
     return (
-        <Buttons title="结束睡眠" type={ButtonType.outline}
+        <PostBtn title="结束睡眠" type={ButtonType.outline}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
@@ -69,9 +71,9 @@ export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean }) =>
     )
 }
 
-export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean }) => {
+export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean, isLoading?: boolean }) => {
     return (
-        <Buttons title="结束断食" type={ButtonType.outline}
+        <PostBtn title="结束断食" type={ButtonType.outline}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
@@ -93,17 +95,39 @@ export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean }) =>
     )
 }
 
-export const SetScheduleBtn = (props: { onClick: Function, title: string,isFast?:boolean, lowLight?: boolean }) => {
+export const SetScheduleBtn = (props: { onClick: Function, title: string, isFast?: boolean, lowLight?: boolean }) => {
     return (
         <Buttons title={props.title} type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
             lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
                 height: 50,
-                width:300,
-                boxSizing:'border-box',
+                width: 300,
+                boxSizing: 'border-box',
                 borderRadius: 25,
-                backgroundColor: props.isFast?'#AAFF00':'#00FFFF',
+                backgroundColor: props.isFast ? '#AAFF00' : '#00FFFF',
+                paddingLeft: 40,
+                paddingRight: 40,
+                color: 'black',
+                fontSize: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        />
+    )
+}
+
+export const RecordMetricBtn = (props: { onClick: Function, title: string,themeColor:string }) => {
+    return (
+        <PostBtn title={props.title} type={ButtonType.elevated}
+            onClick={() => { props.onClick() }}
+            btnStyle={{
+                height: 42,
+                // width: 100,
+                boxSizing: 'border-box',
+                borderRadius: 21,
+                backgroundColor: props.themeColor,
                 paddingLeft: 40,
                 paddingRight: 40,
                 color: 'black',

src/features/trackSomething/components/ActivityHistory.tsx

@@ -64,7 +64,7 @@ export default function Component(props: { records: any[] }) {
                 {
                     status: 'done',
                     title: type + item.records[i].items[0].value + '步',
-                    content: TimeFormatter.formatTimestamp(item.records[i].timestamp),
+                    content: TimeFormatter.timelineFormatTime(item.records[i].timestamp),
                 }
             )
         }

src/features/trackSomething/components/Metric.tsx

@@ -262,6 +262,8 @@ export default function Component(props: any) {
                 confirm_time: new Date().getTime()
             }
         }
+
+        global.postBtnUpdateStatus('normal');
         uploadMetric(params).then(res => {
             // getCards();
             (metricItem as any).schemas.map((item, index) => {
@@ -275,6 +277,8 @@ export default function Component(props: any) {
             })
             setList(JSON.parse(JSON.stringify(list)))
 
+            global.postBtnUpdateStatus('idle');
+
         })
     }
 
@@ -299,7 +303,7 @@ export default function Component(props: any) {
                             value={value}
                             unit={unit}
                             desc={desc}
-                            btnText='记录'
+                            btnText={'记录'}
                             isDisabled={false}
                             themeColor={item.theme_color}
                             onClickDetail={() => { goDetail(item) }}

src/features/trackSomething/components/MetricItem.tsx

@@ -1,5 +1,6 @@
 import { View, Text } from "@tarojs/components";
 import './MetricItem.scss'
+import { RecordMetricBtn } from "@/features/common/SpecBtns";
 
 export default function Component(props: {
     title: string,
@@ -13,7 +14,7 @@ export default function Component(props: {
     onClick: Function,
     showBadge?: boolean
 }) {
-
+    
     function clickBtn() {
         if (props.isDisabled) {
             return
@@ -30,7 +31,13 @@ export default function Component(props: {
             <Text className="mteric_desc">{props.desc}</Text>
         </View>
 
-        <View className="operate" style={{ backgroundColor: props.themeColor, opacity: props.isDisabled ? 0.5 : 1 }} onClick={clickBtn}>{props.btnText}
+        {/* <View className="operate" style={{ backgroundColor: props.themeColor, opacity: props.isDisabled ? 0.5 : 1 }} onClick={clickBtn}>{props.btnText}
+            {
+                props.showBadge && <View className="badge"></View>
+            }
+        </View> */}
+        <View style={{ position: 'relative',marginTop:10 }} >
+            <RecordMetricBtn themeColor={props.themeColor} title={props.btnText} onClick={clickBtn}/>
             {
                 props.showBadge && <View className="badge"></View>
             }

src/features/trackTimeDuration/actions/TrackTimeActions.tsx

@@ -22,18 +22,21 @@ export const startFast = (start_time: number, duration: number) => {
 }
 
 export const endFast = (start_time: number) => {
-    const extra = {
-        set_time: global.set_time,
-        confirm_time: new Date().getTime(),
-    }
-    recordCheck({
-        action: 'FAST_END',
-        real_check_time: start_time,
-        extra: extra
-    }).then(res => {
-        trackTimeService.send({ type: 'END_FAST' });
-        trackTimeService.send({ type: 'RESET' });
-        trackTimeService.send({ type: global.scenario });
+    return new Promise((resolve) => {
+        const extra = {
+            set_time: global.set_time,
+            confirm_time: new Date().getTime(),
+        }
+        recordCheck({
+            action: 'FAST_END',
+            real_check_time: start_time,
+            extra: extra
+        }).then(res => {
+            trackTimeService.send({ type: 'END_FAST' });
+            trackTimeService.send({ type: 'RESET' });
+            trackTimeService.send({ type: global.scenario });
+            resolve(res)
+        });
     });
 }
 
@@ -45,13 +48,16 @@ export const startSleep = (start_time: number, duration: number) => {
         set_time: global.set_time,
         confirm_time: new Date().getTime(),
     }
-    recordCheck({
-        action: 'SLEEP_START',
-        real_check_time: start_time,
-        target_duration: duration,
-        extra: extra
-    }).then(res => {
-        trackTimeService.send({ type: 'START_SLEEP' });
+    return new Promise((resolve) => {
+        recordCheck({
+            action: 'SLEEP_START',
+            real_check_time: start_time,
+            target_duration: duration,
+            extra: extra
+        }).then(res => {
+            trackTimeService.send({ type: 'START_SLEEP' });
+            resolve(res)
+        });
     });
 }
 export const endSleep = (start_time: number) => {
@@ -60,11 +66,15 @@ export const endSleep = (start_time: number) => {
         set_time: global.set_time,
         confirm_time: new Date().getTime(),
     }
-    recordCheck({
-        action: 'SLEEP_END',
-        real_check_time: start_time,
-        extra: extra
-    }).then(res => {
-        trackTimeService.send({ type: 'END_SLEEP' });
+    return new Promise((resolve) => {
+        recordCheck({
+            action: 'SLEEP_END',
+            real_check_time: start_time,
+            extra: extra
+        }).then(res => {
+            trackTimeService.send({ type: 'END_SLEEP' });
+            resolve(res)
+        });
     });
 }
+

src/features/trackTimeDuration/components/Clock.scss

@@ -0,0 +1,6 @@
+
+
+.clock_text{
+    font-size: 48px;
+    font-weight: 500;
+}

src/features/trackTimeDuration/components/Clock.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { TimeFormatter } from "@/utils/time_format";
 import Rings, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
 import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
-
+import './Clock.scss'
 export default function Component() {
     const [checkData, setCheckData] = useState(null)
 
@@ -27,7 +27,7 @@ export default function Component() {
     //外环
     function bigRing() {
         var common = getCommon(null, true)
-        common.radius = 111;
+        common.radius = 126;
         common.lineWidth = 28;
         var bgRing = getBgRing()
         if (!checkData) {
@@ -37,7 +37,7 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         var currentDot1 = getDot((checkData as any).current_record, true)
         var targetBigRing1 = getTarget((checkData as any).current_record, true)
-        targetBigRing1.color = 'rgba(170,255,0,0.1)'
+        targetBigRing1.color = 'rgba(170,255,0,0.4)'
         if (current_record.status == 'ONGOING') {
             var realRing1 = getReal((checkData as any).current_record, true, false)
 
@@ -57,18 +57,20 @@ export default function Component() {
         var current_record = (checkData as any).current_record
         if (current_record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
-            common.radius = 80;
-            common.lineWidth = 20;
+            common.radius = 90;
+            common.lineWidth = 28;
             var bgRing = getBgRing()
             var realRing = getReal((checkData as any).current_record, false, false)
             var currentDot = getDot((checkData as any).current_record, false)
             var targetRing = getTarget((checkData as any).current_record, false)
-            targetRing.color = 'rgba(0, 255, 255, 0.1)'
+            targetRing.color = 'rgba(0, 255, 255, 0.4)'
             if (current_record.status == 'ONGOING2') {
                 return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
             }
+
+            //ongoing3时，睡眠点整理亮度降低
             if (current_record.status == 'ONGOING3') {
-                currentDot.color = 'rgba(0, 255, 255, 0.5)'
+                currentDot.color = 'rgba(0, 255, 255, 0.5)' 
             }
             return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
         }
@@ -94,33 +96,33 @@ export default function Component() {
                 </View>
                 <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                     {
-                        (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text style={{ color: '#AAFF00' }}>00:00:00</Text>
+                        (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text className="clock_text" style={{ color: '#AAFF00' }}>00:00:00</Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING' && <Text style={{ color: (checkData as any).current_record.scenario == 'FAST' ? '#aaff00' : '#00ffffff' }}>
+                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? '#aaff00' : '#00ffffff' }}>
                             {TimeFormatter.formateTimeNow((checkData as any).current_record.fast ?
                                 (checkData as any).current_record.fast.real_start_time :
                                 (checkData as any).current_record.sleep.real_start_time)}
                         </Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING1' && <Text style={{ color: '#AAFF00' }}>
+                        (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: '#AAFF00' }}>
                             {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                         </Text>
                     }
                     {
-                        (checkData as any).current_record.status == 'ONGOING2' && <View style={{ flexDirection: 'column', display: 'flex' }}>
-                            <Text style={{ color: '#AAFF00' }}>
+                        (checkData as any).current_record.status == 'ONGOING2' && <View  style={{ flexDirection: 'column', display: 'flex' }}>
+                            <Text className="clock_text"style={{ color: '#AAFF00' }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                             </Text>
-                            <Text style={{ color: '#00FFFF' }}>
+                            <Text className="clock_text" style={{ color: '#00FFFF' }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
                             </Text>
                         </View>
                     }
                     {
                         (checkData as any).current_record.status == 'ONGOING3' && <Text>
-                            <Text style={{ color: '#AAFF00' }}>
+                            <Text className="clock_text" style={{ color: '#AAFF00' }}>
                                 {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                             </Text>
                         </Text>

src/features/trackTimeDuration/components/Console.tsx

@@ -79,7 +79,6 @@ export default function Component(props: { isNextStep?: boolean }) {
 
     function updateNodeInfo() {
         var node = (<Modal testInfo={testLayout()} children={layoutContent()} dismiss={() => {
-            console.log('aaaaaa')
             global.showClockModal(false, null);
             hidePicker()
         }} confirm={() => {
@@ -198,26 +197,36 @@ export default function Component(props: { isNextStep?: boolean }) {
             return;
         }
 
+        global.postBtnUpdateStatus('normal');
+
         if (isFast) {
             if (time.status == 'WAIT_FOR_START') {
-                startFast(t, fastDuration).then(res=>{
-                    if ((res as any).current_record.scenario=='FAST_SLEEP' &&
-                    (res as any).current_record.status=='ONGOING1'){
+                startFast(t, fastDuration).then(res => {
+                    if ((res as any).current_record.scenario == 'FAST_SLEEP' &&
+                        (res as any).current_record.status == 'ONGOING1') {
                         global.consoleType = 'going'
-                        dispatch(changeConsoleStatus({status:ConsoleType.going}));
+                        dispatch(changeConsoleStatus({ status: ConsoleType.going }));
                     }
+
+                    global.postBtnUpdateStatus('idle');
                 });
             }
             else {
-                endFast(t)
+                endFast(t).then(_ => {
+                    global.postBtnUpdateStatus('idle');
+                })
             }
         }
         else {
             if (time.status == 'WAIT_FOR_START' || time.status == 'ONGOING1') {
-                startSleep(t, sleepDuration);
+                startSleep(t, sleepDuration).then(_ => {
+                    global.postBtnUpdateStatus('idle');
+                });
             }
             else {
-                endSleep(t)
+                endSleep(t).then(_ => {
+                    global.postBtnUpdateStatus('idle');
+                })
             }
         }
     }

src/features/trackTimeDuration/components/RecordFastSleep.scss

@@ -1,11 +1,11 @@
-.duration_bg{
+.duration_bg {
     margin-left: 50px;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
 
-.duration_title{
+.duration_title {
     font-size: 32px;
     line-height: 32px;
     color: #fff;
@@ -13,14 +13,24 @@
     font-weight: 400;
 }
 
-.duration_value{
+.duration_value {
+    margin-top: 2px;
     font-size: 36px;
     line-height: 36px;
     font-weight: 500;
     margin-bottom: 12px;
 }
 
-.arrow1{
+.arrow1 {
     width: 48px;
     height: 48px;
+}
+
+.recordTime {
+    position: absolute;
+    font-size: 24px;
+    color: #fff;
+    opacity: 0.2;
+    right: 86px;
+    bottom: 60px;
 }

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -125,6 +125,8 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
 
     function bigRing() {
         var common = getCommon(null, true)
+        common.radius = 42;
+        common.lineWidth = 9;
         var bgRing = getBgRing()
 
         if (props.type == 'record' || props.type == 'latest') {
@@ -150,6 +152,8 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
     function smallRing() {
         if (record.scenario == 'FAST_SLEEP') {
             var common = getCommon(null, false)
+            common.radius = 28;
+            common.lineWidth = 9;
             var bgRing = getBgRing()
             var realRing = getReal(record, false, false)
             if (props.type == 'record' || props.type == 'latest') {
@@ -250,16 +254,20 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
     }
 
 
-    return <Box header={header()}>
-        <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
-            onClick={() => { showDetail() }}
-        >{recordDetail()}
-        </RecordItem>
-        {
-            showDetailModal && <Modal children={schedules()}
-                modalType={ModalType.center}
-                dismiss={() => setShowDetailModal(false)}
-                confirm={() => { }} />
-        }
-    </Box>
+    return <View style={{ position: 'relative' }}>
+        <Box header={header()}>
+            <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
+                onClick={() => { showDetail() }}
+            >{recordDetail()}
+            </RecordItem>
+            {
+                showDetailModal && <Modal children={schedules()}
+                    modalType={ModalType.center}
+                    dismiss={() => setShowDetailModal(false)}
+                    confirm={() => { }} />
+            }
+
+        </Box>
+        <Text className='recordTime'>{TimeFormatter.formatTimestamp(props.data.last_real_check_time)}</Text>
+    </View>
 }

src/features/trackTimeDuration/components/Rings.tsx

@@ -112,7 +112,7 @@ export default function Rings(props: {
                 ctx.beginPath();
                 ctx.arc(center, center, radius, arc,
                     arc + 0.001);
-                ctx.lineWidth = lineWidth;
+                ctx.lineWidth = lineWidth+6;
                 ctx.strokeStyle = props.currentDot!.borderColor;
                 ctx.lineCap = 'round'; // 设置为圆角
                 ctx.stroke();
@@ -120,7 +120,7 @@ export default function Rings(props: {
                 ctx.beginPath();
                 ctx.arc(center, center, radius, arc,
                     arc + 0.001);
-                ctx.lineWidth = lineWidth - 2;
+                ctx.lineWidth = lineWidth;
                 ctx.strokeStyle = props.currentDot!.color;
                 ctx.lineCap = 'round'; // 设置为圆角
                 ctx.stroke();

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -96,6 +96,7 @@ export default function Component() {
           }
         }
       }).then(res => {
+        global.checkData()
         Taro.navigateBack({ delta: 3 })
         // console.log('success')
       })
@@ -162,6 +163,7 @@ export default function Component() {
       }
     }).then(res => {
       dispatch(setStep('fast'))
+      global.checkData()
       Taro.navigateBack({ delta: 4 })
     })
   }
@@ -255,7 +257,6 @@ export default function Component() {
 
   global.endDuration = () => {
     setOperateType(0)
-    console.log(0)
   }
 
   function layoutContent() {

src/features/trackTimeDuration/components/StatusIndicator.scss

@@ -0,0 +1,28 @@
+.subcontent{
+    margin-top: 4px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.point{
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    margin-right: 10px;
+}
+
+.scenario{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 24px;
+    
+}
+
+.name {
+    color: rgba(255,255,255,0.4);
+    font-size: 28px;
+    font-weight: 500;
+}

src/features/trackTimeDuration/components/StatusIndicator.tsx

@@ -0,0 +1,82 @@
+import { View, Text } from "@tarojs/components";
+import './StatusIndicator.scss'
+import { useSelector } from "react-redux";
+
+export default function Component() {
+    const time = useSelector((state: any) => state.time);
+    function getFastName() {
+        var strName = '断食'
+        switch (time.scenario) {
+            case 'FAST':
+                {
+                    if (time.status == 'ONGOING') {
+                        strName = '断食进行中'
+                    }
+                }
+                break;
+            case 'SLEEP':
+                break;
+            case 'FAST_SLEEP':
+                {
+                    switch (time.status) {
+                        case 'ONGOING1':
+                        case 'ONGOING2':
+                        case 'ONGOING3':
+                            strName = '断食进行中'
+                            break;
+                    }
+                }
+                break;
+        }
+
+        return strName
+    }
+
+    
+
+    function sleepAlpha() {
+        return time.status == 'ONGOING3' ? 0.4 : 1
+    }
+
+    function getSleepName() {
+        var strName = '睡眠'
+        switch (time.scenario) {
+            case 'FAST':
+                break;
+            case 'SLEEP':
+                {
+                    if (time.status == 'ONGOING') {
+                        strName = '睡眠进行中'
+                    }
+                }
+                break;
+            case 'FAST_SLEEP':
+                {
+                    switch (time.status) {
+                        case 'ONGOING1':
+                            strName = '睡眠待开始'
+                            break;
+                        case 'ONGOING2':
+                            strName = '睡眠进行中'
+                            break;
+                        case 'ONGOING3':
+                            strName = '睡眠已结束'
+                            break;
+                    }
+                }
+                break;
+        }
+        return strName
+    }
+
+    return <View className='subcontent'>
+        <View className='scenario'>
+            <View className='point' style={{ backgroundColor: '#AAFF00' }} />
+            <Text className='name'>{getFastName()}</Text>
+        </View>
+        <View className='scenario' style={{ opacity: sleepAlpha() }}>
+            <View className='point' style={{ backgroundColor: '#00FFFF' }} />
+            <Text className='name'>{getSleepName()}</Text>
+        </View>
+    </View>
+}

src/features/trackTimeDuration/components/TimelineFastSleep.tsx

@@ -3,23 +3,43 @@ import { TimeFormatter } from "@/utils/time_format";
 import { View } from "@tarojs/components";
 import getStatus from "../hooks/Record";
 
-export default function TimelineFastSleep(props: { data: any,title?:string }) {
+export default function TimelineFastSleep(props: { data: any, title?: string }) {
 
     function formateTime(obj: any, isEnd: boolean) {
         if (isEnd) {
             if (obj.real_end_time) {
-                return TimeFormatter.formatTimestamp(obj.real_end_time)
+                return TimeFormatter.timelineFormatTime(obj.real_end_time)
             }
             else {
-                return TimeFormatter.formatTimestamp(obj.target_end_time)
+                return TimeFormatter.timelineFormatTime(obj.target_end_time)
             }
         }
         else {
             if (obj.real_start_time) {
-                return TimeFormatter.formatTimestamp(obj.real_start_time)
+                return TimeFormatter.timelineFormatTime(obj.real_start_time)
             }
             else {
-                return TimeFormatter.formatTimestamp(obj.target_start_time)
+                return TimeFormatter.timelineFormatTime(obj.target_start_time)
+            }
+        }
+
+    }
+
+    function formateDate(obj: any, isEnd: boolean) {
+        if (isEnd) {
+            if (obj.real_end_time) {
+                return TimeFormatter.dateDescription(obj.real_end_time)
+            }
+            else {
+                return TimeFormatter.dateDescription(obj.target_end_time)
+            }
+        }
+        else {
+            if (obj.real_start_time) {
+                return TimeFormatter.dateDescription(obj.real_start_time)
+            }
+            else {
+                return TimeFormatter.dateDescription(obj.target_start_time)
             }
         }
 
@@ -32,6 +52,7 @@ export default function TimelineFastSleep(props: { data: any,title?:string }) {
                 status: getStatus(true, true, props.data),
                 title: '开始断食',
                 content: formateTime(props.data.fast, false),
+                date: formateDate(props.data.fast, false),
             }
         )
     }
@@ -41,6 +62,7 @@ export default function TimelineFastSleep(props: { data: any,title?:string }) {
                 status: getStatus(false, true, props.data),
                 title: '开始睡眠',
                 content: formateTime(props.data.sleep, false),
+                date: formateDate(props.data.sleep, false),
             }
         )
     }
@@ -50,6 +72,7 @@ export default function TimelineFastSleep(props: { data: any,title?:string }) {
                 status: getStatus(false, false, props.data),
                 title: '结束睡眠',
                 content: formateTime(props.data.sleep, true),
+                date: formateDate(props.data.sleep, true),
             }
         )
     }
@@ -59,9 +82,10 @@ export default function TimelineFastSleep(props: { data: any,title?:string }) {
                 status: getStatus(true, false, props.data),
                 title: '结束断食',
                 content: formateTime(props.data.fast, true),
+                date: formateDate(props.data.fast, true),
             }
         )
     }
 
-    return <Timeline items={timelineItems} title={props.title}/>
+    return <Timeline items={timelineItems} title={props.title} />
 }

src/features/trackTimeDuration/components/TitleView.scss

@@ -30,35 +30,8 @@
 .icon {
     width: 44px;
     height: 44px;
-    padding: 20px;
-}
-
-.subcontent{
-    margin-top: 14px;
-    height: 48px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.point{
-    width: 18px;
-    height: 18px;
-    border-radius: 9px;
+    padding: 10px;
     margin-right: 10px;
 }
 
-.scenario{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-right: 24px;
-    
-}
-
-.name {
-    color: rgba(255,255,255,0.4);
-    font-size: 24px;
-    font-weight: 500;
-}
 

src/features/trackTimeDuration/components/TitleView.tsx

@@ -1,84 +1,60 @@
 import { View, Text, Image } from '@tarojs/components'
 import './TitleView.scss'
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import Taro from '@tarojs/taro';
+import { setStep } from '@/store/scenario';
+import { useTranslation } from 'react-i18next';
 
-export default function Component() {
+export default function Component(props:{children:any}) {
     const time = useSelector((state: any) => state.time);
+    const { t } = useTranslation()
+    const dispatch = useDispatch();
+    const isFastFirst  = true
 
-    function getFastName() {
-        var strName = '断食'
-        debugger
-        switch (time.scenario) {
-            case 'FAST':
-                {
-                    if (time.status == 'ONGOING') {
-                        strName = '断食进行中'
-                    }
-                }
-                break;
-            case 'SLEEP':
-                break;
-            case 'FAST_SLEEP':
-                {
-                    switch (time.status) {
-                        case 'ONGOING1':
-                        case 'ONGOING2':
-                        case 'ONGOING3':
-                            strName = '断食进行中'
-                            break;
-                    }
-                }
-                break;
-        }
-        
-        console.log(strName)
-        return strName
-    }
+    
 
-    function getSleepName() {
-        var strName = '睡眠'
-        switch (time.scenario) {
-            case 'FAST':
-                break;
-            case 'SLEEP':
-                {
-                    if (time.status == 'ONGOING') {
-                        strName = '睡眠进行中'
-                    }
+    function more() {
+        Taro.showActionSheet({
+            itemList: [t('feature.track_time_duration.action_sheet.change_schedule'), t('feature.track_time_duration.action_sheet.switch_scenario')]
+        })
+            .then(res => {
+                switch (res.tapIndex) {
+                    case 0:
+                        if (time.scenario == 'FAST_SLEEP') {
+                            dispatch(setStep(isFastFirst ? 'fast' : 'sleep'))
+                        }
+                        else if (time.scenario == 'SLEEP') {
+                            dispatch(setStep('sleep'))
+                        }
+                        else {
+                            dispatch(setStep('fast'))
+                        }
+                        Taro.navigateTo({
+                            url: '/pages/clock/SetSchedule'
+                        })
+                        break;
+                    case 1:
+                        Taro.navigateTo({
+                            url: '/pages/clock/ChooseScenario'
+                        })
+                        break;
                 }
-                break;
-            case 'FAST_SLEEP':
-                {
-                    switch (time.status) {
-                        case 'ONGOING1':
-                            break;
-                        case 'ONGOING2':
-                            strName = '睡眠进行中'
-                            break;
-                        case 'ONGOING3':
-                            strName = '睡眠已结束'
-                            break;
-                    }
-                }
-                break;
-        }
-        return strName
+            })
+            .catch(err => {
+                console.log(err.errMsg)
+            })
     }
 
     return <View className='title_view'>
         <View className='title_bg'>
             <Text className='title'>时钟</Text>
-            <Image src={require('@/assets/images/add.png')} className='icon' />
-        </View>
-        <View className='subcontent'>
-            <View className='scenario'>
-                <View className='point' style={{ backgroundColor: '#AAFF00' }} />
-                <Text className='name'>{getFastName()}</Text>
-            </View>
-            <View className='scenario'>
-                <View className='point' style={{ backgroundColor: '#00FFFF' }} />
-                <Text className='name'>{getSleepName()}</Text>
-            </View>
+            {
+                time.status == 'WAIT_FOR_START' && <Image onClick={more} src={require('@/assets/images/add.png')} className='icon' />
+            }
         </View>
+        {
+            props.children
+        }
+        
     </View>
 }

src/pages/clock/Clock.tsx

@@ -32,6 +32,7 @@ import { updateScenario } from '@/store/time'
 import { showModal } from '@/store/modal'
 import { ConsoleType, changeConsoleStatus } from '@/store/console'
 import TitleView from '@/features/trackTimeDuration/components/TitleView'
+import StatusIndicator from '@/features/trackTimeDuration/components/StatusIndicator'
 // import TabBar from '../../components/Tabbar';
 
 export default function IndexPage() {
@@ -54,9 +55,15 @@ export default function IndexPage() {
   const [showModal2, setShowModal2] = useState(false)
   const [modalDetail2, setModalDetail2] = useState<any>({})
   const [showSingleFastEnd, setShowSingleFastEnd] = useState(false)
-  const [consoleStatus,setConsoleStatus] = useState(consoleData.status)
+  const [consoleStatus, setConsoleStatus] = useState(consoleData.status)
 
   global.dispatch = dispatch;
+
+  global.checkData = () => {
+    console.log('refresh clock data')
+    getCheckData()
+  }
+
   useEffect(() => {
     global.consoleType = 'idle'
     dispatch(staticResources() as any);
@@ -223,7 +230,7 @@ export default function IndexPage() {
       }
       else {
         if (global.consoleType == 'going') {
-          
+
           setShowSingleFastEnd(true)
           setTimeout(() => {
             setShowSingleFastEnd(false)
@@ -231,13 +238,13 @@ export default function IndexPage() {
             setAutoPlay(true)
             global.consoleType = 'end'
             dispatch(changeConsoleStatus({ status: ConsoleType.end }))
-            setTimeout(()=>{
+            setTimeout(() => {
               global.consoleType = 'idle'
-            },2000)
+            }, 2000)
           }, 2000)
         }
         else {
-          console.log('bbb')
+          // console.log('bbb')
         }
       }
       // if ((res as any).current_record.status == 'ONGOING1') {
@@ -300,8 +307,10 @@ export default function IndexPage() {
     setModalDetail2(detail)
   }
 
-  function headerView(){
-    return <TitleView />
+  function headerView() {
+    return <TitleView>
+      <StatusIndicator />
+    </TitleView>
   }
   return (
     <Layout type={TemplateType.customHeader} header={headerView()} title='时钟' titleShowStyle={NaviBarTitleShowType.scrollToShow}>
@@ -318,32 +327,32 @@ export default function IndexPage() {
         </Box>
 
         <View className='console_bg'>
-        {
-          needSwiper() ? <Swiper className='swiper' indicatorColor='#333'
-            indicatorActiveColor='#999'
-            current={swiperIndex}
-            autoplay={autoPlay}
-            duration={300}
-            interval={2000}
-            indicatorDots={global.consoleType =='idle'}
-            onChange={(e) => {
-              setSwiperIndex(e.detail.current)
-              if (e.detail.current == 0)
-                setAutoPlay(false)
-            }}
-          >
-            <SwiperItem className='swiperItem'>
-              <Console />
-
-            </SwiperItem>
-
-            <SwiperItem className='swiperItem'>
-              <Console isNextStep={true} />
-            </SwiperItem>
-          </Swiper> :
-            <Console isNextStep={showSingleFastEnd} />
+          {
+            needSwiper() ? <Swiper className='swiper' indicatorColor='#333'
+              indicatorActiveColor='#999'
+              current={swiperIndex}
+              autoplay={autoPlay}
+              duration={300}
+              interval={2000}
+              indicatorDots={global.consoleType == 'idle'}
+              onChange={(e) => {
+                setSwiperIndex(e.detail.current)
+                if (e.detail.current == 0)
+                  setAutoPlay(false)
+              }}
+            >
+              <SwiperItem className='swiperItem'>
+                <Console />
+
+              </SwiperItem>
+
+              <SwiperItem className='swiperItem'>
+                <Console isNextStep={true} />
+              </SwiperItem>
+            </Swiper> :
+              <Console isNextStep={showSingleFastEnd} />
 
-        }
+          }
         </View>
 
         {/* <Console /> */}

src/services/http/request.ts

@@ -40,8 +40,8 @@ async function getStorage(key: string) {
 
 
 export async function request<T>(param: RequestParam): Promise<T> {
-    const kTimeout = 5000;
-    const kRetryCount = 3;
+    const kTimeout = 3000;
+    const kRetryCount = 2;
 
     let retryCount = 0;
 
@@ -77,7 +77,7 @@ export async function request<T>(param: RequestParam): Promise<T> {
                 performRequest(resolve, reject);
                 return;
             }
-
+            // global.postBtnUpdateStatus('idle')
             ToastUtil.getInstance().showToast(method=='GET'?'网络连接失败，请检查网络':'操作失败，请检查网络');
             // Taro.showToast({
             //     icon:'none',
@@ -105,6 +105,7 @@ export async function request<T>(param: RequestParam): Promise<T> {
                     resolve(resp);
 
                 } else if (statusCode == 401) {
+                    // global.postBtnUpdateStatus('idle')
                     //未登录或挤下线处理
                     global.dispatch(logoutSuccess());
                 } else if (statusCode == 500 && response.data.error_code == 'WX_STEP_PARSE_FAIL') {
@@ -120,6 +121,7 @@ export async function request<T>(param: RequestParam): Promise<T> {
                 }
             },
             fail: err => {
+                // global.postBtnUpdateStatus('idle')
                 // console.log('oppsu');
                 // clearTimeout(timer);
                 // reject(err);

src/services/trackSomething.tsx

@@ -67,7 +67,7 @@ export const clearMetricRecords = (params) => {
 export const deleteMetricRecord = (params) => {
     return new Promise((resolve) => {
         request({
-            url: API_METRIC_RECORDS + '/' + params.id, method: 'DELETE', data: { }
+            url: API_METRIC_RECORDS + '/' + params.id, method: 'DELETE', data: {}
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));
@@ -80,7 +80,7 @@ export const deleteMetricRecord = (params) => {
 export const deleteActivityRecord = (params) => {
     return new Promise((resolve) => {
         request({
-            url: API_ACTIVITY_RECORDS + '/' + params.id, method: 'DELETE', data: { }
+            url: API_ACTIVITY_RECORDS + '/' + params.id, method: 'DELETE', data: {}
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));
@@ -99,6 +99,8 @@ export const uploadMetric = (params) => {
             // dispatch(loginSuccess(res));
         }).catch(err => {
             reject(err)
+            global.postBtnUpdateStatus('idle')
+
         })
     })
 }

src/services/trackTimeDuration.tsx

@@ -70,6 +70,8 @@ export const recordCheck = (params: Record<string, any>) => {
             url: API_FAST_CLOCKS, method: 'POST', data: { ...params }
         }).then(res => {
             resolve(res);
+        }).catch(e=>{
+            global.postBtnUpdateStatus('idle')
         })
     })
 }

src/store/post_btn_manager.tsx

@@ -0,0 +1,10 @@
+
+export enum PostBtnStatusType {
+    idle = 'idle',
+    normal = 'normal',
+    abnormal = 'abnormal'
+}
+
+class PostBtnManager {
+
+}

src/utils/time_format.ts

@@ -43,6 +43,61 @@ export class TimeFormatter {
     )} ${TimeFormatter.formatTime(inputDate)}`;
   }
 
+
+  //1.只显示时间
+  static timelineFormatTime(timestamp: number, isTestUser?: boolean): string {
+
+    var date = new Date(timestamp)
+    // 返回 HH:mm
+    var str = `${TimeFormatter.formatNumber(date.getHours())}:${TimeFormatter.formatNumber(date.getMinutes())}`;
+    if (isTestUser) {
+      str += `:${TimeFormatter.formatNumber(date.getSeconds())}`
+    }
+    return str
+  }
+  //2.基于日期显示日期秒数,省略今天描述
+  static dateDescription(timestamp: number): string {
+    const currentDate = new Date();
+    const inputDate = new Date(timestamp);
+
+    // 判断是否是今天
+    if (
+      inputDate.getDate() === currentDate.getDate() &&
+      inputDate.getMonth() === currentDate.getMonth() &&
+      inputDate.getFullYear() === currentDate.getFullYear()
+    ) {
+      return ``;
+    }
+
+    // 判断是否是昨天
+    const yesterday = new Date();
+    yesterday.setDate(currentDate.getDate() - 1);
+
+    if (
+      inputDate.getDate() === yesterday.getDate() &&
+      inputDate.getMonth() === yesterday.getMonth() &&
+      inputDate.getFullYear() === yesterday.getFullYear()
+    ) {
+      return `昨天`;
+    }
+
+    // 判断是否是明天
+    const tomorrow = new Date();
+    tomorrow.setDate(currentDate.getDate() + 1);
+
+    if (
+      inputDate.getDate() === tomorrow.getDate() &&
+      inputDate.getMonth() === tomorrow.getMonth() &&
+      inputDate.getFullYear() === tomorrow.getFullYear()
+    ) {
+      return `明天`;
+    }
+
+    return `${inputDate.getFullYear()}-${TimeFormatter.formatNumber(inputDate.getMonth() + 1)}-${TimeFormatter.formatNumber(
+      inputDate.getDate()
+    )}`;
+  }
+
   static formatTime(date: Date): string {
     return `${TimeFormatter.formatNumber(date.getHours())}:${TimeFormatter.formatNumber(date.getMinutes())}:${TimeFormatter.formatNumber(date.getSeconds())}`;
   }
@@ -124,9 +179,9 @@ export class TimeFormatter {
   }
 
   //获取今天的日期和星期几
-  static getDateAndWeek = ()=>{
+  static getDateAndWeek = () => {
     var now = new Date()
-    var weeks = ['日','一','二','三','四','五','六']
-    return `${now.getMonth()+1}月${now.getDate()}日·星期${weeks[now.getDay()]}`
+    var weeks = ['日', '一', '二', '三', '四', '五', '六']
+    return `${now.getMonth() + 1}月${now.getDate()}日·星期${weeks[now.getDay()]}`
   }
 }