|
|
@@ -7,39 +7,118 @@ import dayjs from "dayjs";
|
|
|
import { rpxToPx } from "@/utils/tools";
|
|
|
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
|
|
|
import NewHeader, { NewHeaderType } from "@/_health/components/new_header";
|
|
|
+import Taro from "@tarojs/taro";
|
|
|
+import StickyDateList from "@/_health/components/sticky_date_list";
|
|
|
+import { MainColorType } from "@/context/themes/color";
|
|
|
+import ListFooter from "@/_health/components/list_footer";
|
|
|
|
|
|
export default function Journal() {
|
|
|
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 [page, setPage] = useState(1)
|
|
|
+ const [total, setTotal] = useState(0)
|
|
|
+ const [loading, setLoading] = useState(false)
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
- getJounalsData()
|
|
|
+ getJounalsData(1)
|
|
|
}, [])
|
|
|
|
|
|
- function getJounalsData() {
|
|
|
+ useEffect(() => {
|
|
|
+ if (journals.length > 0) {
|
|
|
+ setTimeout(() => {
|
|
|
+ measureItemLayouts()
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ }, [journals])
|
|
|
+
|
|
|
+ function more() {
|
|
|
+ if (loading) return;
|
|
|
+ if (total == journals.length) return;
|
|
|
+ var index = page;
|
|
|
+ index++;
|
|
|
+ setPage(index)
|
|
|
+ getJounalsData(index)
|
|
|
+ }
|
|
|
+
|
|
|
+ function getJounalsData(index = 1) {
|
|
|
+ setLoading(true)
|
|
|
getJournals({
|
|
|
- page: 1,
|
|
|
- limit: 50
|
|
|
+ page: index,
|
|
|
+ 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)
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ setLoading(false)
|
|
|
+ if (index == 1) {
|
|
|
+ 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)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
|
|
|
- })
|
|
|
- })
|
|
|
- element.imgs = array
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // element.imgs = array
|
|
|
+ // });
|
|
|
+ setTotal((res as any).total)
|
|
|
+ setJournals((res as any).data)
|
|
|
+ setIsPulling(false)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setJournals([...journals, ...(res as any).data])
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ setLoading(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function measureItemLayouts() {
|
|
|
+ const query = Taro.createSelectorQuery()
|
|
|
+ journals.forEach((item, index) => {
|
|
|
+ query.select(`#history-${index}`).boundingClientRect()
|
|
|
+ });
|
|
|
+ query.exec((res) => {
|
|
|
+ var layouts: any = []
|
|
|
+ res.forEach((rect, index) => {
|
|
|
+ if (rect) {
|
|
|
+ layouts[index] = rect.top
|
|
|
+ }
|
|
|
});
|
|
|
- setJournals((res as any).data)
|
|
|
+ setItemLayouts(layouts)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ function onScroll(e) {
|
|
|
+ var top = e.detail.scrollTop
|
|
|
+ if (itemLayouts.length > 0) {
|
|
|
+ var i = -1
|
|
|
+ var date = ''
|
|
|
+ journals.forEach((item, index) => {
|
|
|
+ if (top >= itemLayouts[index] - 50) {
|
|
|
+ i = index
|
|
|
+ var currentDate = (journals[index].date + '').substring(0, 6)
|
|
|
+ date = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ setShowDate(i != -1)
|
|
|
+ setDate(date)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setShowDate(false)
|
|
|
+ setDate('')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
function getTitle(item) {
|
|
|
if (item.title) {
|
|
|
return item.title;
|
|
|
@@ -61,7 +140,7 @@ export default function Journal() {
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
- return <View style={{ flex: 1, display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(16),overflow:'hidden' }} key={index}>
|
|
|
+ return <View style={{ flex: 1, display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(16), overflow: 'hidden' }} key={index}>
|
|
|
{
|
|
|
array.length > 0 && <JournalCover imgs={array} />
|
|
|
}
|
|
|
@@ -69,7 +148,7 @@ export default function Journal() {
|
|
|
display: 'flex',
|
|
|
flexDirection: 'column',
|
|
|
flex: 1,
|
|
|
- overflow:'hidden',
|
|
|
+ overflow: 'hidden',
|
|
|
backgroundColor: array.length == 0 ? '#f5f5f5' : 'transparent',
|
|
|
padding: array.length == 0 ? rpxToPx(20) : 0,
|
|
|
marginRight: rpxToPx(40)
|
|
|
@@ -77,10 +156,10 @@ export default function Journal() {
|
|
|
{
|
|
|
|
|
|
window.events.map((item2, index2) => {
|
|
|
- return <Text className="line1" style={{width:array.length>0?rpxToPx(370):rpxToPx(532)}} key={index2 * 1000}>
|
|
|
+ return <Text className="line1" style={{ width: array.length > 0 ? rpxToPx(370) : rpxToPx(532) }} key={index2 * 1000}>
|
|
|
<Text className="history_item_title" style={{ color: '#000' }}>{dayjs(item2.time.timestamp).format('HH:mm')} {getTitle(item2)} </Text>
|
|
|
{
|
|
|
- item2.moments && item2.moments.length>0 && item2.moments[0].description && <Text className="history_item_desc">{item2.moments[0].description}</Text>
|
|
|
+ item2.moments && item2.moments.length > 0 && item2.moments[0].description && <Text className="history_item_desc">{item2.moments[0].description}</Text>
|
|
|
}
|
|
|
</Text>
|
|
|
})
|
|
|
@@ -92,25 +171,66 @@ export default function Journal() {
|
|
|
</View>
|
|
|
}
|
|
|
|
|
|
+ function historyMonth(index, preIndex) {
|
|
|
+ var showDate = false;
|
|
|
+ var dateStr = ''
|
|
|
+ if (index == 0) {
|
|
|
+ var currentDate = (journals[index].date + '').substring(0, 6)
|
|
|
+ var now = dayjs().format('YYYYMM')
|
|
|
+ if (currentDate != now) {
|
|
|
+ showDate = true
|
|
|
+ dateStr = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var currentDate = (journals[index].date + '').substring(0, 6)
|
|
|
+ var now = (journals[index - 1].date + '').substring(0, 6)
|
|
|
+ if (currentDate != now) {
|
|
|
+ showDate = true
|
|
|
+ // dateStr = currentDate
|
|
|
+ dateStr = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (showDate) {
|
|
|
+ return <View className="history_year_month h26 g01">{dateStr}</View>
|
|
|
+ }
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
|
|
|
- return <View style={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
- <NewHeader type={NewHeaderType.left} title="Journal" />
|
|
|
- {
|
|
|
- journals.map((item, index) => {
|
|
|
- return <View className="album_item" key={index} onClick={() => {
|
|
|
- jumpPage('/pages/account/JournalDetail?detail=' + JSON.stringify(item))
|
|
|
- }}>
|
|
|
- <Text className="album_date">{(item.date + '').substring(6, 9)}</Text>
|
|
|
- <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
|
|
|
+ return <StickyDateList onRefresherRefresh={() => {
|
|
|
+ setIsPulling(true)
|
|
|
+ getJounalsData()
|
|
|
+ }} isPulling={isPulling}
|
|
|
+ onScroll={onScroll}
|
|
|
+ showDate={showDate}
|
|
|
+ date={date}
|
|
|
+ loadMore={()=>{
|
|
|
+ more()
|
|
|
+ }}
|
|
|
+ ><View style={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
+ <NewHeader type={NewHeaderType.left} title="Journal" />
|
|
|
+ {
|
|
|
+ journals.map((item, index) => {
|
|
|
+ return <View key={index}>
|
|
|
{
|
|
|
- item.windows.map((window, i) => {
|
|
|
- return journalItem(window, i)
|
|
|
- })
|
|
|
+ historyMonth(index, index - 1)
|
|
|
}
|
|
|
- </View>
|
|
|
- <View className="border_footer_line" />
|
|
|
- </View>
|
|
|
- })
|
|
|
- }
|
|
|
- </View>
|
|
|
+ <View className="album_item" id={`history-${index}`} onClick={() => {
|
|
|
+ jumpPage('/pages/account/JournalDetail?detail=' + JSON.stringify(item))
|
|
|
+ }}>
|
|
|
+
|
|
|
+ <Text className="cell_date">{(item.date + '').substring(6, 9)}</Text>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
|
|
|
+ {
|
|
|
+ item.windows.map((window, i) => {
|
|
|
+ return journalItem(window, i)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className="border_footer_line" />
|
|
|
+ </View></View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ <ListFooter noMore={(journals.length > 0) && (total == journals.length)} />
|
|
|
+ </View></StickyDateList>
|
|
|
}
|