123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- import React, { useEffect, useRef, useState } from "react";
- import md5 from "md5";
- import { Form } from "antd";
- import { login, qrCode, postQrCode } from "@/services/login";
- import { json, useSearchParams } from "react-router-dom";
- import LoginUse from "./LoginUse";
- import LoginQrcode from "./LoginQrcode.bak";
- export default (props) => {
- const [searchParams] = useSearchParams();
- const appid = searchParams.get("appid");
- const { onSuccess, mode } = props;
- const [form] = Form.useForm();
- const [loading, setLoading] = useState(false);
- const [showLogin, setShowLogin] = useState(true);
- const [codeLapse, setCodeLapse] = useState(0);
-
- const qrcodeRef = useRef();
- const refData = useRef();
- useEffect(() => {
- getQrCode();
- console.log(refData);
- }, [refData.id]);
-
- const onFinish = (values) => {
- const formData = new FormData();
- formData.append("name", values.name);
- formData.append("pwd", md5(values.pwd));
- if (mode) {
- formData.append("mode", mode);
- }
- formData.append("client", appid);
-
- setLoading(true);
- login(formData)
- .then((res) => {
- onSuccess(res);
- setLoading(false);
- })
- .catch((err) => {
- console.log("----err--", err);
- setLoading(false);
- });
- };
-
- const getQrCode = () => {
- qrCode({ client: appid || "authcenter" })
- .then((res) => {
- refData.current = res;
- createdCode(res);
- checkTimeUp();
-
- console.log(res);
- })
- .catch((err) => {
- setCodeLapse(4);
- });
- };
-
- const createdCode = (res) => {
- new QRCode(qrcodeRef.current, {
- width: 150,
- height: 150,
- text: res.qrCode,
- correctLevel: 3,
- });
- };
-
-
-
- const checkStatus = () => {
- const { current } = refData;
- return new Promise((resolve, reject) => {
- postQrCode(current.id, mode)
- .then((it) => {
- if (current.expire >= 0) {
-
- current.expire--;
- if (it.state == 0) {
-
- setCodeLapse(0);
- resolve();
- } else if (it.state == 1) {
-
- setCodeLapse(1);
- resolve();
- } else if (it.state == 3 || it.state == 4) {
- setCodeLapse(4);
- reject();
- } else if (it.token) {
- onSuccess(it);
- } else if (it == null) {
- console.log("null");
- setCodeLapse(4);
- }
- } else {
-
- console.log("二维码失效");
- qrStop();
- setCodeLapse(4);
- reject();
- }
- })
- .catch((err) => {
- console.log(err);
- qrStop();
- setCodeLapse(4);
- reject();
- });
- });
- };
-
-
- let time = useRef();
- const checkTimeUp = () => {
- checkStatus()
- .then(() => {
-
-
- time.current = setTimeout(() => {
-
- if (time.current) {
-
- console.log("我先清除一下定时器");
- clearTimeout(time.current);
- checkTimeUp();
- }
- }, 1000);
- })
- .catch(() => {
- if (time.current) {
- clearTimeout(time.current);
- }
- });
- };
-
-
- const qrStop = () => {
- if (qrcodeRef.current) {
- const idv = qrcodeRef.current.children;
- for (var i = idv.length - 1; i >= 0; i--) {
- qrcodeRef.current.removeChild(idv[i]);
- }
- } else {
- return;
- }
- };
-
- const onRenovate4 = () => {
-
- getQrCode();
- setCodeLapse(0);
- };
-
- const onRenovate1 = () => {
-
- clearTimeout(time.current);
- setCodeLapse(0);
- getQrCode();
- };
-
- const checkLoginUse = () => {
- setShowLogin(false);
- clearTimeout(time.current);
- };
-
- const checkLoginwx = () => {
- setShowLogin(true);
- setCodeLapse(0);
- getQrCode();
- };
- return (
- <Form form={form} layout="vertical" onFinish={onFinish}>
- {showLogin ? (
- <LoginQrcode
- qrcodeRef={qrcodeRef}
- codeLapse={codeLapse}
- onRenovate4={onRenovate4}
- onRenovate1={onRenovate1}
- checkLoginUse={checkLoginUse}
- />
- ) : (
- <LoginUse loading={loading} checkLoginwx={checkLoginwx} />
- )}
- </Form>
- );
- };
|