feat: 更新我的分享页面
This commit is contained in:
landaiqing
@@ -1,84 +1,96 @@
|
||||
/** @format */
|
||||
|
||||
import { ProCard } from "@ant-design/pro-components";
|
||||
import { Avatar, Divider, Flex, List, Skeleton, Tag } from "antd";
|
||||
import { Avatar, Button, Flex, Input, List, Skeleton, Tag } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./index.module.less";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
|
||||
import logo from "@/assets/icons/aliyun.svg";
|
||||
interface DataType {
|
||||
gender: string;
|
||||
name: {
|
||||
title: string;
|
||||
first: string;
|
||||
last: string;
|
||||
};
|
||||
email: string;
|
||||
picture: {
|
||||
large: string;
|
||||
medium: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
nat: string;
|
||||
}
|
||||
import { getMyShareList } from "@/api/share";
|
||||
|
||||
export default () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<DataType[]>([]);
|
||||
const loadMoreData = () => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
|
||||
.then((res) => res.json())
|
||||
.then((body) => {
|
||||
setData([...data, ...body.results]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState<[]>([]);
|
||||
async function getMyShare() {
|
||||
getMyShareList(32).then((res: any) => {
|
||||
console.log(res);
|
||||
if (res && res.success && res.data) {
|
||||
setData(res.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadMoreData();
|
||||
getMyShare().then();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className={styles.share_list_main}>
|
||||
<ProCard bordered={true} boxShadow={true}>
|
||||
<InfiniteScroll
|
||||
dataLength={data.length}
|
||||
next={loadMoreData}
|
||||
hasMore={data.length < 50}
|
||||
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
|
||||
endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
|
||||
scrollableTarget="scrollableDiv">
|
||||
<ProCard bordered={false} boxShadow={false}>
|
||||
<div className={styles.share_list_header}>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
style={{ width: "100%" }}>
|
||||
<div>
|
||||
<Input
|
||||
placeholder="搜索"
|
||||
style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type={"primary"}
|
||||
onClick={() => {
|
||||
navigate("/main/share/add");
|
||||
}}>
|
||||
去分享
|
||||
</Button>
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</ProCard>
|
||||
<ProCard bordered={false} boxShadow={false}>
|
||||
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
|
||||
<List
|
||||
dataSource={data}
|
||||
renderItem={(item) => (
|
||||
<List.Item key={item.email}>
|
||||
header={
|
||||
<>
|
||||
<h4>分享列表</h4>
|
||||
</>
|
||||
}
|
||||
renderItem={(item: any) => (
|
||||
<List.Item key={item.id}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar src={item.picture.large} />}
|
||||
avatar={<Avatar src={item.icon} />}
|
||||
title={
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
navigate("/main/share/detail/1");
|
||||
}}>
|
||||
{item.name.last}
|
||||
</a>
|
||||
<Tag
|
||||
bordered={false}
|
||||
color="processing"
|
||||
style={{ marginLeft: 10 }}>
|
||||
IDM
|
||||
</Tag>
|
||||
</>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Link to={"/main/share/detail/" + item.id}>
|
||||
{item.title}
|
||||
</Link>
|
||||
{item.tags &&
|
||||
Array.from(item.tags).map(
|
||||
(tag: any, index: number) => {
|
||||
return (
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
key={index}>
|
||||
<Tag
|
||||
bordered={false}
|
||||
color={"#" + tag.color}
|
||||
style={{ marginLeft: 10 }}>
|
||||
{tag.tagName}
|
||||
</Tag>
|
||||
</Flex>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</Flex>
|
||||
}
|
||||
description={
|
||||
<>
|
||||
@@ -86,45 +98,67 @@ export default () => {
|
||||
vertical={false}
|
||||
justify={"space-between"}
|
||||
align={"center"}>
|
||||
{item.email}
|
||||
{item.description}
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
style={{ width: "250px" }}>
|
||||
<Avatar src={logo} size={"small"} />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
landaiqing
|
||||
</span>
|
||||
<HeartOutlined />
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
<CommentOutlined />
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
<EyeOutlined style={{ color: "gray" }} />{" "}
|
||||
<span
|
||||
style={{ fontSize: 12, color: "gray" }}>
|
||||
1024
|
||||
</span>
|
||||
style={{ width: "300px" }}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Avatar
|
||||
src={item.avatar as any}
|
||||
size={"small"}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
{item.nickname}
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<HeartOutlined />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
{item.likesCount}
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<CommentOutlined />
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
{item.commentCount}
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<EyeOutlined
|
||||
style={{ color: "gray" }}
|
||||
/>{" "}
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "gray",
|
||||
}}>
|
||||
{item.views}
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
{/*<div>Content</div>*/}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</InfiniteScroll>
|
||||
</Skeleton>
|
||||
</ProCard>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user