WareIcon.tsx 1.17 KB
import React, { useEffect } from 'react';
import { useModel, history, useRequest } from 'umi';
import { Badge } from 'antd';

import utilsStyles from '@/utils/utils.less';
import { fetchMessageInfo } from "@/services/dict";

const Index: React.FC = () => {
  const { initialState } = useModel('@@initialState');

  const fetchMessageResquest = useRequest(fetchMessageInfo,{
    pollingInterval:5000,
    pollingWhenHidden: false,
    manual:true,
  });


  useEffect(()=>{
    const userId = initialState?.currentUser?.id;
    if (userId) {
      fetchMessageResquest.run(userId)
    }
    return () =>{
      fetchMessageResquest.cancel();
    };
  },[initialState?.currentUser?.id]);

  return (
    <a className="pos_center" onClick={() => history.push(`/information/manage`)}>
      <div style={{ lineHeight: 1, display: 'inline-block',margin:'0 12px 0 4px'}}>
        <Badge count={fetchMessageResquest?.data?.unRead || 0} overflowCount={99} style={{ marginRight: -8 }}>
          {/* <BellFilled style={{ color: '#fff', fontSize: 24, }} /> */}
          <img src='/img/mes.png' className = { utilsStyles.topIcon } />
        </Badge>
      </div>
    </a>
  );
};

export default Index;