update

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -62,7 +62,6 @@ export default function Rings(props: {
     const user = useSelector((state: any) => state.user);
 
     useEffect(()=>{
-        debugger
         drawCircle()
     },[])
 

src/features/trackTimeDuration/components/WeekCalendar.scss

@@ -49,7 +49,7 @@
     border-radius: 16px;
     overflow: hidden;
     height: 520px;
-    width: 658px;
+    // width: 658px;
     display: flex;
     flex-direction: row;
 }

src/features/trackTimeDuration/components/WeekCalendar.tsx

@@ -1,24 +1,109 @@
 import { View, ScrollView, Text } from "@tarojs/components";
 import './WeekCalendar.scss'
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ColorType } from "@/context/themes/color";
 import WeekCalendarItem from "./WeekCalendarItem";
 import { rpxToPx } from "@/utils/tools";
 import { TimeFormatter } from "@/utils/time_format";
-export default function WeekCalendar(props: { calendars: any }) {
-    const [current, setCurrent] = useState(props.calendars.length - 1)
-    const [summary, setSummary] = useState(props.calendars[props.calendars.length - 1].summary_stats)
-    const [calendarData, setCalendarData] = useState(props.calendars[props.calendars.length - 1])
+import { clockSummaryStats } from "@/services/trackTimeDuration";
+
+let pageIndex = 0
+let timer;
+let scrollTimer;
+let isScrolling;
+let fingerDrag = false;
+export default function WeekCalendar() {
+    const [calendars, setCalendars] = useState<any>([])
+    const [current, setCurrent] = useState(0)
+    const [summary, setSummary] = useState<any>(null)
+    const [calendarData, setCalendarData] = useState<any>(null)
+    const [minTime, setMinTime] = useState(0)
+    const [left,setLeft] = useState(0)
+    const [isLoading, setIsLoading] = useState(false)
+    const pageSize = 27
+
+    useEffect(() => {
+        pageIndex = -1
+        getRecords()
+    }, [])
+
+    function getRecords() {
+        if (isLoading) return
+        pageIndex++;
+        setIsLoading(true)
+        var timestamp = TimeFormatter.getMondayTimestamp()
+        var list: any = []
+        var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
+        for (var i = 0; i < pageSize; i++) {
+            list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
+        }
+        clockSummaryStats({ times: list.join(';') }).then(res => {
+            var list = (res as any).data.reverse()
+            if (pageIndex == 0) {
+                setCalendars(list)
+                setCurrent(list.length - 1)
+                setSummary(list[list.length - 1].summary_stats?list[list.length - 1].summary_stats:null)
+                setCalendarData(list[list.length - 1])
+                setMinTime((res as any).extra.real_start_time_min)
+                setLeft((list.length - 1) * rpxToPx(658))
+                setIsLoading(false)
+            }
+            else {
+                var array = list.concat(calendars)
+                updateList(array)
+
+            }
+
+        })
+        // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
+    }
+
+    function updateList(array) {
+        timer = setInterval(() => {
+            if (!isScrolling) {
+                setCalendars(array)
+                setCurrent(current + 7)
+                setSummary(array[current + 7].summary_stats?array[current + 7].summary_stats:null)
+                setCalendarData(array[current + 7])
+                setLeft((current + 7) * rpxToPx(658))
+                setIsLoading(false)
+                clearInterval(timer);
+            }
+        }, 30)
+    }
+
+    function dragStart(e){
+        fingerDrag = true
+    }
+
+    function dragEnd(e) {
+        fingerDrag = true
+    }
 
     function onScroll(e) {
+        if (!fingerDrag) {
+            return
+        }
+        isScrolling = true
         var x = e.detail.scrollLeft
         var page = parseInt(x / rpxToPx(586) + '')
-        if (current != page) {
-            setCurrent(page)
-            setSummary(props.calendars[page].summary_stats)
-            setCalendarData(props.calendars[page])
+        if (current != page && page<calendars.length) {
             console.log(page)
+            setCurrent(page)
+            setSummary(calendars[page].summary_stats?calendars[page].summary_stats:null)
+            setCalendarData(calendars[page])
+            if (page <= 2) {
+
+                getRecords();
+            }
         }
+        if (scrollTimer)
+            clearTimeout(scrollTimer);
+
+        scrollTimer = setTimeout(() => {
+            isScrolling = false
+            fingerDrag = false;
+        }, 300) as any
 
     }
 
@@ -27,27 +112,32 @@ export default function WeekCalendar(props: { calendars: any }) {
         return `${date.getMonth() + 1}月${date.getDate()}日`
     }
 
+    if (!calendarData)
+        return <View />
     return <View>
         <View className="calendar_summary_top">
             <View className="calendar_summary_item">
                 <Text className="calendar_summary_title">断食平均</Text>
-                <Text className="calendar_summary_value" style={{ color: ColorType.fast }}>{summary.fast.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
+                <Text className="calendar_summary_value" style={{ color: ColorType.fast }}>{!summary || summary.fast.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
             </View>
             <View className="calendar_summary_item">
                 <Text className="calendar_summary_title">睡眠平均</Text>
-                <Text className="calendar_summary_value" style={{ color: ColorType.sleep }}>{summary.sleep.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
+                <Text className="calendar_summary_value" style={{ color: ColorType.sleep }}>{!summary || summary.sleep.avg == 0 ? '-' : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
             </View>
         </View>
         <Text className="calendar_summary_desc">{getDate(calendarData.start)} 周日中午 - {getDate(calendarData.end)} 周日中午</Text>
         <View className="chart_bg">
             <View className="chart_content_bg" />
             <ScrollView className="chart_scroll"
+            style={{width:rpxToPx(658)}}
                 onScroll={onScroll}
-                scrollLeft={(props.calendars.length - 1)*rpxToPx(658)}
+                onDragEnd={dragEnd}
+                onDragStart={dragStart}
+                scrollLeft={left}
                 scrollX pagingEnabled={true}
                 enableFlex enhanced>
                 {
-                    props.calendars.map((item) => {
+                    calendars.map((item) => {
                         return <WeekCalendarItem data={item} />
                     })
                 }

src/features/trackTimeDuration/components/WeekCalendarItem.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     height: 520px;
-    width: 658px;
+    // width: 658px;
     // background-color: red;
     flex-shrink: 0;
 }

src/features/trackTimeDuration/components/WeekCalendarItem.tsx

@@ -63,7 +63,7 @@ export default function WeekCalendarItem(props: { data: any }) {
             return null;
         }
     }
-    return <View className="chart_content">
+    return <View className="chart_content" style={{width:rpxToPx(658)}}>
         <View className="chart_top_week">
             <Text className="chart_week_text">周日</Text>
             <Text className="chart_week_text">周一</Text>

src/pages/clock/Index.tsx

@@ -90,13 +90,7 @@ export default function Page() {
     }, [])
 
     useEffect(() => {
-        // if (user.isLogin) {
         getCheckData()
-        // }
-
-        if (user.isLogin) {
-            getRecords()
-        }
     }, [user.isLogin, time.status])
 
     useReady(async () => {
@@ -141,23 +135,7 @@ export default function Page() {
         getHistory()
     }
 
-    function getRecords() {
-        var timestamp = TimeFormatter.getMondayTimestamp()
-        var list: any = []
-        var offset = 12 * 3600 * 1000
-        for (var i = 0; i < 7; i++) {
-            list.push(`${i},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
-            // list.push({
-            //     start:timestamp-7*24*3600*1000*i,
-            //     end:timestamp-7*24*3600*1000*i+24*3600*100,
-            //     index:i
-            // })
-        }
-        clockSummaryStats({ times: list.join(';') }).then(res => {
-            setCalendars((res as any).data.reverse())
-        })
-        // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
-    }
+    
 
     function getHistory() {
         if (user.isLogin)
@@ -463,9 +441,9 @@ export default function Page() {
             }
 
             {
-                user.isLogin && calendars.length > 0 && <View>
+                user.isLogin && <View>
                     <Text className="discovery">周统计</Text>
-                    <WeekCalendar calendars={calendars} />
+                    <WeekCalendar />
                 </View>
             }