feat: update

2024-05-29 21:33:58 +08:00
parent cb9c827220
commit 4ce065214a
11 changed files with 173 additions and 144 deletions
--- a/src/views/User/Login/index.tsx
+++ b/src/views/User/Login/index.tsx
@@ -9,17 +9,23 @@ import {
 	UserOutlined,
 	WechatOutlined,
 } from "@ant-design/icons";
-import { ProFormCaptcha, ProFormCheckbox, ProFormText } from "@ant-design/pro-components";
-import { Alert, Button, Divider, Form, Image, message, Space, Tabs } from "antd";
-import { CSSProperties, useRef, useState } from "react";
+import {
+	CaptFieldRef,
+	ProFormCaptcha,
+	ProFormCheckbox,
+	ProFormText,
+} from "@ant-design/pro-components";
+import { Alert, Button, Divider, Form, Image, message, Space, Tabs, Tooltip } from "antd";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import logo from "@/assets/icons/schisandra.svg";
 import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
 import styles from "./index.module.less";
 import { observer } from "mobx-react";
 import FooterComponent from "@/components/Footer";
-import RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha";
-import { get, load, verify } from "@/api/captcha/index.ts";
-import { oauthLogin } from "@/api/user";
+import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
+import { get, load } from "@/api/captcha/index.ts";
+import { getSms, oauthLogin } from "@/api/user";
+import { VerfiyCaptcha } from "@/api/captcha/api.ts";
 // import useStore from '@/utils/store/useStore.tsx'
 type LoginType = "account" | "phone";

@@ -33,6 +39,17 @@ const iconStyles: CSSProperties = {
 export default observer(() => {
 	const [form] = Form.useForm();
 	const captcha = useRef<CaptchaInstance>(null);
+	const captchaRef = useRef<CaptFieldRef | null | undefined>();
+
+	async function verify(token: string, deg: number): Promise<TicketInfoType> {
+		const data: any = {
+			token: token,
+			deg: deg,
+		};
+		const res = await VerfiyCaptcha(data);
+		return res;
+	}
+
 	const items = [
 		{
 			label: (
@@ -56,15 +73,21 @@ export default observer(() => {

 	async function oAuthLogin(type: string) {
 		const res: any = await oauthLogin(type);
-		console.log(res);
-		window.location.href = res.data;
+		window.open(res.data, "_blank");
 	}

 	const [loginType, setLoginType] = useState<LoginType>("account");

+	async function openCaptcha() {
+		captcha.current!.open();
+	}
+
 	const onSubmit = async (formData: object) => {
-		console.log(formData);
+		openCaptcha().then(() => {
+			console.log(formData);
+		});
 	};
+	useEffect(() => {}, []);
 	return (
 		<RotateCaptcha get={get} load={load} verify={verify} limit={2} ref={captcha}>
 			<div className={styles.container}>
@@ -137,7 +160,7 @@ export default observer(() => {
 												size: "large",
 												prefix: <UserOutlined className={"prefixIcon"} />,
 											}}
-											placeholder={"请输入账号/邮箱/电话号码"}
+											placeholder={"请输入邮箱或电话号码"}
 											rules={[
 												{
 													required: true,
@@ -165,26 +188,6 @@ export default observer(() => {
 												},
 											]}
 										/>
-										{/*<ProFormText*/}
-										{/*    addonAfter={CodeImg}*/}
-										{/*    name='code'*/}
-										{/*    fieldProps={{*/}
-										{/*        size: 'large',*/}
-										{/*        prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
-										{/*        autoComplete: 'off',*/}
-										{/*    }}*/}
-										{/*    placeholder='请输入图形验证码'*/}
-										{/*    rules={[*/}
-										{/*        {*/}
-										{/*            required: true,*/}
-										{/*            message: '请输入图形验证码！',*/}
-										{/*        },*/}
-										{/*        {*/}
-										{/*            pattern: /^[a-zA-Z0-9]{5}$/,*/}
-										{/*            message: '图形验证码格式不正确',*/}
-										{/*        },*/}
-										{/*    ]}*/}
-										{/*/>*/}
 									</>
 								)}
 								{loginType === "phone" && (
@@ -208,26 +211,6 @@ export default observer(() => {
 												},
 											]}
 										/>
-										{/*<ProFormText*/}
-										{/*    addonAfter={CodeImg}*/}
-										{/*    name='code'*/}
-										{/*    fieldProps={{*/}
-										{/*        size: 'large',*/}
-										{/*        prefix: <BarcodeOutlined className={'prefixIcon'} />,*/}
-										{/*        autoComplete: 'off',*/}
-										{/*    }}*/}
-										{/*    placeholder='请输入图形验证码'*/}
-										{/*    rules={[*/}
-										{/*        {*/}
-										{/*            required: true,*/}
-										{/*            message: '请输入图形验证码！',*/}
-										{/*        },*/}
-										{/*        {*/}
-										{/*            pattern: /^[a-zA-Z0-9]{5}$/,*/}
-										{/*            message: '图形验证码格式不正确',*/}
-										{/*        },*/}
-										{/*    ]}*/}
-										{/*/>*/}
 										<ProFormCaptcha
 											fieldProps={{
 												size: "large",
@@ -237,22 +220,30 @@ export default observer(() => {
 												size: "large",
 											}}
 											placeholder={"请输入验证码"}
-											captchaTextRender={(timing, count) => {
+											captchaTextRender={(timing: boolean) => {
 												if (timing) {
-													return `${count} ${"获取验证码"}`;
+													// return `${count} ${"获取验证码"}`;
+													return `${"获取验证码"}`;
 												}
 												return "获取验证码";
 											}}
 											name="captcha"
+											phoneName={"mobile"}
 											rules={[
 												{
 													required: true,
 													message: "请输入验证码！",
 												},
 											]}
-											onGetCaptcha={async () => {
-												captcha.current!.open();
-												message.success("获取验证码成功！验证码为：1234");
+											fieldRef={captchaRef}
+											countDown={300}
+											onGetCaptcha={async (mobile: string) => {
+												const res: any = await getSms(mobile);
+												if (res && res.success) {
+													message.success(res.data, 3);
+												} else {
+													message.warning(res.data, 3);
+												}
 											}}
 										/>
 									</>
@@ -261,7 +252,7 @@ export default observer(() => {
 									<ProFormCheckbox noStyle name="autoLogin">
 										自动登录
 									</ProFormCheckbox>
-									<a style={{ float: "right" }}>忘记密码 </a>
+									<a style={{ float: "right" }}>忘记密码</a>
 								</div>

 								<Button
@@ -271,21 +262,18 @@ export default observer(() => {
 									onClick={async () => {
 										let validateFields;
 										if (loginType === "account") {
-											validateFields = ["username", "password", "code"];
+											validateFields = ["username", "password"];
 										} else {
-											validateFields = ["mobile", "captcha", "code"];
+											validateFields = ["mobile", "captcha"];
 										}

 										await form
 											.validateFields(validateFields)
 											.then(async (values) => {
-												if (loginType === "account") {
-													captcha.current!.open();
-												}
-												await onSubmit(values as API.PhoneRegisterRequest);
+												await onSubmit(values);
 											})
-											.catch((errorInfo) => {
-												console.error(errorInfo);
+											.catch((error) => {
+												console.error(error);
 											});
 									}}>
 									登录
@@ -320,9 +308,11 @@ export default observer(() => {
 												border: "1px solid #D4D8DD",
 												borderRadius: "50%",
 											}}>
-											<QqOutlined
-												style={{ ...iconStyles, color: "#1677FF" }}
-											/>
+											<Tooltip title="QQ登录" color={"blue"}>
+												<QqOutlined
+													style={{ ...iconStyles, color: "#1677FF" }}
+												/>
+											</Tooltip>
 										</div>
 										<div
 											style={{
@@ -335,9 +325,11 @@ export default observer(() => {
 												border: "1px solid #D4D8DD",
 												borderRadius: "50%",
 											}}>
-											<WechatOutlined
-												style={{ ...iconStyles, color: "#08a327" }}
-											/>
+											<Tooltip title="企业微信登录" color={"green"}>
+												<WechatOutlined
+													style={{ ...iconStyles, color: "#08a327" }}
+												/>
+											</Tooltip>
 										</div>
 										<div
 											style={{
@@ -350,12 +342,14 @@ export default observer(() => {
 												border: "1px solid #D4D8DD",
 												borderRadius: "50%",
 											}}>
-											<GithubOutlined
-												onClick={() => {
-													oAuthLogin("github").then();
-												}}
-												style={{ ...iconStyles, color: "#333333" }}
-											/>
+											<Tooltip title="github登录" color={"black"}>
+												<GithubOutlined
+													onClick={() => {
+														oAuthLogin("github").then();
+													}}
+													style={{ ...iconStyles, color: "#333333" }}
+												/>
+											</Tooltip>
 										</div>
 										<div
 											style={{
@@ -368,12 +362,14 @@ export default observer(() => {
 												border: "1px solid #D4D8DD",
 												borderRadius: "50%",
 											}}>
-											<GitlabOutlined
-												onClick={() => {
-													oAuthLogin("gitee").then();
-												}}
-												style={{ ...iconStyles, color: "#FF6A10" }}
-											/>
+											<Tooltip title="gitee登录" color={"orange"}>
+												<GitlabOutlined
+													onClick={() => {
+														oAuthLogin("gitee").then();
+													}}
+													style={{ ...iconStyles, color: "#FF6A10" }}
+												/>
+											</Tooltip>
 										</div>
 									</Space>
 								</div>
--- a/src/views/User/Register/index.tsx
+++ b/src/views/User/Register/index.tsx
@@ -2,7 +2,7 @@

 import { LockOutlined, MobileOutlined, WechatOutlined } from "@ant-design/icons";
 import { ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
-import { Space, Tabs, message, Image, Alert, Form, Button } from "antd";
+import { Alert, Button, Form, Image, message, Space, Tabs } from "antd";
 import { useState } from "react";
 import logo from "@/assets/icons/schisandra.svg";
 // import background from '@/assets/images/background.png'
@@ -10,6 +10,7 @@ import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
 import styles from "./index.module.less";
 import { observer } from "mobx-react";
 import FooterComponent from "@/components/Footer";
+import { getSms, register } from "@/api/user";
 // import useStore from '@/utils/store/useStore.tsx'
 type LoginType = "phone";

@@ -29,7 +30,12 @@ export default observer(() => {
 	const [loginType, setLoginType] = useState<LoginType>("phone");

 	const onSubmit = async (formData: object) => {
-		console.log(formData);
+		const res: any = await register(formData);
+		if (res && res.success) {
+			message.success(res.data);
+		} else {
+			message.error(res.data);
+		}
 	};
 	return (
 		<div className={styles.container}>
@@ -168,21 +174,28 @@ export default observer(() => {
 										size: "large",
 									}}
 									placeholder={"请输入验证码"}
-									captchaTextRender={(timing, count) => {
+									captchaTextRender={(timing: boolean) => {
 										if (timing) {
-											return `${count} ${"获取验证码"}`;
+											return `${"获取验证码"}`;
 										}
 										return "获取验证码";
 									}}
-									name="captcha"
+									name="activeCode"
+									phoneName={"phone"}
+									countDown={300}
 									rules={[
 										{
 											required: true,
 											message: "请输入验证码！",
 										},
 									]}
-									onGetCaptcha={async () => {
-										message.success("获取验证码成功！验证码为：1234");
+									onGetCaptcha={async (phone: string) => {
+										const res: any = await getSms(phone);
+										if (res && res.success) {
+											message.success(res.data, 3);
+										} else {
+											message.warning(res.data, 3);
+										}
 									}}
 								/>
 							</>
@@ -193,10 +206,8 @@ export default observer(() => {
 								onClick={async () => {
 									const validateFields = [
 										"phone",
-										"username",
 										"password",
-										"captcha",
-										"code",
+										"activeCode",
 										"confirmPassword",
 									];
 									await form
@@ -204,8 +215,8 @@ export default observer(() => {
 										.then(async (values) => {
 											await onSubmit(values as API.PhoneRegisterRequest);
 										})
-										.catch((errorInfo) => {
-											console.error(errorInfo);
+										.catch((error) => {
+											console.error(error);
 										});
 								}}>
 								注册