YYZS-Xzhifu/src/App.js

import React, { Component, Suspense } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import { Menu, Button, Result, notification, Spin } from 'antd';
import { $Axios } from './common/publish';
import { SettingOutlined, DollarCircleOutlined, } from '@ant-design/icons';
import * as Icons from "@ant-design/icons";
import cookie from 'react-cookies'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true,
      current: 1,
      arr1: [
        { txt: '商户入网', icon: 'GlobalOutlined', assembly: 'Layout' }, //  no  1-0
        { txt: '商户入网列表', icon: 'SlidersOutlined', assembly: 'center-tab' }   // ok 1-1
      ],
      arr2: [
        { txt: '账户概览', icon: '', assembly: 'Account-overview' },  //ok 2-0
        { txt: '订单查询', icon: '', assembly: 'Finance-orderQuery' },//ok  2-1
        { txt: '退款查询', icon: '', assembly: 'Refund-inquiry' },  //ok  2-2
        { txt: '发起提现', icon: '', assembly: 'Cash-initiated' }, //ok 2-3
        { txt: '提现记录', icon: '', assembly: 'Withdrawal-record' }, //ok 2-4
        { txt: '分账结算记录', icon: '', assembly: 'Income-record' }, //ok 2-5
        // { txt : 'demo' , icon : '', assembly:'homePage'},
      ],
      assembly: 'Layout',
      defaultSelectedKeys: 'Layout',
      assembly_cw: 'Account-overview',
      user_txt: {},
      signout: false,
      isSignout: 'no',
      yc: ''
    }
  }

  //初始化执行
  componentDidMount() {
    let isSignout = localStorage.getItem('isSignout');  //获取退出时存储的数据,用于判断用户退出后是否刷新页面
    let userData = cookie.load('userInformation');// 获取上游跳转时带给的信息
    // userData = JSON.parse(unescape(userData));
    let obj = {   //默认信息
      userName: '泱泱华夏',
      mallId: 2, //多商户所属商城id
      merchantNo: 'com.depushuyuan',//入网的appname、社群name、商户号等(香香或者嘉旺提供)
      merchantType: 2,//入网来源，2：app或社群3：商户或店铺(香香或者嘉旺提供)
      Jur: 1,//用户权限
      pages: '1-0'
    }
    this.autoLogin(obj) //跳转查询用户信息,验证用户是否入网
    // if(isSignout == 'yes' && userData == undefined){ //拦截是否为刷新页面
    //   this.setState({
    //     signout : true
    //   })
    // }

  }
  initJurisdiction() {//初始化用户权限
    let e = JSON.parse(localStorage.getItem('userData'));
    let page = e.pages.split('-');  //切割拿到的跳转菜单字符串，分割跳转
    if (page[0] == 1) {
      let arr = this.state.arr1;
      this.setState({
        user_txt: e,
        current: page[0],
        assembly: arr.find((item, index) => { return index == page[1] }).assembly
      })
    } else {
      let arr = this.state.arr2;
      this.setState({
        user_txt: e,
        current: page[0],
        assembly_cw: arr.find((item, index) => { return index == page[1] }).assembly
      })
    }


  }

  handleClick(e) {  //上方导航菜单点击
    this.setState({
      current: e.key,
    });
    this.initassembly()
  }

  toggleCollapsed(e) {  //收缩左侧菜单
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  toggleNavs(e) {  //左侧菜单点击
    let current = this.state.current;
    if (current == 1) {
      this.setState({
        assembly: e.key,
      });
    } else {
      this.setState({
        assembly_cw: e.key
      });
    }

  }

  initassembly() { //按需引入插件进行加载
    let current = this.state.current;
    let Assembly = null;
    if (current == 1) {
      Assembly = React.lazy(() => import(`./component/${this.state.assembly}/${this.state.assembly}.jsx`));
    } else {
      Assembly = React.lazy(() => import(`./component/${this.state.assembly_cw}/${this.state.assembly_cw}.jsx`));
    }
    return <Suspense fallback="" key="dialog"><Assembly refModal={this.state.current} /></Suspense>
  }

  initIcon(item) {  //用于遍历渲染左侧菜单ICON
    let Icon = item.icon;
    return React.createElement(Icons[Icon])
  }
  /**
   * 逻辑更改：如果商户已入网则不会跳转到入网页面并且隐藏入网菜单
   * 逻辑更改：如果商户未入网无论指定跳转到任何页面全部跳转为入网页面
   */
  autoLogin = (e) => {   //初始化进入页面请求查询用户是否入网以及其他信息
    localStorage.removeItem('userData') //退出清除用户本地数据
    let that_ = this;
    let url = '/payment/merchant.query.groovy'
    let param = {
      action: "queryInfo",
      // merchantNo: 'com.depushuyuan',
      // merchantType: 2,
      merchantNo: e.merchantNo,
      merchantType: e.merchantType,
    }
    $Axios('get', url, param, (res) => {
      let status = res.data.head.status;
      if (status == 200) {

        let data = res.data.body;
        let type = data.status
        if (type !== undefined) {
          that_.setState({
            // yc: true
          })
          notification.open({
            message: '提示:',
            style: {
              color: 'red',
            },
            description:
              '当前账户存在异常情况,请联系管理员！',
            onClick: () => { },
          });
          localStorage.setItem('userData', JSON.stringify(e)) //存储上游信息 到本地储存
        } else {
          // let s = data.status;
          // if (s == undefined) {  //商户已入网
          //   that_.setState({
          //     arr1: [{ txt: '商户入网列表', icon: 'SlidersOutlined', assembly: 'center-tab' }],
          //     assembly: 'center-tab'
          //   });
          //   if (e.pages == '1-0') {
          //     notification.open({
          //       message: '提示:',
          //       description:
          //         '当前用户已入网，自动跳转为账户概览',
          //       onClick: () => { },
          //     });
          //     e.pages = '2-0'
          //   }
          // } else if (s == 1) {  //未入网
          //   notification.open({
          //     message: '提示:',
          //     description:
          //       '当前用户未入网,请您入网后在进行其他操作',
          //     onClick: () => { },
          //   });
          //   e.pages = '1-0'
          //   that_.setState({
          //     assembly: 'Layout'
          //   });
          // }
          localStorage.setItem('userData', JSON.stringify(e)) //存储上游信息 到本地储存
          that_.initJurisdiction();  //初始化用户权限以及各种信息
        }

      }
    });

    return e
  }

  signout() {
    localStorage.setItem('isSignout', 'yes')
    localStorage.removeItem('userData') //退出清除用户本地数据
    cookie.remove('userInformation')
    this.setState({
      signout: true
    });

  }

  render() {
    const { current, arr1, arr2, user_txt, signout, assembly, assembly_cw, yc } = this.state;
    const { SubMenu } = Menu;
    return (
      <React.Fragment>
        {
          yc == true && <div style={{ width: '100%', height: '100%' }}>
          <Result
            status="error"
            title="您的账户存在异常情况,请联系管理员！"
            subTitle="There are exceptions in your account, please contact the administrator."
          // extra={}
          />
        </div>
        }
        {
          signout == true && <div style={{ width: '100%', height: '100%' }}>
            <Result
              status="success"
              title="您已退出登录!"
              subTitle="You have logged out."
            // extra={}
            />
          </div>
        }
        {
          signout == false && yc == '' && <div style={{ width: '100%', height: '100%' }}>
            <div className='wrap'>
              <div ></div>
              <div className='header_nav'>
                <div className='header_title'>商户入网信息管理平台</div>
                <div className='header_menu'>
                  <div className='head-sj'>
                    <Button type="primary" onClick={this.toggleCollapsed.bind(this)} style={{ marginBottom: 16 }} style={{ height: '100%' }}>
                      {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                    </Button>
                  </div>
                  <Menu onClick={this.handleClick.bind(this)} selectedKeys={[current]} mode="horizontal" className='header_navs'>
                    <Menu.Item key={1} icon={<SettingOutlined />}>
                      高级设置
                    </Menu.Item>
                    <Menu.Item key={2} icon={<DollarCircleOutlined />}>
                      财务管理
                    </Menu.Item>
                  </Menu>
                </div>
                <div className='header_user' style={{ lineHeight: '60px' }}>
                  <div style={{ width: '50%', lineHeight: '60px', display: 'inline-block' }}>用户名 : {user_txt.userName}</div>
                  <div style={{ width: '50%', lineHeight: '60px', display: 'inline-block' }}>
                    {/* <a>修改密码</a> */}
                    <a style={{ marginLeft: '10px' }} onClick={this.signout.bind(this)}>退出</a>
                  </div>
                </div>
              </div>
              <div className='main_centers'>
                {current == 1 && <Menu
                  className='main_left_nav'
                  defaultSelectedKeys={[this.state.assembly]}
                  mode="inline"
                  theme="dark"
                  key={assembly}
                  inlineCollapsed={this.state.collapsed}
                  onClick={this.toggleNavs.bind(this)}
                >
                  {current == 1 && (arr1.map((item, index) => (
                    <Menu.Item key={item.assembly} data={item.txt} icon={this.initIcon(item)}>
                      {item.txt}
                    </Menu.Item>
                  )))}
                </Menu>}
                {current == 2 && <Menu
                  className='main_left_nav'
                  defaultSelectedKeys={[this.state.assembly_cw]}
                  mode="inline"
                  theme="dark"
                  key={assembly_cw}
                  inlineCollapsed={this.state.collapsed}
                  onClick={this.toggleNavs.bind(this)}
                >
                  {current == 2 && (arr2.map((item, index) => (
                    <Menu.Item key={item.assembly} data={item.txt} icon={<DollarCircleOutlined />}>
                      {item.txt}
                    </Menu.Item>
                  )))}
                </Menu>}

                <div className='main_right_center'>
                  {
                    this.initassembly()
                  }
                </div>
              </div>
            </div>
          </div>
        }
      </React.Fragment>
    )
  }
}
ReactDOM.render(
  <App></App>,
  document.getElementById('root')
);