增加页面

src/App.css

@@ -43,3 +43,54 @@
     transform: rotate(360deg);
   }
 }
+.wrap{
+  width: 100%;
+  height: 100%;
+  /* background-color: #f60; */
+}
+.header_nav{
+    width: 100%;
+    height: 60px;
+    
+}
+.header_title{
+  width: 220px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 60px;
+  text-align: center;
+  background-color: #001529;
+  float: left;
+}
+.head-sj{
+  height: 100%;
+  float: left;
+}
+.header_menu{
+  width: calc(100% - 350px);
+  height: 60px;
+  background-color: #fff;
+  float: left;
+}
+.header_navs{
+  width: 90%;
+  height: 60px;
+  line-height: 60px !important;
+}
+.main_centers{
+  width: 100%;
+  height: calc(100% - 60px);
+  display: flex;
+}
+.main_left_nav{
+  max-width: 220px;
+  height: 100%;
+  background-color: #001529;
+  float: left;
+}
+.main_right_center{
+  flex: auto;
+  height: 100%;
+  float: left;
+}

src/App.js

@@ -1,15 +1,38 @@
-import React from 'react';
+import React, { Component , Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import './App.css';
-import Layout from './component/Layout/Layout.jsx'
-import { Button } from 'antd';
+import { Menu, Button } from 'antd';
+import { SettingOutlined, DollarCircleOutlined,  } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  PieChartOutlined,
+  DesktopOutlined,
+  ContainerOutlined,
+  MailOutlined,
+} from '@ant-design/icons';
 // import { $Axios } from '&/common/publish';
 
 export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      isLogin: true
+      isLogin: true,
+      current: 'one',
+      arr1 : [
+        { txt : '商户入网' , icon : '' , assembly:'Layout' },
+        { txt : '商户入网列表' , icon : '', assembly:'center-tab'}
+      ],
+      arr2 : [
+        { txt : '订单查询' , icon : ''},
+        { txt : '退款查询' , icon : ''},
+        { txt : '账户概览' , icon : ''},
+        { txt : '发起提现' , icon : ''},
+        { txt : '提现记录' , icon : ''},
+        { txt : '分账收益记录' , icon : ''},
+      ],
+      assembly : 'Layout'
     }
   }
 
@@ -18,7 +41,30 @@ export default class App extends React.Component {
 
   }
 
+  handleClick(e){
+    console.log('点击的 ', e);
+    this.setState({	
+      current : e.key
+    })
+  }
 
+  toggleCollapsed(e){
+    this.setState({
+      collapsed: !this.state.collapsed,
+    });
+    // this.setState({ current: e.key });
+  }
+  toggleNavs(e){
+    this.setState({
+      assembly: e.key,
+    });
+    console.log(e)
+  }
+  initassembly(){
+    const MapDialog = React.lazy(() => import(`./component/${this.state.assembly}/${this.state.assembly}.jsx`));
+    return <Suspense  fallback="" key="dialog"><MapDialog refModal={this.state.current} /></Suspense>
+  }
+  
 
   // autoLogin = () => {
   //     let param = {
@@ -40,9 +86,58 @@ export default class App extends React.Component {
   // }
 
   render() {
+    const { current, arr1, arr2 } = this.state;
+    const { SubMenu } = Menu;
     return (
       <React.Fragment>
-        {this.state.isLogin ? <Layout></Layout> : <div></div>}
+        {/* {this.state.isLogin ? <Layout></Layout>} */}
+        <div className='wrap'>
+          <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="one" icon={<SettingOutlined />}>
+                  高级设置
+                </Menu.Item>
+                <Menu.Item key="tow" icon={<DollarCircleOutlined />}>
+                  财务管理
+                </Menu.Item>
+              </Menu>
+            </div>
+          </div>
+          <div className='main_centers'>
+            <Menu
+                className='main_left_nav'
+                defaultSelectedKeys={[this.state.assembly]}
+                // defaultOpenKeys={[this.state.assembly]}
+                mode="inline"
+                theme="dark"
+                inlineCollapsed={this.state.collapsed}
+                onClick={this.toggleNavs.bind(this)}
+              >
+                {current === 'one' && (arr1.map((item,index) =>(
+                  <Menu.Item key={item.assembly} data={item.txt} icon={<PieChartOutlined />}>
+                    {item.txt}
+                  </Menu.Item>
+                )))}
+                {current === 'tow' && (arr2.map((item,index) =>(
+                  <Menu.Item key={item.assembly} data={item.txt} icon={<PieChartOutlined />}>
+                    {item.txt}
+                  </Menu.Item>
+                )))}
+              </Menu>
+              <div className='main_right_center'>
+                {
+                    this.initassembly()
+                }
+              </div>
+          </div>
+        </div>
       </React.Fragment>
     )
   }

src/component/Layout/Layout.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Button  } from 'antd';
+import { Button, Breadcrumb  } from 'antd';
 import { $Axios } from '../../common/publish';
 import '../Layout/Layout.scss'
 import CenterO from '../center-o/centerO.jsx'
 import CenterW from '../center-w/centerW.jsx'
+import CenterS from '../center-s/centerS.jsx'
 export default class Layout extends React.Component {
     constructor(props) {
         super(props)
@@ -23,8 +24,17 @@ export default class Layout extends React.Component {
     }
     btnClick(e){
         console.log(e)
+        let headTxt = '';
+        if(e == 1){
+            headTxt = '商户入网 > 商户基本信息'
+        }else if(e == 2){
+            headTxt = '商户入网 > 商户资质信息'
+        }else if(e == 3){
+            headTxt = '商户入网 > 结算信息'
+        }
         this.setState({	
-            htmls : e
+            htmls : e,
+            headTxt : headTxt
         })
     }
 
@@ -56,18 +66,21 @@ export default class Layout extends React.Component {
         const { headTxt, htmls } = this.state;
         return(
             <div className='rootDom'>
-               <div className='header_center'>{ headTxt }</div>
+               <div className='header_center'>
+                   { headTxt }
+               </div>
                <div className='main_center'>
                     <div className='center_ups'>
                         {htmls === 1 && (<CenterO></CenterO>)}
                         {htmls === 2 && (<CenterW></CenterW>)}
+                        {htmls === 3 && (<CenterS></CenterS>)}
                     </div>
                     <div className='center_bottom'>
                             {htmls === 1 && <Button className='btn btn_xg'>修改</Button>}
                             {htmls === 1 && <Button className='btn btn_next' type="primary" onClick={() =>this.btnClick(2)} >下一步</Button>}
                             {htmls === 2 && <Button className='btn btn_xg' onClick={() =>this.btnClick(1)} >上一步</Button>}
                             {htmls === 2 && <Button className='btn btn_next' type="primary" onClick={() =>this.btnClick(3)} >下一步</Button>}
-                            {htmls === 3 && <Button className='btn btn_xg' onClick={() =>this.btnClick(1)} >上一步</Button>}
+                            {htmls === 3 && <Button className='btn btn_xg' onClick={() =>this.btnClick(2)} >上一步</Button>}
                             {htmls === 3 && <Button className='btn btn_next' type="primary" onClick={() =>this.btnClick('ok')} >提交</Button>}
                     </div>
                </div>

src/component/Layout/Layout.scss

@@ -6,7 +6,7 @@
         height: 60px;
         line-height: 60px;
         text-indent: 20px;
-        font-size: 18px;
+        font-size: 15px;
         font-weight: 600;
         border-bottom: 1px solid #ccc;
     }

src/component/center-o/centerO.jsx

@@ -89,7 +89,7 @@ export default class centerO extends React.Component {
                 </div>
                 <div className='center_right'>
                     <div className='c-l'>
-                        <div className='titles'> 经营地址省 ： </div>
+                        <div className='titles_o'> 经营地址省 ： </div>
                             <Select size='default' placeholder="请选择省份"  onChange={ this.handleChange } style={{ width: 200 }}>
                                 {certificate.map((item,index) => (
                                     <Option key={index} value={item.value}>{item.txt}</Option>
@@ -97,7 +97,7 @@ export default class centerO extends React.Component {
                             </Select>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 经营地址市 ： </div>
+                        <div className='titles_o'> 经营地址市 ： </div>
                             <Select size='default' placeholder="请选择市"  onChange={ this.handleChange } style={{ width: 200 }}>
                                 {certificate.map((item,index) => (
                                     <Option key={index} value={item.value}>{item.txt}</Option>
@@ -105,7 +105,7 @@ export default class centerO extends React.Component {
                             </Select>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 经营地址区 ： </div>
+                        <div className='titles_o'> 经营地址区 ： </div>
                             <Select size='default' placeholder="请选择区"  onChange={ this.handleChange } style={{ width: 200 }}>
                                 {certificate.map((item,index) => (
                                     <Option key={index} value={item.value}>{item.txt}</Option>
@@ -119,7 +119,7 @@ export default class centerO extends React.Component {
                         </div>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 业务类型 ： </div>
+                        <div className='titles_o'> 业务类型 ： </div>
                             <Select size='default' placeholder="请选择业务类型"  onChange={ this.handleChange } style={{ width: 200 }}>
                                 {certificate.map((item,index) => (
                                     <Option key={index} value={item.value}>{item.txt}</Option>
@@ -127,7 +127,7 @@ export default class centerO extends React.Component {
                             </Select>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 开户意愿核实类型 ： </div>
+                        <div className='titles_o'> 开户意愿核实类型 ： </div>
                         <Radio.Group name="radiogroup" defaultValue={1}>
                                             <Radio value={1}>视频验证</Radio>
                                             <Radio value={1}>手机短信验证</Radio>

src/component/center-o/centerO.scss

@@ -25,7 +25,7 @@
         width: 50%;
         height: 100%;
         float: left;
-        .titles{
+        .titles_o{
             width: 160px;
             height: 50px;
             line-height: 50px;

src/component/center-s/centerS.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Radio, Select, Input  } from 'antd';
+// import { $Axios } from '../../common/publish';
+import '../center-s/centerS.scss'
+
+export default class centerS extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            contract : [
+                // { txt : '请选择商户签约性质', value : 0 },
+                { txt : '个体工商户',value : 1 },
+                { txt : '事业单位',value : 2 },
+                { txt : '民办非企业组织',value : 3 },
+                { txt : '社会团体',value : 4 },
+                { txt : '非法人企业',value : 5 },
+                { txt : '自然人',value : 6 },
+                { txt : '政府机关',value : 7 },
+                { txt : '其他',value : 8 },
+            ],
+            certificate : [
+                { txt : '统一社会信用代码证',value : 1 },
+                { txt : '民办非企业单位登记证书',value : 2 },
+                { txt : '个体工商户营业执照',value : 3 },
+                { txt : '社会团体法人登记证书',value : 4 },
+                { txt : '事业单位法人证书',value : 5 },
+                { txt : '基金法人登记证书',value : 6 },
+                { txt : '营业执照',value : 7 },
+                { txt : '其他',value : 8 },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+    handleChange(value) {
+        console.log(`Selected: ${value}`);
+    }
+
+
+    render() {
+        const { contract, certificate } = this.state;
+        const { Option } = Select;
+        const { TextArea } = Input;
+        return(
+            <div className='center_up'>
+                <div className='center_left'>
+                    <div className='c-l'>
+                        <div className='titles'> 开户行 ： </div>
+                        <Select size='default' placeholder="请选择开户行"  onChange={ this.handleChange } style={{ width: 200 }}>
+                                            {contract.map((item,index) => (
+                                                <Option key={index} value={item.value}>{item.txt}</Option>
+                                            ))}
+                                        </Select>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 支行名称 ： </div>
+                        <Select size='default' placeholder="请选择支行"  onChange={ this.handleChange } style={{ width: 200 }}>
+                                            {certificate.map((item,index) => (
+                                                <Option key={index} value={item.value}>{item.txt}</Option>
+                                            ))}
+                                        </Select>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 开户名称 ： </div>
+                        <div className='inputs'><Input placeholder="请输入开户名称" /></div>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 开户账号 ： </div>
+                        <div className='inputs'><Input placeholder="请输入开户账号" /></div>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 市编码 ： </div>
+                        <Select size='default' placeholder="请选择市编码"  onChange={ this.handleChange } style={{ width: 200 }}>
+                                            {certificate.map((item,index) => (
+                                                <Option key={index} value={item.value}>{item.txt}</Option>
+                                            ))}
+                                        </Select>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 省编码 ： </div>
+                        <Select size='default' placeholder="请选择省编码"  onChange={ this.handleChange } style={{ width: 200 }}>
+                                            {certificate.map((item,index) => (
+                                                <Option key={index} value={item.value}>{item.txt}</Option>
+                                            ))}
+                                        </Select>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 结算银行卡属性 ： </div>
+                        <Radio.Group name="radiogroup" defaultValue={1}>
+                                            <Radio value={1}>对公</Radio>
+                                            <Radio value={2}>对私</Radio>
+                                        </Radio.Group>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 清算方式 ： </div>
+                        <Radio.Group name="radiogroup" defaultValue={1}>
+                                            <Radio value={1}>提现</Radio>
+                                        </Radio.Group>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 提现费率类型 ： </div>
+                        <Select size='default' placeholder="请选择提现费率类型"  onChange={ this.handleChange } style={{ width: 200 }}>
+                                            {certificate.map((item,index) => (
+                                                <Option key={index} value={item.value}>{item.txt}</Option>
+                                            ))}
+                                        </Select>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 提现费率 ： </div>
+                        <div className='inputs'><Input placeholder="请输入提现费率" /></div>
+                    </div>
+                </div>
+                <div className='center_right'> </div>
+            </div>
+        )
+    }
+}

src/component/center-s/centerS.scss

@@ -0,0 +1,24 @@
+.center_up{
+    width: 100%;
+    height: 100%;
+    .center_left{
+        width: 50%;
+        height: 100%;
+        float: left;
+        .titles{
+            width: 180px;
+            text-align: right;
+            padding-right: 10px;
+            display: inline-block;
+        }
+        .inputs{
+            width: 200px;
+            display: inline-block;
+        }
+        .c-l{
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+        }
+    }
+}

src/component/center-tab/center-tab.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Button, Table } from 'antd';
+import { $Axios } from '../../common/publish';
+import '../center-tab/center-tab.scss'
+const { Column, ColumnGroup } = Table;
+export default class centerTab extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            headTxt : '商户入网 > 商户入网列表',
+            data : [
+                {
+                  key: '1',
+                  name: 'John Brown',
+                  age: 32,
+                  address: 'New York No. 1 Lake Park',
+                },
+                {
+                  key: '2',
+                  name: 'Jim Green',
+                  age: 42,
+                  address: 'London No. 1 Lake Park',
+                },
+                {
+                  key: '3',
+                  name: 'Joe Black',
+                  age: 32,
+                  address: 'Sidney No. 1 Lake Park',
+                },
+              ],
+              columns : [
+                {
+                    title: '序号',
+                    dataIndex: 'name',
+                    key: 'name',
+                    
+                },
+                {
+                    title: '签约名称',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '商户简称',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '入网时间',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'age',
+                    key: 'age',
+                    render: text => <a>查看详情</a>,
+                },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+
+        // let params = {
+        //     token : localStorage.getItem('token'),
+        //     config_code : 'titleList',
+        //     system_code : "COMBINE",
+        // }
+        // $Axios('post','http://user_api.airqualitychina.cn:7070/auth/getConfigList',params,(res) => {
+        //     let titleLists = []
+        //     let result = res.data.result[0].config_value.split(',');
+        //     for(let i = 0 ; i < result.length; i++){
+        //         for(let k = 0; k < titleList.menuList.length; k ++){
+        //             if(result[i] == titleList.menuList[0][k].id){
+        //                 titleLists.push(titleList.menuList[0][k])
+        //             }
+        //         }
+        //         if( i == result.length - 1){
+        //             this.setState({
+        //                 menuList : titleLists,
+        //             })
+        //         }
+        //     }
+           
+        // })
+
+
+    render() {
+        const { data , columns , headTxt } = this.state;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='tables'>
+                <Table columns={columns} dataSource={data} />
+               </div>
+            </div>
+        )
+    }
+}

src/component/center-tab/center-tab.scss

@@ -0,0 +1,18 @@
+.wrap_table{
+    width: 100%;
+    height: 100%;
+}
+.header_center{
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-indent: 20px;
+    font-size: 15px;
+    font-weight: 600;
+    border-bottom: 1px solid #ccc;
+}
+.tables{
+    width: 100%;
+    height: calc(100% - 60px);
+    padding: 20px;
+}

src/component/center-w/centerW.jsx

@@ -29,12 +29,26 @@ export default class centerW extends React.Component {
                 { txt : '营业执照',value : 7 },
                 { txt : '其他',value : 8 },
             ],
-            fileList : [],
+            fileList : [[],[],[],[],[],[],[],[],[],[],[],[]],
             headerProps : {
                 action: '',
                 multiple: false,
             },
-            imgType : null
+            imgType : null,
+            rightArray : [ 
+                { txt : '营业执照照片路径',value : 0 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '开户许可证招聘路径',value : 1 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '法人证件人面像路径',value : 2 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '法人证件国徽面路径',value : 3 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '确认入网意愿视频路径',value : 4 , type:'.AVI, .mov, .rmvb, .rm, .FLV, .mp4, .3gp'},  
+                { txt : '法人手持证件影印件路径',value : 5 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '商户网址截图影印件路径',value : 6 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '公众号/小程序/生活号影印件路径',value : 7 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : 'APP首页截图影印件路径',value : 8 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '法人银行卡图影印件路径',value : 9 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '确认入网意愿其他方式验证路径',value : 10 , type:'.jpg, .jpeg, .png, .pdf'},  
+                { txt : '其他资质文件路径',value : 11 , type:'.jpg, .jpeg, .png, .pdf'},  
+            ]
         }
         
     }
@@ -47,13 +61,13 @@ export default class centerW extends React.Component {
         console.log(`Selected: ${value}`);
     }
     handleChange = info => {
-        console.log(info)
         let fileList = [...info.fileList];
-        if(fileList.length && fileList.length > 0){
-            fileList[0].status = 'done'  //上传成功之后的状态 自动修改
-            fileList[0].response = fileList[0].name  //图片上传成功之后展示的TIP
-        }
-        this.setState({ fileList });
+        let imgType = this.state.imgType;
+        fileList[0].status = 'done'  //上传成功之后的状态 自动修改
+        fileList[0].response = fileList[0].name  //图片上传成功之后展示的TIP
+        let arr = this.state.fileList;
+        arr[imgType] = fileList
+        this.setState({ arr });
     };
     btnClick(e){  //区分上传图片类型
         this.setState({	
@@ -63,7 +77,7 @@ export default class centerW extends React.Component {
 
 
     render() {
-        const { contract, certificate, headerProps, fileList  } = this.state;
+        const { contract, certificate, headerProps, fileList , rightArray  } = this.state;
         const { Option } = Select;
         
         return(
@@ -143,22 +157,24 @@ export default class centerW extends React.Component {
                     </div>
                 </div>
                 <div className='center_right'>
-                    <div className='c-l'>
-                        <div className='titles'> 营业执照照片路径 ： </div>
-                        <div className='Upload_wrap'>
-                            <Upload 
-                                className='Upload'
-                                {...headerProps} 
-                                fileList={this.state.fileList} 
-                                accept=".jpg, .jpeg, .png, .pdf" 
-                                maxCount={1}
-                                onChange = {this.handleChange}
-                                >
-                                <Button icon={<UploadOutlined />} onClick={() =>this.btnClick(1)}>上传营业执照</Button>
-                            </Upload>
-                            {fileList.length === 0 && <div className='title_tips'>格式限制为 jpg,jpeg,png,pdf,最大不超过50M</div>}
-                        </div>
-                    </div>
+                    {rightArray.map((item,index) => (
+                         <div className='c-l' key = {index}>
+                         <div className='titles'> {item.txt} ： </div>
+                         <div className='Upload_wrap'>
+                             <Upload 
+                                 className='Upload'
+                                 {...headerProps} 
+                                 fileList={this.state.fileList[item.value]} 
+                                 accept={item.type} 
+                                 maxCount={1}
+                                 onChange = {this.handleChange}
+                                 >
+                                 <Button icon={<UploadOutlined />} onClick={() =>this.btnClick(index)}>选择文件</Button>
+                             </Upload>
+                             {fileList[index].length === 0 && <div className='title_tips'>格式限制为{item.type},最大不超过50M</div>}
+                         </div>
+                     </div>
+                    ))}
                 </div>
             </div>
         )

src/component/center-w/centerW.scss

@@ -26,7 +26,7 @@
         height: 100%;
         float: left;
         .titles{
-            width: 160px;
+            width: 250px;
             height: 50px;
             line-height: 50px;
             text-align: right;
@@ -60,7 +60,7 @@
             margin-left: 20px;
         }
         .Upload_wrap{
-            width: 550px;
+            width: 580px;
             height: 50px;
             display: inline-block;
             position: relative;