update

src/_health/pages/streak_calendar.tsx

@@ -1,9 +1,281 @@
-import { View } from "@tarojs/components";
+import { View, ScrollView, Text, Image } from "@tarojs/components";
 import './streak_calendar.scss'
+import '@/features/health/calendar.scss'
+import NewHeader, { NewHeaderType } from "../components/new_header";
+import { useSelector } from "react-redux";
+import { rpxToPx } from "@/utils/tools";
+import { useEffect, useState } from "react";
+import { streaks } from "@/services/health";
+import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks";
+import NewButton, { NewButtonType } from "../base/new_button";
 
 
-export default function StreakCalendar(){
-    return <View>
+export default function StreakCalendar() {
+    const health = useSelector((state: any) => state.health);
+    const [mode, setMode] = useState('EAT')
+    const [selIndex, setSelIndex] = useState(0);
+    const weeks = ['日', '一', '二', '三', '四', '五', '六']
+    const indexBeginWeek = 0;
+    const [spaces, setSpaces] = useState<any>([])
+    const [days, setDays] = useState<any>([])
+    const [year, setYear] = useState(new Date().getFullYear())
+    const [month, setMonth] = useState(new Date().getMonth()+1)
+    const [current, setCurrent] = useState<any>(null)
+    const [loaded, setLoaded] = useState(false)
+
+    useEffect(() => {
+        loadData()
+    }, [month, mode])
+
+    function loadData() {
+
+        const firstDay = new Date(year, month - 1, 1);
+        const firstDayOfWeek = firstDay.getDay();
+        const spaceCount = firstDayOfWeek > indexBeginWeek ? firstDayOfWeek - indexBeginWeek : firstDayOfWeek - indexBeginWeek + 7
+        setSpaces(new Array(spaceCount).fill(''))
+
+
+
+
+
+        // 创建一个 Date 对象来获取该月的最后一天
+        const lastDay = new Date(year, month, 0); // 0 表示上一个月的最后一天
+        const totalDays = lastDay.getDate();
+        var list: any = []
+        for (var i = 1; i <= totalDays; i++) {
+            var obj: any = {
+                day: i
+            }
+            // if (i == 1 || i == 10 || i == 15) {
+            //     obj.begin = true
+            // }
+            // if (i == 2 || i == 11 || i == 16) {
+            //     obj.right = true
+            // }
+
+            // if (i == 22) {
+            //     obj.full = true
+            // }
+
+            list.push(obj)
+        }
+        setDays(list)
+
+
+        streaks({
+            window: mode,
+            month: year + (month + '').padStart(2, '0')
+        }).then(res => {
+            const array = (res as any).streaks
+            for (var i = 0; i < list.length; i++) {
+                var obj = list[i]
+                var strMonth = month < 10 ? '0' + month : month + ''
+                var strDay = obj.day < 10 ? '0' + obj.day : obj.day
+
+                const d = parseInt(year + '' + strMonth + strDay)
+                for (var j = 0; j < array.length; j++) {
+                    const streak = array[j]
+
+                    if (d == streak.start_date && streak.start_date == streak.end_date) {
+                        obj.full = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
+                    }
+                    else if (d == streak.start_date && streak.start_date < streak.end_date) {
+                        obj.begin = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
+                    }
+                    else if (d == streak.end_date && streak.start_date < streak.end_date) {
+                        obj.right = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
+                    }
+                    else if (streak.start_date < d && d < streak.end_date) {
+                        obj.center = true
+                        obj.current = streak.is_current
+                        obj.showStreak = true;
+                    }
+                }
+                obj.isToday = false
+                if (year == new Date().getFullYear() && month == new Date().getMonth() + 1 && obj.day == new Date().getDate()) {
+                    obj.isToday = true
+                }
+            }
+            setDays([...list])
 
+            setLoaded(true)
+            setCurrent((res as any).current)
+            // console.log(list)
+        }).catch(e => {
+
+        })
+    }
+
+    function itemClass(item) {
+        if (item.begin) {
+            if (item.isToday) {
+                return 'left_calendar_item today_content'
+            }
+            return 'left_calendar_item'
+        }
+        if (item.center) {
+            if (item.isToday) {
+                return 'center_calendar_item today_content'
+            }
+            return 'center_calendar_item'
+        }
+        if (item.right) {
+            if (item.isToday) {
+                return 'right_calendar_item today_content'
+            }
+            return 'right_calendar_item'
+        }
+        if (item.full) {
+            if (item.isToday) {
+                return 'full_calendar_item today_content'
+            }
+            return 'full_calendar_item'
+        }
+        if (item.isToday) {
+            return 'today1'
+        }
+        return 'calendar_item'
+    }
+
+    function itemTextClass(item) {
+        if (item.begin) {
+            return 'left_day'
+        }
+        if (item.center) {
+            return 'center_day'
+        }
+        if (item.right) {
+            return 'right_day'
+        }
+        if (item.full) {
+            return 'full_day'
+        }
+        return 'normal_day'
+    }
+
+    function bgColor(item) {
+        if (item.showStreak && !item.current) {
+            return '#B2B2B21A'
+        }
+        if (itemClass(item) == 'calendar_item') {
+            return 'transparent'
+        }
+        if (itemClass(item) == 'today1') {
+
+            return '#000'
+        }
+        return getThemeColor(mode) + '33'
+    }
+
+    function textColor(item) {
+        // if (itemTextClass(item) == 'normal_day') {
+        //     return '#000000'
+        // }
+        if (item.isToday) {
+            if (item.begin || item.full || item.right || item.left) {
+                return '#000'
+            }
+            return '#ffffff'
+        }
+        return '#000000'
+        // return getThemeColor(health.mode)
+    }
+
+    function leftSpace(days) {
+        if (days < 10) {
+            return rpxToPx(98)
+        }
+        else if (days < 100) {
+            return rpxToPx(71)
+        }
+        else if (days < 1000) {
+            return rpxToPx(54)
+        }
+    }
+
+    function currentCount(type){
+        const scenario = getScenario(health.windows,type)
+        if (scenario.current_streak.days>0) return scenario.current_streak.days
+        return scenario.current_streak.days
+    }
+
+    function content() {
+        return <View className="calendar_main2">
+            <View className="calendar_header">
+
+                <NewButton type={NewButtonType.img} onClick={() => {
+                    const date = new Date(year, month - 1); // month - 1 因为月份是从 0 开始
+                    date.setMonth(date.getMonth() - 1);
+                    setYear(date.getFullYear())
+                    setMonth(date.getMonth() + 1)
+                }}>
+                    <Image src={require('@assets/_health/pre.png')} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
+                </NewButton>
+                <Text style={{ width: rpxToPx(236), textAlign: 'center' }}>{`${year}年${month}月`}</Text>
+
+                <NewButton type={NewButtonType.img} onClick={() => {
+                    const date = new Date(year, month + 1); // month - 1 因为月份是从 0 开始
+                    date.setMonth(date.getMonth() - 1);
+                    setYear(date.getFullYear())
+                    setMonth(date.getMonth() + 1)
+                }}>
+                    <Image src={require('@assets/_health/next.png')} style={{ width: rpxToPx(36), height: rpxToPx(36) }} />
+                </NewButton>
+            </View>
+            <View className="calendar_body">
+                <View className="calendar_weekly">
+                    {
+                        weeks.map((item, index) => {
+                            return <View className="week_item" key={index}>{item}</View>
+                        })
+                    }
+                </View>
+                <View className="calendar_main3">
+                    {
+                        spaces.map((item, i) => {
+                            return <View className="calendar_item" style={{ width: rpxToPx(90) }} key={i * 10} />
+                        })
+                    }
+                    {
+                        days.map((item, index) => {
+                            return <View className={itemClass(item)} style={{ width: rpxToPx(90), backgroundColor: bgColor(item) }} key={index}>
+                                <Text className={itemTextClass(item)} style={{ color: textColor(item) }}>{item.day}</Text>
+                            </View>
+                        })
+                    }
+                </View>
+            </View>
+            <View className="calendar_footer">
+
+            </View>
+        </View>
+    }
+
+
+    return <View>
+        <NewHeader type={NewHeaderType.left} title="Calendar" />
+        <ScrollView style={{ width: rpxToPx(750),flexDirection:'row',display:'flex',height:100 }} scrollX enableFlex showScrollbar={false}>
+            <View onClick={() => setMode('EAT')}>
+                <Text>Eat<Text>{currentCount('EAT')}</Text></Text>
+            </View>
+            <View onClick={() => setMode('ACTIVE')}>
+                <Text>Active<Text>{currentCount('ACTIVE')}</Text></Text>
+            </View>
+            <View onClick={() => setMode('FAST')}>
+                <Text>Fast<Text>{currentCount('FAST')}</Text></Text>
+            </View>
+            <View onClick={() => setMode('SLEEP')}>
+                <Text>Sleep<Text>{currentCount('SLEEP')}</Text></Text>
+            </View>
+        </ScrollView>
+        {
+            content()
+        }
     </View>
 }

src/_health/pages/streak_weekly.config.ts

@@ -0,0 +1,8 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor":"#f5f5f5",
+})

src/_health/pages/streak_weekly.tsx

@@ -0,0 +1,34 @@
+import { ColorType } from "@/context/themes/color";
+import Streaks from "@/features/trackTimeDuration/components/Streaks";
+import WeekCalendar from "@/features/trackTimeDuration/components/WeekCalendar";
+import { rpxToPx } from "@/utils/tools";
+import { View,Text } from "@tarojs/components";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+let GradientText
+if (process.env.TARO_ENV == 'rn') {
+    GradientText = require('@/components/basic/GradientText').default
+}
+
+export default function StreakWeekly() {
+    // const [count, setCount] = useState(0)
+    const [showEatCalendar, setShowEatCalendar] = useState(false)
+
+    const {t} = useTranslation()
+    return <View>
+        <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <View className="index_section">
+                <Text className="index_section_title">{t('feature.track_time_duration.weekly.title')}</Text>
+            </View>
+            <WeekCalendar isFastSleep={true} />
+            <View className="vip_calendar" onClick={() => setShowEatCalendar(true)}>
+                {
+                    process.env.TARO_ENV == 'weapp' ? <Text className="eat_calendar_text">{t('feature.track_time_duration.weekly.show_eating_window')}</Text> :
+                        <GradientText style={{ fontSize: rpxToPx(28), color: 'black', fontWeight: 'bold' }} colors={[ColorType.food, ColorType.activity]}>{t('feature.track_time_duration.weekly.show_eating_window')}</GradientText>
+                }
+
+            </View>
+        </View>
+    </View>
+}

src/app.config.ts

@@ -74,7 +74,8 @@ const appConfig = defineAppConfig({
         'pages/long_fast',
         'pages/long_fast_setting',
         'pages/post_result',
-        'pages/streak_calendar'
+        'pages/streak_calendar',
+        'pages/streak_weekly'
       ]
     }
   ],
@@ -154,10 +155,10 @@ process.env.TARO_ENV === 'weapp' && (appConfig.tabBar = {
       pagePath: 'pages/notification/setting',
       text: '提醒',
     },
-    {
-      pagePath: 'pages/metric/Metric',
-      text: '指标',
-    },
+    // {
+    //   pagePath: 'pages/metric/Metric',
+    //   text: '指标',
+    // },
     {
       pagePath: 'pages/account/Profile',
       text: '更多',

src/app.scss

@@ -15,8 +15,6 @@ page {
     display: flex;
     flex-direction: column;
     flex: 1;
-    background-color: #fff;
-    color: #fff;
     height: '100%';
     // height: 100vh;
     width: 100vw;
@@ -217,14 +215,14 @@ page {
     padding-right: 36px;
     padding-top: 24px;
     padding-bottom: 24px;
-    background-color: #1c1c1c;
+    background-color: #fff;
     box-sizing: border-box;
     margin-bottom: 20px;
 }
 
 .add_more_text {
     margin-top: 32px;
-    color: #fff;
+    // color: #fff;
     font-weight: bold;
     font-size: 32px;
     line-height: 36px;

src/custom-tab-bar2/index.tsx

@@ -42,11 +42,11 @@ export default function TabBar() {
                     url: '/pages/clock/Clock'
                 })
                 break;
-            case 1:
-                Taro.switchTab({
-                    url: '/pages/metric/Metric'
-                })
-                break;
+            // case 1:
+            //     Taro.switchTab({
+            //         url: '/pages/metric/Metric'
+            //     })
+            //     break;
             case 2:
 
                 Taro.switchTab({

src/features/trackSomething/components/Metric.tsx

@@ -288,7 +288,7 @@ export default function Component(props: any) {
                 {
                     user.isLogin && list.length > 0 && <View className="add_more" onClick={chooseMore}>
                         <Image style={{ width: rpxToPx(48), height: rpxToPx(48) }} src={require('@assets/images/add2.png')} />
-                        <Text className="add_more_text">{t('feature.workout.add_more')}</Text>
+                        <Text className="add_more_text" style={{color:props.theme_color}}>{t('feature.workout.add_more')}</Text>
                     </View>
                 }
 

src/features/trackSomething/components/MetricItem.scss

@@ -9,7 +9,7 @@
     padding-right: 36px;
     padding-top: 24px;
     padding-bottom: 24px;
-    background-color: #1c1c1c;
+    background-color: #fff;
     box-sizing: border-box;
     margin-bottom: 20px;
 }
@@ -43,7 +43,7 @@
     line-height: 50px;
     height: 50px;
     font-weight: 500;
-    color: #ffffff;
+    color: #000;
     // background-color: blue;
     // margin-top: 20px;
     // margin-bottom: 12px;
@@ -53,7 +53,7 @@
     margin-top: 14px;
     font-size: 32px;
     line-height: 32px;
-    color: #ffffff;
+    color: #000;
     opacity: 0.8;
     font-weight: 500;
 }
@@ -72,7 +72,7 @@
     line-height: 28px;
     letter-spacing: -2px;
     height: 28px;
-    color: #ffffff;
+    color: #b2b2b2;
     opacity: 0.4;
     font-weight: 400;
 }

src/features/trackTimeDuration/components/TitleView.scss

@@ -15,7 +15,7 @@
 
 .title {
     flex-shrink: 0;
-    color: #fff;
+    color: #000;
     font-size: 72px;
     line-height: 72px;
     font-weight: bold;
@@ -48,7 +48,7 @@
 
 .subTitle{
     margin-top: 8px;
-    color: #fff;
+    color: #000;
     opacity: 0.4;
     font-size: 36px;
     line-height: 48px;

src/features/trackTimeDuration/components/TitleView.tsx

@@ -96,7 +96,7 @@ export default function Component(props: {
         style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
         <View className='title_bg'>
             <Text className='title' style={{
-                color: props.titleColor ? props.titleColor : '#fff',
+                color: props.titleColor ? props.titleColor : '#000',
                 fontSize: props.titleSize?props.titleSize:(props.secondPage ? 28 : 36)
             }}>{props.title}</Text>
             {

src/pages/account/Profile.tsx

@@ -191,6 +191,20 @@ export default function Page() {
         jumpPage('/_health/pages/streak_calendar')
     }
 
+    function goMetric(){
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+        }
+        jumpPage('/pages/metric/Metric')
+    }
+
+    function goWeekly(){
+        if (!user.isLogin) {
+            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
+        }
+        jumpPage('/_health/pages/streak_weekly')
+    }
+
     usePullDownRefresh(() => {
         refresh()
     })
@@ -306,7 +320,7 @@ export default function Page() {
                 </View>
             </View>
 
-            <View className="profile_cell profile_cell_space" onClick={goSetting}>
+            <View className="profile_cell profile_cell_space" onClick={goMetric}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Metric</Text>
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
@@ -342,7 +356,7 @@ export default function Page() {
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />
                 <View className="profile_cell_line" />
             </View>
-            <View className="profile_cell" onClick={goSetting}>
+            <View className="profile_cell" onClick={goWeekly}>
                 <Image src={require('@assets/_health/sit.png')} className="profile_cell_icon" />
                 <Text style={{ flex: 1 }}>Window</Text>
                 <Image src={require('@assets/_health/cell_arrow.png')} className="profile_cell_arrow" />

src/pages/metric/Metric.config.ts

@@ -5,6 +5,7 @@ export default definePageConfig({
     },
     // "disableScroll": true,
     "enablePullDownRefresh":true,
-    "navigationBarTitleText":""
+    "navigationBarTitleText":"",
+    "navigationBarBackgroundColor":"#f5f5f5"
   })
   

src/pages/metric/Metric.tsx

@@ -21,6 +21,6 @@ export default function Page() {
     })
     return <View className="container">
         <Metric />
-        <Tabbar index={1} />
+        {/* <Tabbar index={1} /> */}
     </View>
 }