LoginForm.bak.jsx 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. import React, { useEffect, useRef, useState } from "react";
  2. import md5 from "md5";
  3. import { Form } from "antd";
  4. import { login, qrCode, postQrCode } from "@/services/login";
  5. import { json, useSearchParams } from "react-router-dom";
  6. import LoginUse from "./LoginUse";
  7. import LoginQrcode from "./LoginQrcode.bak";
  8. export default (props) => {
  9. const [searchParams] = useSearchParams();
  10. const appid = searchParams.get("appid");
  11. const { onSuccess, mode } = props;
  12. const [form] = Form.useForm();
  13. const [loading, setLoading] = useState(false);
  14. const [showLogin, setShowLogin] = useState(true);
  15. const [codeLapse, setCodeLapse] = useState(0); //0 未扫码,1 扫码, 2确认扫码 3取消扫码 4已删除
  16. const qrcodeRef = useRef();
  17. const refData = useRef();
  18. useEffect(() => {
  19. getQrCode();
  20. console.log(refData);
  21. }, [refData.id]);
  22. const onFinish = (values) => {
  23. const formData = new FormData();
  24. formData.append("name", values.name);
  25. formData.append("pwd", md5(values.pwd));
  26. if (mode) {
  27. formData.append("mode", mode);
  28. }
  29. formData.append("client", appid);
  30. setLoading(true);
  31. login(formData)
  32. .then((res) => {
  33. onSuccess(res);
  34. setLoading(false);
  35. })
  36. .catch((err) => {
  37. console.log("----err--", err);
  38. setLoading(false);
  39. });
  40. };
  41. const getQrCode = () => {
  42. qrCode({ client: appid || "authcenter" })
  43. .then((res) => {
  44. refData.current = res;
  45. createdCode(res);
  46. checkTimeUp();
  47. console.log(res);
  48. })
  49. .catch((err) => {
  50. setCodeLapse(4);
  51. });
  52. };
  53. const createdCode = (res) => {
  54. new QRCode(qrcodeRef.current, {
  55. width: 150,
  56. height: 150,
  57. text: res.qrCode,
  58. correctLevel: 3,
  59. });
  60. };
  61. /**
  62. * @param {*轮询方法}
  63. */
  64. // 检测二维码状态 业务代码
  65. const checkStatus = () => {
  66. const { current } = refData;
  67. return new Promise((resolve, reject) => {
  68. postQrCode(current.id, mode)
  69. .then((it) => {
  70. if (current.expire >= 0) {
  71. // 二维码还没有失效
  72. current.expire--;
  73. if (it.state == 0) {
  74. // console.log("未扫码");
  75. setCodeLapse(0);
  76. resolve();
  77. } else if (it.state == 1) {
  78. // console.log("已扫码");
  79. setCodeLapse(1);
  80. resolve();
  81. } else if (it.state == 3 || it.state == 4) {
  82. setCodeLapse(4);
  83. reject();
  84. } else if (it.token) {
  85. onSuccess(it);
  86. } else if (it == null) {
  87. console.log("null");
  88. setCodeLapse(4);
  89. }
  90. } else {
  91. // 二维码失效
  92. console.log("二维码失效");
  93. qrStop();
  94. setCodeLapse(4);
  95. reject();
  96. }
  97. })
  98. .catch((err) => {
  99. console.log(err);
  100. qrStop();
  101. setCodeLapse(4);
  102. reject();
  103. });
  104. });
  105. };
  106. // 检测二维码状态 逻辑代码
  107. let time = useRef();
  108. const checkTimeUp = () => {
  109. checkStatus()
  110. .then(() => {
  111. // console.log("===================");
  112. // console.log("最上面的", time.current);
  113. time.current = setTimeout(() => {
  114. // console.log("上面的", time.current);
  115. if (time.current) {
  116. // console.log("下面的", time.current);
  117. console.log("我先清除一下定时器");
  118. clearTimeout(time.current);
  119. checkTimeUp();
  120. }
  121. }, 1000);
  122. })
  123. .catch(() => {
  124. if (time.current) {
  125. clearTimeout(time.current);
  126. }
  127. });
  128. };
  129. // 删除二维码
  130. const qrStop = () => {
  131. if (qrcodeRef.current) {
  132. const idv = qrcodeRef.current.children;
  133. for (var i = idv.length - 1; i >= 0; i--) {
  134. qrcodeRef.current.removeChild(idv[i]);
  135. }
  136. } else {
  137. return;
  138. }
  139. };
  140. // 重新刷新二维码
  141. const onRenovate4 = () => {
  142. // 重新查询
  143. getQrCode();
  144. setCodeLapse(0);
  145. };
  146. // 重新刷新二维码
  147. const onRenovate1 = () => {
  148. // 重新查询
  149. clearTimeout(time.current);
  150. setCodeLapse(0);
  151. getQrCode();
  152. };
  153. // 切换账号登录
  154. const checkLoginUse = () => {
  155. setShowLogin(false);
  156. clearTimeout(time.current);
  157. };
  158. // 切换二维码登录
  159. const checkLoginwx = () => {
  160. setShowLogin(true);
  161. setCodeLapse(0);
  162. getQrCode();
  163. };
  164. return (
  165. <Form form={form} layout="vertical" onFinish={onFinish}>
  166. {showLogin ? (
  167. <LoginQrcode
  168. qrcodeRef={qrcodeRef}
  169. codeLapse={codeLapse}
  170. onRenovate4={onRenovate4}
  171. onRenovate1={onRenovate1}
  172. checkLoginUse={checkLoginUse}
  173. />
  174. ) : (
  175. <LoginUse loading={loading} checkLoginwx={checkLoginwx} />
  176. )}
  177. </Form>
  178. );
  179. };