| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- import React, { useState, useEffect, useCallback, useRef } from 'react';
- import { FormattedMessage, history, useModel } from 'umi';
- import styles from './index.less';
- import cx from 'classnames';
- import QRCode from 'qrcodejs2';
- import { qrCodeInfo } from '@/services/sagacare_service/member';
- import { ReloadOutlined } from '@ant-design/icons';
- export default () => {
- const loginLogo = require('@/assets/images/loginLogo.svg');
- const qrcodeRef = useRef();
- const wsRef = useRef();
- const [expireTime, setExpireTime] = useState(); //过期时间
- const [qrCodeId, setQrCodeId] = useState(); //生成二维码id
- const getqrCodeInfo = () => {
- qrCodeInfo()
- .then((res) => {
- var expireTime = res?.data?.expireTime;
- var qrCodeId = res?.data?.qrCodeId;
- setExpireTime(expireTime);
- setQrCodeId(qrCodeId);
- })
- .catch((err) => {});
- };
- useEffect(() => {
- getqrCodeInfo();
- }, []);
- useEffect(() => {
- if (!qrCodeId) return;
- if (qrcodeRef.current) {
- qrcodeRef.current.makeCode(qrCodeId);
- } else {
- qrcodeRef.current = new QRCode('qrcodeRef', {
- text: qrCodeId,
- width: 160,
- height: 160,
- colorDark: '#000000',
- colorLight: '#ffffff',
- });
- }
- wsRef.current = new WebSocket(
- `wss://duoduoenv.sagacloud.cn/duoduo-service/websocket/webSocket/${qrCodeId}`,
- );
- // 获取连接状态
- console.log('ws连接状态:' + wsRef.current.readyState);
- //监听是否连接成功
- wsRef.current.onopen = function () {
- console.log('ws连接状态:onopen' + wsRef.current.readyState);
- //连接成功则发送一个数据
- // wsRef.current.send('test1');
- };
- // 接听服务器发回的信息并处理展示
- wsRef.current.onmessage = function (data) {
- console.log('接收到来自服务器的消息:', data.data);
- if (data?.data?.indexOf('token') > -1) {
- var info = JSON.parse(data.data);
- console.log('登录成功:', info);
- var tokenUser = info.tokenUser;
- var token = info.token;
- localStorage.setItem('user', JSON.stringify(tokenUser));
- localStorage.setItem('token', token);
- // projectObj = { projectId: tokenUser.projectId };
- // user = tokenUser;
- history.push('/home');
- }
- //完成通信后关闭WebSocket连接
- // wsRef.current.close();
- };
- // 监听连接关闭事件
- wsRef.current.onclose = function (e) {
- // 监听整个过程中websocket的状态
- console.log('ws连接状态:onclose' + wsRef.current.readyState);
- console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
- };
- // 监听并处理error事件
- wsRef.current.onerror = function (error) {
- console.log('ws连接状态:error', error);
- };
- }, [qrCodeId]);
- const reloadQrcode = () => {
- getqrCodeInfo();
- };
- return (
- <div className={styles.loginWrap}>
- <div className={styles.loginBox}>
- <div className={styles.image}>
- <img src={loginLogo} style={{ height: 110 }}></img>
- </div>
- <div className={styles.qrcodeWrap}>
- {expireTime < new Date().getTime() && (
- <div className={styles.qrCover}>
- <ReloadOutlined style={{ fontSize: '25px' }} onClick={reloadQrcode} />
- </div>
- )}
- <div className={styles.qrcode} id="qrcodeRef"></div>
- </div>
- <div className={styles.info}>请使用小程序扫码登录</div>
- </div>
- </div>
- );
- };
|