|
@@ -37,6 +37,8 @@ export default function Journal() {
|
|
|
const [isPulling, setIsPulling] = useState(false)
|
|
const [isPulling, setIsPulling] = useState(false)
|
|
|
const [itemLayouts, setItemLayouts] = useState<any>([])
|
|
const [itemLayouts, setItemLayouts] = useState<any>([])
|
|
|
const [itemHeights, setItemHeights] = useState<any>([])
|
|
const [itemHeights, setItemHeights] = useState<any>([])
|
|
|
|
|
+
|
|
|
|
|
+ const [yearStats, setYearStats] = useState<any>([])
|
|
|
const [showDate, setShowDate] = useState(false)
|
|
const [showDate, setShowDate] = useState(false)
|
|
|
const [date, setDate] = useState('')
|
|
const [date, setDate] = useState('')
|
|
|
const [loaded, setLoaded] = useState(false)
|
|
const [loaded, setLoaded] = useState(false)
|
|
@@ -63,22 +65,22 @@ export default function Journal() {
|
|
|
const items = ['FAST', 'SLEEP', 'EAT', 'ACTIVE']
|
|
const items = ['FAST', 'SLEEP', 'EAT', 'ACTIVE']
|
|
|
|
|
|
|
|
const [showTip, setShowTip] = useState(router.params.show_tip == '1')
|
|
const [showTip, setShowTip] = useState(router.params.show_tip == '1')
|
|
|
- const [showBadge, setShowBadge] = useState(router.params.show_badge == '1')
|
|
|
|
|
- // useEffect(() => {
|
|
|
|
|
|
|
|
|
|
- // }, [])
|
|
|
|
|
|
|
+ useEffect(()=>{
|
|
|
|
|
+ return ()=>{
|
|
|
|
|
+ myScrollTop = 0
|
|
|
|
|
+ }
|
|
|
|
|
+ },[])
|
|
|
|
|
+
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
getJounalsData(1)
|
|
getJounalsData(1)
|
|
|
}, [window])
|
|
}, [window])
|
|
|
|
|
|
|
|
- useEffect(() => {
|
|
|
|
|
- console.log('last show status', showDate)
|
|
|
|
|
- }, [showDate])
|
|
|
|
|
-
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (journals.length > 0) {
|
|
if (journals.length > 0) {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
|
|
+ // console.log('journals length', journals.length)
|
|
|
measureItemLayouts()
|
|
measureItemLayouts()
|
|
|
}, 500)
|
|
}, 500)
|
|
|
}
|
|
}
|
|
@@ -122,9 +124,10 @@ export default function Journal() {
|
|
|
// });
|
|
// });
|
|
|
setLoading(false)
|
|
setLoading(false)
|
|
|
if (index == 1) {
|
|
if (index == 1) {
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- setTotal((res as any).total)
|
|
|
|
|
|
|
+ if ((res as any).extra)
|
|
|
|
|
+ setYearStats((res as any).extra.stat_by_year)
|
|
|
|
|
+ if ((res as any).total)
|
|
|
|
|
+ setTotal((res as any).total)
|
|
|
setJournals(list)
|
|
setJournals(list)
|
|
|
setIsPulling(false)
|
|
setIsPulling(false)
|
|
|
}
|
|
}
|
|
@@ -139,9 +142,9 @@ export default function Journal() {
|
|
|
function measureItemLayouts() {
|
|
function measureItemLayouts() {
|
|
|
const query = Taro.createSelectorQuery()
|
|
const query = Taro.createSelectorQuery()
|
|
|
journals.forEach((item, index) => {
|
|
journals.forEach((item, index) => {
|
|
|
- if (index >= itemLayouts.length) {
|
|
|
|
|
- query.select(`#history-${index}`).boundingClientRect()
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // if (index >= itemLayouts.length) {
|
|
|
|
|
+ query.select(`#history-${index}`).boundingClientRect()
|
|
|
|
|
+ // }
|
|
|
|
|
|
|
|
});
|
|
});
|
|
|
query.exec((res) => {
|
|
query.exec((res) => {
|
|
@@ -154,8 +157,10 @@ export default function Journal() {
|
|
|
heights[index] = rect.height
|
|
heights[index] = rect.height
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
- setItemLayouts([...itemLayouts, ...layouts])
|
|
|
|
|
- setItemHeights([...itemHeights, ...heights])
|
|
|
|
|
|
|
+ setItemHeights(heights)
|
|
|
|
|
+ setItemLayouts(layouts)
|
|
|
|
|
+ // setItemLayouts([...itemLayouts, ...layouts])
|
|
|
|
|
+ // setItemHeights([...itemHeights, ...heights])
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -173,7 +178,7 @@ export default function Journal() {
|
|
|
journals.forEach((item, index) => {
|
|
journals.forEach((item, index) => {
|
|
|
if (top >= itemLayouts[index] - 50) {
|
|
if (top >= itemLayouts[index] - 50) {
|
|
|
i = index
|
|
i = index
|
|
|
- dt = global.language == 'en' ? dayjs(item.timestamp).format('MMMM YYYY') : dayjs(item.timestamp).format('YYYY年M月')
|
|
|
|
|
|
|
+ dt = global.language == 'en' ? dayjs(item.timestamp).format('YYYY') : dayjs(item.timestamp).format('YYYY年')
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
@@ -189,7 +194,7 @@ export default function Journal() {
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if (showT) {
|
|
|
|
|
|
|
+ if (top >= 20) {
|
|
|
Taro.setNavigationBarTitle({
|
|
Taro.setNavigationBarTitle({
|
|
|
title: pageTitle()
|
|
title: pageTitle()
|
|
|
})
|
|
})
|
|
@@ -200,6 +205,7 @@ export default function Journal() {
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
|
|
+ setShowDate(false)
|
|
|
Taro.setNavigationBarTitle({
|
|
Taro.setNavigationBarTitle({
|
|
|
title: ''
|
|
title: ''
|
|
|
})
|
|
})
|
|
@@ -220,79 +226,25 @@ export default function Journal() {
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function getTitle(item) {
|
|
|
|
|
- if (item.title) {
|
|
|
|
|
- return item.title;
|
|
|
|
|
- }
|
|
|
|
|
- if (item.moments) {
|
|
|
|
|
- return item.moments[0].title
|
|
|
|
|
- }
|
|
|
|
|
- return ''
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function journalItem(window, index) {
|
|
|
|
|
- var array: any = [];
|
|
|
|
|
- window.events.map(event => {
|
|
|
|
|
- event.moments && event.moments.map(moment => {
|
|
|
|
|
- if (moment.media && moment.media.length > 0) {
|
|
|
|
|
- moment.media.map(media => {
|
|
|
|
|
- array.push(media.url)
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- })
|
|
|
|
|
- return <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(12), overflow: 'hidden', flexShrink: 0 }} key={index}>
|
|
|
|
|
- {
|
|
|
|
|
- array.length > 0 && <JournalCover imgs={array} />
|
|
|
|
|
- }
|
|
|
|
|
- <View style={{
|
|
|
|
|
- display: 'flex',
|
|
|
|
|
- flexDirection: 'column',
|
|
|
|
|
- // flex: 1,
|
|
|
|
|
- overflow: 'hidden',
|
|
|
|
|
- backgroundColor: array.length == 0 ? '#fafafa' : 'transparent',
|
|
|
|
|
- paddingLeft: array.length == 0 ? rpxToPx(20) : 0,
|
|
|
|
|
- paddingRight: array.length == 0 ? rpxToPx(20) : 0,
|
|
|
|
|
- paddingTop: array.length == 0 ? rpxToPx(12) : 0,
|
|
|
|
|
- paddingBottom: array.length == 0 ? rpxToPx(12) : 0,
|
|
|
|
|
- marginRight: rpxToPx(40),
|
|
|
|
|
- flexShrink: 0
|
|
|
|
|
- }}>
|
|
|
|
|
- {
|
|
|
|
|
-
|
|
|
|
|
- window.events.map((item2, index2) => {
|
|
|
|
|
- if (item2.moments && item2.moments[0].type == 'PIC') return <View key={index2 * 1000} />
|
|
|
|
|
- return <TimeTitleDesc
|
|
|
|
|
- key={index2 * 1000}
|
|
|
|
|
- className="line1"
|
|
|
|
|
- style={{ width: array.length > 0 ? rpxToPx(350) : rpxToPx(512) }}
|
|
|
|
|
- timeObj={item2.time}
|
|
|
|
|
- time={dayjs(item2.time.timestamp).format('HH:mm')}
|
|
|
|
|
- title={getTitle(item2)}
|
|
|
|
|
- desc={item2.moments && item2.moments.length > 0 ? item2.moments[0].description : ''}
|
|
|
|
|
- />
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- </View>
|
|
|
|
|
- </View>
|
|
|
|
|
|
|
+ function yearCount(str) {
|
|
|
|
|
+ var year = str.substring(0, 4)
|
|
|
|
|
+ var array = yearStats.filter(item => item.year == year)
|
|
|
|
|
+ if (array.length > 0) return array[0].total
|
|
|
|
|
+ return '0'
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function historyYear(index) {
|
|
function historyYear(index) {
|
|
|
var showDate = false;
|
|
var showDate = false;
|
|
|
var dateStr2: any = ''
|
|
var dateStr2: any = ''
|
|
|
- if (index == 0) {
|
|
|
|
|
- var currentDate = global.language == 'en' ? dayjs(journals[index].timestamp).format('YYYY') : dayjs(journals[index].timestamp).format('YYYY年')
|
|
|
|
|
|
|
+ if (index == -1) {
|
|
|
var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
|
|
var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
|
|
|
-
|
|
|
|
|
- if (currentDate != now) {
|
|
|
|
|
- showDate = true
|
|
|
|
|
- dateStr2 = currentDate
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+ showDate = true
|
|
|
|
|
+ dateStr2 = now
|
|
|
|
|
+ }
|
|
|
|
|
+ else if (index == 0) {
|
|
|
|
|
+ var currentDate = global.language == 'en' ? dayjs(journals[index].timestamp).format('YYYY') : dayjs(journals[index].timestamp).format('YYYY年')
|
|
|
|
|
+ showDate = true
|
|
|
|
|
+ dateStr2 = currentDate
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
var currentDate = global.language == 'en' ? dayjs(journals[index].timestamp).format('YYYY') : dayjs(journals[index].timestamp).format('YYYY年')
|
|
var currentDate = global.language == 'en' ? dayjs(journals[index].timestamp).format('YYYY') : dayjs(journals[index].timestamp).format('YYYY年')
|
|
@@ -303,7 +255,19 @@ export default function Journal() {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
if (showDate) {
|
|
if (showDate) {
|
|
|
- return <View className="history_year_month h42 bold" style={{ marginBottom: rpxToPx(60) }}>{dateStr2}</View>
|
|
|
|
|
|
|
+ return <View style={{
|
|
|
|
|
+ display: 'flex', flexDirection: 'row', justifyContent: 'space-between',
|
|
|
|
|
+ position: 'relative',
|
|
|
|
|
+ marginLeft: rpxToPx(40),
|
|
|
|
|
+ marginRight: rpxToPx(40),
|
|
|
|
|
+ paddingTop: rpxToPx(44),
|
|
|
|
|
+ paddingBottom: rpxToPx(20),
|
|
|
|
|
+ marginBottom: rpxToPx(60)
|
|
|
|
|
+ }}>
|
|
|
|
|
+ <View className="h50 bold">{dateStr2}</View>
|
|
|
|
|
+ <View className="h30 g03" style={{ marginTop: rpxToPx(20) }}>{yearCount(dateStr2)}</View>
|
|
|
|
|
+ <View className="border_footer_line" />
|
|
|
|
|
+ </View>
|
|
|
}
|
|
}
|
|
|
return <View />
|
|
return <View />
|
|
|
}
|
|
}
|
|
@@ -441,59 +405,8 @@ export default function Journal() {
|
|
|
|
|
|
|
|
if (!loaded) return <View />
|
|
if (!loaded) return <View />
|
|
|
|
|
|
|
|
- // return <recycle-view
|
|
|
|
|
- // batch={true}
|
|
|
|
|
- // id="recycleId"
|
|
|
|
|
- // enableBackToTop
|
|
|
|
|
- // refresherEnabled
|
|
|
|
|
- // upperThreshold={70}
|
|
|
|
|
- // lowerThreshold={80}
|
|
|
|
|
- // refresherBackground={MainColorType.g05}
|
|
|
|
|
- // onRefresherRefresh={() => {
|
|
|
|
|
- // setIsPulling(true)
|
|
|
|
|
- // getJounalsData(1)
|
|
|
|
|
- // }}
|
|
|
|
|
- // refresherTriggered={isPulling}
|
|
|
|
|
- // onScroll={onScroll}
|
|
|
|
|
- // onScrollToLower={() => {
|
|
|
|
|
- // more()
|
|
|
|
|
- // }}
|
|
|
|
|
- // >
|
|
|
|
|
- // <View>
|
|
|
|
|
- // <NewHeader type={NewHeaderType.left} title={pageTitle()} />
|
|
|
|
|
- // {
|
|
|
|
|
- // markDoneTip()
|
|
|
|
|
- // }
|
|
|
|
|
- // </View>
|
|
|
|
|
-
|
|
|
|
|
- // {
|
|
|
|
|
- // journals.map((item, index) => {
|
|
|
|
|
- // return <recycle-item key={index}><View key={index}>
|
|
|
|
|
- // {
|
|
|
|
|
- // historyYear(index)
|
|
|
|
|
- // }
|
|
|
|
|
- // <View className="history_item2" id={`history-${index}`} onClick={() => {
|
|
|
|
|
- // jumpPage('/pages/account/JournalDetail?date=' + item.date + '&window=' + window) //JSON.stringify(item))
|
|
|
|
|
- // }}>
|
|
|
|
|
-
|
|
|
|
|
- // <View className="cell_date" >
|
|
|
|
|
- // <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate(item, index)}</View>
|
|
|
|
|
- // <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, width: rpxToPx(552), }}>
|
|
|
|
|
- // {
|
|
|
|
|
- // journalCell(item, index)
|
|
|
|
|
- // }
|
|
|
|
|
- // </View>
|
|
|
|
|
- // </View></View>
|
|
|
|
|
- // </recycle-item>
|
|
|
|
|
- // })
|
|
|
|
|
- // }
|
|
|
|
|
- // <View>长列表后面的内容</View>
|
|
|
|
|
- // </recycle-view>
|
|
|
|
|
-
|
|
|
|
|
function itemData(index, item) {
|
|
function itemData(index, item) {
|
|
|
- if (itemLayouts.length >= index + 1) {
|
|
|
|
|
|
|
+ if (itemLayouts.length >= index + 1 && pageTop > 0) {
|
|
|
if (Math.abs(itemLayouts[index] - pageTop) > 3000) {
|
|
if (Math.abs(itemLayouts[index] - pageTop) > 3000) {
|
|
|
return <View style={{ height: itemHeights[index] }} id={`history-${index}`}>
|
|
return <View style={{ height: itemHeights[index] }} id={`history-${index}`}>
|
|
|
{/* {index} */}
|
|
{/* {index} */}
|
|
@@ -540,24 +453,33 @@ export default function Journal() {
|
|
|
</View>
|
|
</View>
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // console.log(journals.length, itemLayouts, pageTop)
|
|
|
|
|
|
|
|
- return <StickyDateList onRefresherRefresh={() => {
|
|
|
|
|
- setIsPulling(true)
|
|
|
|
|
- getJounalsData(1)
|
|
|
|
|
- }} isPulling={isPulling}
|
|
|
|
|
|
|
+
|
|
|
|
|
+ return <StickyDateList
|
|
|
|
|
+ // onRefresherRefresh={() => {
|
|
|
|
|
+ // setIsPulling(true)
|
|
|
|
|
+ // getJounalsData(1)
|
|
|
|
|
+ // }} isPulling={isPulling}
|
|
|
onScroll={onScroll}
|
|
onScroll={onScroll}
|
|
|
showDate={showDate}
|
|
showDate={showDate}
|
|
|
date={date}
|
|
date={date}
|
|
|
loadMore={() => {
|
|
loadMore={() => {
|
|
|
more()
|
|
more()
|
|
|
}}
|
|
}}
|
|
|
- ><View style={{ display: 'flex', flexDirection: 'column', minHeight: rpxToPx(464), backgroundColor: '#f5f5f5' }}>
|
|
|
|
|
|
|
+ ><View style={{ display: 'flex', flexDirection: 'column', minHeight: '101vh', backgroundColor: '#ffffff' }}>
|
|
|
|
|
|
|
|
- <NewHeader type={NewHeaderType.left} title={pageYear()} whiteBg />
|
|
|
|
|
|
|
+ {/* {
|
|
|
|
|
+ journals.length>0 && historyYear(0)
|
|
|
|
|
+ } */}
|
|
|
|
|
+ {/* <NewHeader type={NewHeaderType.left} title={pageYear()} whiteBg /> */}
|
|
|
|
|
+ {
|
|
|
|
|
+ loaded && journals.length == 0 && historyYear(-1)
|
|
|
|
|
+ }
|
|
|
{
|
|
{
|
|
|
markDoneTip()
|
|
markDoneTip()
|
|
|
}
|
|
}
|
|
|
- <View style={{ minHeight: '100vh', backgroundColor: '#fff', paddingTop: rpxToPx(60) }}>
|
|
|
|
|
|
|
+ <View style={{ backgroundColor: '#fff' }}>
|
|
|
{
|
|
{
|
|
|
journals.map((item, index) => {
|
|
journals.map((item, index) => {
|
|
|
|
|
|
|
@@ -577,6 +499,6 @@ export default function Journal() {
|
|
|
loaded && journals.length == 0 && <NoRecord />
|
|
loaded && journals.length == 0 && <NoRecord />
|
|
|
}
|
|
}
|
|
|
</View>
|
|
</View>
|
|
|
- <ListFooter noMore={(journals.length > 0) && (total == journals.length)} loading={loading} />
|
|
|
|
|
|
|
+ <ListFooter noMore={(journals.length > 0) && (total == journals.length)} loading={loading && !((journals.length > 0) && (total == journals.length))} />
|
|
|
</View></StickyDateList>
|
|
</View></StickyDateList>
|
|
|
}
|
|
}
|