feat: 更新我的分享页面

src/components/Main/User/UserSetting/index.tsx

@@ -1,12 +1,9 @@
 /** @format */
 import { FunctionComponent, useEffect, useState } from "react";
 import { ProCard, ProForm, ProFormCascader } from "@ant-design/pro-components";
-import { AntDesignOutlined } from "@ant-design/icons";
 import {
 	Avatar,
 	Button,
-	Descriptions,
-	DescriptionsProps,
 	Flex,
 	Form,
 	FormProps,
@@ -14,42 +11,26 @@ import {
 	Select,
 	Skeleton,
 	Space,
-	Tabs,
+	Tabs, Tag
 } from "antd";
 import styles from "./index.module.less";
 import TextArea from "antd/es/input/TextArea";
 import { city } from "@/constant/five-level-address.ts";
+import { getUserInfoApi } from "@/api/user";
 
 const UserSetting: FunctionComponent = () => {
 	const [disable, setDisable] = useState(true);
 	const [loading, setLoading] = useState(true);
-	const items: DescriptionsProps["items"] = [
-		{
-			key: "1",
-			label: "用户名",
-			children: "Zhou Maomao",
-		},
-		{
-			key: "2",
-			label: "账号ID",
-			children: "1810000000",
-		},
-		{
-			key: "3",
-			label: "注册时间",
-			children: "Hangzhou, Zhejiang",
-		},
-		{
-			key: "4",
-			label: "邮箱",
-			children: "landaiqing@126.com",
-		},
-		{
-			key: "5",
-			label: "手机号",
-			children: "13333333333333",
-		},
-	];
+	const [userInfo, setUserInfo] = useState<any>({} as any);
+	async function getUserInfo() {
+		getUserInfoApi("17").then((res: any) => {
+			console.log(res);
+			if (res && res.success && res.data) {
+				setUserInfo(res.data);
+				setLoading(false);
+			}
+		});
+	}
 	type FieldType = {
 		email?: string;
 		nickname?: string;
@@ -66,7 +47,9 @@ const UserSetting: FunctionComponent = () => {
 	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
 		console.log("Failed:", errorInfo);
 	};
-
+	useEffect(() => {
+		getUserInfo().then();
+	}, []);
 	const prefixSelector = (
 		<Form.Item name="prefix" noStyle>
 			<Select style={{ width: 90 }}>
@@ -87,9 +70,6 @@ const UserSetting: FunctionComponent = () => {
 		);
 	};
 	useEffect(() => {
-		setTimeout(() => {
-			setLoading(false);
-		}, 2000);
 	}, []);
 	const TabItems = [
 		{
@@ -207,16 +187,31 @@ const UserSetting: FunctionComponent = () => {
 					<Skeleton loading={loading} active>
 						<Space direction={"vertical"} style={{ width: "100%" }}>
 							<ProCard hoverable bordered>
-								<Flex vertical={false} align={"center"} justify={"space-between"}>
-									<span style={{ width: 80 }}>登录密码：</span>
-									<Input variant="borderless" value={"******************"} />
+								<Flex vertical={false} align={"center"}>
+									<span style={{width: 100}}>登录密码：</span>
+									<Space.Compact style={{ width: '100%' }}>
+										<Input.Password value={"123456"} variant="borderless"/>
+										<Button  type="text">保存</Button>
+									</Space.Compact>
 								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
-								安全手机：1333333333333333
+								<Flex vertical={false} align={"center"}>
+									<span style={{width: 100}}>安全手机：</span>
+									<Space.Compact style={{ width: '100%' }}>
+										<Input.Password value={"123456"} variant="borderless"/>
+										<Button  type="text">保存</Button>
+									</Space.Compact>
+								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
-								安全邮箱：landaiqing@126.com
+								<Flex vertical={false} align={"center"}>
+									<span style={{width: 100}}>安全邮箱：</span>
+									<Space.Compact style={{ width: '100%' }}>
+										<Input.Password value={"123456"} variant="borderless"/>
+										<Button  type="text">保存</Button>
+									</Space.Compact>
+								</Flex>
 							</ProCard>
 						</Space>
 					</Skeleton>
@@ -233,14 +228,41 @@ const UserSetting: FunctionComponent = () => {
 						<div className={styles.user_setting_header}>
 							<Avatar
 								size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
-								icon={<AntDesignOutlined />}
+								src={userInfo.avatar}
 							/>
 
-							<Descriptions
-								style={{ width: "80%", marginLeft: "50px" }}
-								items={items}
-								column={3}
-								size={"small"}></Descriptions>
+							<Flex vertical={false} align={"center"} style={{ height: "100px",marginLeft: 40 }}>
+								<Flex vertical={true} justify={"flex-start"}>
+									<Flex vertical={false} align={"center"}>
+										<span style={{ color: "grey" }}>用户名：</span>
+										<span style={{width: 130}}>{userInfo.userName}</span>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+										<span style={{ color: "grey" }}>账号ID：</span>
+										<span style={{width: 130}}>{userInfo.id}</span>
+									</Flex>
+								</Flex>
+								<Flex vertical={true} style={{marginLeft: 50}}>
+									<Flex vertical={false} align={"center"}>
+										<span style={{ color: "grey" }}>邮 箱：</span>
+										<span style={{width: 130}}>{userInfo.email || "---------"}</span>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+										<span style={{ color: "grey" }}>手机号：</span>
+										<span style={{width: 130}}>{userInfo.phone || "---------"}</span>
+									</Flex>
+								</Flex>
+								<Flex vertical={true} style={{marginLeft: 50}}>
+									<Flex vertical={false} align={"center"}>
+										<span style={{ color: "grey" }}>注册时间：</span>
+										<span style={{width: 130}}>{userInfo.createdTime}</span>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+										<span style={{ color: "grey" }}>状 态：</span>
+										{userInfo.status===0 ? <Tag color={"success"}>正常</Tag>:<Tag color={"red"}>禁用</Tag>}
+									</Flex>
+								</Flex>
+							</Flex>
 						</div>
 					</Skeleton>
 				</ProCard>