188 lines
5.2 KiB
TypeScript
188 lines
5.2 KiB
TypeScript
/** @format */
|
|
|
|
import { ProCard } from "@ant-design/pro-components";
|
|
import { Avatar, Button, Empty, Flex, Input, List, Skeleton, Tag } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
import styles from "./index.module.less";
|
|
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
|
|
import { getMyShareList } from "@/api/share";
|
|
import useStore from "@/utils/store/useStore.tsx";
|
|
import { observer } from "mobx-react";
|
|
|
|
export default observer(() => {
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState(true);
|
|
const [data, setData] = useState<[]>([]);
|
|
const store = useStore("user");
|
|
const userId: any = store.getUserId();
|
|
async function getMyShare() {
|
|
getMyShareList(userId).then((res: any) => {
|
|
if (res && res.success && res.data) {
|
|
setData(res.data);
|
|
setLoading(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
getMyShare().then();
|
|
}, []);
|
|
return (
|
|
<>
|
|
<div className={styles.share_list_main}>
|
|
<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}>
|
|
{data.length === 0 ? (
|
|
<Empty description={"暂无数据"}></Empty>
|
|
) : (
|
|
<>
|
|
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
|
|
<List
|
|
dataSource={data}
|
|
header={
|
|
<>
|
|
<h4>分享列表</h4>
|
|
</>
|
|
}
|
|
renderItem={(item: any) => (
|
|
<List.Item key={item.id}>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.icon} />}
|
|
title={
|
|
<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={
|
|
<>
|
|
<Flex
|
|
vertical={false}
|
|
justify={"space-between"}
|
|
align={"center"}>
|
|
{item.description}
|
|
<Flex
|
|
vertical={false}
|
|
align={"center"}
|
|
justify={"space-between"}
|
|
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>
|
|
</>
|
|
}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</Skeleton>
|
|
</>
|
|
)}
|
|
</ProCard>
|
|
</div>
|
|
</>
|
|
);
|
|
});
|