update

src/components/basic/Icons.tsx

@@ -20,4 +20,31 @@ export const IconClear = () => {
     return <View className='clear_btn_bg'>
         <Image className='clear' src={require('@assets/images/x.png')} />
     </View>
+}
+
+export const IconRadio = (props:{width: number, color: string}) => {
+    const icon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="#FFFFFF" fill="none" stroke-width="1"/></g></g></svg>`
+    return <View style={{ width: props.width, height: props.width }}>
+        <mysvg src={icon} colors={[props.color]} />
+    </View>
+}
+
+export const IconRadioCheck = (props:{width: number, color: string}) => {
+    const icon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs>
+    <clipPath id="master_svg0_1288_09724"><rect x="2" y="2" width="12" height="12" rx="0"/></clipPath></defs><g><g>
+    <ellipse cx="8" cy="8" rx="8" ry="8" fill="${props.color}" fill-opacity="0.4000000059604645"/>
+    <ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="${props.color}" fill="none" stroke-width="1"/></g>
+    <g clip-path="url(#master_svg0_1288_09724)"><g><path d="M12.35355,4.646446C12.5488,4.841709,12.5488,5.15829,12.35355,5.353555C12.35355,5.353555,6.85355,10.85355,6.85355,10.85355C6.65829,11.0488,6.34171,11.0488,6.14645,10.85355C6.14645,10.85355,3.646446,8.35355,3.646446,8.35355C3.4511845,8.158290000000001,3.4511845,7.84171,3.646446,7.64645C3.841709,7.45118,4.15829,7.45118,4.353555,7.64645C4.353555,7.64645,6.5,9.7929,6.5,9.7929C6.5,9.7929,11.64645,4.646446,11.64645,4.646446C11.8417,4.4511845,12.1583,4.4511845,12.35355,4.646446C12.35355,4.646446,12.35355,4.646446,12.35355,4.646446Z" fill-rule="evenodd" fill="${props.color}" fill-opacity="1"/></g></g></g></svg>`
+    return <View style={{ width: props.width, height: props.width }}>
+        <mysvg src={icon} colors={[]}/>
+    </View>
+}
+
+export const IconRadioCross = (props:{width: number, color: string}) => {
+    const icon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs>
+    <clipPath id="master_svg0_1288_09725"><rect x="2" y="2" width="12" height="12" rx="0"/></clipPath></defs><g><g><ellipse cx="8" cy="8" rx="8" ry="8" fill="${props.color}" fill-opacity="0.4000000059604645"/>
+    <ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="${props.color}" fill="none" stroke-width="1"/></g><g clip-path="url(#master_svg0_1288_09725)"><g><path d="M4.646446,4.646446C4.841709,4.4511845,5.15829,4.4511845,5.353555,4.646446C5.353555,4.646446,8,7.2928999999999995,8,7.2928999999999995C8,7.2928999999999995,10.64645,4.646446,10.64645,4.646446C10.8417,4.4511845,11.1583,4.4511845,11.35355,4.646446C11.5488,4.841709,11.5488,5.15829,11.35355,5.353555C11.35355,5.353555,8.70711,8,8.70711,8C8.70711,8,11.35355,10.64645,11.35355,10.64645C11.5488,10.8417,11.5488,11.1583,11.35355,11.35355C11.1583,11.5488,10.8417,11.5488,10.64645,11.35355C10.64645,11.35355,8,8.70711,8,8.70711C8,8.70711,5.353555,11.35355,5.353555,11.35355C5.15829,11.5488,4.841709,11.5488,4.646446,11.35355C4.4511845,11.1583,4.4511845,10.8417,4.646446,10.64645C4.646446,10.64645,7.2928999999999995,8,7.2928999999999995,8C7.2928999999999995,8,4.646446,5.353555,4.646446,5.353555C4.4511845,5.15829,4.4511845,4.841709,4.646446,4.646446C4.646446,4.646446,4.646446,4.646446,4.646446,4.646446Z" fill-rule="evenodd" fill="${props.color}" fill-opacity="1"/></g></g></g></svg>`
+    return <View style={{ width: props.width, height: props.width }}>
+        <mysvg src={icon} colors={[]}/>
+    </View>
 }

src/components/layout/Modal.scss

@@ -87,10 +87,10 @@
 }
 
 .modal_cancel_text{
-
+    font-weight: 500;
 }
 
 
 .modal_confirm_text{
-
+    font-weight: 500;
 }

src/components/navigation/Segment.scss

@@ -42,6 +42,7 @@
 
 .segment_text{
     font-size: 32px;
+    font-weight: 500;
     color: #fff;
     opacity: 0.4;
 }

src/components/view/Timeline.scss

@@ -32,6 +32,7 @@
 }
 
 .timeline-detail {
+  position: relative;
   margin-bottom: 5px;
   color: #fff;
   opacity: 0.4;
@@ -59,6 +60,17 @@
   // margin-top: 6px;
 }
 
+.timeline-date2 {
+  // opacity: 0.4;
+  color: #fff;
+  font-size: 32px;
+  line-height: 32px;
+  margin-left: 6px;
+  // background-color: orange;
+  opacity: 0.3;
+  // margin-top: 6px;
+}
+
 .timeline-time {
   color: #fff;
   opacity: 0.8;
@@ -141,4 +153,22 @@
 
 .line1_bottom_zero {
   margin-bottom: 20px;
+}
+
+.timeline-line-bg{
+  position: absolute;
+  top: 44px;
+  left: 0px;
+  bottom: 13px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.timeline-line1{
+  width: 2px;
+  border-radius: 1px;
+  background-color: #FFFFFF66;
+  height: 100%;
 }

src/components/view/Timeline.tsx

@@ -1,71 +1,30 @@
-import { View, Image, Text, Icon } from '@tarojs/components'
+import { View, Text, Icon } from '@tarojs/components'
 import './Timeline.scss'
-import { CheckBoxType, TimelineType } from '@/utils/types'
-import CheckBox from '../basic/CheckBox'
+import { TimelineType } from '@/utils/types'
+import { IconRadio, IconRadioCheck, IconRadioCross } from '../basic/Icons'
 
 
-export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
-
-    /*
-    <View style={{ background: 'red', width: 30, height: 30 }}>
-                
-                <mysvg src='' colors={['gray']} />
-            </View>
-    */
-    function paddingIcon() {
-        return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="#FFFFFF" fill="none" stroke-width="1"/></g></g></svg>`
-    }
-    function checkIcon(color) {
-        return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs>
-        <clipPath id="master_svg0_1288_09724"><rect x="2" y="2" width="12" height="12" rx="0"/></clipPath></defs><g><g>
-        <ellipse cx="8" cy="8" rx="8" ry="8" fill="${color}" fill-opacity="0.4000000059604645"/>
-        <ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="${color}" fill="none" stroke-width="1"/></g>
-        <g clip-path="url(#master_svg0_1288_09724)"><g><path d="M12.35355,4.646446C12.5488,4.841709,12.5488,5.15829,12.35355,5.353555C12.35355,5.353555,6.85355,10.85355,6.85355,10.85355C6.65829,11.0488,6.34171,11.0488,6.14645,10.85355C6.14645,10.85355,3.646446,8.35355,3.646446,8.35355C3.4511845,8.158290000000001,3.4511845,7.84171,3.646446,7.64645C3.841709,7.45118,4.15829,7.45118,4.353555,7.64645C4.353555,7.64645,6.5,9.7929,6.5,9.7929C6.5,9.7929,11.64645,4.646446,11.64645,4.646446C11.8417,4.4511845,12.1583,4.4511845,12.35355,4.646446C12.35355,4.646446,12.35355,4.646446,12.35355,4.646446Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></g></svg>`
-    }
-
-    function cancelIcon(color) {
-        return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs>
-        <clipPath id="master_svg0_1288_09725"><rect x="2" y="2" width="12" height="12" rx="0"/></clipPath></defs><g><g><ellipse cx="8" cy="8" rx="8" ry="8" fill="${color}" fill-opacity="0.4000000059604645"/>
-        <ellipse cx="8" cy="8" rx="7.5" ry="7.5" fill-opacity="0" stroke-opacity="1" stroke="${color}" fill="none" stroke-width="1"/></g><g clip-path="url(#master_svg0_1288_09725)"><g><path d="M4.646446,4.646446C4.841709,4.4511845,5.15829,4.4511845,5.353555,4.646446C5.353555,4.646446,8,7.2928999999999995,8,7.2928999999999995C8,7.2928999999999995,10.64645,4.646446,10.64645,4.646446C10.8417,4.4511845,11.1583,4.4511845,11.35355,4.646446C11.5488,4.841709,11.5488,5.15829,11.35355,5.353555C11.35355,5.353555,8.70711,8,8.70711,8C8.70711,8,11.35355,10.64645,11.35355,10.64645C11.5488,10.8417,11.5488,11.1583,11.35355,11.35355C11.1583,11.5488,10.8417,11.5488,10.64645,11.35355C10.64645,11.35355,8,8.70711,8,8.70711C8,8.70711,5.353555,11.35355,5.353555,11.35355C5.15829,11.5488,4.841709,11.5488,4.646446,11.35355C4.4511845,11.1583,4.4511845,10.8417,4.646446,10.64645C4.646446,10.64645,7.2928999999999995,8,7.2928999999999995,8C7.2928999999999995,8,4.646446,5.353555,4.646446,5.353555C4.4511845,5.15829,4.4511845,4.841709,4.646446,4.646446C4.646446,4.646446,4.646446,4.646446,4.646446,4.646446Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></g></svg>`
-    }
+export default function Component(props: { items: any[], title?: string, type?: TimelineType, showLastLine?: boolean }) {
     return <View className="timeline">
         {
             props.title && <Text className='timeline_title'>{props.title}</Text>
         }
-        {/* <MySVG src="../../assets/svg/check.svg"/> */}
         {
             props.items.map((item, index) => (
                 <View className='timelineItem'>
-                    <View className='timelineContentView'>
+                    <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                         {
-                            item.status == 'padding' && <View style={{ width: 16, height: 16 }}>
-
-                                <mysvg src={paddingIcon()} colors={['#ffffff66']} />
-                            </View>
-                            //<Icon type='circle' size='16' color='#ffffff66' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
+                            item.status == 'padding' && <IconRadio width={16} color={item.color} />
                         }
                         {
-                            item.status == 'done' && <View style={{ width: 16, height: 16 }}>
-
-                                <mysvg src={checkIcon(item.color)} />
-                            </View>
-                            //<Icon type='success' color={item.color} size='16' />//<CheckBox type={CheckBoxType.check} opacity={0.4} color={item.color}/>
+                            item.status == 'done' && <IconRadioCheck width={16} color={item.color} />
                         }
                         {
-                            item.status == 'un_done' && <View style={{ width: 16, height: 16 }}>
-
-                                <mysvg src={cancelIcon(item.color)} />
-                            </View>
-                            //<Icon type='cancel' color={item.color} size='16' />//<CheckBox type={CheckBoxType.cross} opacity={0.4} color={item.color}/>
+                            item.status == 'un_done' && <IconRadioCross width={16} color={item.color} />
                         }
                         <View className='timelineContentDetail'>
                             <View className="timeline-time" style={{ color: item.color ? item.color : '#fff' }}>{item.title}</View>
-
                             <View style={{ flex: 1 }} />
-                            {/* {
-                                item.date && <View className="timeline-date">{item.date}</View>
-                            } */}
-
                         </View>
                     </View>
                     <View className="timeline-detail">{item.content}
@@ -74,10 +33,33 @@ export default function Component(props: { items: any[], title?: string, type?:
                         }
                     </View>
                     <View className={index !== props.items.length - 1 ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
-                    {index !== props.items.length - 1 &&
-                        <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line'}
+                    {
+                        index !== props.items.length - 1 &&
+                        <View className='timeline-line-bg' style={{ width: 16,background: global.isDebug ? 'red' : 'transparent' }}>
+                            <View className='timeline-line1'
+                                style={{ background: (props.items[index + 1].status == 'done' && item.status == 'done') ? 'linear-gradient(to top, ' + props.items[index + 1].color + ', ' + item.color + ')' : '#ffffff66' }}
+                            />
+                        </View>
+                    }
+                    {
+                        index == props.items.length - 1 && props.showLastLine &&
+                        <View className='timeline-line-bg' style={{ width: 16,background: global.isDebug ? 'red' : 'transparent'}}>
+                            <View className='timeline-line1'
+                                style={{ background: item.color }}
+                            />
+                        </View>
+                    }
+
+                    {/* {index !== props.items.length - 1 && 
+                        <View className='timeline-line'
                             style={{ background: (props.items[index + 1].status == 'done' && item.status == 'done') ? 'linear-gradient(to top, ' + props.items[index + 1].color + ', ' + item.color + ')' : '#ffffff66' }}
                         />}
+                    {
+                        index == props.items.length - 1 && props.showLastLine &&
+                        <View className='timeline-line'
+                            style={{ background: item.color }}
+                        />
+                    } */}
 
                 </View>
             ))

src/context/locales/zh.js

@@ -7,7 +7,7 @@ export default {
         more: '更多'
     },
     share:{
-        title:'健康减脂/轻断食/作息调整/指标记录/运动打卡，尽在fast16cc'
+        title:'减脂/断食睡眠/身材管理/指标记录/运动打卡, 尽在fast16cc'
     },
     page: {
         clock: {
@@ -49,7 +49,7 @@ export default {
             agreement: '已阅读并同意《用户协议》和《隐私政策》',
         },
         records_history: {
-            time_title: '断食睡眠记录',
+            time_title: '断食和睡眠记录',
             metric_title: '{{title}}记录',
             activity_title: '{{title}}记录',
             del_success: '删除成功'
@@ -143,6 +143,7 @@ export default {
                 },
                 timeline:'时间线',  //modal弹窗 segment index=0的值
                 stage:'阶段',
+                pop_title:'详情'
             },
 
             action_sheet: {
@@ -186,7 +187,10 @@ export default {
         },
         track_something: {
             btn_record: '记录',
-            picker_datetime: '记录时间'
+            picker_datetime: '记录时间',
+            activity:{
+                pop_title:'详情'
+            }
         }
     }
 }

src/features/trackSomething/components/ActivityHistory.tsx

@@ -11,10 +11,12 @@ import { TimeFormatter } from "@/utils/time_format";
 import './ActivityHistory.scss'
 import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
 import { useRouter } from "@tarojs/taro";
+import { useTranslation } from "react-i18next";
 
 export default function Component(props: { records: any[] }) {
     const user = useSelector((state: any) => state.user);
     const [list, setList] = useState(props.records)
+    const {t} = useTranslation()
     const router = useRouter();
     useEffect(() => {
         setList(props.records)
@@ -75,23 +77,14 @@ export default function Component(props: { records: any[] }) {
             )
         }
         return <View style={{ display: 'flex', flexDirection: 'column' }}>
-            <Text className="box_title">打卡详情</Text>
+            <Text className="box_title">{t('feature.track_something.activity.pop_title')}</Text>
             <Text className="box_subtitle">{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
             <View style={{display:'flex',alignItems:'center',position:'relative',width:'100%',flexDirection:'column'}}>
-                <Timeline items={timelineItems} type={TimelineType.timeFirst} />
+                <Timeline items={timelineItems} type={TimelineType.timeFirst} showLastLine={TimeFormatter.getMonthAndDayByDate(item.date)=='今天'}/>
             </View>
 
         </View>
 
-        return <CenterContentTitleModal title={TimeFormatter.getMonthAndDayByDate(item.date)}>
-            <Timeline items={timelineItems} type={TimelineType.timeFirst} />
-        </CenterContentTitleModal>
-        // return <View style={{ display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'center' }}>
-        //     <View style={{display:'flex',flexDirection:'row',width:'100%'}}>
-        //         <Text className="modalTitle">{formateDate(item.date + '')}</Text>
-        //     </View>
-        //     <Timeline items={timelineItems} type={TimelineType.timeSecond} />
-        // </View>
     }
 
     function showDetail(item) {

src/features/trackTimeDuration/components/ChooseScenario.tsx

@@ -62,6 +62,23 @@ export default function Component() {
     })
 
     function next() {
+        switch (selIndex) {
+            case 0:
+                {
+                    dispatch(setStep('fast'))
+                }
+                break;
+            case 1:
+                {
+                    dispatch(setStep('sleep'))
+                }
+                break;
+
+            case 2:
+                {
+                    dispatch(setStep(isFastFirst ? 'fast' : 'sleep'))
+                }
+        }
         Taro.navigateTo({
             url: '/pages/clock/SetSchedule'
         })
@@ -72,21 +89,20 @@ export default function Component() {
         var background;
         switch (selIndex) {
             case 0:
-                style = { backgroundColor: global.fastColor?global.fastColor:ColorType.fast }
-                background = global.fastColor?global.fastColor:ColorType.fast
+                style = { backgroundColor: global.fastColor ? global.fastColor : ColorType.fast }
+                background = global.fastColor ? global.fastColor : ColorType.fast
                 break;
             case 1:
-                style = { backgroundColor: global.sleepColor?global.sleepColor:ColorType.sleep }
-                background = global.sleepColor?global.sleepColor:ColorType.sleep
+                style = { backgroundColor: global.sleepColor ? global.sleepColor : ColorType.sleep }
+                background = global.sleepColor ? global.sleepColor : ColorType.sleep
                 break;
             case 2:
                 style = {
-                    background: 'linear-gradient(to right, ' + (global.fastColor?global.fastColor:ColorType.fast) + ', ' + (global.sleepColor?global.sleepColor:ColorType.sleep) + ')'
+                    background: 'linear-gradient(to right, ' + (global.fastColor ? global.fastColor : ColorType.fast) + ', ' + (global.sleepColor ? global.sleepColor : ColorType.sleep) + ')'
                 }
-                background = 'linear-gradient(to right, ' + (global.fastColor?global.fastColor:ColorType.fast) + ', ' + (global.sleepColor?global.sleepColor:ColorType.sleep) + ')'
+                background = 'linear-gradient(to right, ' + (global.fastColor ? global.fastColor : ColorType.fast) + ', ' + (global.sleepColor ? global.sleepColor : ColorType.sleep) + ')'
                 break;
         }
-        debugger
         return <View>
             <ChooseScenarioBtn title={t('feature.common.btn_next')} onClick={next} background={background} />
             {/* <Buttons title='Next' onClick={next} btnStyle={{ ...style, width: 320 }} /> */}
@@ -180,13 +196,13 @@ export default function Component() {
         }
 
         const targetRing: TargetRing = {
-            color: global.fastColor?global.fastColor:ColorType.fast,
+            color: global.fastColor ? global.fastColor : ColorType.fast,
             startArc: timeToArc((getScheduleTarget(true) as any).start_time),
             durationArc: durationToArc((getScheduleTarget(true) as any).start_time, (getScheduleTarget(true) as any).end_time)
         }
 
         const targetRing2: TargetRing = {
-            color: global.sleepColor?global.sleepColor:ColorType.sleep,
+            color: global.sleepColor ? global.sleepColor : ColorType.sleep,
             startArc: timeToArc((getScheduleTarget(false) as any).start_time),
             durationArc: durationToArc((getScheduleTarget(false) as any).start_time, (getScheduleTarget(false) as any).end_time)
         }
@@ -196,10 +212,10 @@ export default function Component() {
             <View className="item_row" style={{ opacity: scenarios.length > 0 ? 1 : 0 }}>
                 <Rings2 common={common} bgRing={bgRing} targetRing={targetRing} canvasId='0' />
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: global.fastColor?global.fastColor:ColorType.fast }}>{t('feature.track_time_duration.choose_scenario.list.item1.name')}</Text>
+                    <Text className="item_txt" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{t('feature.track_time_duration.choose_scenario.list.item1.name')}</Text>
                     {
                         scenarios[0].count > 0 && <View className="scenario_count">
-                            <View className="badge_view1" style={{ backgroundColor: global.fastColor?global.fastColor:ColorType.fast }}>
+                            <View className="badge_view1" style={{ backgroundColor: global.fastColor ? global.fastColor : ColorType.fast }}>
                                 <Text className="badge1">x{scenarios[0].count}</Text>
                             </View>
 
@@ -212,14 +228,14 @@ export default function Component() {
             <View className="item_row" style={{ opacity: scenarios.length > 0 ? 1 : 0 }}>
                 <Rings2 common={common} bgRing={bgRing} targetRing={targetRing2} canvasId='1' />
                 <View className="item_txt_bg">
-                    <Text className="item_txt" style={{ color: global.sleepColor?global.sleepColor:ColorType.sleep }}>{t('feature.track_time_duration.choose_scenario.list.item2.name')}</Text>
+                    <Text className="item_txt" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{t('feature.track_time_duration.choose_scenario.list.item2.name')}</Text>
                     {
                         scenarios[1].count > 0 && <View className="scenario_count">
-                        <View className="badge_view1" style={{ backgroundColor: global.sleepColor?global.sleepColor:ColorType.sleep }}>
-                            <Text className="badge1">x{scenarios[1].count}</Text>
-                        </View>
+                            <View className="badge_view1" style={{ backgroundColor: global.sleepColor ? global.sleepColor : ColorType.sleep }}>
+                                <Text className="badge1">x{scenarios[1].count}</Text>
+                            </View>
 
-                    </View>
+                        </View>
                     }
                 </View>
             </View>
@@ -236,13 +252,15 @@ export default function Component() {
                     <Text className="item_txt fast_sleep_text" >{t('feature.track_time_duration.choose_scenario.list.item3.name')}</Text>
                     {
                         scenarios[2].count > 0 && <View className="scenario_count">
-                        <View className="badge_view1" style={{background: 'linear-gradient(to right, ' +
-                         (global.fastColor?global.fastColor:ColorType.fast) + ', '
-                          + (global.sleepColor?global.sleepColor:ColorType.sleep) + ')'}}>
-                            <Text className="badge1">x{scenarios[2].count}</Text>
-                        </View>
+                            <View className="badge_view1" style={{
+                                background: 'linear-gradient(to right, ' +
+                                    (global.fastColor ? global.fastColor : ColorType.fast) + ', '
+                                    + (global.sleepColor ? global.sleepColor : ColorType.sleep) + ')'
+                            }}>
+                                <Text className="badge1">x{scenarios[2].count}</Text>
+                            </View>
 
-                    </View>
+                        </View>
                     }
                 </View>
             </View>

src/features/trackTimeDuration/components/Clock.tsx

@@ -10,7 +10,13 @@ import { useSelector } from "react-redux";
 export default function Component() {
     const [checkData, setCheckData] = useState(null)
     const time = useSelector((state: any) => state.time);
+    const user = useSelector((state: any) => state.user);
 
+    useEffect(()=>{
+        if (!user.isLogin){
+            setCheckData(null)
+        }
+    },[user.isLogin])
 
     useEffect(() => {
         if (machine.context.checkData) {

src/features/trackTimeDuration/components/Dial.tsx

@@ -9,12 +9,13 @@ import { ColorType } from '@/context/themes/color';
 const Component = (props) => {
     const [scenario] = useState(useSelector((state: any) => state.scenario))
     const [currentContext, setCurrentContext] = useState(null)
+    const [count, setCount] = useState(0)
     const canvasWidth: number = 334;
     const canvasHeight: number = 334;
     const dpr = Taro.getSystemInfoSync().pixelRatio; // 获取设备的像素比
     const canvasRef = useRef<any>(null);
     const watchLineWidth = 300
-    const canvasId = 'canvasDialId';
+    const canvasId = scenario.step;
 
     var canStartDrag = false;
     var canEndDrag = false;
@@ -42,6 +43,18 @@ const Component = (props) => {
         needDrawFastRing = true;
     }
 
+    useEffect(() => {
+        setCount(count + 1)
+        if (currentContext){
+            drawCanvas(currentContext)
+            console.log('a')
+        }
+        else {
+            console.log('b')
+        }
+            
+    }, [global.startTime, global.endTime])
+
     useEffect(() => {
 
         const query = Taro.createSelectorQuery();
@@ -53,6 +66,7 @@ const Component = (props) => {
             _canvas.height = res[0].height * dpr;
             global.canvas = _canvas
             const ctx = _canvas.getContext('2d');
+
             setCurrentContext(ctx)
 
             // 设置画布尺寸
@@ -77,7 +91,7 @@ const Component = (props) => {
         if (needDrawFastRing) {
             ctx.beginPath();
             ctx.arc(centerX, centerY, radius + 16 + 8, global.fast_start_angle, global.fast_end_angle);
-            ctx.strokeStyle = global.fastColor?global.fastColor:ColorType.fast;
+            ctx.strokeStyle = global.fastColor ? global.fastColor : ColorType.fast;
             ctx.lineWidth = 2;
             ctx.stroke();
         }
@@ -134,11 +148,11 @@ const Component = (props) => {
         ctx.beginPath();
         ctx.arc(pointX, pointY, 17, 0, 2 * Math.PI);
         // ctx.fillStyle = (canRingDrag || canStartDrag) ? "#1c1c1c" : "#3e3e3e";
-        if (canEndDrag||canRingDrag){ //拖icon
-            ctx.fillStyle  = '#3e3e3e'
+        if (canEndDrag || canRingDrag) { //拖icon
+            ctx.fillStyle = '#3e3e3e'
         }
         else {  //idle
-            ctx.fillStyle  = '#1c1c1c'
+            ctx.fillStyle = '#1c1c1c'
         }
         ctx.fill();
 
@@ -171,11 +185,11 @@ const Component = (props) => {
         ctx.beginPath();
         ctx.arc(pointX2, pointY2, 17, 0, 2 * Math.PI);
         // ctx.fillStyle = (canRingDrag || canEndDrag) ? "#1c1c1c" : "#3e3e3e";
-        if (canStartDrag || canRingDrag){ //拖icon
-            ctx.fillStyle  = '#3e3e3e'
+        if (canStartDrag || canRingDrag) { //拖icon
+            ctx.fillStyle = '#3e3e3e'
         }
         else {  //idle
-            ctx.fillStyle  = '#1c1c1c'
+            ctx.fillStyle = '#1c1c1c'
         }
         ctx.fill();
 

src/features/trackTimeDuration/components/RecordFastSleep.tsx

@@ -49,18 +49,14 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
     }
 
     function schedules() {
-        // if (props.data.scenario != 'FAST_SLEEP') {
-        //     return <CenterContentTitleModal title="Timeline">
-        //         <TimelineFastSleep data={props.data} />
-        //     </CenterContentTitleModal>
-        // }
         return <View style={{ display: 'flex', flexDirection: 'column' }}>
 {/* 
             <Text className="modalTitle1" style={{
                 marginBottom: 10,
                 color: '#fff', fontWeight: 'bold',
             }}>{TimeFormatter.getDateAndWeek(props.data.first_real_check_time)}</Text> */}
-            <TimelineStage data={props.data} title="记录详情" subTitle={TimeFormatter.getDateAndWeek(props.data.first_real_check_time)}/>
+            <TimelineStage data={props.data} title={t('feature.track_time_duration.record_fast_sleep.pop_title')} 
+            subTitle={TimeFormatter.getDateAndWeek(props.data.first_real_check_time)}/>
 
             {/* {
                 props.data.scenario == 'FAST_SLEEP' &&
@@ -124,7 +120,8 @@ export default function RecordFastSleep(props: { data: any, type: string, delSuc
         if (!end) {
             end = (new Date()).getTime()
         }
-        return TimeFormatter.calculateTimeDifference(start, end)
+        return TimeFormatter.durationFormate(start,end)
+        // return TimeFormatter.calculateTimeDifference(start, end)
     }
 
     function durationArc(start_time: number, end_time: number) {

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -3,7 +3,7 @@ import { setPlan } from "@/services/trackTimeDuration";
 import { setScenario, setStep } from "@/store/scenario";
 import { View, Text } from "@tarojs/components";
 import "./SetSchedule.scss";
-import Taro, { useReady } from "@tarojs/taro";
+import Taro, { useDidShow, useReady } from "@tarojs/taro";
 import { useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Footer from "@/components/layout/Footer";
@@ -65,8 +65,10 @@ export default function Component() {
   const [hours, setHours] = useState(durationTime(scheduleObj.start_time, scheduleObj.end_time)[0])
   const [minutes, setMinutes] = useState(durationTime(scheduleObj.start_time, scheduleObj.end_time)[1])
   const [chooseStart, setChooseStart] = useState(true)
+  const [count, setCount] = useState(0)
 
   useReady(() => {
+
     if (global.schedule_fast && scenario.step == 'fast') {
       scheduleObj = global.schedule_fast
     }
@@ -86,6 +88,12 @@ export default function Component() {
     // })
   })
 
+
+  useDidShow(() => {
+    setCount(count + 1)
+  })
+
+
   function start() {
     if (scenario.name == 'FAST' || scenario.name == 'SLEEP') {
       setPlan({
@@ -104,7 +112,6 @@ export default function Component() {
       }).then(res => {
         global.checkData()
         Taro.navigateBack({ delta: 3 })
-        // console.log('success')
       })
     }
     else {
@@ -231,23 +238,22 @@ export default function Component() {
 
   global.startDuration = (type) => {
     setOperateType(type)
-    console.log(type)
   }
 
   global.updateDuration = (start, end) => {
     var startCount = parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])
     var endCount = parseInt(end.split(':')[0]) * 60 + parseInt(end.split(':')[1])
-    if (operateType == 1 && startCount % 15 == 0) {
+    if (operateType == 1 && startCount % 30 == 0) {
       Taro.vibrateShort({
         type: 'medium',
       })
     }
-    else if (operateType == 2 && endCount % 15 == 0) {
+    else if (operateType == 2 && endCount % 30 == 0) {
       Taro.vibrateShort({
         type: 'medium',
       })
     }
-    else if (operateType == 3 && (startCount % 15 == 0 || endCount % 15 == 0)) {
+    else if (operateType == 3 && (startCount % 30 == 0 || endCount % 30 == 0)) {
       Taro.vibrateShort({
         type: 'medium',
       })
@@ -261,6 +267,7 @@ export default function Component() {
     saveTempCache(start, end)
   }
 
+
   global.endDuration = () => {
     setOperateType(0)
   }
@@ -273,7 +280,7 @@ export default function Component() {
       title={scenario.step == 'fast' ?
         t('feature.track_time_duration.dial.picker_fast_schedule_duration') :
         t('feature.track_time_duration.dial.picker_sleep_schedule_duration')}
-      themeColor={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
+      themeColor={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
       showBtns={true} onCancel={() => { setIsOpen(false) }} />
   }
 
@@ -295,7 +302,7 @@ export default function Component() {
 
   function timeContent() {
     return <TimePicker time={chooseStart ? startTime : endTime}
-      color={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
+      color={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
       title={pickerTitle()}
       confirm={chooseStart ? onStartTimeChange : onEndTimeChange}
       cancel={() => { setIsTimeOpen(false) }} />
@@ -306,7 +313,7 @@ export default function Component() {
       {/* <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text> */}
       <TitleView title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
         subTitle={t('page.set_schedule.fast_subtitle')}
-        titleColor={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
+        titleColor={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
       />
 
       <View className="box">
@@ -360,7 +367,7 @@ export default function Component() {
   }
 
   return <Layout
-    titleColor={scenario.step == 'fast' ? global.fastColor?global.fastColor:ColorType.fast : global.sleepColor?global.sleepColor:ColorType.sleep}
+    titleColor={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
     title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
     titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.customHeader}>
     {

src/features/trackTimeDuration/components/Stage.scss

@@ -78,4 +78,14 @@
     line-height: 32px;
     color: rgba(255, 255, 255, 0.8);
     // margin-bottom: 16px;
+}
+
+.stage_icon{
+    position: absolute;
+    left: -100px;
+    // background-color: yellow;
+    width: 80px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
 }

src/features/trackTimeDuration/components/Stage.tsx

@@ -2,6 +2,7 @@ import { View, Text, Icon } from "@tarojs/components";
 import './Stage.scss'
 import { TimeFormatter } from "@/utils/time_format";
 import { ColorType } from "@/context/themes/color";
+import { IconRadio, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
 
 export default function Component(props: { data: any }) {
     function getTime(t1: number, t2: number) {
@@ -16,7 +17,7 @@ export default function Component(props: { data: any }) {
         if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
             return '未完成'
         }
-        
+
         return obj.status == 'ONGOING1' ?
             getTime(obj.fast.real_start_time, (new Date()).getTime()) :
             obj.sleep.real_start_time ? getDuration(obj.sleep.real_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time) :
@@ -41,11 +42,38 @@ export default function Component(props: { data: any }) {
         if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return '未开始'
         return getDuration(obj.fast.real_end_time, obj.sleep.real_end_time)
     }
+    function getStepAIcon(obj) {
+        if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
+            return <IconRadioCross width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />;
+        }
+        return (obj.status == 'ONGOING1' || obj.status == 'WAIT_FOR_START') ?
+            <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+            : <IconRadioCheck width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+    }
+
+    function getStepBIcon(obj) {
+        var sleepColor = global.sleepColor ? global.sleepColor : ColorType.sleep
+        if (obj.status == 'ONGOING1') return <IconRadio width={16} color={sleepColor} />
+        if (obj.status == 'ONGOING2') return <IconRadio width={16} color={sleepColor} />
+        if (obj.status == 'WAIT_FOR_START') return <IconRadio width={16} color={sleepColor} />
+        if (obj.sleep.status == 'NOT_STARTED') return <IconRadioCross width={16} color={sleepColor} />
+        if (obj.sleep.status == 'NOT_COMPLETED') return <IconRadioCross width={16} color={sleepColor} />
+        return <IconRadioCheck width={16} color={sleepColor} />
+    }
+
+    function getStepCIcon(obj) {
+        if (obj.status == 'ONGOING1') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+        if (obj.status == 'ONGOING2') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+        if (obj.status == 'ONGOING3') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+        if (obj.status == 'WAIT_FOR_START') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return <IconRadioCross width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+        return <IconRadioCheck width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
+    }
 
     return <View className="stage">
 
         <View className='timelineItem'>
-            <View className='timelineContentView'>
+            <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                 {
                     <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                 }
@@ -53,19 +81,25 @@ export default function Component(props: { data: any }) {
                     <View className="timeline-time" >{'  '}</View>
                 </View>
             </View>
-            <View className="timeline-detail" style={{ color: ColorType.fast,opacity:1 }}>睡前断食
-                <View className="timeline-date" style={{ color: ColorType.fast,opacity:1 }}>{getStepATime(props.data)}</View>
+            <View className="timeline-detail" style={{ color: ColorType.fast, opacity: 1 }}>
+
+                <Text>睡前断食</Text>
+                <View className="timeline-date2" style={{ color: ColorType.fast, opacity: 1 }}>{getStepATime(props.data)}</View>
 
             </View>
-            <View className={true ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
-            {true &&
-                <View className='timeline-line'
-                    style={{ background: '#ffffff66' }}
-                />}
+            <View className='timeline_line1 line1_bottom_space' style={{backgroundColor:props.data.status == 'ONGOING1'?ColorType.fast:'rgba(255,255,255,0.1)'}}/>
+            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
+                {
+                    getStepAIcon(props.data)
+                }
+                <View className='timeline-line1'
+                    style={{ background: '#ffffff00' }}
+                />
+            </View>
 
         </View>
         <View className='timelineItem'>
-            <View className='timelineContentView'>
+            <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                 {
                     <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                 }
@@ -73,19 +107,25 @@ export default function Component(props: { data: any }) {
                     <View className="timeline-time" >{'  '}</View>
                 </View>
             </View>
-            <View className="timeline-detail" style={{ color: ColorType.sleep,opacity:1 }}>睡眠中断食
-                <View className="timeline-date" style={{ color: ColorType.sleep ,opacity:1}}>{getStepBTime(props.data)}</View>
+            <View className="timeline-detail" style={{ color: ColorType.sleep, opacity: 1 }}>
+
+                <Text>睡眠中断食</Text>
+                <View className="timeline-date2" style={{ color: ColorType.sleep, opacity: 1 }}>{getStepBTime(props.data)}</View>
 
             </View>
-            <View className={true ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
-            {true &&
-                <View className='timeline-line'
-                    style={{ background: '#ffffff66' }}
-                />}
+            <View className='timeline_line1 line1_bottom_space' style={{backgroundColor:props.data.status == 'ONGOING2'?ColorType.sleep:'rgba(255,255,255,0.1)'}} />
+            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
+                {
+                    getStepBIcon(props.data)
+                }
+                <View className='timeline-line1'
+                    style={{ background: '#ffffff00' }}
+                />
+            </View>
 
         </View>
         <View className='timelineItem'>
-            <View className='timelineContentView'>
+            <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                 {
                     <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                 }
@@ -93,15 +133,20 @@ export default function Component(props: { data: any }) {
                     <View className="timeline-time" >{'  '}</View>
                 </View>
             </View>
-            <View className="timeline-detail" style={{ color: ColorType.fast ,opacity:1}}>起床后断食
-                <View className="timeline-date" style={{ color: ColorType.fast ,opacity:1}}>{getStepCTime(props.data)}</View>
+            <View className="timeline-detail" style={{ color: ColorType.fast, opacity: 1 }}>
+                <Text>起床后断食</Text>
+                <View className="timeline-date2" style={{ color: ColorType.fast, opacity: 1 }}>{getStepCTime(props.data)}</View>
 
             </View>
-            <View className={'timeline_line1 line1_bottom_zero'} />
-            {true &&
-                <View className='timeline-line'
-                    style={{ background: '#ffffff66' }}
-                />}
+            <View className={'timeline_line1 line1_bottom_zero'} style={{backgroundColor:props.data.status == 'ONGOING3'?ColorType.fast:'rgba(255,255,255,0.1)'}}/>
+            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
+                {
+                    getStepCIcon(props.data)
+                }
+                <View className='timeline-line1'
+                    style={{ background: '#ffffff00' }}
+                />
+            </View>
         </View>
         {/* <View className="stage_item">
             <Text className='stage_step'>A</Text>

src/features/trackTimeDuration/components/StatusIndicator.tsx

@@ -2,9 +2,12 @@ import { View, Text } from "@tarojs/components";
 import './StatusIndicator.scss'
 import { useSelector } from "react-redux";
 import { ColorType } from "@/context/themes/color";
+import { useEffect } from "react";
 
 export default function Component() {
     const time = useSelector((state: any) => state.time);
+    const user = useSelector((state: any) => state.user);
+    
     function getFastName() {
         var strName = '断食'
         switch (time.scenario) {
@@ -73,6 +76,9 @@ export default function Component() {
     if (!time.scenario){
         return <View />
     }
+    if (!user.isLogin){
+        return <View />
+    }
 
     return <View className='subcontent'>
         {
@@ -90,3 +96,4 @@ export default function Component() {
 
     </View>
 }
+

src/pages/account/Profile.scss

@@ -34,6 +34,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    // object-fit:contain;
 
 }
 

src/pages/account/Profile.tsx

@@ -106,6 +106,8 @@ export default function Page() {
         e.stopPropagation()
     }
 
+    console.log(user.avatar)
+
     function detail() {
         return <View className="container">
             <Box>
@@ -115,7 +117,7 @@ export default function Page() {
                         background: user.isLogin ? 'transparent' : '#fff'
                     }}>
                         {
-                            user.isLogin ? <Image src={user.avatar} className="avatar" style={{
+                            user.isLogin ? <Image src={user.avatar} className="avatar" mode="aspectFill" style={{
                                 background: user.isLogin ? 'transparent' : '#fff'
                             }} /> : <Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
                         }

src/pages/account/ProfileSetting.tsx

@@ -86,7 +86,7 @@ export default function Page() {
 
         <View className="avatar_row">
             <View className="avatar_bg">
-                <Image src={user.avatar} className="avatar" />
+                <Image src={user.avatar} className="avatar" mode="aspectFill"/>
                 
                 <View className="camera_bg">
                     <Image className="camera" src={require('@assets/images/camera.png')} />

src/pages/account/Setting.tsx

@@ -47,7 +47,7 @@ export default function Page() {
 
     return <View style={{ color: '#fff',display:'flex',flexDirection:'column' }}>
         <View style={{height:20}}/>
-        <TableCell title="版本" ><Text style={{ opacity: 0.8 }}>v1.2.3</Text></TableCell>
+        <TableCell title="版本" ><Text style={{ opacity: 0.8 }}>1.2.2</Text></TableCell>
         <View style={{height:'80vh'}}/>
         {/* <Text style={{color:'#9E9E9E',textAlign:'center',fontSize:14}}>v1.2.2</Text> */}
         

src/pages/clock/Clock.tsx

@@ -274,7 +274,7 @@ export default function IndexPage() {
             setTimeout(() => {
               global.consoleType = 'idle'
             }, 2000)
-          }, 2000)
+          }, 500)
         }
         else {
         }
@@ -290,6 +290,8 @@ export default function IndexPage() {
   function checkWXPubFollow() {
     wxPubFollow().then(res => {
       dispatch(setWXFollow((res as any).wx_pub_followed));
+      console.log('当前的关注状态'+(res as any).wx_pub_followed);
+      
     })
   }
 

src/utils/time_format.ts

@@ -47,7 +47,7 @@ export class TimeFormatter {
 
   //1.只显示时间
   static timelineFormatTime(timestamp: number, isTestUser?: boolean): string {
-    if (!timestamp){
+    if (!timestamp) {
       return '  '
     }
     var date = new Date(timestamp)
@@ -60,7 +60,7 @@ export class TimeFormatter {
   }
   //2.基于日期显示日期,省略今天描述
   static dateDescription(timestamp: number, showToday?: boolean): string {
-    if (!timestamp){
+    if (!timestamp) {
       return ''
     }
     const currentDate = new Date();
@@ -109,8 +109,15 @@ export class TimeFormatter {
     const oneDayMilliseconds = 24 * 60 * 60 * 1000; // 一天的毫秒数
     var dayDifference = Math.floor((utcDate2 - utcDate1) / oneDayMilliseconds);
     if (dayDifference < 0) {
-      dayDifference = 0 - dayDifference;
-      return `${dayDifference}天前`
+      // dayDifference = 0 - dayDifference;
+      // return `${dayDifference}天前`
+      var strDt = ''
+      if (currentDate.getFullYear() != inputDate.getFullYear()) {
+        strDt = inputDate.getFullYear() + '年'
+      }
+      strDt = strDt + (inputDate.getMonth() + 1) + '月'
+      strDt = strDt + (inputDate.getDate()) + '日'
+      return strDt
     }
     return `${dayDifference}天后`
 
@@ -165,6 +172,26 @@ export class TimeFormatter {
     }
   }
 
+  //duration 根据起终点时间，忽略精度，如果两个时间点小于60s，则保留精度，否则为分钟
+  static durationFormate(startTimestamp: number, endTimestamp: number) {
+    var start = startTimestamp;
+    var end = endTimestamp;
+    const diff = Math.abs(end - start);
+    if (diff > 60000) {
+      var startTime = new Date(start)
+      startTime.setSeconds(0)
+      startTime.setMilliseconds(0)
+      var endTime = new Date(end)
+      endTime.setSeconds(0)
+      endTime.setMilliseconds(0)
+
+      start = startTime.getTime()
+      end = endTime.getTime()
+    }
+    return TimeFormatter.calculateTimeDifference(start, end)
+  }
+
+
   //计算时间间隔
   static calculateTimeDifference(startTimestamp: number, endTimestamp: number, ingoreSeconds?: boolean): string {
     const diff = Math.abs(endTimestamp - startTimestamp);
@@ -175,14 +202,14 @@ export class TimeFormatter {
 
     // 根据间隔的大小返回不同的格式
     if (diff < 60000) {
-      return `${seconds}秒钟`;
+      return `${seconds}秒`;
     } else if (diff < 3600000) {
       return `${minutes}分钟`;
       // return `${minutes}分${seconds}秒`;
     } else {
       // if (ingoreSeconds) return `${hours}小时${minutes}分钟`;
       // return `${hours}小时${minutes}分${seconds}秒`;
-      if (minutes==0){
+      if (minutes == 0) {
         return `${hours}小时`;
       }
       return `${hours}小时${minutes}分钟`;
@@ -261,7 +288,7 @@ export class TimeFormatter {
   }
 
   //获取今天的日期和星期几
-  static getDateAndWeek = (timestamp: number,ignore=false) => {
+  static getDateAndWeek = (timestamp: number, ignore = false) => {
     const now = new Date();
     var dt = new Date(timestamp)
     dt.setSeconds(0)
@@ -277,7 +304,7 @@ export class TimeFormatter {
     } else if (diff < 2 * day && !ignore) {
       return '昨天';
     } else {
-      
+
       var weeks = ['日', '一', '二', '三', '四', '五', '六']
       return `${dt.getMonth() + 1}月${dt.getDate()}日 星期${weeks[dt.getDay()]}`
     }