tiefen_space_h5/app/page.js

305 lines
8.3 KiB
JavaScript

"use client";
import React, {
useEffect,
useRef,
useState,
useImperativeHandle,
forwardRef,
} from "react";
import {
Tabs,
Swiper,
PullToRefresh,
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";
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 swiperRef = useRef(null);
const [activeIndex, setActiveIndex] = useState(0);
const [data, setData] = useState([]);
const [scrollHeight, setScrollHeight] = useState(0);
// 获取屏幕高度
// const scrollHeight = 600;
useEffect(() => {
setScrollHeight(window.innerHeight);
// getData(0)
}, []);
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="/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>
</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-8">
<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-8">
{/* <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>
);
});