update

src/_eat/pages/meal_list.scss

@@ -1,3 +1,5 @@
+@import "~taro-ui/dist/style/components/swipe-action.scss";
+
 .container {
     display: flex;
     flex-direction: column;

src/_eat/pages/meal_list.tsx

@@ -3,12 +3,15 @@ import './meal_list.scss'
 import { useEffect, useState } from 'react'
 import Modal from '@/components/layout/Modal.weapp'
 import AddLabel from '../components/add_label'
-import { getLabels, getSchedules } from '@/services/health'
+import { delSchedule, getLabels, getSchedules } from '@/services/health'
+import { AtSwipeAction } from "taro-ui"
+
 
 export default function MealList() {
     const [showModal, setShowModal] = useState(false)
     const [list, setList] = useState<any>([])
-    const [labels,setLabels] = useState<any>([])
+    const [labels, setLabels] = useState<any>([])
+    const [showDel, setShowDel] = useState(false)
 
     useEffect(() => {
         schedules()
@@ -23,7 +26,7 @@ export default function MealList() {
 
         })
 
-        getLabels({category: 'EAT'}).then(res=>{
+        getLabels({ category: 'EAT' }).then(res => {
             setLabels((res as any).labels)
         })
     }
@@ -32,24 +35,44 @@ export default function MealList() {
         setShowModal(true)
     }
 
+    function delItem(index) {
+        delSchedule(list[index].code).then(res => {
+            schedules()
+        })
+    }
+
     return <View>
         {
             list.map((item, index) => {
-                return <View className='item' key={index}>
-                    <View className='item_left'>
-                        <Text className='item_index'>第{index+1}餐</Text>
-                        <Text className='item_name'>{item.label}</Text>
+                return <AtSwipeAction key={index} isOpened options={[
+                    {
+                        text: '删除',
+                        style: {
+                            backgroundColor: '#FF4949'
+                        }
+                    }
+                ]}>
+                    <View className='item' >
+                        {
+                            showDel && <Text style={{ color: 'red', marginRight: 5 }} onClick={() => delItem(index)}>删除</Text>
+                        }
+        
+                        <View className='item_left'>
+                            <Text className='item_index'>第{index + 1}餐</Text>
+                            <Text className='item_name'>{item.label}</Text>
+                        </View>
+                        <Text className='item_time'>{item.time}</Text>
+                        <View className='item_line' />
                     </View>
-                    <Text className='item_time'>{item.time}</Text>
-                    <View className='item_line' />
-                </View>
+                </AtSwipeAction>
             })
         }
+        
 
         <View className='toolbar'>
             <View className='toolbar_btn' onClick={add}>添加一餐</View>
             <View style={{ flex: 1 }} />
-            <View className='toolbar_btn'>移除</View>
+            <View className='toolbar_btn' onClick={() => setShowDel(!showDel)}>移除</View>
         </View>
         {
             showModal && <Modal testInfo={null}
@@ -57,7 +80,7 @@ export default function MealList() {
                     setShowModal(false)
                 }}
                 confirm={() => { }}>
-                <AddLabel labels={labels}/>
+                <AddLabel labels={labels} />
             </Modal>
         }
     </View>

src/features/health/History.scss

@@ -0,0 +1,16 @@
+.history_item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 750px;
+    padding-left: 40px;
+    padding-right: 40px;
+    box-sizing: border-box;
+}
+
+.no_more{
+    width: 750px;
+    text-align: center;
+    margin-top: 20px;
+    color: #B2B2B2;
+}

src/features/health/HistoryActiveItem.tsx

@@ -0,0 +1,6 @@
+import { View } from "@tarojs/components";
+import './History.scss'
+
+export default function HistoryActiveItem(props:{data:any,index:number}){
+    return <View></View>
+}

src/features/health/HistoryEatItem.tsx

@@ -0,0 +1,6 @@
+import { View } from "@tarojs/components";
+import './History.scss'
+
+export default function HistoryEatItem(props:{data:any,index:number}){
+    return <View></View>
+}

src/features/health/HistoryFastItem.tsx

@@ -0,0 +1,35 @@
+import { View,Text } from "@tarojs/components";
+import './History.scss'
+import { TimeFormatter } from "@/utils/time_format";
+import Rings from "../trackTimeDuration/components/Rings";
+import { getBgRing, getCommon } from "../trackTimeDuration/hooks/RingData";
+import { MainColorType } from "@/context/themes/color";
+
+export default function HistoryFastItem(props:{data:any,index:number}){
+
+    function getDuration(obj) {
+        var start = obj.start_timestamp
+        var end = obj.end_timestamp
+        if (!end) {
+            end = (new Date()).getTime()
+        }
+        return TimeFormatter.durationFormate(start, end)
+        // return TimeFormatter.calculateTimeDifference(start, end)
+    }
+
+    function ring(){
+        var common = getCommon(null, true)
+        common.radius = 20;
+        common.lineWidth = 5;
+        var bgRing = getBgRing()
+        
+        return <Rings common={common} bgRing={bgRing} canvasId={'fast'+props.index}  />
+    }
+    
+    return <View className="history_item">
+        {
+            ring()
+        }
+        <Text style={{marginLeft:18,color:MainColorType.fast,fontSize:18,fontWeight:'bold'}}>{getDuration(props.data.events[0].real)}</Text>
+    </View>
+}

src/features/health/HistorySleepItem.tsx

@@ -0,0 +1,6 @@
+import { View } from "@tarojs/components";
+import './History.scss'
+
+export default function HistorySleepItem(props:{data:any,index:number}){
+    return <View></View>
+}

src/features/trackTimeDuration/components/MainCard.scss → src/features/health/MainCard.scss

@@ -67,4 +67,30 @@
     color: #818080;
     font-weight: bold;
     font-size: 40px;
-}
+}
+
+.sticky{
+    position: sticky;
+    width: 750px;
+    height: 50px;
+    background-color: red;
+    top: 200px;
+    left: 0;
+}
+
+.scroll-view {
+    height: 100vh; // 使 ScrollView 填满整个视口
+  }
+  
+  .content {
+  }
+  
+  .sticky-view {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+    background-color: white;
+    padding: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10; // 确保在其他内容之上
+  }

src/features/health/MainConsole.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+
+export default function MainConsole(){
+    return <View>
+        
+    </View>
+}

src/features/trackTimeDuration/components/MainDayNightCard.tsx → src/features/health/MainDayNightCard.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text, ScrollView } from "@tarojs/components";
 import './MainCard.scss'
 import { useEffect, useState } from "react";
 import { rpxToPx } from "@/utils/tools";
@@ -17,9 +17,9 @@ export default function MainDayNightCard(props: { count: number }) {
     const [isDayMode, setIsDayMode] = useState(true)
     const user = useSelector((state: any) => state.user);
 
-    useEffect(()=>{
-        
-    },[user.isLogin])
+    useEffect(() => {
+
+    }, [user.isLogin])
 
     useEffect(() => {
         dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
@@ -122,30 +122,50 @@ export default function MainDayNightCard(props: { count: number }) {
         setIsDayMode(!isDayMode)
     }
 
-    function timeStatus(){
-        if (isDay && isDayMode){
+    function timeStatus() {
+        if (isDay && isDayMode) {
             return 'In Progress'
         }
-        else if (!isDay && !isDayMode){
+        else if (!isDay && !isDayMode) {
             return 'In Progress'
         }
         return 'Coming up'
     }
+    return <ScrollView className="scroll-view" scrollY>
+        <View className="content">
+            {/* 上方内容 */}
+            <View style={{ height: 400, backgroundColor: '#f0f0f0' }}>
+                <Calendar year={2024} month={8} />
+            </View>
+
+            {/* 粘性视图 */}
+            <View className="sticky-view">
+                <Text>2024年8月</Text>
+            </View>
 
-    return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
-        <Calendar year={2024} month={8}/>
-        <View>Page Day Night</View>
-        <View style={{ position: 'relative' }}>
-            {
-                ring()
-            }
-            <View className="ring_center">
-                <View>{isDayMode?'Daylight':'Night'}</View>
-                <View>{timeStatus()}</View>
-                <Text className="time1" style={{color:'#000'}}>{formatTime('HH:mm:ss')}</Text>
-                <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
+            {/* 下方内容 */}
+            <View style={{ height: 1200, backgroundColor: '#e0e0e0' }}>
+                <Text>更多内容...</Text>
             </View>
         </View>
-        <Text onClick={switchMode}>Switch</Text>
-    </View>
+    </ScrollView>
+
+    // return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center',position:'relative' }}>
+    //     <Calendar year={2024} month={8}/>
+    //     <View>Page Day Night</View>
+    //     <View style={{ position: 'relative' }}>
+    //         {
+    //             ring()
+    //         }
+    //         <View className="ring_center">
+    //             <View>{isDayMode?'Daylight':'Night'}</View>
+    //             <View>{timeStatus()}</View>
+    //             <Text className="time1" style={{color:'#000'}}>{formatTime('HH:mm:ss')}</Text>
+    //             <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
+    //         </View>
+    //     </View>
+    //     <Text onClick={switchMode}>Switch</Text>
+    //     <View className="sticky"></View>
+    //     <View style={{height:200}}/>
+    // </View>
 }

src/features/trackTimeDuration/components/MainFastEatCard.tsx → src/features/health/MainFastEatCard.tsx

@@ -1,4 +1,4 @@
-import { View, Text,Image } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
 import './MainCard.scss'
 import { useEffect, useRef, useState } from "react";
 import Modal from "@/components/layout/Modal.weapp";
@@ -9,13 +9,15 @@ import moment from 'moment-timezone'
 import { MainColorType } from "@/context/themes/color";
 import { fastWindow, setSchedule, updateRecord } from "@/services/trackTimeDuration";
 import { useSelector } from "react-redux";
-import { jumpPage } from "../hooks/Common";
-import ConsolePicker from "./ConsolePicker";
-import { endFast, startFast } from "../actions/TrackTimeActions";
+import { jumpPage } from "../trackTimeDuration/hooks/Common";
+import ConsolePicker from "../trackTimeDuration/components/ConsolePicker";
+import { endFast, startFast } from "../trackTimeDuration/actions/TrackTimeActions";
 import formatMilliseconds from "@/utils/format_time";
 import TimePicker from "@/features/common/TimePicker";
 import showAlert from "@/components/basic/Alert";
 import showActionSheet from "@/components/basic/ActionSheet";
+import { records } from "@/services/health";
+import MainHistory from "./MainHistory";
 let useNavigation;
 
 let Linking, PushNotification;
@@ -53,10 +55,12 @@ export default function MainFastEatCard(props: { count: any }) {
     const [showPicker, setShowPicker] = useState(false)
     const [isStart, setIsStart] = useState(true)
     const [loaded, setLoaded] = useState(false)
+    const [eats, setEats] = useState<any>([])
+    const [fasts, setFasts] = useState<any>([])
 
     const user = useSelector((state: any) => state.user);
 
-    let navigation,showActionSheetWithOptions;
+    let navigation, showActionSheetWithOptions;
     if (useNavigation) {
         navigation = useNavigation()
         showActionSheetWithOptions = useActionSheet()
@@ -91,10 +95,13 @@ export default function MainFastEatCard(props: { count: any }) {
         }
     }, [props.count])
 
+
     global.refreshFastEat = () => {
         refresh()
     }
 
+
+
     function refresh() {
         fastWindow().then(res => {
             const { eat_win, fast_win } = res
@@ -590,10 +597,10 @@ export default function MainFastEatCard(props: { count: any }) {
         return true
     }
 
-    function more(){
+    function more() {
         showActionSheet({
             showActionSheetWithOptions: showActionSheetWithOptions,
-            title:'Oprate Title',
+            title: 'Oprate Title',
             itemList: [
                 'Add Snack',
                 '自定义餐次列表',
@@ -670,17 +677,17 @@ export default function MainFastEatCard(props: { count: any }) {
             !isFastMode && <View>
                 {
                     eatData.meals.map((item, index) => {
-                        return <View className="log_row" style={{justifyContent:'flex-start'}} key={index}>
+                        return <View className="log_row" style={{ justifyContent: 'flex-start' }} key={index}>
                             {
-                                item.real_start_time && item.media && item.media.length>0 && item.media[0].url && <Image src={item.media[0].url} style={{width:50,height:50,marginRight:10}}/>
+                                item.real_start_time && item.media && item.media.length > 0 && item.media[0].url && <Image src={item.media[0].url} style={{ width: 50, height: 50, marginRight: 10 }} />
                             }
                             <View className="schedule">
                                 <Text className="schedule_name">{item.name}</Text>
                                 <Text className="schedule_time">
-                                    {item.real_start_time ?dayjs(item.real_start_time).format('HH:mm')+' - '+dayjs(item.real_end_time).format('HH:mm'):item.schedule_start_time}
+                                    {item.real_start_time ? dayjs(item.real_start_time).format('HH:mm') + ' - ' + dayjs(item.real_end_time).format('HH:mm') : item.schedule_start_time}
                                 </Text>
                             </View>
-                            <View style={{flex:1}}/>
+                            <View style={{ flex: 1 }} />
                             {
                                 item.real_start_time ? <View className="fast_log_btn fast_log_btn_disable">已记录</View> : <View onClick={() => goAddEat(item, index)} className={enableMeal(item) ? "fast_log_btn fast_log_eat_btn" : "fast_log_btn fast_log_btn_disable"}>Add</View>
                             }
@@ -697,6 +704,7 @@ export default function MainFastEatCard(props: { count: any }) {
         {
             !isFastMode && <Text onClick={more}>更多</Text>
         }
+        <MainHistory type={isFastMode ? 'FAST' : 'EAT'} />
         {
             showModal && <Modal dismiss={() => setShowModal(false)}>
                 <View style={{ width: 100, height: 100, backgroundColor: 'red' }}>{props.count}</View>

src/features/health/MainHistory.tsx

@@ -0,0 +1,78 @@
+import { View, Text } from "@tarojs/components";
+import { useEffect, useState } from "react";
+import HistoryEatItem from "./HistoryEatItem";
+import HistoryFastItem from "./HistoryFastItem";
+import HistoryActiveItem from "./HistoryActiveItem";
+import HistorySleepItem from "./HistorySleepItem";
+import { records } from "@/services/health";
+import './History.scss'
+
+export default function MainHistory(props: { type: string }) {
+    const [list, setList] = useState<any>([])
+    const [page, setPage] = useState(1)
+    const [total, setTotal] = useState(0)
+    const [loaded, setLoaded] = useState(false)
+
+
+
+    useEffect(() => {
+        loadData(1)
+    }, [])
+
+    function refresh() {
+        loadData(1)
+        setPage(1)
+    }
+
+    function more() {
+        var index = page;
+        index++;
+        setPage(index)
+        loadData(index)
+    }
+
+    function loadData(index: number) {
+        records({
+            code: props.type,
+            limit: 10,
+            page: index
+        }).then(res => {
+            setLoaded(true)
+            if (index == 1) {
+                setList((res as any).data)
+                setTotal((res as any).total)
+            }
+            else {
+                setList([...list, ...(res as any).data])
+            }
+
+        })
+    }
+
+    if (!loaded)
+        return <View />
+
+    return <View style={{display:'flex',flexDirection:'column'}}>
+        {
+            list.map((item, index) => {
+                return <View key={index}>
+                    {
+                        props.type == 'EAT' && <HistoryEatItem data={item} index={index} />
+                    }
+                    {
+                        props.type == 'FAST' && <HistoryFastItem data={item} index={index} />
+                    }
+                    {
+                        props.type == 'ACTIVE' && <HistoryActiveItem data={item} index={index} />
+                    }
+                    {
+                        props.type == 'SLEEP' && <HistorySleepItem data={item} index={index} />
+                    }
+                </View>
+            })
+        }
+        {
+            (total == list.length) && <Text className="no_more">没有更多了</Text>
+        }
+    </View>
+}

src/features/health/MainSwiper.tsx

@@ -0,0 +1,8 @@
+import { View } from "@tarojs/components";
+import './MainCard.scss';
+
+export default function MainSwiper(){
+    return <View>
+
+    </View>
+}

src/pages/clock/ClockNew.tsx

@@ -1,9 +1,9 @@
 import { View, ScrollView, Swiper, SwiperItem } from "@tarojs/components";
 import './Clock.scss'
 import { useEffect, useState } from "react";
-import MainDayNightCard from "@/features/trackTimeDuration/components/MainDayNightCard";
-import MainFastEatCard from "@/features/trackTimeDuration/components/MainFastEatCard";
-import MainSleepActiveCard from "@/features/trackTimeDuration/components/MainSleepActiveCard";
+import MainDayNightCard from "@/features/health/MainDayNightCard";
+import MainFastEatCard from "@/features/health/MainFastEatCard";
+import MainSleepActiveCard from "@/features/health/MainSleepActiveCard";
 import TabBar from "@/components/navigation/TabBar";
 import { rpxToPx } from "@/utils/tools";
 

src/services/health.tsx

@@ -1,4 +1,4 @@
-import { API_HEALTH_LABELS, API_HEALTH_SCHEDULES } from "./http/api";
+import { API_HEALTH_LABELS, API_HEALTH_RECORD, API_HEALTH_SCHEDULES } from "./http/api";
 import { request } from "./http/request";
 
 export const getLabels = (params) => {
@@ -53,10 +53,23 @@ export const updateSchedule = () => {
     })
 }
 
-export const delSchedule = () => {
+export const delSchedule = (code:string) => {
     return new Promise((resolve, reject) => {
         request({
-            url: API_HEALTH_SCHEDULES, method: 'PUT', data: {}
+            url: `${API_HEALTH_SCHEDULES}/${code}`, method: 'DELETE', data: {}
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        }).catch(e => {
+            reject(e)
+        })
+    })
+}
+
+export const records = (params:any)=>{
+    return new Promise((resolve, reject) => {
+        request({
+            url: API_HEALTH_RECORD, method: 'GET', data: {...params}
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));

src/services/http/api.js

@@ -98,3 +98,4 @@ export const API_SET_SCHEDULE = `${baseUrl}/api/fast/schedules`
 export const API_EAT_MEALS = `${baseUrl}/api/eat/meals`
 export const API_HEALTH_SCHEDULES = `${baseUrl}/api/health/schedules`
 export const API_HEALTH_LABELS = `${baseUrl}/api/health/labels`
+export const API_HEALTH_RECORD = `${baseUrl}/api/health/records`