update

src/_health/pages/moment_detail.tsx

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

src/app.config.ts

@@ -52,7 +52,8 @@ const appConfig = defineAppConfig({
         'pages/schedules_order',
         'pages/schedules_reminder',
         'pages/schedules_time',
-        'pages/setting_reminder'
+        'pages/setting_reminder',
+        'pages/moment_detail'
       ]
     }
   ],

src/components/navigation/TabBar.scss

@@ -9,13 +9,13 @@
     height: 103px;
     flex-direction: row;
     justify-content: space-around;
-    background-color: #000;
+    background-color: #fff;
     // background-color: #000;
     // background-color: red;
     padding-bottom: constant(safe-area-inset-bottom);
     /* 兼容 iOS < 11.2 */
     padding-bottom: env(safe-area-inset-bottom);
-    border-top-color: rgba(255,255,255,0.2);
+    border-top-color: rgba(178,178,178,0.2);
     border-top-width: 1px;
     border-top-style: solid;
     z-index: 100;
@@ -54,4 +54,9 @@
     border-radius: 10px;
     right:-10px;
     top:-10px;
+}
+
+.tabbar-icon{
+    width: 48px;
+    height: 48px;
 }

src/components/navigation/TabBar.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text,Image } from '@tarojs/components'
 import './TabBar.scss'
 import Taro from '@tarojs/taro';
 import { useState } from 'react';
@@ -48,33 +48,10 @@ export default function Component(props: { index: number }) {
 
     return <View className='tabbar'>
         <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
-            <Text>首页</Text>
+            <Image className='tabbar-icon' src={selIndex == 0 ?require('@assets/_health/home_sel.png'):require('@assets/_health/home.png')}/>
         </View>
-        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
-            <Text>提醒</Text>
-        </View>
-        {/* <View className={selIndex == 4 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(4)}>
-            <View style={{ position: 'relative' }}>
-                <Text>饮食</Text>
-                {
-                    common.showFoodTabBadge && process.env.TARO_ENV == 'weapp' && <View className='food-tab-badge' style={{ backgroundColor: ColorType.food }} />
-                }
-            </View>
-
-        </View>
-        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
-            <Text>运动</Text>
-        </View> */}
-        {/* <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
-            <Text>发现</Text>
-        </View> */}
-        <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
-            <Text>指标</Text>
-        </View>
-
-
         <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
-            <Text>我</Text>
+            <Image className='tabbar-icon' src={selIndex == 3 ?require('@assets/_health/user_sel.png'):require('@assets/_health/user.png')}/>
         </View>
     </View>
 }

src/components/navigation/TabBar_副本.scss

@@ -0,0 +1,57 @@
+
+/* #ifdef weapp */
+.tabbar{
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 103px;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: #000;
+    // background-color: #000;
+    // background-color: red;
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom);
+    border-top-color: rgba(255,255,255,0.2);
+    border-top-width: 1px;
+    border-top-style: solid;
+    z-index: 100;
+}
+
+/* #endif */
+
+/* #ifdef rn */
+
+/* #endif */
+
+.tabbar-item{
+    color: rgba(255,255,255,0.4);
+    font-size: 36px;
+    line-height: 36px;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    position: relative;
+}
+
+.tabbar-item-sel{
+    color: #ffffff;
+    font-size: 40px;
+    line-height: 40px;
+    font-weight: bold;
+    position: relative;
+}
+
+.food-tab-badge{
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    right:-10px;
+    top:-10px;
+}

src/components/navigation/TabBar_副本.tsx

@@ -0,0 +1,80 @@
+import { View, Text } from '@tarojs/components'
+import './TabBar.scss'
+import Taro from '@tarojs/taro';
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { ColorType } from '@/context/themes/color';
+
+export default function Component(props: { index: number }) {
+    const common = useSelector((state: any) => state.common);
+    const [selIndex] = useState(props.index)
+    function switchTab(index: number) {
+        switch (index) {
+            case 0:
+
+                Taro.switchTab({
+                    url: '/pages/clock/Clock'
+                })
+                break;
+            case 2:
+                Taro.switchTab({
+                    url: '/pages/notification/setting'
+                })
+                break;
+            case 1:
+                Taro.switchTab({
+                    url: '/pages/metric/Metric'
+                })
+                break;
+            // case 2:
+
+            //     Taro.switchTab({
+            //         // url: '/pages/activity/Activity'
+            //         url:'/pages/workout/Workout'
+            //     })
+            //     break;
+            case 3:
+                Taro.switchTab({
+                    url: '/pages/account/Profile'
+                })
+                break;
+            case 4:
+                Taro.switchTab({
+                    url: '/pages/food/Food'
+                })
+                break;
+        }
+    }
+
+    return <View className='tabbar'>
+        <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
+            <Text>首页</Text>
+        </View>
+        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
+            <Text>提醒</Text>
+        </View>
+        {/* <View className={selIndex == 4 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(4)}>
+            <View style={{ position: 'relative' }}>
+                <Text>饮食</Text>
+                {
+                    common.showFoodTabBadge && process.env.TARO_ENV == 'weapp' && <View className='food-tab-badge' style={{ backgroundColor: ColorType.food }} />
+                }
+            </View>
+
+        </View>
+        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
+            <Text>运动</Text>
+        </View> */}
+        {/* <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
+            <Text>发现</Text>
+        </View> */}
+        <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
+            <Text>指标</Text>
+        </View>
+
+
+        <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
+            <Text>我</Text>
+        </View>
+    </View>
+}

src/features/health/History.scss

@@ -23,16 +23,14 @@
 }
 
 .history_date {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
+    margin-right: 40px;
+    width: 50px;
+    height: 60px;
     align-items: center;
     justify-content: center;
-    color: #B2B2B2;
-    font-size: 30px;
+    display: flex;
+    color: #000;
+    font-size: 50px;
     font-weight: bold;
 }
 
@@ -42,17 +40,15 @@
 }
 
 .history_item_duration {
-    font-size: 34px;
-    line-height: 42px;
-    font-weight: bold;
-    margin-bottom: 8px;
+    margin-left: 16px;
+    color: #000000;
+    font-size: 26px;
 }
 
 .history_item_title {
     font-size: 32px;
     line-height: 44px;
-    font-weight: bold;
-    color: #000;
+    color: #5C7099;
 }
 
 .history_item_desc {
@@ -78,10 +74,10 @@
 }
 
 .media_item {
-    width: 157px;
-    height: 157px;
-    margin-right: 2px;
-    margin-bottom: 2px;
+    width: 155px;
+    height: 155px;
+    margin-right: 4px;
+    margin-bottom: 4px;
 }
 
 .recent {
@@ -98,4 +94,15 @@
     font-weight: bold;
     color: #000;
     font-size: 26px;
+}
+
+.history_duration_bg{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 20px;
+    background-color: #F5F5F5;
+    height: 68px;
+    padding-left: 26px;
+    width: 572px;
 }

src/features/health/HistoryItem.tsx

@@ -9,10 +9,10 @@ import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/tr
 import { MainColorType } from "@/context/themes/color";
 import { durationArc, startArc } from "./util";
 
-export default function HistoryItem(props: { data: any, index: number }) {
+export default function HistoryItem(props: { data: any, index: number, onClick: Function }) {
     const health = useSelector((state: any) => state.health);
     function preview(obj) {
-        var list:any = []
+        var list: any = []
         props.data.events.map((item) => {
             item.moment.media.map((media) => {
                 list.push(media.url)
@@ -25,6 +25,8 @@ export default function HistoryItem(props: { data: any, index: number }) {
         })
     }
 
+    //npm install react-native-text-size
+
     function getTitle(item) {
         if (item.moment) {
             return item.moment.title
@@ -41,7 +43,7 @@ export default function HistoryItem(props: { data: any, index: number }) {
     function ring() {
         const common: RingCommon = {
             useCase: 'ChooseScenario',
-            radius: 17,
+            radius: 10,
             lineWidth: 3,
             isFast: true,
             status: 'WAIT_FOR_START'
@@ -52,41 +54,34 @@ export default function HistoryItem(props: { data: any, index: number }) {
         }
 
         const realRing = {
-            hideBg:true,
-            color:getThemeColor(health.mode),
-            startArc:startArc(props.data.window_range.start_timestamp),
-            durationArc:durationArc(props.data.window_range.start_timestamp,props.data.window_range.end_timestamp)
+            hideBg: true,
+            color: getThemeColor(health.mode),
+            startArc: startArc(props.data.window_range.start_timestamp),
+            durationArc: durationArc(props.data.window_range.start_timestamp, props.data.window_range.end_timestamp)
         }
 
 
         return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={'history_' + props.index} />
     }
 
-    function mediaCount(){
+    function mediaCount() {
         let count = 0;
         props.data.events.map((item) => {
-            if (item.moment){
+            if (item.moment) {
                 item.moment.media.map((obj, j) => {
                     count++;
                 })
             }
-            
+
         })
         return count;
     }
 
-    return <View className="history_item">
-        <View className="history_ring">
-            {
-                ring()
-            }
-            <View className="history_date">{dayjs(props.data.window_range.start_timestamp).format('D')}</View>
-        </View>
+    return <View className="history_item" onClick={() => props.onClick()}>
+        <View className="history_date">{dayjs(props.data.window_range.start_timestamp).format('D')}</View>
         <View className="history_content">
-            {
-                props.data.window_range.end_timestamp && <Text className="history_item_duration" style={{ color: getThemeColor(health.mode) }}>{formatMilliseconds(props.data.window_range.end_timestamp - props.data.window_range.start_timestamp)}</Text>
-            }
-            <Text>
+
+            <View style={{ display: 'flex', flexDirection: 'column' }}>
                 {
                     props.data.events.map((item, index) => {
                         return <Text key={index}>
@@ -97,19 +92,27 @@ export default function HistoryItem(props: { data: any, index: number }) {
                         </Text>
                     })
                 }
-            </Text>
-            <View className="media" style={{ marginTop: mediaCount()>0?9:-10 }}>
+            </View>
+            <View className="media" style={{ marginTop: mediaCount() > 0 ? 9 : -10, marginRight: mediaCount() == 4 ? 80 : 0 }}>
                 {
                     props.data.events.map((item) => {
-                        if (item.moment){
+                        if (item.moment) {
                             return item.moment.media.map((obj, j) => {
                                 return <Image className="media_item" mode="aspectFill" onClick={() => preview(obj)} src={obj.url} key={j * 10} />
                             })
                         }
-                        
+
                     })
                 }
             </View>
+            <View className="history_duration_bg">
+                {
+                    ring()
+                }
+                {
+                    props.data.window_range.end_timestamp && <Text className="history_item_duration">{formatMilliseconds(props.data.window_range.end_timestamp - props.data.window_range.start_timestamp)}</Text>
+                }
+            </View>
         </View>
         <View className="border_footer_line" />
     </View>

src/features/health/MainFastEatCard.tsx

@@ -107,7 +107,7 @@ export default function MainFastEatCard(props: {
             setStatus('process')
         }
         else if ((fast.target.start_timestamp <= now && fast.target.end_timestamp >= now) || isCurrentTimeInRange(fast.period.start_time, fast.period.end_time)) {
-            setStartTime(fast.period.start_time)
+            // setStartTime(fast.period.start_time)
             setStatus('new')
         }
         else {

src/features/health/MainHistory.tsx

@@ -1,5 +1,5 @@
 import { View, Text } from "@tarojs/components";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import HistoryEatItem from "./HistoryEatItem";
 import HistoryFastItem from "./HistoryFastItem";
 import HistoryActiveItem from "./HistoryActiveItem";
@@ -10,6 +10,8 @@ import Calendar from "./calendar";
 import { useSelector } from "react-redux";
 import HistoryItem from "./HistoryItem";
 import { rpxToPx } from "@/utils/tools";
+import { jumpPage } from "../trackTimeDuration/hooks/Common";
+import Taro from "@tarojs/taro";
 
 let lastMode = ''
 export default function MainHistory(props: { type: string }) {
@@ -17,7 +19,7 @@ export default function MainHistory(props: { type: string }) {
     const [page, setPage] = useState(1)
     const [total, setTotal] = useState(0)
     const [loaded, setLoaded] = useState(false)
-
+    const refDemo = useRef()
     const health = useSelector((state: any) => state.health);
 
 
@@ -63,6 +65,15 @@ export default function MainHistory(props: { type: string }) {
                 setList([...list, ...(res as any).data])
             }
 
+            if ((res as any).data.length>0){
+                setTimeout(()=>{
+                    const query = Taro.createSelectorQuery();
+                    query.select(('#demo1')).boundingClientRect((rect) => {
+                        console.log(rect)
+                    }).exec();
+                },1000)
+            }
+
         })
     }
 
@@ -86,8 +97,10 @@ export default function MainHistory(props: { type: string }) {
         }
         {
             list.map((item, index) => {
-                return <View key={index}>
-                    <HistoryItem data={item} index={index} />
+                return <View ref={refDemo} id="demo1" key={index}>
+                    <HistoryItem data={item} index={index} onClick={()=>{
+                        jumpPage('/_health/pages/moment_detail')
+                    }}/>
                     {/* {
                         props.type == 'EAT' && <HistoryEatItem data={item} index={index} />
                     }

src/pages/clock/Clock.config.ts

@@ -8,5 +8,6 @@ export default definePageConfig({
     //         "defaultDisplayBlock": true
     //     }
     // },
+    "disableScroll": true,
     "navigationStyle":"custom"
 })

src/pages/clock/Clock.scss

@@ -20,4 +20,8 @@
     flex-direction: row;
     align-items: center;
     padding-left: 30px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
 }

src/pages/clock/Clock.tsx

@@ -116,24 +116,35 @@ export default function Clock() {
 
     return <View style={{ flex: 1, position: 'relative' }}>
         <View style={{ height: navigationBarHeight, backgroundColor: MainColorType.bg }} />
-        <View className="navi-bar" style={{ height: navigationBarHeight, zIndex: 1000, backgroundColor: showCalendar?'#fff':MainColorType.bg }}>
+        <View className="navi-bar" style={{ height: navigationBarHeight, zIndex: 1000, backgroundColor: showCalendar ? '#fff' : MainColorType.bg }}>
+            <View className="navi-streak" style={{
+                height: 44,
+                marginTop: systemInfo.statusBarHeight,
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingLeft:0
+            }} >{health.title}</View>
+
             {
                 haveStreaks() && <View className="navi-streak"
                     onClick={() => {
-                        if (showCalendar){
+                        if (showCalendar) {
                             setShowCalendar(false)
                         }
                         else {
                             setShowCalendar(true)
                         }
-                        
+
                     }}
                     style={{ height: 44, marginTop: systemInfo.statusBarHeight }} >
                     <IconStreak color={getThemeColor(health.mode)} width={20} />
                     <Text style={{ color: getThemeColor(health.mode) }}>{getStreakCount()}</Text>
+
+
                 </View>
             }
 
+
         </View>
         <ClockNew />
         {
@@ -142,8 +153,8 @@ export default function Clock() {
                     setShowCalendar(false)
                 }}
                 confirm={() => { }}>
-                <View style={{display:'flex',flexDirection:'column'}}>
-                    <View style={{height: navigationBarHeight}}/>
+                <View style={{ display: 'flex', flexDirection: 'column' }}>
+                    <View style={{ height: navigationBarHeight }} />
                     <Calendar year={2024} month={9} />
                 </View>
             </Streak>

src/pages/clock/ClockNew.tsx

@@ -12,7 +12,7 @@ import MainHistory from "@/features/health/MainHistory";
 import { WindowType } from "@/utils/types";
 import { windows } from "@/services/health";
 import { useDispatch, useSelector } from "react-redux";
-import health, { setRefreshs, setWindows } from "@/store/health";
+import health, { setRefreshs, setTitle, setWindows } from "@/store/health";
 import dayjs from "dayjs";
 import Modal from "@/components/layout/Modal.weapp";
 import Streak from "@/features/health/Streak";
@@ -30,9 +30,9 @@ export default function ClockNew() {
     const dispatch = useDispatch();
     global.dispatch = dispatch;
 
-    useEffect(()=>{
+    useEffect(() => {
         healthRef.current = health;
-    },[health])
+    }, [health])
 
     useEffect(() => {
         setInterval(() => {
@@ -85,7 +85,14 @@ export default function ClockNew() {
         if (!health.windows) {
             return <View />
         }
-        return <View >
+        return <ScrollView style='height:100vh' scrollY onScroll={e => {
+            if (e.detail.scrollTop > 240) {
+                dispatch(setTitle(health.mode))
+            }
+            else {
+                dispatch(setTitle(''))
+            }
+        }}>
             <MainSwiper count={count} pageChanged={pageChanged} typeChanged={typeChanged} />
             <MainConsole type={type} />
             {/* <View onClick={() => {
@@ -93,12 +100,19 @@ export default function ClockNew() {
             }}>Show Calendar</View> */}
             <MainHistory type={type} />
             <View style={{ height: 2200 }} />
-        </View>
+        </ScrollView>
     }
     //https://blog.csdn.net/weixin_43525284/article/details/130182218
     return <View style={{ flex: 1 }}>
         {
-            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{ flex: 1,backgroundColor:MainColorType.bg }}>
+            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{ flex: 1, backgroundColor: MainColorType.bg }} onScroll={e => {
+                if (e.detail.scrollTop > 240) {
+                    dispatch(setTitle(health.mode))
+                }
+                else {
+                    dispatch(setTitle(''))
+                }
+            }}>
                 {
                     detail()
                 }
@@ -132,7 +146,7 @@ export default function ClockNew() {
 
 
         </ScrollView> */}
-        
+
         <TabBar index={0} />
     </View>
 }

src/store/health.tsx

@@ -5,13 +5,15 @@ interface HealthState {
     mode: string;
     selTab: number;
     refreshs: any; //刷新数据时间点
+    title: string;
 }
 
 const initialState: HealthState = {
     windows: null,
     mode: 'DAY',
     selTab: 0,
-    refreshs: []
+    refreshs: [],
+    title: ''
 }
 
 const healthSlice = createSlice({
@@ -30,7 +32,10 @@ const healthSlice = createSlice({
         },
         setRefreshs(state, action) {
             state.refreshs = action.payload
-        }
+        },
+        setTitle(state, action) {
+            state.title = action.payload
+        },
 
     }
 })
@@ -38,5 +43,5 @@ const healthSlice = createSlice({
 
 
 
-export const { setWindows, setMode, setTab, setRefreshs } = healthSlice.actions;
+export const { setWindows, setMode, setTab, setRefreshs,setTitle } = healthSlice.actions;
 export default healthSlice.reducer;