|
|
@@ -1,6 +1,6 @@
|
|
|
import JournalCover from "@/features/journal/components/journal_cover";
|
|
|
import { getJournals } from "@/services/health";
|
|
|
-import { View, Text, Image } from "@tarojs/components";
|
|
|
+import { View, Text, Image, ScrollView } from "@tarojs/components";
|
|
|
import { useEffect, useState } from "react";
|
|
|
import './Journal.scss'
|
|
|
import dayjs from "dayjs";
|
|
|
@@ -14,6 +14,11 @@ import ListFooter from "@/_health/components/list_footer";
|
|
|
import TimeTitleDesc from "@/_health/components/time_title_desc";
|
|
|
import { TimeFormatter } from "@/utils/time_format";
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
+import NewButton, { NewButtonType } from "@/_health/base/new_button";
|
|
|
+import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks";
|
|
|
+import { useSelector } from "react-redux";
|
|
|
+import { IconClose } from "@/components/basic/Icons";
|
|
|
+import TargetProgress from "@/_health/components/target_progress";
|
|
|
|
|
|
let myScrollTop = 0
|
|
|
let useRoute;
|
|
|
@@ -25,16 +30,17 @@ if (process.env.TARO_ENV == 'rn') {
|
|
|
}
|
|
|
|
|
|
export default function Journal() {
|
|
|
+ const health = useSelector((state: any) => state.health);
|
|
|
const [journals, setJournals] = useState<any>([])
|
|
|
const [isPulling, setIsPulling] = useState(false)
|
|
|
const [itemLayouts, setItemLayouts] = useState<any>([])
|
|
|
const [showDate, setShowDate] = useState(false)
|
|
|
const [date, setDate] = useState('')
|
|
|
-
|
|
|
+ const [loaded, setLoaded] = useState(false)
|
|
|
const [page, setPage] = useState(1)
|
|
|
const [total, setTotal] = useState(0)
|
|
|
const [loading, setLoading] = useState(false)
|
|
|
- const {t} = useTranslation()
|
|
|
+ const { t } = useTranslation()
|
|
|
|
|
|
let router
|
|
|
let navigation;
|
|
|
@@ -48,11 +54,18 @@ export default function Journal() {
|
|
|
else {
|
|
|
router = useRouter()
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ const [window, setWindow] = useState(router.params.type ?? '')
|
|
|
+ const items = ['FAST', 'SLEEP', 'EAT', 'ACTIVE']
|
|
|
+
|
|
|
+ const [showTip, setShowTip] = useState(router.params.show_tip == '1')
|
|
|
+ // useEffect(() => {
|
|
|
+
|
|
|
+ // }, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
getJounalsData(1)
|
|
|
- }, [])
|
|
|
+ }, [window])
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (journals.length > 0) {
|
|
|
@@ -73,10 +86,13 @@ export default function Journal() {
|
|
|
|
|
|
function getJounalsData(index = 1) {
|
|
|
setLoading(true)
|
|
|
- getJournals({
|
|
|
+ var params: any = {
|
|
|
page: index,
|
|
|
- limit: 10
|
|
|
- }).then(res => {
|
|
|
+ limit: 10,
|
|
|
+ }
|
|
|
+ params.window = window
|
|
|
+ getJournals(params).then(res => {
|
|
|
+ setLoaded(true)
|
|
|
let list = (res as any).data
|
|
|
// list.forEach(element => {
|
|
|
// let array: any = []
|
|
|
@@ -131,7 +147,7 @@ export default function Journal() {
|
|
|
myScrollTop = top
|
|
|
|
|
|
if (e.detail.scrollTop > 60) {
|
|
|
-
|
|
|
+
|
|
|
Taro.setNavigationBarTitle({
|
|
|
title: pageTitle()
|
|
|
})
|
|
|
@@ -298,15 +314,31 @@ export default function Journal() {
|
|
|
}
|
|
|
|
|
|
function journalCell(item, index) {
|
|
|
+ if (item.show_ring) {
|
|
|
+ if (item.windows) {
|
|
|
+ return <TargetProgress key={index} showLine={false}
|
|
|
+ color={getThemeColor(item.windows[0].window)}
|
|
|
+ showRing={true}
|
|
|
+ desc={item.windows[0].description}
|
|
|
+ icon={
|
|
|
+ null
|
|
|
+ }
|
|
|
+ canvasId={`${item.windows[0].window}${item.windows[0].window_range.start_timestamp}${index}`}
|
|
|
+ startTimestamp={item.windows[0].window_range.start_timestamp}
|
|
|
+ endTimerstamp={item.windows[0].window_range.end_timestamp}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ return <View key={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'){
|
|
|
+ item.pics.length > 0 && <View onClick={(e) => {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
e.stopPropagation()
|
|
|
}
|
|
|
Taro.previewImage({
|
|
|
- current:item.pics[0],
|
|
|
- urls:item.pics
|
|
|
+ current: item.pics[0],
|
|
|
+ urls: item.pics
|
|
|
})
|
|
|
}}>
|
|
|
<JournalCover imgs={item.pics} />
|
|
|
@@ -347,16 +379,60 @@ export default function Journal() {
|
|
|
</View>
|
|
|
}
|
|
|
|
|
|
- function pageTitle(){
|
|
|
- if (router.params.type == 'EAT'){
|
|
|
+ function pageTitle() {
|
|
|
+ if (router.params.type == 'EAT') {
|
|
|
return t('health.title_food_journal')
|
|
|
}
|
|
|
- else if (router.params.type == 'ACTIVE'){
|
|
|
+ else if (router.params.type == 'ACTIVE') {
|
|
|
return t('health.title_active_journal')
|
|
|
}
|
|
|
return t('health.title_journal')
|
|
|
}
|
|
|
|
|
|
+ function markDoneTip() {
|
|
|
+ if (health.mode != 'EAT' && health.mode != 'ACTIVE') return
|
|
|
+ var scenario = getScenario(health.windows, health.mode)
|
|
|
+ if (scenario.status != 'OG') return
|
|
|
+ if (!showTip) return
|
|
|
+
|
|
|
+ var strTitle = ''
|
|
|
+ if (scenario.archive_timestamp) {
|
|
|
+ var today = new Date().getDate()
|
|
|
+ var date = new Date(scenario.archive_timestamp).getDate()
|
|
|
+ if (today == date) {
|
|
|
+ strTitle = t('health.tonight_at', { time: dayjs(scenario.archive_timestamp).format('HH:mm') })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ strTitle = t('health.tomorrow_at', { time: dayjs(scenario.archive_timestamp).format('HH:mm') })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View className="mark_done_tip" style={{
|
|
|
+ backgroundColor: getThemeColor(health.mode) + '1A'
|
|
|
+ }}>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
|
|
|
+ <Text className="h28 bold" style={{ color: getThemeColor(health.mode) }}>{strTitle}</Text>
|
|
|
+ <Text className="h24 bold"><Text style={{ fontWeight: 'normal' }}>{t('health.detail_complete_tip_head')}</Text>{t('health.detail_complete_tip_end')}</Text>
|
|
|
+ </View>
|
|
|
+ <NewButton type={NewButtonType.img} btnStyle={{
|
|
|
+ height: rpxToPx(32),
|
|
|
+ width: rpxToPx(32)
|
|
|
+ }} onClick={() => {
|
|
|
+ setShowTip(false)
|
|
|
+ // if (health.mode == 'EAT'){
|
|
|
+ // setHideEatArchiveTip(true)
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // setHideActiveArchiveTip(true)
|
|
|
+ // }
|
|
|
+ }}>
|
|
|
+ <IconClose color={MainColorType.g01} width={rpxToPx(32)} height={rpxToPx(32)} />
|
|
|
+ </NewButton>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!loaded) return <View />
|
|
|
+
|
|
|
return <StickyDateList onRefresherRefresh={() => {
|
|
|
setIsPulling(true)
|
|
|
getJounalsData()
|
|
|
@@ -368,7 +444,43 @@ export default function Journal() {
|
|
|
more()
|
|
|
}}
|
|
|
><View style={{ display: 'flex', flexDirection: 'column', minHeight: rpxToPx(464), backgroundColor: '#f5f5f5' }}>
|
|
|
+ {
|
|
|
+ markDoneTip()
|
|
|
+ }
|
|
|
<NewHeader type={NewHeaderType.left} title={pageTitle()} />
|
|
|
+ {
|
|
|
+ !router.params.type && <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(72), marginBottom: rpxToPx(20) }} scrollX enableFlex showScrollbar={false}>
|
|
|
+ <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
|
|
|
+ <NewButton type={NewButtonType.img} onClick={() => {
|
|
|
+ setWindow('')
|
|
|
+ }}>
|
|
|
+ <View className="streak_toolbar_btn"
|
|
|
+ style={{ backgroundColor: window == '' ? '#B2B2B21A' : 'transparent' }}
|
|
|
+ >
|
|
|
+ <Text className={window == '' ? 'bold h30' : 'h30'}
|
|
|
+ style={{ color: window == '' ? '#000' : MainColorType.g01, marginRight: 5 }}>全部</Text>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+
|
|
|
+ {
|
|
|
+ items.map((item, index) => {
|
|
|
+ return <View key={index}>
|
|
|
+ <NewButton type={NewButtonType.img} onClick={() => {
|
|
|
+ setWindow(item)
|
|
|
+ }}>
|
|
|
+ <View className="streak_toolbar_btn"
|
|
|
+ style={{ backgroundColor: window == item ? getThemeColor(item) + '1A' : 'transparent' }}
|
|
|
+ >
|
|
|
+ <Text className={window == item ? 'bold h30' : 'h30'}
|
|
|
+ style={{ color: window == item ? getThemeColor(item) : MainColorType.g01, marginRight: 5 }}>{item}</Text>
|
|
|
+ </View>
|
|
|
+ </NewButton>
|
|
|
+ </View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
|
|
|
+ </ScrollView>
|
|
|
+ }
|
|
|
{
|
|
|
journals.map((item, index) => {
|
|
|
// if (index>0) return <View key={index}/>
|
|
|
@@ -377,7 +489,7 @@ export default function Journal() {
|
|
|
historyYear(index)
|
|
|
}
|
|
|
<View className="history_item2" id={`history-${index}`} onClick={() => {
|
|
|
- jumpPage('/pages/account/JournalDetail?date=' +item.date) //JSON.stringify(item))
|
|
|
+ jumpPage('/pages/account/JournalDetail?date=' + item.date + '&window=' + window) //JSON.stringify(item))
|
|
|
}}>
|
|
|
|
|
|
<View className="cell_date" >
|