v1.2

src/app.jsx

@@ -28,11 +28,11 @@ export async function getInitialState() {
 
   if (history.location.pathname !== loginPath) {
     const res = await fetchUserInfo();
-    localStorage.setItem('qrcode',res.report_url);
     return {
       fetchUserInfo,
       currentUser: res.user,
       menuAccess: res.menu,
+      report_url:res.report_url,
       settings: {},
     };
   }

src/components/RightContent/QRCode.jsx

@@ -1,55 +1,45 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { QrcodeOutlined } from '@ant-design/icons';
-import { Menu, Spin } from 'antd';
+import { Button, Menu, Spin } from 'antd';
 import { useModel } from 'umi';
 import HeaderDropdown from '../HeaderDropdown';
 import QRCode from 'qrcodejs2'
 import styles from './index.less';
+import { useRef } from 'react';
 
 const AvatarDropdown = () => {
-  const [showPasswordModal, setShowPasswordModal] = useState(false);
-  const { initialState, setInitialState } = useModel('@@initialState');
+  const { initialState } = useModel('@@initialState');
   const [imgURL, setImgURL] = useState();
+  const [isLoading, setLoading] = useState(false);
+  const qrcodeRef = useRef()
 
-  
   const qrcode = () => {
-    // eslint-disable-next-line no-unused-vars
-    const qrcode = new QRCode('qrcode', {
+    const qrcode = new QRCode(qrcodeRef.current, {
       width: 200,
       height: 200, // 高度
-      text: localStorage.getItem('qrcode')
+      text: initialState.report_url
     })
   }
   // canvans转base64 很消耗内存所以把转换后的结果imgURL拿出来
   const toUrl = () => {
-    document.getElementById('qrcode').innerHTML = ''
+    qrcodeRef.current.value = ''
     qrcode() // 下载之前首先要有二维码
     // 先找到canvas节点下的二维码图片
-    const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+    const myCanvas = qrcodeRef.current.getElementsByTagName('canvas')
     // 设置a的href属性将canvas变成png格式
+    setLoading(true);
     setImgURL(myCanvas[0].toDataURL('image/jpg'))
+    setLoading(false);
   }
   // 下载二维码 把base64转为blob并且下载
   const downloadQrcode = () => {
-    const img = document.getElementById('qrcode').getElementsByTagName('img')
+    const img = qrcodeRef.current.getElementsByTagName('img')
     // 创建一个a节点
     const a = document.createElement('a')
     // 获得浏览器用户代理
     const ua = navigator.userAgent
-    if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行
-      // canvas转base64 后生成的数据是由 图片格式+逗号+真正的base64码组成的
-      var bstr = atob(imgURL.split(',')[1])
-      var n = bstr.length
-      var u8arr = new Uint8Array(n)
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n)
-      }
-      var blob = new Blob([u8arr])
-      window.navigator.msSaveOrOpenBlob(blob, '物业二维码.png')
-    } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
-      const blob = base64ToBlob(imgURL) // new Blob([content]);
-      const evt = document.createEvent('HTMLEvents')
-      evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
+    var blob = base64ToBlob(imgURL)
+    if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
       a.download = '物业二维码.png'// 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
       // 讲blob数据转换成url
       a.href = URL.createObjectURL(blob)
@@ -70,7 +60,7 @@ const AvatarDropdown = () => {
     // 截取后pasts[0]等于data:image/png  parts[1]就是base64吗 （至于为什么我们上面写image/jpg 现在变成png我也不知道哈哈哈哈哈）
     const contentType = parts[0].split(':')[1]
     // 用:分隔contentType 等于image/png
-    const raw = window.atob(parts[1])
+    const raw = window.atob(code.split(',')[1])
     // 获取解码后的长度
     const rawLength = raw.length
     const uInt8Array = new Uint8Array(rawLength)
@@ -83,25 +73,8 @@ const AvatarDropdown = () => {
   }
 
   useEffect(() => {
-    console.log(initialState);
     toUrl();
   }, [])
-
-  const onMenuClick = useCallback(
-    (event) => {
-      const { key } = event;
-      if (key === 'download') {
-        downloadQrcode()
-        return;
-      }
-
-      if (key === 'changepassword') {
-        setShowPasswordModal(true);
-        return;
-      }
-    },
-    [setInitialState,imgURL],
-  );
   const loading = (
     <span className={`${styles.action} ${styles.account}`}>
       <Spin
@@ -113,37 +86,22 @@ const AvatarDropdown = () => {
       />
     </span>
   );
-
-  if (!initialState) {
-    return loading;
-  }
-
-  const { currentUser } = initialState;
-
-  if (!currentUser || !currentUser.userName) {
+  if (isLoading) {
     return loading;
   }
-
-
   const menuHeaderDropdown = (
-    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
-      <Menu.Item key="changepassword">
-        {
-          imgURL ? <img src={imgURL} style={{ width: '160px', height: '160px' }} />
-            : '二维码'
-        }
-      </Menu.Item>
-      <Menu.Item key="download" style={{textAlign:'center'}}>
-        下载
-      </Menu.Item>
-    </Menu>
+    <div className={styles.qrcodebox}>
+      <img src={imgURL} style={{ width: '160px', height: '160px' }} />
+      <p><Button onClick={() => downloadQrcode()}>下载</Button></p>
+    </div>
   );
 
   return (
     <HeaderDropdown overlay={menuHeaderDropdown}>
       <span className={`${styles.action} ${styles.account}`} style={{ padding: 0 }}>
         <span className={`${styles.name} anticon`}><QrcodeOutlined style={{ fontSize: '24px' }} /></span>
-        <div style={{display:'none'}} id="qrcode" />
+        {/* 只是用来画canvans不用显示 */}
+        <div style={{ display: 'none' }} ref={qrcodeRef} />
       </span>
     </HeaderDropdown>
   );

src/components/RightContent/index.less

@@ -10,6 +10,13 @@
     min-width: 160px;
   }
 }
+.qrcodebox{
+  padding: 16px;
+  text-align: center;
+  img{
+    margin-bottom: 16px;
+  }
+}
 
 .right {
   display: flex;

src/pages/user/Login/index.jsx

@@ -1,31 +1,26 @@
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
-import { Alert, message, Tabs } from 'antd';
+import { message } from 'antd';
 import React, { useState } from 'react';
 import md5 from 'md5';
 import ProForm, { ProFormText } from '@ant-design/pro-form';
-import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi';
+import { useIntl, Link, history, FormattedMessage, useModel } from 'umi';
 import Footer from '@/components/Footer';
 import { login } from '@/services/user';
 import styles from './index.less';
 
 const Login = () => {
   const [submitting, setSubmitting] = useState(false);
-  const { initialState, setInitialState } = useModel('@@initialState');
+  const { setInitialState } = useModel('@@initialState');
   const intl = useIntl();
 
   const handleSubmit = async (values) => {
     setSubmitting(true);
-
     try {
       // 登录
       const { user, menu,report_url } = await login({ ...values, password: md5(values.password) });
 
-      await setInitialState((s) => ({ ...s, currentUser: user, menuAccess: menu }));
-
+      await setInitialState((s) => ({ ...s, currentUser: user, menuAccess: menu,report_url:report_url }));
       message.success('登录成功！');
-
-      localStorage.setItem('qrcode',report_url);
-      
       /** 此方法会跳转到 redirect 参数所在的位置 */
       if (!history) return;
       const { query } = history.location;
@@ -35,7 +30,6 @@ const Login = () => {
     } catch (error) {
       console.error(error);
     }
-
     setSubmitting(false);
   };