taro/src/_record/pages/time_record.tsx

import { View, Image } from "@tarojs/components";
import './time_record.scss'
import Taro from "@tarojs/taro";
import { rpxToPx } from "@/utils/tools";
import { MainColorType } from "@/context/themes/color";
import NewButton, { NewButtonType } from "@/_health/base/new_button";
import { useEffect, useState } from "react";
import NewDateTimePicker from "@/_health/base/new_date_time_picker";
import dayjs from "dayjs";
import RingProgress from "../components/ring_progress";
import NewDurationPicker, { DurationPickerType } from "@/_health/base/new_durationpicker";
import { IconArrow } from "@/components/basic/Icons";

let timer
export default function TimeRecord() {
    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;

    const [enterTime] = useState(new Date().getTime())

    const [showDatePicker, setShowDatePicker] = useState(false)
    const [showDurationPicker, setShowDurationPicker] = useState(false)
    const [count, setCount] = useState(0)

    useEffect(() => {
        timer = setInterval(() => { setCount(count => count + 1) }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])


    function tapStart() {
        setShowDatePicker(true)
    }

    function tapGoal() {
        setShowDurationPicker(true)
    }

    return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <View className="navi_bar" style={{ height: navigationBarHeight }}>
            <View style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 44,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Image src={require('@assets/_health/navi_back.png')} style={{
                    position: 'absolute',
                    width: rpxToPx(92),
                    height: rpxToPx(64),
                    left: 0,
                    top: 22 - rpxToPx(32)
                }}
                    onClick={() => {
                        Taro.navigateBack()
                    }}
                />
                <View className="h36 bold">upcoming fast</View>
            </View>
        </View>
        <View style={{ height: navigationBarHeight }} />
        <View className="progress_card">
            <View onClick={() => {
                setShowDurationPicker(true)
            }}>
                <RingProgress width={400} height={320}
                    radius={125} canvasId="helloworld"
                    //scale={0.75}
                    count={count}
                    bgRing={{
                        color: 'rgba(255,255,255,0.25)',
                        width: 35
                    }}
                    target={{
                        color: 'rgba(255,255,255,0.5)',
                        width: 35,
                        start: 0,
                        duration: 3 / 4 * Math.PI
                    }}
                    real={{
                        color: MainColorType.orange,
                        width: 35,
                        start: 0,
                        duration: 2 / 4 * Math.PI
                    }}
                    extra={{
                        header: 'GOAL',
                        value: dayjs().format('HH:mm:ss'),
                        footer: 'Edit',
                        color: MainColorType.orange
                    }}
                />
            </View>
            <View className="operate_content">
                <View className="operate_item">
                    <View className="g02 h24">STARTED</View>
                    <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>今天 13:54</View>
                    <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Start</View>
                </View>
                <View className="operate_item">
                    <View className="g02 h24">STARTED</View>
                    <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>今天 13:54</View>
                    <View className="h30 bold" style={{ color: MainColorType.orange }}>Edit Start</View>
                </View>
            </View>
            <NewButton
                type={NewButtonType.fill}
                title="Start fasting"
                width={rpxToPx(490)}
                height={rpxToPx(96)}
                color={MainColorType.orange}
            />
        </View>

        <View className="eat_card" onClick={() => {
            Taro.redirectTo({
                url: './log_record'
            })
        }}>
            <View className="h30 bold">Or share your meals</View>
            <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>if you haven't started fasting yet</View>
            <View className="eat_card_arrow">
                <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
            </View>
        </View>

        <View className="eat_card" style={{height:rpxToPx(120)}} onClick={() => {
            Taro.redirectTo({
                url: './log_record'
            })
        }}>
            <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>How are you feeling?</View>
            <View className="eat_card_arrow">
                <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
            </View>
        </View>


        <View className="time_card_bg">
            <View className="time_card" onClick={tapStart}>
                <View className="h30" style={{ opacity: 0.4 }}>Start</View>
                <View className="h44 bold" style={{ marginTop: rpxToPx(12) }}>10:00</View>
            </View>
            <View className="time_card" onClick={tapGoal}>
                <View className="h30" style={{ opacity: 0.4 }}>Goal</View>
                <View className="h44 bold" style={{ marginTop: rpxToPx(12) }}>10:00</View>
            </View>
        </View>
        <NewButton
            onClick={() => { }}
            type={NewButtonType.fill}
            color={MainColorType.orange}
            width={rpxToPx(669)}
            height={rpxToPx(96)}
            title="开始断食"
        />
        {
            showDatePicker && <NewDateTimePicker date={dayjs().format('YYYY-MM-DD')} count={1} time={dayjs().format('HH:mm')}
                minTimestamp={new Date().getTime() - 24 * 3600 * 1000}
                maxTimestamp={new Date().getTime()}
                onChange={(e) => {
                    // if (props.dateChange)
                    //     props.dateChange(e[0])
                    // if (props.timeChange)
                    //     props.timeChange(e[1])
                    // props.change(e)
                }} color={MainColorType.orange} />
        }
        {
            showDurationPicker && <NewDurationPicker type={DurationPickerType.normal} />
        }
    </View>
}