update

src/_health/components/no_data.tsx

@@ -19,8 +19,8 @@ export default function NoData(props: { refresh: Function }) {
         }}>
             <IconError width={rpxToPx(88)} color="#fff"/>
         </View>
-        <Text className="h50 g01 bold" style={{marginTop:rpxToPx(24)}}>{t('feature.common.no_data.title')}</Text>
-        <View className="h30 g01" style={{marginBottom:rpxToPx(92),marginTop:rpxToPx(12)}}>check your network connection and try again</View>
+        <Text className="h50 g01 bold" style={{marginBottom:rpxToPx(92),marginTop:rpxToPx(24)}}>{t('feature.common.no_data.title')}</Text>
+        {/* <View className="h30 g01" style={{marginBottom:rpxToPx(92),marginTop:rpxToPx(12)}}>check your network connection and try again</View> */}
         <NewButton
             onClick={props.refresh}
             type={NewButtonType.alpha}

src/_health/components/single_img.tsx

@@ -0,0 +1,52 @@
+import { rpxToPx } from "@/utils/tools";
+import { View, Image } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { useEffect, useState } from "react";
+
+export default function SingleImage(props: { url: string }) {
+    const [loaded, setLoaded] = useState(false)
+    const [width, setWidth] = useState(346)
+    const [height, setHeight] = useState(346)
+    const kMax = 346
+    // const 
+    //346
+    useEffect(() => {
+        Taro.downloadFile({
+            url: props.url,
+            success: (res) => {
+                Taro.getImageInfo({
+                    src: res.tempFilePath,
+                    success: function (res) {
+                        console.log(res.width)
+                        console.log(res.height)
+                        if (res.width >= res.height) {
+                            setWidth(kMax)
+                            setHeight(kMax * res.height / res.width)
+                        }
+                        else {
+                            setHeight(kMax)
+                            setWidth(kMax * res.width / res.height)
+                        }
+                        setLoaded(true)
+                    }
+                })
+            }
+        })
+    }, [])
+    if (!loaded) return <View />
+    return <Image src={props.url}
+        onClick={(e) => {
+            if (process.env.TARO_ENV == 'weapp') {
+                e.stopPropagation()
+            }
+            Taro.previewImage({
+                current: props.url,
+                urls: [props.url]
+            })
+        }}
+        style={{
+            width: rpxToPx(width),
+            height: rpxToPx(height),
+            marginBottom:rpxToPx(7)
+        }} />
+}

src/_health/pages/timeline_detail.tsx

@@ -26,6 +26,7 @@ import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { TimeFormatter } from "@/utils/time_format";
 import TargetProgress from "../components/target_progress";
 import formatMilliseconds from "@/utils/format_time";
+import SingleImage from "../components/single_img";
 
 let timestamp = 0;
 let useRoute;
@@ -491,10 +492,15 @@ export default function TimelineDetail() {
                     </View>
                 } */}
                 {
-                    mediaCount() > 0 && <View style={{ marginTop: rpxToPx(17),display:'flex',flexShrink:0 }}>
+                    mediaCount() > 1 && <View style={{ marginTop: rpxToPx(17),display:'flex',flexShrink:0 }}>
                         <CoverList imgs={imgList()} count={mediaCount()} />
                     </View>
                 }
+                {
+                    mediaCount()==1 && <View style={{ marginTop: rpxToPx(17),display:'flex',flexShrink:0 }}>
+                        <SingleImage url={imgList()[0]}/>
+                        </View>
+                }
                 <View style={{height:rpxToPx(17),flexShrink:0,display:'flex'}}/>
 
                 {

src/pages/account/Journal.tsx

@@ -54,22 +54,22 @@ export default function Journal() {
             limit: 10
         }).then(res => {
             let list = (res as any).data
-            list.forEach(element => {
-                let array: any = []
-                element.windows.map(item => {
-                    item.events.map(event => {
-                        event.moments && event.moments.map(moment => {
-                            if (moment.media && moment.media.length > 0) {
-                                moment.media.map(media => {
-                                    array.push(media.url)
-                                })
-                            }
-                        })
+            // list.forEach(element => {
+            //     let array: any = []
+            //     element.windows.map(item => {
+            //         item.events.map(event => {
+            //             event.moments && event.moments.map(moment => {
+            //                 if (moment.media && moment.media.length > 0) {
+            //                     moment.media.map(media => {
+            //                         array.push(media.url)
+            //                     })
+            //                 }
+            //             })
 
-                    })
-                })
-                element.imgs = array
-            });
+            //         })
+            //     })
+            //     element.imgs = array
+            // });
             setLoading(false)
             if (index == 1) {
 
@@ -108,12 +108,12 @@ export default function Journal() {
 
         if (e.detail.scrollTop > 60) {
             Taro.setNavigationBarTitle({
-                title:'Journal'
+                title: 'Journal'
             })
         }
         else {
             Taro.setNavigationBarTitle({
-                title:''
+                title: ''
             })
         }
 
@@ -159,7 +159,7 @@ export default function Journal() {
                 }
             })
         })
-        return <View style={{  display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), overflow: 'hidden',flexShrink:0 }} key={index}>
+        return <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), overflow: 'hidden', flexShrink: 0 }} key={index}>
             {
                 array.length > 0 && <JournalCover imgs={array} />
             }
@@ -174,12 +174,12 @@ export default function Journal() {
                 paddingTop: array.length == 0 ? rpxToPx(12) : 0,
                 paddingBottom: array.length == 0 ? rpxToPx(12) : 0,
                 marginRight: rpxToPx(40),
-                flexShrink:0
+                flexShrink: 0
             }}>
                 {
 
                     window.events.map((item2, index2) => {
-                        if (item2.moments && item2.moments[0].type=='PIC') return <View key={index2*1000}/>
+                        if (item2.moments && item2.moments[0].type == 'PIC') return <View key={index2 * 1000} />
                         return <TimeTitleDesc
                             key={index2 * 1000}
                             className="line1"
@@ -202,7 +202,7 @@ export default function Journal() {
         var showDate = false;
         var dateStr2: any = ''
         if (index == 0) {
-            var currentDate = global.language == 'en' ? dayjs(journals[index].publish.timestamp).format('YYYY') : dayjs(journals[index].publish.timestamp).format('YYYY年')
+            var currentDate = global.language == 'en' ? dayjs(journals[index].timestamp).format('YYYY') : dayjs(journals[index].timestamp).format('YYYY年')
             var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
 
             if (currentDate != now) {
@@ -213,7 +213,7 @@ export default function Journal() {
 
         }
         else {
-            var currentDate = global.language == 'en' ? dayjs(journals[index].publish.timestamp).format('YYYY') : dayjs(journals[index].publish.timestamp).format('YYYY年')
+            var currentDate = global.language == 'en' ? dayjs(journals[index].timestamp).format('YYYY') : dayjs(journals[index].timestamp).format('YYYY年')
             var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
             if (currentDate != now) {
                 showDate = true
@@ -272,6 +272,56 @@ export default function Journal() {
         return dayjs(item.timestamp).format('MMM')
     }
 
+    function journalCell(item, index) {
+        return <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), overflow: 'hidden', flexShrink: 0 }} key={index}>
+            {
+                item.pics.length > 0 && <View onClick={(e)=>{
+                    if (process.env.TARO_ENV=='weapp'){
+                        e.stopPropagation()
+                    }
+                    Taro.previewImage({
+                        current:item.pics[0],
+                        urls:item.pics
+                    })
+                }}>
+                    <JournalCover imgs={item.pics} />
+                </View>
+            }
+            <View style={{
+                display: 'flex',
+                flexDirection: 'column',
+                // flex: 1,
+                overflow: 'hidden',
+                backgroundColor: item.pics.length == 0 ? '#fafafa' : 'transparent',
+                paddingLeft: item.pics.length == 0 ? rpxToPx(20) : 0,
+                paddingRight: item.pics.length == 0 ? rpxToPx(20) : 0,
+                paddingTop: item.pics.length == 0 ? rpxToPx(12) : 0,
+                paddingBottom: item.pics.length == 0 ? rpxToPx(12) : 0,
+                marginRight: rpxToPx(40),
+                flexShrink: 0
+            }}>
+                {
+
+                    item.texts.map((item2, index2) => {
+                        return <TimeTitleDesc
+                            key={index2 * 1000}
+                            className="line1"
+                            style={{ width: item.pics.length > 0 ? rpxToPx(350) : rpxToPx(512) }}
+                            // timeObj={item2.time}
+                            // time={dayjs(item2.time.timestamp).format('HH:mm')}
+                            time=''
+                            title={item2}
+                            desc={''}
+                        />
+                    })
+                }
+
+
+
+            </View>
+        </View>
+    }
+
     return <StickyDateList onRefresherRefresh={() => {
         setIsPulling(true)
         getJounalsData()
@@ -282,7 +332,7 @@ export default function Journal() {
         loadMore={() => {
             more()
         }}
-    ><View style={{ display: 'flex', flexDirection: 'column',minHeight:rpxToPx(464),backgroundColor:'#f5f5f5' }}>
+    ><View style={{ display: 'flex', flexDirection: 'column', minHeight: rpxToPx(464), backgroundColor: '#f5f5f5' }}>
             <NewHeader type={NewHeaderType.left} title="Journal" />
             {
                 journals.map((item, index) => {
@@ -292,7 +342,7 @@ export default function Journal() {
                             historyYear(index)
                         }
                         <View className="history_item2" id={`history-${index}`} onClick={() => {
-                            jumpPage('/pages/account/JournalDetail?detail=' + JSON.stringify(item))
+                            jumpPage('/pages/account/JournalDetail?date=' +item.date) //JSON.stringify(item))
                         }}>
 
                             <View className="cell_date" >
@@ -300,10 +350,13 @@ export default function Journal() {
                                 <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(13), lineHeight: rpxToPx(47) + 'px' }}>{historyMonth(item, index)}</View>
                             </View>
                             <View style={{ display: 'flex', flexDirection: 'column', flex: 1, paddingTop: rpxToPx(4) }}>
-                                {
+                                {/* {
                                     item.windows.map((window, i) => {
                                         return journalItem(window, i)
                                     })
+                                } */}
+                                {
+                                    journalCell(item, index)
                                 }
                             </View>
                             {/* <View className="border_footer_line" /> */}

src/pages/account/JournalDetail.tsx

@@ -14,6 +14,8 @@ import { TimeFormatter } from "@/utils/time_format";
 import TargetProgress from "@/_health/components/target_progress";
 import { getThemeColor } from "@/features/health/hooks/health_hooks";
 import formatMilliseconds from "@/utils/format_time";
+import SingleImage from "@/_health/components/single_img";
+import { journalDetail } from "@/services/health";
 
 let useRoute;
 let useNavigation;
@@ -28,6 +30,7 @@ export default function JournalDetail() {
     const user = useSelector((state: any) => state.user);
     const [imgs, setImgs] = useState<any>([])
     const [events, setEvents] = useState<any>([])
+    const [loaded, setLoaded] = useState(false)
 
     let router
     let navigation;
@@ -41,13 +44,19 @@ export default function JournalDetail() {
     else {
         router = useRouter()
     }
-    const [data, setData] = useState<any>(JSON.parse(router.params.detail))
+    const [data, setData] = useState<any>()
+    const date = router.params.date
     // const [detail, setDetail] = useState(JSON.parse(router.params.detail))
 
     useEffect(() => {
-        let obj = JSON.parse(router.params.detail)
+        journalDetail(date).then(res => {
+            setData(res)
+            updateData(res)
+            setLoaded(true)
+        })
+    }, [])
 
-        console.log(obj)
+    function updateData(obj) {
 
         var array: any = []
 
@@ -82,43 +91,27 @@ export default function JournalDetail() {
         // 合并其他项和排序后的 fastStartItems
         const result = otherItems.concat(fastStartItems);
 
+
+
+        let array2: any = []
+        obj.windows.map(item => {
+            item.events.map(event => {
+                event.moments && event.moments.map(moment => {
+                    if (moment.media && moment.media.length > 0) {
+                        moment.media.map(media => {
+                            array2.push(media.url)
+                        })
+                    }
+                })
+
+            })
+        })
+        obj.imgs = array2
+
+
         setImgs(obj.imgs)
         setEvents(result)
-    }, [])
-
-    // function demo() {
-    //     const array = [
-    //         { id: 1, event: "START" },
-    //         { id: 2, event: "FAST_START1" },
-    //         { id: 3, event: "STOP" },
-    //         { id: 4, event: "FAST_START5" },
-    //         { id: 5, event: "FAST_START3" },
-    //         { id: 6, event: "FAST_START2" },
-    //         { id: 7, event: "PAUSE" }
-    //     ];
-
-    //     // 定义排序的顺序
-    //     const order = {
-    //         "FAST_START1": 1,
-    //         "FAST_START2": 2,
-    //         "FAST_START3": 3,
-    //         "FAST_START4": 4
-    //     };
-
-    //     // 分离出需要排序的项和其他项
-    //     const otherItems = array.filter(item => !order[item.event]);
-    //     const fastStartItems = array.filter(item => order[item.event]);
-
-    //     // 排序 fastStartItems
-    //     fastStartItems.sort((a, b) => {
-    //         return (order[a.event] || 0) - (order[b.event] || 0);
-    //     });
-
-    //     // 合并其他项和排序后的 fastStartItems
-    //     const result = otherItems.concat(fastStartItems);
-
-    //     console.log(result);
-    // }
+    }
 
 
     function preview(url) {
@@ -173,44 +166,15 @@ export default function JournalDetail() {
                     </View>
                 })
             }
-
-            {/* {
-                (detail.scenario != 'MEAL' && detail.scenario != 'ACTIVITY') && <View style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
-                    <TimeTitleDesc
-                        timeObj={detail.time}
-                        time={dayjs(detail.time.timestamp).format('HH:mm')}
-                        title={detail.title}
-                    />
-                </View>
-            }
-            {
-                detail.scenario == 'ACTIVITY' && !list && <View style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
-                    <TimeTitleDesc
-                        timeObj={detail.time}
-                        time={dayjs(detail.time.timestamp).format('HH:mm')}
-                        title={detail.title}
-                    />
-                </View>
-            }
-            {
-                list && list.map((item, index) => {
-                    return <View key={index} style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
-                        <TimeTitleDesc
-                            timeObj={detail.time}
-                            time={dayjs(detail.time.timestamp).format('HH:mm')}
-                            title={detail.title}
-                            desc={item.description}
-                        />
-                    </View>
-                })
-            } */}
         </View>
     }
 
+    if (!loaded) return <View />
+
 
 
 
-    return <View style={{backgroundColor:'#fff'}}>
+    return <View style={{ backgroundColor: '#fff' }}>
         <View className="journal_detail">
             <Image className="header_avatar" src={user.avatar} mode="aspectFill" />
             <View className="jounal_content">
@@ -219,59 +183,18 @@ export default function JournalDetail() {
                     {
                         events.map((item, index) => {
                             return eventList(item, index)
-                            // if (item.scenario != 'MEAL' && item.scenario != 'ACTIVITY') {
-                            //     return <View key={index} style={{ marginBottom: index < events.length - 1 ? rpxToPx(48) : 0, display: 'flex', flexDirection: 'column' }}>
-
-                            //         <Text style={{ color: '#5C7099' }}>{dayjs(item.time.timestamp).format('HH:mm')}
-                            //             {
-                            //                 item.title && <Text> {item.title}</Text>
-                            //             }
-                            //         </Text>
-                            //     </View>
-                            // }
-
-                            // if (item.scenario == 'ACTIVITY') {
-                            //     return <View key={index} style={{ marginBottom: index < events.length - 1 ? rpxToPx(48) : 0, display: 'flex', flexDirection: 'column' }}>
-
-                            //         <Text style={{ color: '#5C7099' }}>{dayjs(item.time.timestamp).format('HH:mm')}
-                            //             {
-                            //                 item.title && <Text> {item.title}</Text>
-                            //             }
-                            //         </Text>
-                            //     </View>
-                            // }
-
-                            // return <View key={index} style={{ marginBottom: index < events.length - 1 ? rpxToPx(48) : 0, display: 'flex', flexDirection: 'column' }}>
-                            //     <Text >
-                            //         {
-                            //             item.time && <Text style={{ color: '#5C7099' }}>{dayjs(item.time.timestamp).format('HH:mm')} </Text>
-                            //         }
-                            //         {
-                            //             item.title && <Text> {item.title} </Text>
-                            //         }
-                            //         {
-                            //             item.moments && item.moment.description && <Text> {item.moment.description} </Text>
-                            //         }
-
-                            //     </Text>
-                            // </View>
                         })
                     }
                 </View>
 
 
-                <View className="img_container" style={{ marginTop: -rpxToPx(24),marginBottom:rpxToPx(17) }}>
-                    <CoverList
-                        imgs={imgs}
-                        count={imgs.length}
-                    />
-                    {/* {
-                        imgs.map((item, index) => {
-                            return <Image key={index} src={item} className="journal_img" mode="aspectFill" onClick={() => {
-                                preview(item)
-                            }} />
-                        })
-                    } */}
+                <View className="img_container" style={{ marginTop: -rpxToPx(24), marginBottom: rpxToPx(17) }}>
+                    {
+                        imgs.length == 1 ? <SingleImage url={imgs[0]} /> : <CoverList
+                            imgs={imgs}
+                            count={imgs.length}
+                        />
+                    }
                 </View>
 
                 {
@@ -290,7 +213,7 @@ export default function JournalDetail() {
                     })
                 }
 
-                <Text className="h24" style={{ color: MainColorType.g02,marginTop:rpxToPx(17),lineHeight:rpxToPx(60)+'px' }}>发布于{dayjs(data.publish_timestamp).format('M月D日 HH:mm')}</Text>
+                <Text className="h24" style={{ color: MainColorType.g02, marginTop: rpxToPx(17), lineHeight: rpxToPx(60) + 'px' }}>发布于{dayjs(data.publish_timestamp).format('M月D日 HH:mm')}</Text>
             </View>
 
 

src/services/health.tsx

@@ -296,6 +296,17 @@ export const getJournals = (params) => {
     })
 }
 
+export const journalDetail = (date) => {
+    return new Promise((resolve) => {
+        request({
+            url: API_ME_JOURNALS+'/'+date, method: 'GET', data: { }
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        })
+    })
+}
+
 export const getAlbums = (params) => {
     return new Promise((resolve) => {
         request({