tiefen_space_h5/app/space/visibleToOneselfSpacePosts/page.jsx

107 lines
3.1 KiB
JavaScript

"use client";
import React, { useState, useCallback, useEffect } from "react";
import { List, InfiniteScroll, Toast } from "antd-mobile";
import { useRouter, useSearchParams } 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";
//todo:等接口上线补全字段
export default function VisibleToOneselfSpacePosts() {
//获取当前时间
const [currentTime, setCurrentTime] = useState();
//查询数据
const [data, setData] = useState([]);
const [offset, setOffset] = useState(0);
const [more, setMore] = useState(1);
const searchParams = useSearchParams();
const router = useRouter();
useEffect(() => {
getCurrentTime();
}, []);
const getCurrentTime = async () => {
setCurrentTime(Math.floor(new Date().getTime() / 1000));
};
const getData = async () => {
if (!more) return;
try {
const body = {
status: 3,
ct_upper_bound: currentTime,
offset: offset,
limit: 4,
};
const _data = await requireAPI(
"POST",
"/api/zone_moment/list_by_creater_mid",
{
body,
}
);
if (_data.ret === -1) {
Toast.show({
icon: "fail",
content: _data.msg,
position: "top",
});
return;
}
setData((prev) => [...prev, ..._data.data.list]);
setOffset(_data.data.offset);
setMore(_data.data.more);
} catch (error) {
console.error(error);
}
};
//格式化时间
const formatDate = useCallback((timestamp) => {
const date = new Date(timestamp * 1000);
const year = date.getFullYear();
const month = date.getMonth() + 1; // 月份从0开始,所以需要加1
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
return `${year}/${month}/${day} ${hours}:${minutes}`;
}, []);
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}>
<PostItem data={item} type="space" />
</List.Item>
))}
</List>
<InfiniteScroll loadMore={getData} hasMore={more}>
{null}
</InfiniteScroll>
</div>
</div>
);
}