微信扫码
-
- 关注公众号
-
+ 关注公众号
登录更快更安全
@@ -461,7 +520,7 @@ export default observer(() => {
borderRadius: "50%",
}}>
-
diff --git a/src/views/User/Register/index.tsx b/src/views/User/Register/index.tsx
index 55e722a..ec95a48 100644
--- a/src/views/User/Register/index.tsx
+++ b/src/views/User/Register/index.tsx
@@ -8,19 +8,21 @@ import {
WechatOutlined,
} from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
-import { Alert, Button, ConfigProvider, Form, Image, message, Space, Tabs } from "antd";
-import { useRef, useState } from "react";
+import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
+import { useEffect, useRef, useState } from "react";
import logo from "@/assets/images/logo.png";
// import background from '@/assets/images/background.png'
-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 { createClientId, generateQRCode, getClientToken, 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 { useNavigate } from "react-router-dom";
+import { setStorage } from "@/utils/localStorage/config.ts";
+import useStore from "@/utils/store/useStore.tsx";
+import { TimerManager } from "timer-manager-lib";
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = "phone";
@@ -29,8 +31,13 @@ export default observer(() => {
const registerCaptcha = useRef
(null);
const smsCaptcha = useRef(null);
const captchaRef = useRef();
+ const [QRCode, setQRCode] = useState("");
const navigate = useNavigate();
+ const store = useStore("user");
const colors = ["#6253E1", "#04BEFE"];
+ const timerManager = new TimerManager();
+ const [loading, setLoading] = useState(true);
+
const getHoverColors = (colors: string[]) =>
colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
@@ -115,6 +122,50 @@ export default observer(() => {
return res;
}
+ async function wechatLogin() {
+ createClientId().then((res: any) => {
+ generateQRCode(res.data).then((response: any) => {
+ if (response.success) {
+ setQRCode(response.data.qrCodeUrl);
+ setLoading(false);
+ timerManager.add(() => {
+ getClientToken(res.data).then((result: any) => {
+ if (result.success) {
+ timerManager.clear();
+ store.setToken(result.data.tokenValue);
+ store.setUserId(result.data.loginId);
+ setStorage("token", result.data.tokenValue, 24 * 60 * 30);
+ setStorage("userId", result.data.loginId, 24 * 60 * 30);
+ message
+ .open({
+ content: "登录成功！",
+ type: "success",
+ })
+ .then();
+ if (store.getToken() !== null || store.getUserId() !== null) {
+ setTimeout(() => {
+ navigate("/main");
+ }, 2000);
+ }
+ }
+ });
+ }, 3000);
+ } else {
+ message
+ .open({
+ content: response.data,
+ type: "error",
+ })
+ .then();
+ }
+ });
+ });
+ }
+
+ useEffect(() => {
+ wechatLogin().then();
+ }, []);
+
return (
@@ -125,14 +176,17 @@ export default observer(() => {
微信扫码登录
-
+
+
+
微信扫码关注公众号)}
description={