update

src/features/trackTimeDuration/components/IndexConsole.tsx

@@ -187,7 +187,7 @@ export default function IndexConsole(props: { record: any }) {
         {
             status == 'WAIT_FOR_START' ?
                 <View onClick={tapStartFast} className='console_btn'>
-                    <Text>{t('feature.track_time_duration.common.start_fast')}</Text>
+                    <Text style={{fontWeight:'bold'}}>{t('feature.track_time_duration.common.start_fast')}</Text>
                 </View> :
                 <View onClick={() => { vibrate() }} className='stage_btn'>
                     <Text style={{ flex: 1 }}>睡前断食</Text>
@@ -205,7 +205,7 @@ export default function IndexConsole(props: { record: any }) {
                 {
                     status != 'ONGOING1' && <Image className='lock' src={require('@assets/images/lock.png')} />
                 }
-                <Text>{t('feature.track_time_duration.common.start_sleep')}</Text>
+                <Text style={{fontWeight:'bold'}}>{t('feature.track_time_duration.common.start_sleep')}</Text>
             </View>
         }
         {
@@ -226,7 +226,7 @@ export default function IndexConsole(props: { record: any }) {
                 {
                     status != 'ONGOING2' && <Image className='lock' src={require('@assets/images/lock.png')} />
                 }
-                <Text>{t('feature.track_time_duration.common.end_sleep')}</Text>
+                <Text style={{fontWeight:'bold'}}>{t('feature.track_time_duration.common.end_sleep')}</Text>
             </View>
         }
         {
@@ -242,7 +242,7 @@ export default function IndexConsole(props: { record: any }) {
                 {
                     status == 'WAIT_FOR_START' && <Image className='lock' src={require('@assets/images/lock.png')} />
                 }
-                <Text>{t('feature.track_time_duration.common.end_fast')}</Text>
+                <Text style={{fontWeight:'bold'}}>{t('feature.track_time_duration.common.end_fast')}</Text>
             </View>
         }
     </View>

src/features/trackTimeDuration/components/IndexItem.tsx

@@ -1,5 +1,6 @@
 import { View, Text, Image } from "@tarojs/components";
 import { getBgRing, getCommon, getDot, getReal, getSchedule, getTarget } from "../hooks/RingData";
+import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import Rings from "./Rings";
 import './IndexItem.scss'
 import { useTranslation } from "react-i18next";
@@ -7,6 +8,7 @@ import { ColorType } from "@/context/themes/color";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { TimeFormatter } from "@/utils/time_format";
 import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
 
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
@@ -16,16 +18,32 @@ export default function Component(props: { type: string, data: any, time: any })
     const { t } = useTranslation()
     const record = props.data.current_record;
     const user = useSelector((state: any) => state.user);
+    const [stageList, setStageList] = useState([true,false,false])
     let navigation;
     if (useNavigation) {
         navigation = useNavigation()
     }
 
+    useEffect(() => {
+        if (props.type == 'FAST_SLEEP') {
+            global.updateMixItem = (data) => {
+                setStageList(data)
+            }
+        }
+    }, [])
+
     function durationArc(start_time: number, end_time: number) {
         var duration = (end_time - start_time) / 1000;
         return duration / (24 * 3600) * 2 * Math.PI;
     }
 
+    const startArc = (time: number) => {
+        var date = new Date(time);
+        var hour = date.getHours();
+        var minute = date.getMinutes();
+        var second = date.getSeconds();
+        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
+    }
 
     function bigRing() {
         var common = getCommon(null, true)
@@ -63,7 +81,40 @@ export default function Component(props: { type: string, data: any, time: any })
             }
             if (record.status == 'WAIT_FOR_START') {
                 var realRing1 = getSchedule(record, props.type != 'SLEEP', true)
-                return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={props.type + props.time + 'big'} />
+                var list: any = []
+                if (props.type == 'FAST_SLEEP') {
+                    realRing1.color = ColorType.fast + '66'
+
+                    if (stageList[0]) {
+
+                        const realRingBig: RealRing = {
+                            color: global.fastColor ? global.fastColor : ColorType.fast,
+                            startArc: startArc(record.fast.target_start_time),
+                            durationArc: durationArc(record.fast.target_start_time, record.sleep.target_start_time)
+                        }
+
+                        list.push(realRingBig)
+                    }
+                    if (stageList[1]) {
+                        const realRingBig: RealRing = {
+                            color: global.fastColor ? global.fastColor : ColorType.fast,
+                            startArc: startArc(record.sleep.target_start_time),
+                            durationArc: durationArc(record.sleep.target_start_time, record.sleep.target_end_time)
+                        }
+
+                        list.push(realRingBig)
+                    }
+                    if (stageList[2]) {
+                        const realRingBig: RealRing = {
+                            color: global.fastColor ? global.fastColor : ColorType.fast,
+                            startArc: startArc(record.sleep.target_end_time),
+                            durationArc: durationArc(record.sleep.target_end_time, record.fast.target_end_time)
+                        }
+
+                        list.push(realRingBig)
+                    }
+                }
+                return <Rings common={common} bgRing={bgRing} stageList={list} realRing={realRing1} canvasId={props.type + props.time + 'big'} />
             }
             var realRing1 = getReal(record, true, false)
             return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={props.type + props.time + 'big'} />
@@ -79,8 +130,10 @@ export default function Component(props: { type: string, data: any, time: any })
             var realRing = getReal(record, false, false)
             if (props.type == 'SLEEP' || props.type == 'FAST_SLEEP') {
                 if (record.sleep.status == 'WAIT_FOR_END') {
+                    var targetBigRing1 = getTarget(record, false)
+                    targetBigRing1.color = ColorType.sleep + '66'
                     realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
-                    return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} realRing={realRing} />
+                    return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} targetRing={targetBigRing1} realRing={realRing} />
                 }
                 else if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
                     realRing = getSchedule(record, false, true)
@@ -94,6 +147,9 @@ export default function Component(props: { type: string, data: any, time: any })
                     realRing = getReal(record, false, true)
                     return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} realRing={realRing} />
                 }
+                else if (record.sleep.status == 'ONGOING2') {
+                    return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} />
+                }
                 return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} />
             }
             else {

src/pages/clock/Index.scss

@@ -64,4 +64,8 @@
 .single_checked{
     width: 48px;
     height: 48px;
+}
+
+.swiper1{
+    height: 500px;
 }

src/pages/clock/Index.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Image, ScrollView, PageContainer } from "@tarojs/components";
+import { View, Text, Image, ScrollView, PageContainer, Swiper, SwiperItem, Switch } from "@tarojs/components";
 import Tabbar from "@/components/navigation/TabBar";
 import IndexItem from '@/features/trackTimeDuration/components/IndexItem';
 import Rings from "@/features/trackTimeDuration/components/Rings";
@@ -18,6 +18,7 @@ import { getBgRing, getCommon, getDot, getSchedule } from "@/features/trackTimeD
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
 import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
 import Modal from '@/components/layout/Modal'
+import { rpxToPx } from "@/utils/tools";
 
 export default function Page() {
     const dispatch = useDispatch();
@@ -39,6 +40,8 @@ export default function Page() {
     const [isModal1, setIsModal1] = useState(false)
     const [debugInfo, setDebugInfo] = useState(null)
 
+    const [isMulti, setIsMulti] = useState(false)
+
 
     const [multiData, setMultiData] = useState([
         {
@@ -194,7 +197,7 @@ export default function Page() {
         </View>
     }
 
-    global.indexPageRefresh = ()=>{
+    global.indexPageRefresh = () => {
         getCheckData()
     }
 
@@ -204,15 +207,15 @@ export default function Page() {
         setDebugInfo(debugNode)
         setShowModal(isShow)
         setModalDetail(detail)
-      }
-    
-      global.showIndexModal2 = (isShow: boolean, detail: any) => {
+    }
+
+    global.showIndexModal2 = (isShow: boolean, detail: any) => {
         setDebugInfo(null)
         global.showModal = isShow
         setIsModal1(false)
         setShowModal2(isShow)
         setModalDetail2(detail)
-      }
+    }
 
     function modalContent() {
         if (showModal || showModal2) {
@@ -279,52 +282,96 @@ export default function Page() {
             <IndexItem type='SLEEP' data={(homeData as any).sleep} time={timestamp} />
             <Text className="discovery">探索</Text>
             <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} />
+            <Swiper className='swiper1' indicatorColor='#333'
+                indicatorActiveColor='#999'
+                current={0}
+                autoplay={false}
+                duration={300}
+                interval={300}
+                indicator-offset={[0, -30]}
+                indicator-height={30}
+                indicatorDots={(homeData as any).fast_sleep.current_record.status == 'WAIT_FOR_START'}
+            >
+                <SwiperItem className='swiperItem'>
+                    <IndexConsole record={(homeData as any).fast_sleep} />
+
+                </SwiperItem>
 
-            <IndexConsole record={(homeData as any).fast_sleep} />
+                {
+                    (homeData as any).fast_sleep.current_record.status == 'WAIT_FOR_START' &&
+                    <SwiperItem className='swiperItem'>
+                        <View>
+                            {
+                                isMulti ? <View>
+                                    {
+                                        multiData.map((item,index) => {
+                                            return <View className={item.checked ? "single_check_sel" : "single_check_nor"} onClick={() => {
+                                                item.checked = !item.checked
+                                                global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
+                                                setMultiData(JSON.parse(JSON.stringify(multiData)))
+                                                setCount((prevCounter) => prevCounter + 1)
+                                            }}>
+                                                <Text className={item.checked ? "single_check_text_sel" : "single_check_text_nor"}>{item.title}</Text>
+                                                {
+                                                    item.checked ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
+                                                        <IconPlus color={ColorType.fast} />
+                                                }
+                                            </View>
+                                        })
+                                    }
+                                </View> : <View>
+
+                                    <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={() => {setSelIndex(0);global.updateMixItem([true, false, false]);setCount((prevCounter) => prevCounter + 1)}}>
+                                        <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
+                                        {
+                                            selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                                        }
+                                    </View>
+                                    <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={() => {setSelIndex(1);global.updateMixItem([false, true, false]);setCount((prevCounter) => prevCounter + 1)}}>
+                                        <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
+                                        {
+                                            selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                                        }
+                                    </View>
+                                    <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={() => {setSelIndex(2);global.updateMixItem([false, false, true]);setCount((prevCounter) => prevCounter + 1)}}>
+                                        <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
+                                        {
+                                            selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
+                                        }
+                                    </View>
+                                </View>
+                            }
+                            <View style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', paddingRight: rpxToPx(46), width: rpxToPx(750), boxSizing: 'border-box' }}>
+                                <View style={{ flex: 1 }} />
+                                <Text style={{ marginRight: 10 }}>多选</Text>
+                                <Switch color={ColorType.fast} onChange={(e) => {
+                                    setIsMulti(e.detail.value)
+                                    if (e.detail.value) {
+                                        global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
+                                    }
+                                    else {
+                                        global.updateMixItem([selIndex == 0, selIndex == 1, selIndex == 2])
+                                    }
+                                    setCount((prevCounter) => prevCounter + 1)
+                                }} />
+                            </View>
+                        </View>
+                    </SwiperItem>
+                }
 
-            <View>
-                <Text>Single Sel</Text>
+            </Swiper>
 
-                <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={() => setSelIndex(0)}>
-                    <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
-                    {
-                        selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
-                    }
-                </View>
-                <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={() => setSelIndex(1)}>
-                    <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
-                    {
-                        selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
-                    }
-                </View>
-                <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={() => setSelIndex(2)}>
-                    <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
-                    {
-                        selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
-                    }
-                </View>
-            </View>
 
+
+
+            {/* 
             <View style={{ marginTop: 50 }}>
                 <Text>Multi Sel</Text>
                 {
                     rings()
                 }
-                {
-                    multiData.map((item) => {
-                        return <View className={item.checked ? "single_check_sel" : "single_check_nor"} onClick={() => {
-                            item.checked = !item.checked
-                            setMultiData(JSON.parse(JSON.stringify(multiData)))
-                        }}>
-                            <Text className={item.checked ? "single_check_text_sel" : "single_check_text_nor"}>{item.title}</Text>
-                            {
-                                item.checked ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
-                                    <IconPlus color={ColorType.fast} />
-                            }
-                        </View>
-                    })
-                }
-            </View>
+
+            </View> */}
 
             <View style={{ height: 100 }} />
             {