update

src/features/trackTimeDuration/components/IndexConsole.scss

@@ -0,0 +1,52 @@
+@import '@/utils/common.scss';
+
+.console_btn {
+    height: 84px;
+    border-radius: 42px;
+    position: relative;
+    background-color: $fastColor;
+    margin-left: 46px;
+    margin-right: 46px;
+    margin-bottom: 36px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: #000;
+}
+
+.stage_btn {
+    height: 84px;
+    border-radius: 42px;
+    position: relative;
+    margin-left: 46px;
+    margin-right: 46px;
+    margin-bottom: 36px;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    display: flex;
+    color: #fff;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #fff;
+    opacity: 0.4;
+    box-sizing: border-box;
+    padding-left: 44px;
+    padding-right: 44px;
+}
+
+.lock {
+    left: 44px;
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    top: 18px;
+}
+
+.btn_disable {
+    opacity: 0.4;
+}
+
+.btn_sleep {
+    background-color: $sleepColor;
+}

src/features/trackTimeDuration/components/IndexConsole.tsx

@@ -0,0 +1,249 @@
+import { View, Text, Image } from '@tarojs/components'
+import './IndexConsole.scss'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux';
+import { endFast, endSleep, startFast, startSleep } from "../actions/TrackTimeActions";
+import { jumpPage } from '../hooks/Common';
+import { useEffect, useRef, useState } from 'react';
+import LimitPickers from '@/components/input/LimitPickers';
+import { getColor, getTimePickerTitle } from '../hooks/Console';
+import { vibrate } from '@/utils/tools';
+import { TimeFormatter } from '@/utils/time_format';
+
+let useNavigation;
+if (process.env.TARO_ENV == 'rn') {
+    useNavigation = require("@react-navigation/native").useNavigation
+}
+let operateType = ''
+export default function IndexConsole(props: { record: any }) {
+    const user = useSelector((state: any) => state.user);
+    const { status } = props.record.current_record;
+    const currentRecord = props.record.current_record;
+    const { t } = useTranslation()
+    const [fastDuration, setFastDuration] = useState<number>(0);
+    const [sleepDuration, setSleepDuration] = useState<number>(0);
+
+    // const [fastPickerValue, setFastPickerValue] = useState([0, 0])
+    // const [sleepPickerValue, setSleepPickerValue] = useState([0, 0])
+
+    const limitPickerRef = useRef(null)
+
+    let navigation;
+    if (useNavigation) {
+        navigation = useNavigation()
+    }
+
+    useEffect(() => {
+        var fastCount = currentRecord.fast.target_end_time - currentRecord.fast.target_start_time
+        setFastDuration(fastCount)
+
+        var sleepCount = currentRecord.sleep.target_end_time - currentRecord.sleep.target_start_time
+        setSleepDuration(sleepCount)
+    }, [])
+
+
+    function tapStartFast() {
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+            return
+        }
+
+        operateType = 'startFast'
+
+        showPicker()
+    }
+
+    function tapStartSleep() {
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
+            return
+        }
+        if (status != 'ONGOING1') {
+            vibrate()
+            return;
+        }
+        operateType = 'startSleep'
+
+        showPicker()
+    }
+
+    function tapEndSleep() {
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
+            return
+        }
+        if (status != 'ONGOING2') {
+            vibrate()
+            return;
+        }
+        operateType = 'endSleep'
+
+        showPicker()
+    }
+
+    function tapEndFast() {
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
+            return
+        }
+        if (status == 'WAIT_FOR_START') {
+            vibrate()
+            return;
+        }
+        operateType = 'endFast'
+
+        showPicker()
+    }
+
+    function layoutContent() {
+        var limit = global.set_time - 7 * 3600 * 1000 * 24;
+        global.limit = limit
+
+        if (currentRecord.last_real_check_time) {
+            limit = currentRecord.last_real_check_time
+            global.limit = limit
+            //当set_time秒数<=latest_record_time秒数时,最小限制时间戳需+1分钟
+            if (new Date(global.set_time).getSeconds() <= new Date(currentRecord.last_real_check_time).getSeconds() && global.set_time - currentRecord.last_real_check_time > 60000) {
+                limit = limit + 60 * 1000
+            }
+        }
+
+        var title = getTimePickerTitle(currentRecord, t, operateType == 'endFast')
+        var color = getColor(currentRecord, operateType == 'endFast')
+        return <View className="modal_content">
+            <LimitPickers ref={limitPickerRef} limit={limit} limitDay={8}
+                themeColor={color}
+                title={title}
+                onCancel={hidePicker} onChange={(e) => {
+                    pickerConfirm(e)
+                    hidePicker()
+                }} />
+        </View>
+    }
+
+    function showPicker() {
+        // setShowPageContainer(true)
+        // return
+        global.scenario = 'FAST_SLEEP'
+        if (global.testInfotimer) {
+            return
+        }
+        global.set_time = new Date().getTime()
+        updateNodeInfo()
+        if (!global.isDebug) {
+            return
+        }
+        // global.testInfotimer = setInterval(() => {
+        // updateNodeInfo()
+
+        // }, 1000)
+
+    }
+
+    function updateNodeInfo() {
+        var node = layoutContent()
+        global.showIndexModal(true, node, null);
+    }
+
+    function hidePicker() {
+        var node = layoutContent()
+        global.showIndexModal(false, node, null);
+    }
+
+    function pickerConfirm(t: number) {
+        hidePicker()
+        var date = new Date(t)
+        var setDate = new Date(global.set_time);
+        date.setMilliseconds(setDate.getMilliseconds());
+        date.setSeconds(setDate.getSeconds());
+
+        t = date.getTime();
+
+        switch (operateType) {
+            case 'startFast':
+                startFast(t, fastDuration).then(res => {
+                    global.indexPageRefresh()
+                })
+                break
+            case 'startSleep':
+                startSleep(t, sleepDuration).then(res => {
+                    global.indexPageRefresh()
+                })
+                break
+            case 'endSleep':
+                endSleep(t).then(res => {
+                    global.indexPageRefresh()
+                })
+                break
+            case 'endFast':
+                endFast(t).then(res => {
+                    global.indexPageRefresh()
+                })
+                break
+        }
+    }
+
+    return <View>
+        {
+            status == 'WAIT_FOR_START' ?
+                <View onClick={tapStartFast} className='console_btn'>
+                    <Text>{t('feature.track_time_duration.common.start_fast')}</Text>
+                </View> :
+                <View onClick={() => { vibrate() }} className='stage_btn'>
+                    <Text style={{ flex: 1 }}>睡前断食</Text>
+                    {
+                        status == 'ONGOING1' ?
+                            <Text>{TimeFormatter.countdown(currentRecord.fast.real_start_time)}</Text> :
+                            <Text>{TimeFormatter.durationFormate(currentRecord.fast.real_start_time, currentRecord.sleep.real_start_time)}</Text>
+                    }
+
+                </View>
+        }
+        {
+            (status == 'WAIT_FOR_START' || status == 'ONGOING1') &&
+            <View onClick={tapStartSleep} className={status == 'ONGOING1' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
+                {
+                    status != 'ONGOING1' && <Image className='lock' src={require('@assets/images/lock.png')} />
+                }
+                <Text>{t('feature.track_time_duration.common.start_sleep')}</Text>
+            </View>
+        }
+        {
+            (status != 'WAIT_FOR_START' && status != 'ONGOING1') &&
+            <View onClick={() => { vibrate() }} className='stage_btn'>
+                <Text style={{ flex: 1 }}>睡眠期间断食</Text>
+                {
+                    status == 'ONGOING2' ? <Text>{TimeFormatter.countdown(currentRecord.sleep.real_start_time)}</Text> :
+                        <Text>{TimeFormatter.durationFormate(currentRecord.sleep.real_start_time, currentRecord.sleep.real_end_time)}</Text>
+                }
+
+
+            </View>
+        }
+        {
+            (status == 'WAIT_FOR_START' || status == 'ONGOING1' || status == 'ONGOING2') &&
+            <View onClick={tapEndSleep} className={status == 'ONGOING2' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
+                {
+                    status != 'ONGOING2' && <Image className='lock' src={require('@assets/images/lock.png')} />
+                }
+                <Text>{t('feature.track_time_duration.common.end_sleep')}</Text>
+            </View>
+        }
+        {
+            status == 'ONGOING3' &&
+            <View onClick={() => { vibrate() }} className='stage_btn'>
+                <Text style={{ flex: 1 }}>起床后断食</Text>
+                <Text>{TimeFormatter.countdown(currentRecord.sleep.real_end_time)}</Text>
+            </View>
+        }
+        {
+            (status == 'WAIT_FOR_START' || status == 'ONGOING1' || status == 'ONGOING2' || status == 'ONGOING3') &&
+            <View onClick={tapEndFast} className={status == 'ONGOING3' ? 'console_btn' : 'console_btn btn_disable'}>
+                {
+                    status == 'WAIT_FOR_START' && <Image className='lock' src={require('@assets/images/lock.png')} />
+                }
+                <Text>{t('feature.track_time_duration.common.end_fast')}</Text>
+            </View>
+        }
+    </View>
+}

src/features/trackTimeDuration/components/IndexItem.tsx

@@ -42,7 +42,7 @@ export default function Component(props: { type: string, data: any, time: any })
 
                 return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={props.type + props.time + 'big'} />
             }
-            
+
             if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
                 var realRing1 = getSchedule(record, props.type != 'SLEEP', true)
                 return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={props.type + props.time + 'big'} />
@@ -174,8 +174,8 @@ export default function Component(props: { type: string, data: any, time: any })
     }
 
     function goClock() {
-        if (!user.isLogin){
-            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
             return
         }
         global.selectData = props.data

src/features/trackTimeDuration/hooks/Console.tsx

@@ -139,8 +139,8 @@ export const getDurationTitle = (data, t) => {
     }
 }
 
-export const getTimePickerTitle = (data, t) => {
-    if (data.scenario == 'FAST') {
+export const getTimePickerTitle = (data, t,isFastEnd=false) => {
+    if (data.scenario == 'FAST'||isFastEnd) {
         if (data.status == 'WAIT_FOR_START')
             return t('feature.track_time_duration.console.real_fast_start_dt')
         return t('feature.track_time_duration.console.real_fast_end_dt')
@@ -166,8 +166,8 @@ export const getTimePickerTitle = (data, t) => {
 }
 
 //按钮颜色
-export const getColor = (data) => {
-    if (data.scenario == 'FAST') {
+export const getColor = (data,isFastEnd=false) => {
+    if (data.scenario == 'FAST'||isFastEnd) {
         return global.fastColor?global.fastColor:ColorType.fast
     }
     else if (data.scenario == 'SLEEP') {

src/pages/clock/Index.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Image, ScrollView } from "@tarojs/components";
+import { View, Text, Image, ScrollView, PageContainer } from "@tarojs/components";
 import Tabbar from "@/components/navigation/TabBar";
 import IndexItem from '@/features/trackTimeDuration/components/IndexItem';
 import Rings from "@/features/trackTimeDuration/components/Rings";
@@ -16,6 +16,8 @@ import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Ico
 import { ColorType } from "@/context/themes/color";
 import { getBgRing, getCommon, getDot, getSchedule } from "@/features/trackTimeDuration/hooks/RingData";
 import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
+import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
+import Modal from '@/components/layout/Modal'
 
 export default function Page() {
     const dispatch = useDispatch();
@@ -28,6 +30,15 @@ export default function Page() {
     const [homeData, setHomeData] = useState(null)
 
     const [selIndex, setSelIndex] = useState(0)
+    const [showModal, setShowModal] = useState(false)
+    const [modalDetail, setModalDetail] = useState<any>(null)
+
+    const [showModal2, setShowModal2] = useState(false)
+    const [modalDetail2, setModalDetail2] = useState<any>(null)
+
+    const [isModal1, setIsModal1] = useState(false)
+    const [debugInfo, setDebugInfo] = useState(null)
+
 
     const [multiData, setMultiData] = useState([
         {
@@ -183,6 +194,68 @@ export default function Page() {
         </View>
     }
 
+    global.indexPageRefresh = ()=>{
+        getCheckData()
+    }
+
+    global.showIndexModal = (isShow: boolean, detail: any, debugNode?: any) => {
+        global.showModal = isShow
+        setIsModal1(true)
+        setDebugInfo(debugNode)
+        setShowModal(isShow)
+        setModalDetail(detail)
+      }
+    
+      global.showIndexModal2 = (isShow: boolean, detail: any) => {
+        setDebugInfo(null)
+        global.showModal = isShow
+        setIsModal1(false)
+        setShowModal2(isShow)
+        setModalDetail2(detail)
+      }
+
+    function modalContent() {
+        if (showModal || showModal2) {
+            if (process.env.TARO_ENV == 'weapp') {
+                return <Modal
+                    testInfo={debugInfo}
+                    dismiss={() => {
+                        setDebugInfo(null)
+                        setShowModal(false); setShowModal2(false)
+                    }}
+                    confirm={() => { }}>
+                    {
+                        isModal1 ? modalDetail : modalDetail2
+                    }
+                </Modal>
+            }
+            else if (process.env.TARO_ENV == 'rn') {
+                return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
+                    // overlayStyle='background-color:rgba(0,0,0,0.9)'
+                    // custom-style='background-color:#1c1c1c'
+                    overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+                    customStyle={{ backgroundColor: '#1c1c1c' }}
+                    closeOnSlideDown={false}
+                    onBeforeEnter={() => {
+                        Taro.hideTabBar();
+                    }}
+                    onBeforeLeave={() => {
+                        Taro.showTabBar();
+                    }}
+                    onClick={() => { alert('b') }}
+                    onClickOverlay={() => { alert('a') }}
+                    onAfterLeave={() => { setShowModal(false); setShowModal2(false) }}
+                    show={showModal || showModal2} round={true} overlay={true} position='bottom'
+                >
+                    {
+                        isModal1 ? modalDetail : modalDetail2
+                    }
+                </PageContainer>
+            }
+        }
+        return <View />
+    }
+
     async function getStorage(key: string) {
         try {
             const res = await Taro.getStorage({ key });
@@ -207,6 +280,7 @@ export default function Page() {
             <Text className="discovery">探索</Text>
             <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} />
 
+            <IndexConsole record={(homeData as any).fast_sleep} />
 
             <View>
                 <Text>Single Sel</Text>
@@ -253,11 +327,14 @@ export default function Page() {
             </View>
 
             <View style={{ height: 100 }} />
+            {
+                modalContent()
+            }
             <Tabbar index={0} />
         </View>
     }
 
-    if (process.env.TARO_ENV=='rn'){
+    if (process.env.TARO_ENV == 'rn') {
         return <ScrollView>
             {
                 render()