update

src/_health/base/new_durationpicker.tsx

@@ -93,7 +93,7 @@ export default function NewDurationPicker(props: { value?: any, onChange?: any,
         var days: string[] = []
 
         for (let i = min; i <= max; i++) {
-            days.push(i + '天')
+            days.push(i + TimeFormatter.getDaysUnit(i))
         }
 
         var hours: string[] = []

src/_health/components/choose_date_time.tsx

@@ -45,12 +45,6 @@ export default function ChooseDateTime(props: {
 
     return <View style={{ position: 'relative' }}>
         <View className="card_header">
-            {/* {
-                props.showError && <View className="error_icon_bg">
-                    <Image src={require('@assets/_health/tip_error.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
-                </View>
-
-            } */}
             {
                 props.title ? <View className="h34" style={{ flex: 1,color:'#000' }}>{props.title}</View> :
                     <View style={{ flex: 1 }} />

src/_health/components/fast_sleep_console.tsx

@@ -7,7 +7,7 @@ import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import dayjs from "dayjs";
 import { MainColorType } from "@/context/themes/color";
 import showAlert from "@/components/basic/Alert";
-import { IconArrow, IconCellArrow, IconCircle, IconNotification, IconNotificationOff } from "@/components/basic/Icons";
+import { IconArrow, IconCellArrow, IconCircle, IconError, IconNotification, IconNotificationOff } from "@/components/basic/Icons";
 import { useSelector } from "react-redux";
 import { delRecord } from "@/services/health";
 import { TimeFormatter } from "@/utils/time_format";
@@ -164,7 +164,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
 
     function processIcon(item, finish, isError) {
         if (isError) {
-            return <Image style={{ width: rpxToPx(24), height: rpxToPx(24) }} src={require('@assets/_health/tip_error.png')} />
+            return <IconError color="#fff" width={rpxToPx(24)} />
         }
         if (finish) {
             return <Image style={{ width: rpxToPx(24), height: rpxToPx(24) }} src={require('@assets/_health/checked.png')} />
@@ -293,7 +293,7 @@ export default function FastSleepConsole(props: { step: number, data: any, del:
                     <NewButton
                         type={NewButtonType.gray}
                         title='Correct'
-                        fontSize={rpxToPx(34)}
+                        // fontSize={rpxToPx(34)}
                         width={rpxToPx(128)}
                         height={rpxToPx(72)}
                         onClick={() => {

src/_health/components/schedule_item.tsx

@@ -102,7 +102,6 @@ export default function ScheduleItem(props: {
                             if (props.onDelete) {
                                 props.onDelete()
                             }
-                            // delItem(index, i)
                         }
                     })
                 }}

src/_health/pages/log_time.tsx

@@ -7,7 +7,7 @@ import NewButton, { NewButtonType } from "../base/new_button";
 import { rpxToPx } from "@/utils/tools";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
 import NewTimePicker from "../base/new_timepicker";
-import { IconCalendar } from "@/components/basic/Icons";
+import { IconCalendar, IconError } from "@/components/basic/Icons";
 import dayjs from "dayjs";
 import { useRouter } from "@tarojs/taro";
 import Card from "../components/card";
@@ -594,7 +594,7 @@ export default function LogTime() {
                 defaultSpace
             >
                 {
-                    showError && <Image src={require('@assets/_health/tip_error.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
+                    showError && <IconError color="#fff" width={rpxToPx(26)} />
                 }
             </StatusIndicator>}
             disable={array[index].disable}
@@ -701,7 +701,7 @@ export default function LogTime() {
                     errors.map((item, index) => {
                         return <View className="error_bg" key={index}>
                             <View className="error_icon_bg">
-                                <Image src={require('@assets/_health/tip_error.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
+                                <IconError color="#fff" width={rpxToPx(26)} />
                             </View>
                             <Text className="h24" style={{ lineHeight: rpxToPx(36) + 'px' }}>{item}</Text>
                         </View>

src/_health/pages/long_fast.tsx

@@ -198,6 +198,16 @@ export default function LongFast() {
         // return str
     }
 
+    function getDurationStr(){
+        var days = Math.floor(duration/24)
+        var hours = duration%24
+        var str = `${days} 天`
+        if (hours>0){
+            str = `${str} ${hours} 小时`
+        }
+        return str
+    }
+
     function moment() {
         if (long_fast.timeline[0].moment) {
             const moment = long_fast.timeline[0].moment
@@ -332,12 +342,24 @@ export default function LongFast() {
                         })
                     }}
                     themeColor={getThemeColor(health.mode)}>
-                    <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', marginBottom: 20 }}>
+                    {/* <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', marginBottom: 20 }}>
                         <NewDurationPicker type={DurationPickerType.long}
                             color={MainColorType.fast}
                             value={duration}
                             onChange={e => setDuration(e)} />
-                    </View>
+                    </View> */}
+                    <Card>
+                        <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                            <View className="picker_title" style={{ color: MainColorType.fast, width: rpxToPx(618) }}>
+                                {getDurationStr()}
+                                <View className="border_footer_line" />
+                            </View>
+                            <NewDurationPicker type={DurationPickerType.long}
+                                color={MainColorType.fast}
+                                value={duration}
+                                onChange={e => setDuration(e)} />
+                        </View>
+                    </Card>
                 </NewModal>
             }
             {

src/_health/pages/move.config.ts

@@ -3,6 +3,7 @@ export default definePageConfig({
         // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
         // 'demo':'../../components/demo'
     },
+    "disableScroll":true,
     "navigationBarTitleText": "",
     "navigationBarBackgroundColor": "#f5f5f5"
 })

src/_health/pages/move.scss

@@ -196,12 +196,17 @@
 }
 
 .history_header {
-    display: flex;
-    height: 108px;
-    padding-left: 52px;
     position: relative;
+    height: 120px;
+    padding-left: 40px;
+    padding-right: 40px;
+    display: flex;
     flex-direction: row;
-    align-items: center;
+    justify-content: space-between;
+    padding-top: 36px;
+    padding-bottom: 25px;
+    box-sizing: border-box;
+    background-color: #f5f5f5;
 }
 
 .history_header_title {

src/_health/pages/move.tsx

@@ -20,8 +20,10 @@ import { MainColorType } from "@/context/themes/color";
 import StatusIndicator, { StatusType } from "../base/status_indicator";
 import showActionSheet from "@/components/basic/ActionSheet";
 import ListFooter from "../components/list_footer";
+import StickyDateList from "../components/sticky_date_list";
 
 let timer
+let myScrollTop = 0
 export default function Move() {
     const health = useSelector((state: any) => state.health);
     const [allowRun, setAllowRun] = useState(false)
@@ -36,20 +38,29 @@ export default function Move() {
     const [moreActive, setMoreActive] = useState(false)
     const [hours, setHours] = useState<any>([])
     const [startDate, setStarteDate] = useState('')
+
+    const [isPulling, setIsPulling] = useState(false)
+    const [itemLayouts, setItemLayouts] = useState<any>([])
+    const [showDate, setShowDate] = useState(false)
+    const [date, setDate] = useState('')
+    const [page, setPage] = useState(1)
+    const [loading, setLoading] = useState(false)
+
+
     let navigation, showActionSheetWithOptions;
     const { t } = useTranslation()
     const dispatch = useDispatch()
 
     useEffect(() => {
         getMovesCurrent()
-        getMovesHistory()
+        getMovesHistory(1)
         checkAuth()
         timer = setInterval(() => {
             setCount((index) => index + 1)
             const date = new Date()
             if (date.getMinutes() == 10 && date.getSeconds() == 0) {
                 getMovesCurrent()
-                getMovesHistory()
+                getMovesHistory(1)
             }
         }, 1000)
 
@@ -58,6 +69,30 @@ export default function Move() {
         }
     }, [])
 
+    useEffect(() => {
+        if (list.length > 0) {
+            setTimeout(() => {
+                measureItemLayouts()
+            }, 500)
+        }
+    }, [list])
+
+    function measureItemLayouts() {
+        const query = Taro.createSelectorQuery()
+        list.forEach((item, index) => {
+            query.select(`#history-${index}`).boundingClientRect()
+        });
+        query.exec((res) => {
+            var layouts: any = []
+            res.forEach((rect, index) => {
+                if (rect) {
+                    layouts[index] = rect.top + myScrollTop
+                }
+            });
+            setItemLayouts(layouts)
+        })
+    }
+
     function checkAuth() {
         Taro.getSetting({
             success: res => {
@@ -78,12 +113,12 @@ export default function Move() {
     useDidShow(() => {
         checkAuth()
         getMovesCurrent()
-        getMovesHistory()
+        getMovesHistory(1)
     })
 
     global.updateMove = () => {
         getMovesCurrent()
-        getMovesHistory()
+        getMovesHistory(1)
     }
 
     function getMovesCurrent() {
@@ -105,18 +140,63 @@ export default function Move() {
         })
     }
 
-    function getMovesHistory() {
-        getActiveMoves().then(res => {
-            if (index == 1) {
+    function getMovesHistory(page) {
+        setIndex(page)
+        setIsPulling(true)
+        setLoading(true)
+        getActiveMoves({
+            page: page,
+            limit: 10,
+        }
+        ).then(res => {
+            if (page == 1) {
                 setList((res as any).data)
                 setTotal((res as any).total)
             }
             else {
                 setList([...list, ...(res as any).data])
             }
+            setIsPulling(false)
+            setLoading(false)
+
+        }).catch(e => {
+            setLoading(false)
         })
     }
 
+    function more() {
+        if (loading) return;
+        if (total == list.length) return;
+        var index = page;
+        index++;
+        setPage(index)
+        getMovesHistory(index)
+    }
+
+    function onScroll(e) {
+        var top = e.detail.scrollTop
+        myScrollTop = top
+        if (itemLayouts.length > 0) {
+            var i = -1
+            var date = ''
+            list.forEach((item, index) => {
+                if (top >= itemLayouts[index] - 50) {
+                    i = index
+                    var currentDate = (list[index].date + '').substring(0, 6)
+
+                    date = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
+                }
+            })
+
+            setShowDate(i != -1)
+            setDate(date)
+        }
+        else {
+            setShowDate(false)
+            setDate('')
+        }
+    }
+
 
     function tapLog() {
         // if (getStatus() != 'open') {
@@ -191,7 +271,7 @@ export default function Move() {
                 // console.log('move result')
                 jumpPage('./post_result?data=' + JSON.stringify((res as any).post_result))
                 getMovesCurrent()
-                getMovesHistory()
+                getMovesHistory(1)
             })
         }).catch(_ => {
             dispatch(setResult({ isSuccess: false }) as any)
@@ -222,7 +302,7 @@ export default function Move() {
                     }
                     jumpPage('./post_result?data=' + JSON.stringify((res as any).post_result))
                     getMovesCurrent()
-                    getMovesHistory()
+                    getMovesHistory(1)
                 })
             }).catch(_ => {
                 dispatch(setResult({ isSuccess: false }) as any)
@@ -349,10 +429,10 @@ export default function Move() {
                 item.status == 'MISSED' && <Text className="missed">Missed</Text>
             }
             {
-                item.status == 'SEDENTARY' && <IconSit width={rpxToPx(44)} color={MainColorType.g02}/>
+                item.status == 'SEDENTARY' && <IconSit width={rpxToPx(44)} color={MainColorType.g02} />
             }
             {
-                item.status == 'ACTIVE' && <IconWalk width={rpxToPx(44)} color={MainColorType.active}/>
+                item.status == 'ACTIVE' && <IconWalk width={rpxToPx(44)} color={MainColorType.active} />
             }
             <View className="border_footer_line" />
         </View>
@@ -697,45 +777,66 @@ export default function Move() {
         jumpPage('./move_detail?id=' + item.id)
     }
 
-    if (!loaded || !loadAuth) return <View />
+    function historyDate(){
+        return '22'
+    }
 
-    return <View style={{ display: 'flex', flexDirection: 'column' }}>
-        <NewHeader type={NewHeaderType.left} title="Move Every Hour" />
-        {
-            consolePanel()
-        }
-        {
-            tools()
-        }
-        {
-            summary()
-        }
-        {
-            activeHour()
-        }
+    function historyMonth(){
+        return 'May'
+    }
 
-        {
-            list.length > 0 && <View className="history">
-                <View className="history_header">
-                    <Text className="h50 bold">Recent</Text>
-                    <View className="border_footer_line" />
-                </View>
-                {
-                    list.map((item, index) => {
-                        return <View key={index} className="history_item" onClick={() => goDetail(item)}>
-                            <Text className="history_item_date">{(item.date + '').substring(6, 8)}</Text>
-                            <View className="history_item_detail_bg">
-                                <IconWalk width={rpxToPx(32)} color={MainColorType.active}/>
-                                <Text style={{ fontSize: rpxToPx(26),marginLeft:rpxToPx(16) }}> Hours Active {item.active_hours} · Total Steps {item.stat.real_steps}</Text>
+    if (!loaded || !loadAuth) return <View />
+    return <StickyDateList onRefresherRefresh={() => {
+        setIsPulling(true)
+        setPage(1)
+        getMovesHistory(1)
+    }} isPulling={isPulling}
+        onScroll={onScroll}
+        showDate={showDate}
+        date={date}
+        loadMore={more}>
+
+        <View style={{ display: 'flex', flexDirection: 'column' }}>
+            <NewHeader type={NewHeaderType.left} title="Move Every Hour" />
+            {
+                consolePanel()
+            }
+            {
+                tools()
+            }
+            {
+                summary()
+            }
+            {
+                activeHour()
+            }
+
+            {
+                list.length > 0 && <View className="history">
+                    <View className="history_header">
+                        <Text className="h42 bold">{t('health.recents')}</Text>
+                    </View>
+                    {
+                        list.map((item, index) => {
+                            return <View key={index} id={`history-${index}`} className="history_item" onClick={() => goDetail(item)}>
+                                {/* <Text className="history_item_date">{(item.date + '').substring(6, 8)}</Text> */}
+                                <View className="cell_date" >
+                                    <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate()}</View>
+                                    <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(11), lineHeight: rpxToPx(49) + 'px' }}>{historyMonth()}</View>
+                                </View>
+                                <View className="history_item_detail_bg">
+                                    <IconWalk width={rpxToPx(32)} color={MainColorType.active} />
+                                    <Text style={{ fontSize: rpxToPx(26), marginLeft: rpxToPx(16) }}> Hours Active {item.active_hours} · Total Steps {item.stat.real_steps}</Text>
+                                </View>
+                                {/* <View className="border_footer_line" /> */}
                             </View>
-                            {/* <View className="border_footer_line" /> */}
-                        </View>
-                    })
-                }
-            </View>
-        }
-        <ListFooter noMore={(list.length > 0) && (total == list.length)} />
+                        })
+                    }
+                </View>
+            }
+            <ListFooter noMore={(list.length > 0) && (total == list.length)} />
 
 
-    </View>
+        </View>
+    </StickyDateList>
 }

src/pages/account/Album.tsx

@@ -216,6 +216,7 @@ export default function Album() {
         }
         return dayjs(item.timestamp).format('MMM')
     }
+    
 
     return <StickyDateList onRefresherRefresh={() => {
         setIsPulling(true)

src/services/health.tsx

@@ -238,10 +238,10 @@ export const getActiveMovesCurrent = () => {
     })
 }
 
-export const getActiveMoves = () => {
+export const getActiveMoves = (params) => {
     return new Promise((resolve) => {
         request({
-            url: API_ACTIVE_MOVES, method: 'GET', data: {}
+            url: API_ACTIVE_MOVES, method: 'GET', data: {...params}
         }).then(res => {
             resolve(res);
             // dispatch(loginSuccess(res));

src/utils/time_format.ts

@@ -643,9 +643,9 @@ export class TimeFormatter {
   static getDaysUnit = (days, isFull?: boolean) => {
     if (global.language == 'en') {
       if (isFull) {
-        return days > 1 ? ' days ' : ' day '
+        return days != 1 ? ' days ' : ' day '
       }
-      return days > 1 ? ' d ' : ' d '
+      return days != 1 ? ' d ' : ' d '
     }
     return '天'
   }
@@ -653,9 +653,9 @@ export class TimeFormatter {
   static getHoursUnit = (hours, isFull?: boolean) => {
     if (global.language == 'en') {
       if (isFull) {
-        return hours > 1 ? ' hours ' : ' hour '
+        return hours != 1 ? ' hours ' : ' hour '
       }
-      return hours > 1 ? ' hrs ' : ' hr '
+      return hours != 1 ? ' hrs ' : ' hr '
     }
     return '小时'
   }