314 lines
8.8 KiB
JavaScript
314 lines
8.8 KiB
JavaScript
"use client";
|
|
|
|
import React, {
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
useImperativeHandle,
|
|
forwardRef,
|
|
} from "react";
|
|
import {
|
|
Tabs,
|
|
Swiper,
|
|
Toast,
|
|
InfiniteScroll,
|
|
List,
|
|
Image,
|
|
} from "antd-mobile";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faRefresh } from "@fortawesome/free-solid-svg-icons";
|
|
import PostItem from "../components/PostItem";
|
|
// import { sleep } from "antd-mobile/es/utils/sleep";
|
|
import "./index.css";
|
|
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
|
|
import Link from "next/link";
|
|
import requireAPI from "@/utils/requireAPI";
|
|
import Empty from "@/components/Empty";
|
|
import {get} from "@/utils/storeInfo"
|
|
import {useSearchParams} from "next/navigation"
|
|
import StreamerNavigator from "@/components/StreamerNavigator";
|
|
import { checkAuth } from "@/utils/auth";
|
|
const variables = {
|
|
"@active-line-color": "#f00", // 将主题色改为红色
|
|
};
|
|
const tabItems = [
|
|
{ key: "commend", title: "推荐" },
|
|
{ key: "follow", title: "关注" },
|
|
];
|
|
|
|
// const scrollHeight = 700;
|
|
// const scrollHeight = window.innerHeight-126
|
|
export default function Home() {
|
|
const recommPostRef = useRef();
|
|
const followPostRef = useRef();
|
|
const searchParams = useSearchParams();
|
|
const swiperRef = useRef(null);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const [scrollHeight, setScrollHeight] = useState(0);
|
|
// 获取屏幕高度
|
|
// const scrollHeight = 600;
|
|
useEffect(() => {
|
|
setScrollHeight(window.innerHeight);
|
|
// getData(0)
|
|
checkAuth().then(res=>{
|
|
if(res && get("inviter")){
|
|
setVisible(true)
|
|
}
|
|
})
|
|
}, []);
|
|
const childrenFunc = () => {
|
|
if (!activeIndex) {
|
|
recommPostRef.current?.doRefresh();
|
|
} else {
|
|
followPostRef.current?.doRefresh();
|
|
}
|
|
};
|
|
return (
|
|
<div
|
|
className="overflow-x-hidden"
|
|
style={{ maxHeight: `${scrollHeight}px` }}
|
|
>
|
|
<div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
|
|
<Tabs
|
|
activeKey={tabItems[activeIndex].key}
|
|
onChange={(key) => {
|
|
const index = tabItems.findIndex((item) => item.key === key);
|
|
setActiveIndex(index);
|
|
swiperRef.current?.swipeTo(index);
|
|
}}
|
|
>
|
|
{tabItems.map((item) => (
|
|
<Tabs.Tab
|
|
destroyOnClose={true}
|
|
forceRender={false}
|
|
title={item.title}
|
|
key={item.key}
|
|
className="text-left"
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
<Link
|
|
href="search"
|
|
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
|
|
>
|
|
<Image src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/search.png"} />
|
|
</Link>
|
|
</div>
|
|
<Swiper
|
|
direction="horizontal"
|
|
loop={false}
|
|
indicator={() => null}
|
|
ref={swiperRef}
|
|
defaultIndex={activeIndex}
|
|
onIndexChange={(index) => {
|
|
setActiveIndex(index);
|
|
}}
|
|
>
|
|
<Swiper.Item>
|
|
{!activeIndex && (
|
|
<RecommPostList scrollHeight={scrollHeight} ref={recommPostRef} />
|
|
)}
|
|
</Swiper.Item>
|
|
<Swiper.Item>
|
|
{!!activeIndex && (
|
|
<FollowPostList scrollHeight={scrollHeight} ref={followPostRef} />
|
|
)}
|
|
</Swiper.Item>
|
|
</Swiper>
|
|
<div
|
|
id="rightddd"
|
|
className={`fixed bottom-[96px] right-4 z-[999] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
|
|
}`}
|
|
onClick={childrenFunc}
|
|
>
|
|
<FontAwesomeIcon icon={faRefresh} size="xl" />
|
|
</div>
|
|
<StreamerNavigator visible={visible} setVisible={setVisible} mid={Number(get("inviter"))}/>
|
|
</div>
|
|
);
|
|
}
|
|
const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
|
|
const [loading, setLoading] = useState(true);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [commenPostList, setCommenPostList] = useState([]);
|
|
useEffect(() => {
|
|
getRecommPostList(2).then((res) => {
|
|
setCommenPostList(res);
|
|
});
|
|
}, []);
|
|
useImperativeHandle(
|
|
ref,
|
|
() => {
|
|
return { doRefresh };
|
|
},
|
|
[]
|
|
);
|
|
async function doRefresh() {
|
|
// await sleep(1000);
|
|
// Toast.show({
|
|
// icon: "fail",
|
|
// content: "刷新失败",
|
|
// });
|
|
// throw new Error("刷新失败");
|
|
const list = await getRecommPostList(1);
|
|
setCommenPostList(list);
|
|
setHasMore(true)
|
|
}
|
|
async function loadMore() {
|
|
const list = await getRecommPostList(0);
|
|
if (list.length == 0) {
|
|
setHasMore(false);
|
|
}
|
|
setCommenPostList([...commenPostList, ...list]);
|
|
}
|
|
const getRecommPostList = async (type = 2) => {
|
|
setLoading(true);
|
|
const data = await requireAPI("POST", "/api/moment/recomm_list", {
|
|
body: { op_type: type },
|
|
});
|
|
setLoading(false);
|
|
if (data.ret == -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
} else {
|
|
return data.data.recomm_list;
|
|
}
|
|
};
|
|
return (
|
|
<div className="px-4 pb-20">
|
|
<List>
|
|
{loading && (
|
|
<div>
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
</div>
|
|
)}
|
|
{commenPostList?.map((item) => (
|
|
<List.Item key={item.id} className="!p-0">
|
|
<PostItem type="post" data={item} date={new Date(item.ct*1000)}/>
|
|
</List.Item>
|
|
))}
|
|
{commenPostList?.length == 0 && !loading && (
|
|
<div
|
|
className={`flex flex-col items-center justify-center`}
|
|
style={{ height: `${scrollHeight}px` }}
|
|
>
|
|
<Empty type="nodata" />
|
|
</div>
|
|
)}
|
|
</List>
|
|
{!!commenPostList?.length && (
|
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [hasMore, setHasMore] = useState(false);
|
|
const [followPostList, setFollowPostList] = useState([]);
|
|
const [currentTime, setCurrentTime] = useState();
|
|
const [offset, setOffset] = useState(0);
|
|
useEffect(() => {
|
|
getFollowPostList().then((res) => {
|
|
setFollowPostList(res);
|
|
});
|
|
}, []);
|
|
useImperativeHandle(
|
|
ref,
|
|
() => {
|
|
return { doRefresh };
|
|
},
|
|
[]
|
|
);
|
|
async function doRefresh() {
|
|
// await sleep(1000);
|
|
// Toast.show({
|
|
// icon: "fail",
|
|
// content: "刷新失败",
|
|
// });
|
|
// throw new Error("刷新失败");
|
|
// getRecommPostList(1);
|
|
const list = await getFollowPostList(1);
|
|
setFollowPostList(list);
|
|
}
|
|
async function loadMore() {
|
|
const list = await getFollowPostList();
|
|
const newList = [...followPostList, ...list];
|
|
setOffset(newList.length / 4);
|
|
setFollowPostList(newList);
|
|
}
|
|
const getFollowPostList = async () => {
|
|
setLoading(true);
|
|
setCurrentTime(Math.floor(new Date().getTime() / 1000));
|
|
const data = await requireAPI("POST", "/api/account_relation/list_follow", {
|
|
body: { offset, limit: 4 },
|
|
}, true);
|
|
setHasMore(data.data.list.length > 0);
|
|
if (data.data.list.length > 0) {
|
|
//查关注主播展示资料
|
|
const followsResponse =
|
|
await requireAPI("POST", "/api/moment/list_by_mids", {
|
|
body: {
|
|
offset,
|
|
limit: 4,
|
|
ct_upper_bound: currentTime,
|
|
mids: data.data.list?.map((item) => item.obj_mid),
|
|
},
|
|
});
|
|
setLoading(false);
|
|
if (data.ret == -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
} else {
|
|
return followsResponse.data.list;
|
|
}
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
return (
|
|
<div className="px-4 pb-20">
|
|
{/* <PullToRefresh onRefresh={doRefresh}> */}
|
|
<List>
|
|
{loading && (
|
|
<div className="my-[31px]">
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
<PostItemSkeleton />
|
|
</div>
|
|
)}
|
|
{followPostList?.map((item, index) => (
|
|
<List.Item key={item.id + "_" + index} className="!p-0">
|
|
<PostItem type="post" data={item} date={new Date(item.ct*1000)}/>
|
|
</List.Item>
|
|
))}
|
|
{!followPostList?.length && (
|
|
<div
|
|
className={`flex flex-col items-center justify-center`}
|
|
style={{ height: `${scrollHeight-98}px` }}
|
|
>
|
|
<Empty type="nodata" />
|
|
</div>
|
|
)}
|
|
</List>
|
|
{!!followPostList?.length && (
|
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
|
)}
|
|
{/* </PullToRefresh> */}
|
|
</div>
|
|
);
|
|
}); |