feat: update

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

@@ -8,23 +8,31 @@ import {
 	Form,
 	FormProps,
 	Input,
+	message,
 	Select,
 	Skeleton,
 	Space,
-	Tabs, Tag
+	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";
+import { getUserInfoApi, updateUserInfo } from "@/api/user";
+import { observer } from "mobx-react";
+import useStore from "@/utils/store/useStore.tsx";
 
-const UserSetting: FunctionComponent = () => {
-	const [disable, setDisable] = useState(true);
-	const [loading, setLoading] = useState(true);
+const UserSetting: FunctionComponent = observer(() => {
+	const [disable, setDisable] = useState<boolean>(true);
+	const [loading, setLoading] = useState<boolean>(true);
 	const [userInfo, setUserInfo] = useState<any>({} as any);
+	const [password, setPassword] = useState<string>("");
+	const [phone, setPhone] = useState<string>("");
+	const [email, setEmail] = useState<string>("");
+	const store = useStore("user");
+	const userId: any = store.getUserId();
 	async function getUserInfo() {
-		getUserInfoApi("17").then((res: any) => {
-			console.log(res);
+		getUserInfoApi(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setUserInfo(res.data);
 				setLoading(false);
@@ -32,7 +40,6 @@ const UserSetting: FunctionComponent = () => {
 		});
 	}
 	type FieldType = {
-		email?: string;
 		nickname?: string;
 		location?: string;
 		introduce?: string;
@@ -40,12 +47,46 @@ const UserSetting: FunctionComponent = () => {
 		company?: string;
 		blog?: string;
 	};
+	async function updateUser(data: any) {
+		updateUserInfo(data).then((res: any) => {
+			if (res && res.success) {
+				message.open({
+					type: "success",
+					content: "修改成功",
+				});
+			} else {
+				message.open({
+					type: "error",
+					content: "修改失败",
+				});
+			}
+		});
+	}
 	const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
-		console.log("Success:", values);
+		const data: any = {
+			userId: userId,
+			...values,
+		};
+		updateUserInfo(data).then((res: any) => {
+			if (res && res.success) {
+				message.open({
+					type: "success",
+					content: "修改成功",
+				});
+			} else {
+				message.open({
+					type: "error",
+					content: "修改失败",
+				});
+			}
+		});
 	};
 
-	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
-		console.log("Failed:", errorInfo);
+	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo: any) => {
+		message.open({
+			type: "error",
+			content: errorInfo,
+		});
 	};
 	useEffect(() => {
 		getUserInfo().then();
@@ -69,8 +110,7 @@ const UserSetting: FunctionComponent = () => {
 			</ProForm.Item>
 		);
 	};
-	useEffect(() => {
-	}, []);
+	useEffect(() => {}, []);
 	const TabItems = [
 		{
 			label: <span>基础信息</span>,
@@ -88,18 +128,18 @@ const UserSetting: FunctionComponent = () => {
 								onFinishFailed={onFinishFailed}
 								initialValues={{ prefix: "https://" }}
 								autoComplete="off">
-								<Form.Item<FieldType>
-									label="邮箱"
-									name="email"
-									rules={[
-										{
-											type: "email",
-											message: "请输入正确的邮箱！",
-										},
-										{ required: true, message: "请输入邮箱!" },
-									]}>
-									<Input allowClear disabled={disable} />
-								</Form.Item>
+								{/*<Form.Item<FieldType>*/}
+								{/*	label="邮箱"*/}
+								{/*	name="email"*/}
+								{/*	rules={[*/}
+								{/*		{*/}
+								{/*			type: "email",*/}
+								{/*			message: "请输入正确的邮箱！",*/}
+								{/*		},*/}
+								{/*		{ required: true, message: "请输入邮箱!" },*/}
+								{/*	]}>*/}
+								{/*	<Input allowClear disabled={disable} />*/}
+								{/*</Form.Item>*/}
 								<Form.Item<FieldType>
 									label="昵称"
 									name="nickname"
@@ -188,28 +228,73 @@ const UserSetting: FunctionComponent = () => {
 						<Space direction={"vertical"} style={{ width: "100%" }}>
 							<ProCard hoverable bordered>
 								<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>
+									<span style={{ width: 100 }}>登录密码：</span>
+									<Space.Compact style={{ width: "100%" }}>
+										<Input.Password
+											onChange={(e: any) => {
+												setPassword(e.target.value);
+											}}
+											variant="borderless"
+										/>
+										<Button
+											type="text"
+											onClick={async () => {
+												const data: any = {
+													userId: userId,
+													password: password,
+												};
+												await updateUser(data);
+											}}>
+											保存
+										</Button>
 									</Space.Compact>
 								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
 								<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>
+									<span style={{ width: 100 }}>安全手机：</span>
+									<Space.Compact style={{ width: "100%" }}>
+										<Input.Password
+											onChange={(e: any) => {
+												setPhone(e.target.value);
+											}}
+											variant="borderless"
+										/>
+										<Button
+											type="text"
+											onClick={async () => {
+												const data: any = {
+													userId: userId,
+													phone: phone,
+												};
+												await updateUser(data);
+											}}>
+											保存
+										</Button>
 									</Space.Compact>
 								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
 								<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>
+									<span style={{ width: 100 }}>安全邮箱：</span>
+									<Space.Compact style={{ width: "100%" }}>
+										<Input.Password
+											onChange={(e: any) => {
+												setEmail(e.target.value);
+											}}
+											variant="borderless"
+										/>
+										<Button
+											type="text"
+											onClick={async () => {
+												const data: any = {
+													userId: userId,
+													email: email,
+												};
+												await updateUser(data);
+											}}>
+											保存
+										</Button>
 									</Space.Compact>
 								</Flex>
 							</ProCard>
@@ -231,35 +316,55 @@ const UserSetting: FunctionComponent = () => {
 								src={userInfo.avatar}
 							/>
 
-							<Flex vertical={false} align={"center"} style={{ height: "100px",marginLeft: 40 }}>
+							<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>
+										<span style={{ width: 130 }}>{userInfo.userName}</span>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ marginTop: 20 }}>
 										<span style={{ color: "grey" }}>账号ID：</span>
-										<span style={{width: 130}}>{userInfo.id}</span>
+										<span style={{ width: 130 }}>{userInfo.id}</span>
 									</Flex>
 								</Flex>
-								<Flex vertical={true} style={{marginLeft: 50}}>
+								<Flex vertical={true} style={{ marginLeft: 50 }}>
 									<Flex vertical={false} align={"center"}>
 										<span style={{ color: "grey" }}>邮 箱：</span>
-										<span style={{width: 130}}>{userInfo.email || "---------"}</span>
+										<span style={{ width: 130 }}>
+											{userInfo.email || "---------"}
+										</span>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ marginTop: 20 }}>
 										<span style={{ color: "grey" }}>手机号：</span>
-										<span style={{width: 130}}>{userInfo.phone || "---------"}</span>
+										<span style={{ width: 130 }}>
+											{userInfo.phone || "---------"}
+										</span>
 									</Flex>
 								</Flex>
-								<Flex vertical={true} style={{marginLeft: 50}}>
+								<Flex vertical={true} style={{ marginLeft: 50 }}>
 									<Flex vertical={false} align={"center"}>
 										<span style={{ color: "grey" }}>注册时间：</span>
-										<span style={{width: 130}}>{userInfo.createdTime}</span>
+										<span style={{ width: 130 }}>{userInfo.createdTime}</span>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ marginTop: 20 }}>
 										<span style={{ color: "grey" }}>状 态：</span>
-										{userInfo.status===0 ? <Tag color={"success"}>正常</Tag>:<Tag color={"red"}>禁用</Tag>}
+										{userInfo.status === 0 ? (
+											<Tag color={"success"}>正常</Tag>
+										) : (
+											<Tag color={"red"}>禁用</Tag>
+										)}
 									</Flex>
 								</Flex>
 							</Flex>
@@ -275,5 +380,5 @@ const UserSetting: FunctionComponent = () => {
 			</div>
 		</>
 	);
-};
+});
 export default UserSetting;