educoder/public/react/src/modules/user/account/AccountNav.js

import React, { Component } from 'react';

import { SnackbarHOC, getImageUrl } from 'educoder';
import AccountImg from './AccountImg'
class AccountNav extends Component {
  toBasic = () => {
    this.props.history.push(`/account/profile`)
  }
  toCertification = () => {
    this.props.history.push(`/account/certification`)
  }
  toSecure = () => {
    this.props.history.push(`/account/secure`)
  }
    render() {
      let { basicInfo } = this.props
      console.log(this.props);
      const path = window.location.pathname
      const isBasic = path.indexOf('profile') != -1 || path == "/account"
      const isCertification = path.indexOf('certification') != -1
      const isSecure = path.indexOf('secure') != -1
      return (
          <div className="accountNav fl">
            {
              basicInfo &&
              <React.Fragment>
                <div className="accountInfo">
                  <AccountImg src={basicInfo.avatar_url} {...this.props}></AccountImg>
                  <span className="name">{basicInfo.name}</span>
                  <span className="role">{basicInfo.technical_title}</span>
                </div>

                <div className="accountManagement">
                  <div className="title">账号管理</div>
                  <ul>
                    <li className={`navItem ${isBasic ? 'active' : ''}`} onClick={this.toBasic}>
                      <i className="iconfont icon-jibenxinxi color-grey-9 font-16"></i>
                      基本信息
                      {
                        basicInfo.base_info_completed == true ? 
                        <i className="status fr iconfont icon-wancheng color-green-light font-16"></i> :
                        <i className="status fr iconfont icon-tishi color-red font-16"></i> 
                      }
                    </li>
                    <li className={`navItem ${isCertification ? 'active' : ''}`} onClick={this.toCertification}>
                      <i className="iconfont icon-renzhengxinxi color-grey-9 font-16"></i>认证信息
                      {
                        basicInfo.professional_certification == 'certified' && basicInfo.authentication == 'certified' ?
                        <i className="status fr iconfont icon-wancheng color-green-light font-16"></i>:
                        <i className="status fr iconfont icon-tishi color-red font-16"></i> 
                      }
                    </li>
                    <li className={`navItem ${isSecure ? 'active' : ''}`} onClick={this.toSecure}>
                      <i className="iconfont icon-anquanshezhi color-grey-9 font-16"></i>安全设置
                    </li>
                  </ul>
                </div>
              </React.Fragment>
            }
          </div>
      );
    }
}

export default  AccountNav ;