2024-10-11

king

2024-10-11 6ca240a14ccf55d4e0a94fff77e95f64db2cdfcc

 src/mob/header/index.jsx

@@ -1,87 +1,35 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import {Dropdown, Menu, Icon, Modal } from 'antd'

import { logout } from '@/store/action'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import { langs } from '@/store/options.js'
import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'

const { confirm } = Modal

class MobHeader extends Component {
  static propTpyes = {
    view: PropTypes.string,
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    logourl: window.GLOB.mainlogo,
    avatar: sessionStorage.getItem('CloudAvatar') || avatar,
    userName: sessionStorage.getItem('CloudUserName')
  }

  logout = () => {
    // 退出登录
    let _this = this
    confirm({
      title: this.state.dict['mob.header.logout.hint'],
      content: '',
      okText: this.state.dict['mob.confirm'],
      cancelText: this.state.dict['mob.cancel'],
      onOk() {
        sessionStorage.clear()
        _this.props.logout()
        _this.props.history.replace('/login')
      },
      onCancel() {}
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    userName: sessionStorage.getItem('CloudUserName'),
    logo: sessionStorage.getItem('CloudLogo') || MainLogo
  }

  render () {
    const { view } = this.props
    const { logo } = this.state
    let lang = sessionStorage.getItem('lang')
    lang = lang !== 'zh-CN' ? langs[lang] || '' : ''

    return (
      <header className="mob-header-container">
        <div className="header-logo"><img src={this.state.logourl} alt=""/></div>
        {view === 'manage' ?
          <div className="mob-manage-title">
            移动端管理
          </div> :null
        }
        <Dropdown className="header-setting" overlay={
          <Menu>
            <Menu.Item key="2" onClick={this.logout}>{this.state.dict['mob.header.logout']}</Menu.Item>
          </Menu>
        }>
          <div>
            <img src={this.state.avatar} alt=""/>
            <span>
              <span className="username">{this.state.userName}</span> <Icon type="down" />
            </span>
          </div>
        </Dropdown>
        <div className="header-logo"><img src={logo} alt=""/></div>
        <span className="lang">{lang}</span>
        <div className="header-user">
          <img src={this.state.avatar} alt=""/>
          <span>
            <span className="username">{this.state.userName}</span>
          </span>
        </div>
      </header>
    )
  }
}

const mapStateToProps = () => {
  return {}
}

const mapDispatchToProps = (dispatch) => {
  return {
    logout: () => dispatch(logout())
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobHeader))
export default MobHeader