feat: 旋转验证对接成功

src/api/user/index.ts

@@ -24,12 +24,16 @@ export const oauthLogin = (type: string) => {
 
 /**
  * 获取短信验证码
- * @param phone
+ * @param data
  */
-export const getSms = (phone: string) => {
+export const getSms = (data: any) => {
 	return web.request({
-		url: "/sms/sendByTemplate/" + phone,
+		url: "/sms/sendByTemplate/",
 		method: "post",
+		headers: {
+			"Content-Type": "application/json;charset=UTF-8",
+		},
+		data: data,
 	});
 };
 
@@ -44,3 +48,16 @@ export const register = (data: API.PhoneRegisterRequest) => {
 		data: data,
 	});
 };
+
+/**
+ * 注册
+ * @param data
+ */
+export const login = (data: API.LoginRequest) => {
+	return web.request({
+		url: "/auth/user/login",
+		method: "post",
+		data: data,
+	});
+};
+

src/types/user/user.d.ts

@@ -9,6 +9,12 @@ declare namespace API {
 		confirmPassword?: string;
 		activeCode?: string;
 	};
+	type LoginRequest = {
+		userName?: string;
+		password?: string;
+		token: string;
+		deg: number;
+	};
 	// type ApiResponse<T> = {
 	// 	success?: boolean;
 	// 	code?: number;

src/utils/axios/request.ts

@@ -14,7 +14,7 @@ class Request {
 			(config) => {
 				const token: string | null = getStorageFromKey("token");
 				if (token) {
-					config.headers.Authorization = `schisandra ${token}`;
+					config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${token}`;
 				}
 
 				// if (config.method == "post") {

src/views/User/Login/index.tsx

@@ -36,8 +36,7 @@ import { observer } from "mobx-react";
 import FooterComponent from "@/components/Footer";
 import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
 import { get, load } from "@/api/captcha/index.ts";
-import { getSms, oauthLogin } from "@/api/user";
+import { getSms, login, oauthLogin } from "@/api/user";
-import { VerfiyCaptcha } from "@/api/captcha/api.ts";
 import { TinyColor } from "@ctrl/tinycolor";
 
 type LoginType = "account" | "phone";
@@ -51,7 +50,8 @@ const iconStyles: CSSProperties = {
 
 export default observer(() => {
 	const [form] = Form.useForm();
-	const captcha = useRef<CaptchaInstance>(null);
+	const smsCaptcha = useRef<CaptchaInstance>(null);
+	const loginCaptcha = useRef<CaptchaInstance>(null);
 	const captchaRef = useRef<CaptFieldRef | null | undefined>();
 	const colors = ["#40e495", "#30dd8a", "#2bb673"];
 	const getHoverColors = (colors: string[]) =>
@@ -59,12 +59,53 @@ export default observer(() => {
 	const getActiveColors = (colors: string[]) =>
 		colors.map((color) => new TinyColor(color).darken(5).toString());
 
-	async function verify(token: string, deg: number): Promise<TicketInfoType> {
+	async function smsVerify(token: string, deg: number): Promise<TicketInfoType> {
+		const phone = form.getFieldValue("mobile");
 		const data: any = {
 			token: token,
 			deg: deg,
+			phone: phone,
 		};
-		const res = await VerfiyCaptcha(data);
+		const res: any = await getSms(data);
+		if (res && res.code === 0) {
+			message.open({
+				content: res.data,
+				type: "success",
+				duration: 5,
+			});
+		} else {
+			message.open({
+				content: res.data,
+				type: "warning",
+				duration: 5,
+			});
+		}
+		return res;
+	}
+
+	async function loginVerify(token: string, deg: number): Promise<TicketInfoType> {
+		const userName = form.getFieldValue("username");
+		const password = form.getFieldValue("password");
+		const data: any = {
+			token: token,
+			deg: deg,
+			userName: userName,
+			password: password,
+		};
+		const res: any = await login(data);
+		if (res && res.success && res.code === 0) {
+			message.open({
+				content: "登录成功！",
+				type: "success",
+				duration: 5,
+			});
+		} else if (res.code === 0 && !res.success) {
+			message.open({
+				content: "登录失败！用户名或密码错误！",
+				type: "error",
+				duration: 5,
+			});
+		}
 		return res;
 	}
 
@@ -96,18 +137,18 @@ export default observer(() => {
 
 	const [loginType, setLoginType] = useState<LoginType>("account");
 
-	async function openCaptcha() {
+	async function openSmsCaptcha() {
-		captcha.current!.open();
+		smsCaptcha.current!.open();
+	}
+
+	async function openLoginCaptcha() {
+		loginCaptcha.current!.open();
 	}
 
-	const onSubmit = async (formData: object) => {
-		openCaptcha().then(() => {
-			console.log("formData", formData);
-		});
-	};
 	return (
-		<RotateCaptcha get={get} load={load} verify={verify} limit={2} ref={captcha}>
 		<div className={styles.container}>
+			<RotateCaptcha get={get} load={load} verify={smsVerify} limit={2} ref={smsCaptcha} />
+			<RotateCaptcha get={get} load={load} verify={loginVerify} ref={loginCaptcha} />
 			<div className={styles.content}>
 				<Space className={styles.content_content}>
 					<Space className={styles.login_content}>
@@ -128,9 +169,7 @@ export default observer(() => {
 										<div>
 											<span>
 												微信扫码
-													<span className={styles.mp_tips}>
+												<span className={styles.mp_tips}>关注公众号</span>
-														关注公众号
-													</span>
 											</span>
 											<br />
 											登录更快更安全
@@ -254,13 +293,8 @@ export default observer(() => {
 										]}
 										fieldRef={captchaRef}
 										countDown={300}
-											onGetCaptcha={async (mobile: string) => {
+										onGetCaptcha={async () => {
-												const res: any = getSms(mobile);
+											await openSmsCaptcha();
-												if (res && res.success) {
-													message.success(res.data, 3);
-												} else {
-													message.warning(res.data, 3);
-												}
 										}}
 									/>
 								</>
@@ -298,8 +332,11 @@ export default observer(() => {
 
 										await form
 											.validateFields(validateFields)
-												.then(async (values) => {
+											.then(async () => {
-													await onSubmit(values);
+												// await onSubmit(values);
+												if (loginType === "account") {
+													await openLoginCaptcha();
+												}
 											})
 											.catch((error) => {
 												console.error(error);
@@ -412,6 +449,5 @@ export default observer(() => {
 			</div>
 			<FooterComponent></FooterComponent>
 		</div>
-		</RotateCaptcha>
 	);
 });

src/views/User/Register/index.tsx

@@ -18,11 +18,15 @@ import { observer } from "mobx-react";
 import FooterComponent from "@/components/Footer";
 import { getSms, register } from "@/api/user";
 import { TinyColor } from "@ctrl/tinycolor";
+import { get, load } from "@/api/captcha";
+import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
 // import useStore from '@/utils/store/useStore.tsx'
 type LoginType = "phone";
 
 export default observer(() => {
 	const [form] = Form.useForm();
+	const registerCaptcha = useRef<CaptchaInstance>(null);
+	const smsCaptcha = useRef<CaptchaInstance>(null);
 	const captchaRef = useRef<CaptFieldRef | null | undefined>();
 	const colors = ["#6253E1", "#04BEFE"];
 	const getHoverColors = (colors: string[]) =>
@@ -43,16 +47,72 @@ export default observer(() => {
 	];
 	const [loginType, setLoginType] = useState<LoginType>("phone");
 
-	const onSubmit = async (formData: object) => {
+	async function smsVerify(token: string, deg: number): Promise<TicketInfoType> {
-		const res: any = await register(formData);
+		const phone = form.getFieldValue("phone");
-		if (res && res.success) {
+		const data: any = {
-			message.success(res.data);
+			token: token,
-		} else {
+			deg: deg,
-			message.error(res.data);
+			phone: phone,
-		}
 		};
+		const res: any = await getSms(data);
+		if (res && res.code === 0) {
+			message.open({
+				content: res.data,
+				type: "success",
+				duration: 5,
+			});
+		} else {
+			message.open({
+				content: res.data,
+				type: "warning",
+				duration: 5,
+			});
+		}
+		return res;
+	}
+
+	async function openRegisterCaptcha() {
+		registerCaptcha.current!.open();
+	}
+
+	async function openSmsCaptcha() {
+		smsCaptcha.current!.open();
+	}
+
+	async function registerVerify(token: string, deg: number): Promise<TicketInfoType> {
+		const userName = form.getFieldValue("username");
+		const password = form.getFieldValue("password");
+		const phone = form.getFieldValue("phone");
+		const activeCode = form.getFieldValue("activeCode");
+		const data: any = {
+			token: token,
+			deg: deg,
+			userName: userName,
+			password: password,
+			phone: phone,
+			activeCode: activeCode,
+		};
+		const res: any = await register(data);
+		if (res && res.success && res.code === 0) {
+			message.open({
+				content: res.data,
+				type: "success",
+				duration: 5,
+			});
+		} else if (res.code === 0 && !res.success) {
+			message.open({
+				content: res.data,
+				type: "error",
+				duration: 5,
+			});
+		}
+		return res;
+	}
+
 	return (
 		<div className={styles.container}>
+			<RotateCaptcha get={get} load={load} verify={registerVerify} ref={registerCaptcha} />
+			<RotateCaptcha get={get} load={load} verify={smsVerify} ref={smsCaptcha} />
 			<div className={styles.content}>
 				<Space>
 					<Space className={styles.login_content}>
@@ -119,7 +179,7 @@ export default observer(() => {
 										prefix: <UserOutlined className={"prefixIcon"} />,
 										autoComplete: "off",
 									}}
-									name="userName"
+									name="username"
 									placeholder="请输入用户名"
 									rules={[
 										{
@@ -179,13 +239,8 @@ export default observer(() => {
 										},
 									]}
 									fieldRef={captchaRef}
-									onGetCaptcha={async (phone: string) => {
+									onGetCaptcha={async () => {
-										const res: any = await getSms(phone);
+										await openSmsCaptcha();
-										if (res && res.success) {
-											message.success(res.data, 3);
-										} else {
-											message.warning(res.data, 3);
-										}
 									}}
 								/>
 
@@ -261,8 +316,8 @@ export default observer(() => {
 										];
 										await form
 											.validateFields(validateFields)
-											.then(async (values) => {
+											.then(async () => {
-												await onSubmit(values as API.PhoneRegisterRequest);
+												await openRegisterCaptcha();
 											})
 											.catch((error) => {
 												console.error(error);