index.jsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import React, { useState, useEffect, useCallback, useRef } from 'react';
  2. import { FormattedMessage, history, useModel } from 'umi';
  3. import styles from './index.less';
  4. import cx from 'classnames';
  5. import QRCode from 'qrcodejs2';
  6. import { qrCodeInfo } from '@/services/sagacare_service/member';
  7. import { ReloadOutlined } from '@ant-design/icons';
  8. export default () => {
  9. const loginLogo = require('@/assets/images/loginLogo.svg');
  10. const qrcodeRef = useRef();
  11. const wsRef = useRef();
  12. const [expireTime, setExpireTime] = useState(); //过期时间
  13. const [qrCodeId, setQrCodeId] = useState(); //生成二维码id
  14. const getqrCodeInfo = () => {
  15. qrCodeInfo()
  16. .then((res) => {
  17. var expireTime = res?.data?.expireTime;
  18. var qrCodeId = res?.data?.qrCodeId;
  19. setExpireTime(expireTime);
  20. setQrCodeId(qrCodeId);
  21. })
  22. .catch((err) => {});
  23. };
  24. useEffect(() => {
  25. getqrCodeInfo();
  26. }, []);
  27. useEffect(() => {
  28. if (!qrCodeId) return;
  29. if (qrcodeRef.current) {
  30. qrcodeRef.current.makeCode(qrCodeId);
  31. } else {
  32. qrcodeRef.current = new QRCode('qrcodeRef', {
  33. text: qrCodeId,
  34. width: 160,
  35. height: 160,
  36. colorDark: '#000000',
  37. colorLight: '#ffffff',
  38. });
  39. }
  40. wsRef.current = new WebSocket(
  41. `wss://duoduoenv.sagacloud.cn/duoduo-service/websocket/webSocket/${qrCodeId}`,
  42. );
  43. // 获取连接状态
  44. console.log('ws连接状态:' + wsRef.current.readyState);
  45. //监听是否连接成功
  46. wsRef.current.onopen = function () {
  47. console.log('ws连接状态:onopen' + wsRef.current.readyState);
  48. //连接成功则发送一个数据
  49. // wsRef.current.send('test1');
  50. };
  51. // 接听服务器发回的信息并处理展示
  52. wsRef.current.onmessage = function (data) {
  53. console.log('接收到来自服务器的消息:', data.data);
  54. if (data?.data?.indexOf('token') > -1) {
  55. var info = JSON.parse(data.data);
  56. console.log('登录成功:', info);
  57. var tokenUser = info.tokenUser;
  58. var token = info.token;
  59. localStorage.setItem('user', JSON.stringify(tokenUser));
  60. localStorage.setItem('token', token);
  61. // projectObj = { projectId: tokenUser.projectId };
  62. // user = tokenUser;
  63. history.push('/home');
  64. }
  65. //完成通信后关闭WebSocket连接
  66. // wsRef.current.close();
  67. };
  68. // 监听连接关闭事件
  69. wsRef.current.onclose = function (e) {
  70. // 监听整个过程中websocket的状态
  71. console.log('ws连接状态:onclose' + wsRef.current.readyState);
  72. console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
  73. };
  74. // 监听并处理error事件
  75. wsRef.current.onerror = function (error) {
  76. console.log('ws连接状态:error', error);
  77. };
  78. }, [qrCodeId]);
  79. const reloadQrcode = () => {
  80. getqrCodeInfo();
  81. };
  82. return (
  83. <div className={styles.loginWrap}>
  84. <div className={styles.loginBox}>
  85. <div className={styles.image}>
  86. <img src={loginLogo} style={{ height: 110 }}></img>
  87. </div>
  88. <div className={styles.qrcodeWrap}>
  89. {expireTime < new Date().getTime() && (
  90. <div className={styles.qrCover}>
  91. <ReloadOutlined style={{ fontSize: '25px' }} onClick={reloadQrcode} />
  92. </div>
  93. )}
  94. <div className={styles.qrcode} id="qrcodeRef"></div>
  95. </div>
  96. <div className={styles.info}>请使用小程序扫码登录</div>
  97. </div>
  98. </div>
  99. );
  100. };