109 lines
3.0 KiB
React
109 lines
3.0 KiB
React
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { List, InfiniteScroll, Toast } from "antd-mobile";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import requireAPI from "@/utils/requireAPI";
|
||
|
|
import Empty from "@/components/Empty";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import PostItem from "@/components/PostItem";
|
||
|
|
|
||
|
|
export default function StreamerPosts({ id }) {
|
||
|
|
//获取当前时间
|
||
|
|
const [currentTime, setCurrentTime] = useState();
|
||
|
|
const getCurrentTime = async () => {
|
||
|
|
setCurrentTime(Math.floor(new Date().getTime() / 1000));
|
||
|
|
};
|
||
|
|
|
||
|
|
//获取截止当前时间的动态数据
|
||
|
|
const [data, setData] = useState([]);
|
||
|
|
const [offset, setOffset] = useState(0);
|
||
|
|
const [more, setMore] = useState(1);
|
||
|
|
const router = useRouter();
|
||
|
|
const getData = async (type) => {
|
||
|
|
if (!currentTime) return;
|
||
|
|
|
||
|
|
//防止重复加载
|
||
|
|
if (data.length === 0 && type === "bottom") return;
|
||
|
|
if (type === "bottom" && offset === 0) return;
|
||
|
|
|
||
|
|
if (!more) return;
|
||
|
|
try {
|
||
|
|
const body = {
|
||
|
|
mid: id,
|
||
|
|
ct_upper_bound: currentTime,
|
||
|
|
offset: offset,
|
||
|
|
limit: 4,
|
||
|
|
};
|
||
|
|
const _data = await requireAPI("POST", "/api/moment/list_by_mid", {
|
||
|
|
body,
|
||
|
|
});
|
||
|
|
if (_data.ret === -1) {
|
||
|
|
Toast.show({
|
||
|
|
icon: "fail",
|
||
|
|
content: _data.msg,
|
||
|
|
position: 60,
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (icon === "top") {
|
||
|
|
setData((prev) => _data.data.list);
|
||
|
|
} else {
|
||
|
|
setData((prev) => [...prev, ..._data.data.list]);
|
||
|
|
}
|
||
|
|
setOffset(_data.data.offset);
|
||
|
|
setMore(_data.data.more);
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//查看是否需要blur并获取当前时间和会员价格
|
||
|
|
useEffect(() => {
|
||
|
|
getCurrentTime();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
//当时间改变，获取新数据
|
||
|
|
useEffect(() => {
|
||
|
|
getData("top");
|
||
|
|
}, [currentTime]);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{/* 头部标题 */}
|
||
|
|
<div className="p-4 fixed top-0 z-10 w-full bg-black">
|
||
|
|
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faAngleLeft}
|
||
|
|
style={{ maxWidth: "12px" }}
|
||
|
|
size="xl"
|
||
|
|
onClick={() => {
|
||
|
|
router.back();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<p className="text-base text-center leading-9">动态</p>
|
||
|
|
</div>
|
||
|
|
{/* 内容 */}
|
||
|
|
<div className="pt-16 p-4">
|
||
|
|
{data.length == 0 && (
|
||
|
|
<div className="mt-32">
|
||
|
|
<Empty type="nodata" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<List style={{ "--padding-left": 0 }}>
|
||
|
|
{data?.map((item, index) => (
|
||
|
|
<List.Item key={index}>
|
||
|
|
{/* <RenderItem item={item} /> */}
|
||
|
|
<PostItem data={item} />
|
||
|
|
</List.Item>
|
||
|
|
))}
|
||
|
|
</List>
|
||
|
|
<InfiniteScroll loadMore={getData} hasMore={more}>
|
||
|
|
{null}
|
||
|
|
</InfiniteScroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|