|
@@ -1,13 +1,15 @@
|
|
|
-import { View, Text, Image } from "@tarojs/components";
|
|
|
|
|
|
|
+import { View, Text, Image, ScrollView } from "@tarojs/components";
|
|
|
import './home.scss'
|
|
import './home.scss'
|
|
|
import Taro, { useRouter } from "@tarojs/taro";
|
|
import Taro, { useRouter } from "@tarojs/taro";
|
|
|
import { useEffect, useState } from "react";
|
|
import { useEffect, useState } from "react";
|
|
|
-import { followUser, getUserProfile, unfollowUser } from "@/services/friend";
|
|
|
|
|
|
|
+import { followUser, getFriendMoments, getUserMoments, getUserProfile, unfollowUser } from "@/services/friend";
|
|
|
import { useSelector } from "react-redux";
|
|
import { useSelector } from "react-redux";
|
|
|
import NewButton, { NewButtonType } from "@/_health/base/new_button";
|
|
import NewButton, { NewButtonType } from "@/_health/base/new_button";
|
|
|
import { rpxToPx } from "@/utils/tools";
|
|
import { rpxToPx } from "@/utils/tools";
|
|
|
import { MainColorType } from "@/context/themes/color";
|
|
import { MainColorType } from "@/context/themes/color";
|
|
|
import showActionSheet from "@/components/basic/ActionSheet";
|
|
import showActionSheet from "@/components/basic/ActionSheet";
|
|
|
|
|
+import ListFooter from "@/_health/components/list_footer";
|
|
|
|
|
+import RecentItem from "../components/recent_item";
|
|
|
|
|
|
|
|
let useRoute;
|
|
let useRoute;
|
|
|
let useNavigation;
|
|
let useNavigation;
|
|
@@ -17,6 +19,7 @@ if (process.env.TARO_ENV == 'rn') {
|
|
|
useNavigation = require("@react-navigation/native").useNavigation
|
|
useNavigation = require("@react-navigation/native").useNavigation
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+let myScrollTop = 0
|
|
|
export default function UserHome() {
|
|
export default function UserHome() {
|
|
|
const user = useSelector((state: any) => state.user);
|
|
const user = useSelector((state: any) => state.user);
|
|
|
const [profile, setProfile] = useState<any>(null)
|
|
const [profile, setProfile] = useState<any>(null)
|
|
@@ -24,6 +27,18 @@ export default function UserHome() {
|
|
|
const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
|
|
const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
|
|
|
const navigationBarHeight = systemInfo.statusBarHeight + 44;
|
|
const navigationBarHeight = systemInfo.statusBarHeight + 44;
|
|
|
|
|
|
|
|
|
|
+ const observerObjBottom = Taro.createIntersectionObserver().relativeToViewport({ bottom: 100 })
|
|
|
|
|
+
|
|
|
|
|
+ const [loading, setLoading] = useState(false)
|
|
|
|
|
+ const [noMore, setNoMore] = useState(false)
|
|
|
|
|
+ const [itemLayouts, setItemLayouts] = useState<any>([])
|
|
|
|
|
+ const [itemHeights, setItemHeights] = useState<any>([])
|
|
|
|
|
+ const [pageTop, setPageTop] = useState(0)
|
|
|
|
|
+ const [page, setPage] = useState(1)
|
|
|
|
|
+ const [endSignal, setEndSignal] = useState(0)
|
|
|
|
|
+ const [list, setList] = useState<any>([])
|
|
|
|
|
+ const query = Taro.createSelectorQuery()
|
|
|
|
|
+
|
|
|
|
|
|
|
|
let router
|
|
let router
|
|
|
let navigation;
|
|
let navigation;
|
|
@@ -40,8 +55,29 @@ export default function UserHome() {
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
getProfile()
|
|
getProfile()
|
|
|
|
|
+ moments(1)
|
|
|
}, [])
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ if (list.length == 0) return
|
|
|
|
|
+
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ measureItemLayouts()
|
|
|
|
|
+ }, 300)
|
|
|
|
|
+
|
|
|
|
|
+ observerObjBottom.observe('#footer', (res) => {
|
|
|
|
|
+ setEndSignal(endSignal => endSignal + 1)
|
|
|
|
|
+ // console.log(moments.length)
|
|
|
|
|
+ // if (moments.length==0) return
|
|
|
|
|
+ // loadMore()
|
|
|
|
|
+ })
|
|
|
|
|
+ }, [list])
|
|
|
|
|
+
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ if (moments.length == 0) return
|
|
|
|
|
+ loadMore()
|
|
|
|
|
+ }, [endSignal])
|
|
|
|
|
+
|
|
|
function getProfile() {
|
|
function getProfile() {
|
|
|
getUserProfile({ user_id: router.params.uid }).then(res => {
|
|
getUserProfile({ user_id: router.params.uid }).then(res => {
|
|
|
setProfile(res)
|
|
setProfile(res)
|
|
@@ -49,6 +85,98 @@ export default function UserHome() {
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ function loadMore() {
|
|
|
|
|
+ if (loading) return;
|
|
|
|
|
+ if (noMore) return;
|
|
|
|
|
+ setLoading(true)
|
|
|
|
|
+ console.log('more page:',page)
|
|
|
|
|
+ var index = page;
|
|
|
|
|
+ index++;
|
|
|
|
|
+ setPage(index)
|
|
|
|
|
+ moments(index)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function moments(index) {
|
|
|
|
|
+ setPage(index)
|
|
|
|
|
+ var params: any = {
|
|
|
|
|
+ user_id: router.params.uid,
|
|
|
|
|
+ page: index,
|
|
|
|
|
+ limit: 10
|
|
|
|
|
+ }
|
|
|
|
|
+ if (index != 1 && list.length>0) {
|
|
|
|
|
+ params.last_timestamp = list[list.length - 1].time.timestamp
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('load data page',index)
|
|
|
|
|
+ getUserMoments(params).then(res => {
|
|
|
|
|
+ console.log('result page',index)
|
|
|
|
|
+ if (index == 1) {
|
|
|
|
|
+ setList((res as any).data)
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ setList([...list, ...(res as any).data])
|
|
|
|
|
+ }
|
|
|
|
|
+ setLoading(false)
|
|
|
|
|
+
|
|
|
|
|
+ if ((res as any).data.length == 0) {
|
|
|
|
|
+ setNoMore(true)
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ setNoMore(false)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function measureItemLayouts() {
|
|
|
|
|
+ if (list.length <= 10) {
|
|
|
|
|
+ list.forEach((item, index) => {
|
|
|
|
|
+ query.select(`#history2-${index}`).boundingClientRect()
|
|
|
|
|
+ });
|
|
|
|
|
+ query.exec((res) => {
|
|
|
|
|
+ var layouts: any = []
|
|
|
|
|
+ var heights: any = []
|
|
|
|
|
+ res.forEach((rect, index) => {
|
|
|
|
|
+ if (rect) {
|
|
|
|
|
+ layouts[index] = rect.top + myScrollTop
|
|
|
|
|
+ heights[index] = rect.height
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ setItemLayouts(layouts)
|
|
|
|
|
+ setItemHeights(heights)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ list.forEach((item, index) => {
|
|
|
|
|
+ if (index >= itemLayouts.length) {
|
|
|
|
|
+ query.select(`#history2-${index}`).boundingClientRect()
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ query.exec((res) => {
|
|
|
|
|
+ var layouts: any = []
|
|
|
|
|
+ var heights: any = []
|
|
|
|
|
+ // console.log(res)
|
|
|
|
|
+ res.forEach((rect, index) => {
|
|
|
|
|
+
|
|
|
|
|
+ if (rect) {
|
|
|
|
|
+ layouts[index] = rect.top + myScrollTop
|
|
|
|
|
+ heights[index] = rect.height
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ setItemLayouts([...itemLayouts, ...layouts])
|
|
|
|
|
+ setItemHeights([...itemHeights, ...heights])
|
|
|
|
|
+ console.log('结束计算位置', new Date().getTime())
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function onScroll(e) {
|
|
|
|
|
+ // var top = e.detail.scrollTop
|
|
|
|
|
+ // myScrollTop = top
|
|
|
|
|
+ var top = e.detail.scrollTop - e.detail.deltaY
|
|
|
|
|
+ myScrollTop = e.detail.scrollTop
|
|
|
|
|
+ setPageTop(top)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
function tapFollow() {
|
|
function tapFollow() {
|
|
|
var params: any = {
|
|
var params: any = {
|
|
|
follow_origin: 'WECHAT_PRIVATE_CHAT',
|
|
follow_origin: 'WECHAT_PRIVATE_CHAT',
|
|
@@ -77,44 +205,86 @@ export default function UserHome() {
|
|
|
|
|
|
|
|
if (!loaded) return <View />
|
|
if (!loaded) return <View />
|
|
|
|
|
|
|
|
- return <View>
|
|
|
|
|
- <View className="home_top">
|
|
|
|
|
- <View className="cover" />
|
|
|
|
|
- <Image className="home_avatar" src={profile.avatar} />
|
|
|
|
|
- <View className="home_nickname">{profile.nickname}</View>
|
|
|
|
|
- <View style={{
|
|
|
|
|
- position: 'absolute',
|
|
|
|
|
- top:0,
|
|
|
|
|
- left: 0,
|
|
|
|
|
- zIndex: 10,
|
|
|
|
|
- height: navigationBarHeight, width: rpxToPx(750), backgroundColor: 'transparent', display: 'flex',
|
|
|
|
|
- flexDirection: 'column', justifyContent: 'flex-end'
|
|
|
|
|
- }}>
|
|
|
|
|
- <View style={{ height: 44, width: rpxToPx(750), position: 'relative', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
|
|
|
|
- <View onClick={()=>{
|
|
|
|
|
- Taro.navigateBack()
|
|
|
|
|
- }} style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Back</View>
|
|
|
|
|
|
|
+ return <ScrollView style='height:100vh'
|
|
|
|
|
+ enableBackToTop
|
|
|
|
|
+ scrollY={true}
|
|
|
|
|
+ // refresherEnabled={props.onRefresherRefresh}
|
|
|
|
|
+ // upperThreshold={70}
|
|
|
|
|
+ // lowerThreshold={140}
|
|
|
|
|
+ // refresherBackground={MainColorType.g05}
|
|
|
|
|
+ // onRefresherRefresh={props.onRefresherRefresh}
|
|
|
|
|
+ // refresherTriggered={props.isPulling}
|
|
|
|
|
+ onScroll={onScroll}
|
|
|
|
|
+ onScrollToUpper={() => {
|
|
|
|
|
+ setPage(1)
|
|
|
|
|
+ setPageTop(0)
|
|
|
|
|
+ if (moments.length > 10) {
|
|
|
|
|
+ setList(list.slice(0, 10))
|
|
|
|
|
+ setItemHeights(itemHeights.slice(0, 10))
|
|
|
|
|
+ setItemLayouts(itemLayouts.slice(0, 10))
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }}
|
|
|
|
|
+ // onScrollToLower={props.loadMore}
|
|
|
|
|
+ ><View>
|
|
|
|
|
+ <View className="home_top">
|
|
|
|
|
+ <View className="cover" />
|
|
|
|
|
+ <Image className="home_avatar" src={profile.avatar} />
|
|
|
|
|
+ <View className="home_nickname">{profile.nickname}</View>
|
|
|
|
|
+ <View style={{
|
|
|
|
|
+ position: 'fixed',
|
|
|
|
|
+ top: 0,
|
|
|
|
|
+ left: 0,
|
|
|
|
|
+ zIndex: 10,
|
|
|
|
|
+ height: navigationBarHeight, width: rpxToPx(750), backgroundColor: pageTop>=rpxToPx(380)?'#fff':'transparent', display: 'flex',
|
|
|
|
|
+ flexDirection: 'column', justifyContent: 'flex-end'
|
|
|
|
|
+ }}>
|
|
|
|
|
+ <View style={{ height: 44, width: rpxToPx(750), position: 'relative', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
|
|
|
|
+ <View onClick={() => {
|
|
|
|
|
+ Taro.navigateBack()
|
|
|
|
|
+ }} style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Back</View>
|
|
|
|
|
+ <Text style={{
|
|
|
|
|
+ color:pageTop>=rpxToPx(380)?'#000':'transparent'
|
|
|
|
|
+ }}>{profile.nickname}</Text>
|
|
|
|
|
+ </View>
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
|
|
+ {
|
|
|
|
|
+ router.params.uid != user.id && <View style={{ marginTop: rpxToPx(62), marginLeft: rpxToPx(45) }}>
|
|
|
|
|
+ {
|
|
|
|
|
+ profile.relation == 'FRIEND' || profile.relation == 'FOLLOWING' ? <NewButton type={NewButtonType.fill}
|
|
|
|
|
+ width={rpxToPx(665)}
|
|
|
|
|
+ height={rpxToPx(72)}
|
|
|
|
|
+ title="following"
|
|
|
|
|
+ color={MainColorType.g02}
|
|
|
|
|
+ onClick={tapFollowing}
|
|
|
|
|
+ /> : <NewButton type={NewButtonType.fill}
|
|
|
|
|
+ width={rpxToPx(665)}
|
|
|
|
|
+ height={rpxToPx(72)}
|
|
|
|
|
+ title="follow"
|
|
|
|
|
+ color={MainColorType.blue}
|
|
|
|
|
+ onClick={tapFollow}
|
|
|
|
|
+ />
|
|
|
|
|
+ }
|
|
|
|
|
+ </View>
|
|
|
|
|
+ }
|
|
|
|
|
+ <View style={{height:rpxToPx(60)}}/>
|
|
|
|
|
+ {
|
|
|
|
|
+ list.map((item, index) => {
|
|
|
|
|
+ if (itemLayouts.length >= index + 1 && pageTop > 0 && index > 5) {
|
|
|
|
|
+ if (Math.abs(itemLayouts[index] - pageTop) > 2500) {
|
|
|
|
|
+ return <View style={{ height: itemHeights[index] }} id={`history—temp-${index}`}>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ return <View key={index} id={`history2-${index}`}>
|
|
|
|
|
+ <RecentItem data={item} index={index} />
|
|
|
|
|
+ </View>
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ <ListFooter noMore={noMore} loading={loading} />
|
|
|
|
|
+ <View id="footer" style={{ width: 1, height: 1 }}></View>
|
|
|
</View>
|
|
</View>
|
|
|
- {
|
|
|
|
|
- router.params.uid != user.id && <View style={{ marginTop: rpxToPx(62), marginLeft: rpxToPx(45) }}>
|
|
|
|
|
- {
|
|
|
|
|
- profile.relation == 'FRIEND' || profile.relation == 'FOLLOWING' ? <NewButton type={NewButtonType.fill}
|
|
|
|
|
- width={rpxToPx(665)}
|
|
|
|
|
- height={rpxToPx(72)}
|
|
|
|
|
- title="following"
|
|
|
|
|
- color={MainColorType.g02}
|
|
|
|
|
- onClick={tapFollowing}
|
|
|
|
|
- /> : <NewButton type={NewButtonType.fill}
|
|
|
|
|
- width={rpxToPx(665)}
|
|
|
|
|
- height={rpxToPx(72)}
|
|
|
|
|
- title="follow"
|
|
|
|
|
- color={MainColorType.blue}
|
|
|
|
|
- onClick={tapFollow}
|
|
|
|
|
- />
|
|
|
|
|
- }
|
|
|
|
|
- </View>
|
|
|
|
|
- }
|
|
|
|
|
- </View>
|
|
|
|
|
|
|
+ </ScrollView>
|
|
|
}
|
|
}
|