146 lines
4.3 KiB
JavaScript
146 lines
4.3 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState, Suspense } from "react";
|
|
import {
|
|
Tabs,
|
|
Swiper,
|
|
PullToRefresh,
|
|
Toast,
|
|
InfiniteScroll,
|
|
List,
|
|
Image,
|
|
} from "antd-mobile";
|
|
|
|
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 requre from "@/utils/require";
|
|
import baseRequest from "@/utils/baseRequest";
|
|
import { generateSignature } from "@/utils/crypto";
|
|
const variables = {
|
|
"@active-line-color": "#f00", // 将主题色改为红色
|
|
};
|
|
const tabItems = [
|
|
{ key: "commend", title: "推荐" },
|
|
{ key: "follow", title: "关注" },
|
|
];
|
|
let count = 0;
|
|
|
|
// const scrollHeight = 700;
|
|
// const scrollHeight = window.innerHeight-126
|
|
export default function Home() {
|
|
const swiperRef = useRef(null);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const [data, setData] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [scrollHeight, setScrollHeight] = useState(0);
|
|
const [commenPostList,setCommenPostList] = useState([])
|
|
// 获取屏幕高度
|
|
// const scrollHeight = 600;
|
|
useEffect(() => {
|
|
setScrollHeight(window.innerHeight - 126);
|
|
getPostList(2);
|
|
// getData(0)
|
|
}, []);
|
|
async function doRefresh() {
|
|
// await sleep(1000);
|
|
// Toast.show({
|
|
// icon: "fail",
|
|
// content: "刷新失败",
|
|
// });
|
|
// throw new Error("刷新失败");
|
|
getPostList(1);
|
|
}
|
|
async function loadMore() {
|
|
// const append = await getPostList(0);
|
|
// setData((val) => [...val, ...append]);
|
|
// setHasMore(append.length > 0);
|
|
}
|
|
const getPostList = async (type = 0) => {
|
|
const data = await requre("POST", "/api/moment/recomm_list", {
|
|
body: { op_type: type },
|
|
});
|
|
setLoading(false)
|
|
if (data.ret == -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "加载失败",
|
|
});
|
|
}else{
|
|
setCommenPostList(data.data.recomm_list)
|
|
}
|
|
console.log("res", data);
|
|
};
|
|
return (
|
|
<div className="h-screen">
|
|
<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
|
|
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
|
|
className="overflow-visible"
|
|
direction="horizontal"
|
|
loop
|
|
indicator={() => null}
|
|
ref={swiperRef}
|
|
defaultIndex={activeIndex}
|
|
onIndexChange={(index) => {
|
|
setActiveIndex(index);
|
|
}}
|
|
>
|
|
<Swiper.Item>
|
|
<PullToRefresh onRefresh={doRefresh}>
|
|
<List className="px-4 overflow-y-auto scrollbarBox_hidden">
|
|
{loading && <div><PostItemSkeleton /><PostItemSkeleton /><PostItemSkeleton /></div>}
|
|
{commenPostList.map(item=><List.Item key={item.id} className="!p-0">
|
|
<PostItem
|
|
type="post"
|
|
data={item}
|
|
/>
|
|
</List.Item>)}
|
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
|
</List>
|
|
</PullToRefresh>
|
|
</Swiper.Item>
|
|
<Swiper.Item>
|
|
<PullToRefresh onRefresh={doRefresh}>
|
|
<List
|
|
className="p-2 overflow-y-auto scrollbarBox_hidden"
|
|
style={{ maxHeight: `${scrollHeight}px` }}
|
|
>
|
|
<List.Item className="!p-0">
|
|
<PostItem follow={true} type="post" />
|
|
</List.Item>
|
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
|
</List>
|
|
</PullToRefresh>
|
|
</Swiper.Item>
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
}
|