增加功能

src/App.css

@@ -30,6 +30,14 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+.example {
+  margin: 20px 0;
+  margin-bottom: 20px;
+  padding: 30px 50px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
 
 .App-link {
   color: #61dafb;

src/App.js

@@ -10,7 +10,6 @@ import {
   MenuFoldOutlined,
   PieChartOutlined,
 } from '@ant-design/icons';
-console.log(process.env)
 export default class App extends React.Component {
   constructor(props) {
     super(props)
@@ -28,6 +27,7 @@ export default class App extends React.Component {
         { txt : '发起提现' , icon : '', assembly:'Cash-initiated'},
         { txt : '提现记录' , icon : '', assembly:'Withdrawal-record'},
         { txt : '分账收益记录' , icon : '', assembly:'Income-record'},
+        // { txt : 'demo' , icon : '', assembly:'homePage'},
       ],
       assembly : 'Layout',
       defaultSelectedKeys : 'Layout',
@@ -50,11 +50,17 @@ export default class App extends React.Component {
     console.log(process.env.NODE_ENV == 'development' ? '----------开发测试环境----------' : '----------线上生产环境----------')
     this.autoLogin() //登录查询用户信息
     let Jur = ['Y1','Y2','Y3']   //Y1为云悦平台权限最高权限  //Y2为商城权限二级权限  // Y3为商户权限属于个人权限
+    let obj = { 
+      appName : 'com.smrongshengtianxia',
+      merchantId : '896582034',
+      id : 2,
+      pfAppName : 'com.chuangyetong' //包名
+    }
+    localStorage.setItem('userData',JSON.stringify(obj))
 
   }
 
   handleClick(e){
-    console.log( this.state);
     this.setState({	
       current : e.key,
     });
@@ -97,14 +103,14 @@ export default class App extends React.Component {
   }
 
   autoLogin = () => {
-      let url = '/payment/spare.bill.list.groovy'
+      let url = '/payment/merchant.query.groovy'
       let param = {
         appName : '吕卓',
         action : "queryInfo"
         
       }
       $Axios('post',url,param,(res) => {
-        console.log(res)
+        // console.log(res)
       })
   }
 

src/common/publish.js

@@ -26,6 +26,28 @@ export function format(fmt) {
     var second = (date.getSeconds()<10 ? '0' + date.getSeconds(): date.getSeconds()).toString();
     return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
 }
+
+Date.prototype.formats = function (fmt) {
+    let o = {
+      "M+": this.getMonth() + 1,                 //月份
+      "d+": this.getDate(),                    //日
+      "h+": this.getHours(),                   //小时
+      "m+": this.getMinutes(),                 //分
+      "s+": this.getSeconds(),                 //秒
+      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+      "S": this.getMilliseconds()             //毫秒
+    };
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    }
+    for (let k in o) {
+      if (new RegExp("(" + k + ")").test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+      }
+    }
+    return fmt;
+  };
+
 //请求API,json形式
 export function $Axios (method,urls, param, fn, err) {
     let url;
@@ -34,20 +56,66 @@ export function $Axios (method,urls, param, fn, err) {
     }else{  
         url = 'http://pay.zhongsou.com' //生产线上环境API
     }
-    console.log()
 	let methods = method.trim()
 	let obj = {
 		method: methods, //请求方式
-        "changeOrigin": true,
+        changeOrigin: true,
+		headers: { 'content-type': 'application/json;charset=utf-8' },
+		url: url + urls,
+        timeout: 30000, // 请求时间 超过这个时间 将停止请求
+        // params: {
+        //     action:"queryList",//查询商户入网列表
+        //     merchantStatus:1, //当前固定为1  //商户状态0待激活1活动中2关闭3删除4已冻结5清退6退驻
+        //     pSize:10,//每页条数
+        //     lastId:1111 //最后一个排序号,即最后一条记录的id值
+        // }
+    }
+
+    if(method=='post'){
+        obj.data = param
+    }
+
+    if(method=='get'){
+        obj.params= param
+    }
+
+    
+	axios(obj)
+		.then((response) => {
+			fn(response)
+		})
+		.catch((e) => {
+			if (err) err()
+			console.log(e)
+		})
+}
+
+//请求API,json形式
+export function $AxiosGet (method,urls, param, fn, err) {
+    let url;
+    if(process.env.NODE_ENV === 'development'){ 
+        url = 'http://api2test.zhongsou.com/'//开发测试环境API
+    }else{  
+        url = 'http://api2.souyue.mobi/d3api2' //生产线上环境API
+    }
+	let methods = method.trim()
+	let obj = {
+		method: methods, //请求方式
+        changeOrigin: true,
 		headers: { 'content-type': 'application/json;charset=utf-8' },
 		url: url + urls,
-        timeout: 30000 // 请求时间 超过这个时间 将停止请求
+        timeout: 30000, // 请求时间 超过这个时间 将停止请求
     }
 
     if(method=='post'){
         obj.data = param
     }
 
+    if(method=='get'){
+        obj.params= param
+    }
+
+    
 	axios(obj)
 		.then((response) => {
 			fn(response)

src/component/Account-overview/Account-overview.jsx

@@ -1,81 +1,340 @@
 import React from 'react';
-import { Card  } from 'antd';
-import { $Axios } from '../../common/publish';
+import { Card, Button, Modal, Input ,message } from 'antd';
+import { $Axios ,$AxiosGet } from '../../common/publish';
 import '../Account-overview/Account-overview.scss'
+import axios from "axios";
+import sz1 from '../../images/sz1.jpg';
+import sz2 from '../../images/sz2.jpg';
+import sz3 from '../../images/sz3.jpg';
 export default class AccountOverview extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            headTxt : '财务管理 > 账户概览',
+            headTxt: '财务管理 > 账户概览',
+            data: '',
+            yestdayTrade: '',
+            preMonthTrade: '',
+            btnsType: 1,
+            isModalVisible: false,
+            Password: '',
+            colors: '',
+            contactPhone: '',
+            num : 60,
+            t : ''
         }
-        
-    }
-	
-	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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+
+    }
+
+    componentDidMount() {
+        this.initData()
+    }
+
+    initData() {
+        let that_ = this;
+        let url = '/payment/merchant.query.groovy'
+        let params = {
+            action: 'queryGeneral',//查询商户概览信息
+            appName: JSON.parse(localStorage.getItem('userData')).appName//当前商户的appname，
+        }
+        $Axios('get', url, params, (res) => {
+            let status = res.data.head.status;
+            if (status == 200) {
+                let data = res.data.body;
+                let yestdayTrade = res.data.body.yestdayTrade; //昨日收支
+                let preMonthTrade = res.data.body.preMonthTrade;//上月收支
+                that_.setState({
+                    data: data,
+                    yestdayTrade: yestdayTrade,
+                    preMonthTrade: preMonthTrade,
+                    contactPhone: data.contactPhone
+                })
+            }
+        })
+    }
+
+
+    onBtnClick_1() {
+        this.setState({
+            btnsType: 1
+        })
+    }
+
+    onBtnClick_2(e) {
+        this.setState({
+            btnsType: 2
+        })
+    }
+
+    initData_tk() {
+        let that_ = this;
+        let url = '/payment/merchant.pwd.update.groovy'
+        let params = {
+            action: 'queryGeneral',//查询商户概览信息
+            appName: JSON.parse(localStorage.getItem('userData')).appName//当前商户的appname，
+        }
+        $Axios('get', url, params, (res) => {
+            let status = res.data.head.status;
+            if (status == 200) {
+                let data = res.data.body;
+                let yestdayTrade = res.data.body.yestdayTrade; //昨日收支
+                let preMonthTrade = res.data.body.preMonthTrade;//上月收支
+                that_.setState({
+                    data: data,
+                    yestdayTrade: yestdayTrade,
+                    preMonthTrade: preMonthTrade
+                })
+            }
+        })
+    }
+
+    onBtnClick_0() {
+        this.setState({
+            isModalVisible: true
+        })
+    }
+
+    handleOk(){
+        this.submits();
+    }
+
+    submits(){
+        if(document.getElementById("pwd").value !== ''){
+            if(document.getElementById("cfPassword").value !== ''){
+                if(document.getElementById("num1").value !== ''){
+                    if(document.getElementById("pwd").value == document.getElementById("cfPassword").value){
+                        let that_ = this;
+                        let url = '/payment/merchant.pwd.update.groovy'
+                        let params = {
+                            id : JSON.parse(localStorage.getItem('userData')).id,//商户id
+                            pwd :document.getElementById("pwd").value,//密码
+                            mobile :this.state.data.contactPhone,//手机号
+                            // mobile : 17600982892,//手机号
+                            code :document.getElementById("num1").value,//验证码
+                            pfAppName :JSON.parse(localStorage.getItem('userData')).pfAppName, //包名
+                        }
+                        $Axios('get', url, params, (res) => {
+                            let status = res.data.head.status;
+                            if (status == 200) {
+                                message.info('提交成功！');
+                                that_.setState({
+                                    isModalVisible: false
+                                });
+                            }else{
+                                message.info('提交失败！');
+                            }
+                        })
+                    }else{
+                        message.info('支付密码内容不一致！');
+                    }
+                }else{
+                    message.info('请输入验证码！');
+                }
+            }else{
+                message.info('请输入确认支付密码！');
+            }
+        }else{
+            message.info('请输入支付密码！');
+        }
+       
+
+
+       
+       
+      
+       
+    }
+
+    handleOk_yzm(){
+        let url = '/d3api2/user/sendMobileVerify.groovy'
+        let that_ = this;
+        let Params = {
+            mobile : '17600982892',//手机号
+            pfAppName : "com.chuangyetong",//包名
+            eventType : 51
+        }
+        $AxiosGet('get', url, Params, (res) => {
+            let status = res.data.head.status;
+            if(status == 200){
+                message.info('验证码发送成功,请注意查收！');
+                let t = setInterval(function(){
+                    let nums = that_.djsNum();
+                    that_.setState({
+                        num : nums
+                    });
+                    if(nums == 0){
+                        clearInterval(that_.state.t);
+                        that_.setState({
+                            t : '',
+                            num : 60
+                        });
+                    }
+                },1000);
+                that_.setState({
+                    t : t
+                });
+                
+            }
+        });
+    }
+
+    djsNum(){
+        let that_ = this;
+        let num = this.state.num
+        num--
+        return num
+    }
+
+
+
+    inputChange1(e) {
+ 
+    }
+
+    colorChange(e) {
+        let s = this.colorTxt(e.target.value);
+        this.setState({
+            Password: e.target.value,
+            colors: s
+        });
+    }
+
+    colorTxt(value) {
+        // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
+        // 3： 表示第四个级别 4：表示第五个级别
+        let modes = 0;
+        if (value.length < 6) {//最初级别
+            return modes;
+        }
+        if (/\d/.test(value)) {//如果用户输入的密码 包含了数字
+            modes++;
+        }
+        if (/[a-z]/.test(value)) {//如果用户输入的密码 包含了小写的a到z
+            modes++;
+        }
+        if (/[A-Z]/.test(value)) {//如果用户输入的密码 包含了大写的A到Z
+            modes++;
+        }
+        if (/\W/.test(value)) {//如果是非数字 字母 下划线
+            modes++;
+        }
+        switch (modes) {
+            case 1:
+                return 1;
+                break;
+            case 2:
+                return 2;
+                break;
+            case 3:
+                return 3;
+                break;
+            case 4:
+                return 4;
+                break;
+        }
+    }
+    //input 获取焦点
+    inputOnFocus(){
+        console.log(1)
+        this.setState({ focus: true });
+    }
+    
+    //input 失去焦点
+    inputOnBlur(){
+        console.log(2)
+        this.setState({ focus: false });
+    }
 
 
     render() {
-        const { headTxt } = this.state;
-        return(
+        const { headTxt, preMonthTrade, yestdayTrade, data, btnsType, isModalVisible, colors,num ,t } = this.state;
+        return (
             <div className='wrap_table'>
                 <div className='header_center'>
-                   { headTxt }
-               </div>
-               <div className='query_table'
-                style={{
-                    padding:'30px'
-                }}
-               >
-               <Card title="企业账户" extra={<a href="#">设置/修改支付密码</a>} style={{ width: 400,display:'inline-block' }}>
-                   <div style={{width:'30%',height:'100px',background:'#f60',float:'left'}}>
-
-                   </div>
-                   <div style={{width:'70%',height:'100px',background:'#ccc',float:'left'}}>
-                        <div>xxxx : xxxxx</div>
-                   </div>
-               </Card>
-               <Card title="入网信息" extra={<a href="#"></a>} style={{ width: 400,display:'inline-block',marginLeft:'20px'  }}>
-                   <div style={{width:'30%',height:'100px',background:'#f60',float:'left'}}>
-
-                   </div>
-                   <div style={{width:'70%',height:'100px',background:'#ccc',float:'left'}}>
-                        <div>xxxx : xxxxx</div>
-                   </div>
-               </Card>
-               <Card title="收支汇总" extra={<a href="#"></a>} style={{ width: 400,display:'inline-block',marginLeft:'20px'  }}>
-                   <div style={{width:'30%',height:'100px',background:'#f60',float:'left'}}>
-
-                   </div>
-                   <div style={{width:'70%',height:'100px',background:'#ccc',float:'left'}}>
-                        <div>xxxx : xxxxx</div>
-                   </div>
-               </Card>
-               </div>
+                    {headTxt}
+                </div>
+                <div className='query_table'
+                    style={{
+                        padding: '30px'
+                    }}
+                >
+                    <Card title="企业账户" extra={<a href="#" onClick={this.onBtnClick_0.bind(this)}>设置/修改支付密码</a>} style={{ width: 400, display: 'inline-block' }}>
+                        <div style={{ width: '30%', height: '120px', float: 'left' }}>
+                            <img src={sz1} alt="" />
+                        </div>
+                        <div style={{ width: '70%', height: '120px', float: 'left' }}>
+                            <div style={{ lineHeight: '120px' }}>账户余额 : {data.withdrawBalance}</div>
+                        </div>
+                    </Card>
+                    <Card title="入网信息" extra={<a href="#"></a>} style={{ width: 400, display: 'inline-block', marginLeft: '20px' }}>
+                        <div style={{ width: '30%', height: '120px', float: 'left', background: '#ccc' }}>
+                            <img style={{ width: '100%', height: '100%' }} src={sz3} alt="" />
+                        </div>
+                        <div style={{ width: '70%', height: '120px', float: 'left' }}>
+                            <div style={{ lineHeight: '40px' }}>商户编号 : {data.merchantId == '' ? '--' : data.merchantId}</div>
+                            <div style={{ lineHeight: '40px' }}>商户名称 : {data.signedShorthand == '' ? '--' : data.signedShorthand}</div>
+                            <div style={{ lineHeight: '40px' }}>商户邮箱 : {data.contactEmail == '' ? '--' : data.contactEmail}</div>
+                        </div>
+                    </Card>
+                    <Card title="收支汇总" extra={<a href="#"></a>} style={{ width: 400, display: 'inline-block', marginLeft: '20px' }}>
+                        <div style={{ width: '100%', height: '40px', float: 'left' }}>
+                            <Button className='btns' type={btnsType == 1 ? 'primary' : 'default'} onClick={this.onBtnClick_1.bind(this)}>昨日收支</Button>
+                            <Button className='btns' type={btnsType == 2 ? 'primary' : 'default'} onClick={this.onBtnClick_2.bind(this)}>上月收支</Button>
+                        </div>
+                        <div style={{ width: '30%', height: '80px', float: 'left', background: '#ccc' }}>
+                            <img style={{ width: '100%', height: '100%' }} src={sz2} alt="" />
+                        </div>
+                        <div style={{ width: '70%', height: '80px', float: 'left' }}>
+                            <div>已收入总额 : {btnsType == 1 ? yestdayTrade.income : preMonthTrade.income}</div>
+                            <div>待收入总额 : {btnsType == 1 ? yestdayTrade.incomeing : preMonthTrade.incomeing}</div>
+                            <div>支出总额 : {btnsType == 1 ? yestdayTrade.expense : preMonthTrade.expense}</div>
+                            <div>手续费 : {btnsType == 1 ? yestdayTrade.fee : preMonthTrade.fee}</div>
+                        </div>
+                    </Card>
+                </div>
+                <Modal title="设置/修改密码"
+                    wrapClassName={'webs'}
+                    footer={[
+                        <Button key="submit" type="primary" onClick={this.handleOk.bind(this)}>
+                            确定
+                        </Button>,
+                    ]}
+                    visible={isModalVisible}
+                    closable={false}
+                // onOk={this.handleOk} 
+                >
+                    <div>
+                        <div className='c-ls'>
+                            <test className='titles_tk'>手机号 ：</test>
+                            <div className='titles_num'><Input id='orderNo' disabled={true} defaultValue={data.contactPhone == '' ? 17600982892 : data.contactPhone} /></div>
+                            { t == '' &&  <Button key="submit" type="primary" onClick={this.handleOk_yzm.bind(this)}>
+                                获取验证码
+                            </Button>}
+                            { t !== '' && <Button key="submitNum" type="primary" style={{width:'102px'}} disabled={true}>{num}</Button>}
+                        </div>
+                        <div className='c-ls'>
+                            <test className='titles_tk'>验证码 ：</test>
+                            <div className='titles_yzm'><Input className='inputs' id='num1' maxLength={6} onChange={(e) => this.inputChange1(e)} /></div>
+                        </div>
+                        <div className='c-ls'>
+                            <test className='titles_tk'>支付密码 ：</test>
+                            <div className='titles_num'><Input.Password id='pwd' defaultValue='' onChange={(e) => this.colorChange(e)} placeholder="请输入支付密码" /></div>
+                            <div className='titles_num' style={{ marginLeft: '10px', color: '#ccc' }}>8-20位,必须由数字和字母混合组成</div>
+                        </div>
+                        <div className='c-ls'>
+                            <test className='titles_tk'></test>
+                            <div className='titles_pas' style={{ backgroundColor: colors == 1 ? '#76EE00' : '', }}>差</div>
+                            <div className='titles_pas' style={{ backgroundColor: colors == 2 ? '#FFD700' : '', }}>弱</div>
+                            <div className='titles_pas' style={{ backgroundColor: colors == 3 ? '#FF0000' : '', }}>中</div>
+                            <div className='titles_pas' style={{ backgroundColor: colors == 4 ? '#CD0000' : '', }}>强</div>
+                        </div>
+                        <div className='c-ls'>
+                            <test className='titles_tk'>确认支付密码 ：</test>
+                            <div className='titles_num'><Input.Password id='cfPassword' placeholder="再次输入支付密码" /></div>
+                        </div>
+
+
+                    </div>
+                </Modal>
             </div>
         )
     }

src/component/Account-overview/Account-overview.scss

@@ -32,4 +32,39 @@
         line-height: 60px;
         padding-left: 20px;
     }
+}
+.btns{
+    padding: 0 5px;
+    margin-right: 10px;
+    display: inline-block;
+}
+.c-ls{
+    margin-bottom: 10px;
+}
+.titles_tk{
+    width: 120px;
+    display: inline-block;
+    padding: 0 5px;
+    margin-right: 10px;
+}
+.titles_num{
+    display: inline-block;
+}
+.titles_yzm{
+    width: 250px;
+    display: inline-block;
+    margin-right: 10px;
+}
+.titles_pas{
+    width: 40px;
+    height: 30px;
+    background-color: #fff;
+    display: inline-block;
+    text-align: center;
+    line-height: 30px;
+    border: 1px solid #ccc;
+};
+.inputs{
+    display: inline-block;
+    width: 100%;
 }

src/component/Cash-initiated/Cash-initiated.jsx

@@ -1,45 +1,93 @@
 import React from 'react';
-import { Input, Button   } from 'antd';
+import { Input, Button ,message   } from 'antd';
 import { $Axios } from '../../common/publish';
 export default class AccountOverview extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
             headTxt : '财务管理 > 发起提现',
+            data : '',
+            isPwd : '',
+            psd : '',
+            je : ''
         }
         
     }
 	
 	componentDidMount() {
-        
+        this.initData()
     }
 
-        // 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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+    initData(){
+        let that_ = this;
+        let url = '/payment/merchant.pickup.groovy'
+        let params = {
+            action :"queryOpInfo", //提现操作相关信息，可提现金额等
+            appName :JSON.parse(localStorage.getItem('userData')).appName, //当前商户的appname，
+            merchantId : JSON.parse(localStorage.getItem('userData')).merchantId//商户ID在第三方的唯一编号，
+        }
+        $Axios('get',url,params,(res) => {
+            let status = res.data.head.status;
+            if(status == 200){
+                let data = res.data.body;
+                that_.setState({
+                    data : data,
+                    isPwd  : data.isPwd
+                })
+            }
+        })
+    }
+    
+    subClick(){
+        if( document.getElementById("je").value !== ''){
+            if( document.getElementById("pwd").value !== ''){
+                if(this.state.data.withdrawBalance > 0 && this.state.data.withdrawBalance < document.getElementById("je").value){
+                    if(this.state.isPwd == 1){
+                        let that_ = this;
+                        let url = '/payment/merchant.pickup.groovy'
+                        let params = {
+                            action :"create",//提现
+                            appName : JSON.parse(localStorage.getItem('userData')).appName,//当前商户的appname，
+                            merchantId : JSON.parse(localStorage.getItem('userData')).appmerchantIdName,//商户ID在第三方的唯一编号，
+                            withdrawAmount : document.getElementById("je").value,//提现金额以元为单位，默认都是人民币，以元为单位
+                            pwd : document.getElementById("pwd").value//String,交易密码
+                        }
+                        $Axios('get',url,params,(res) => {
+                            let status = res.data.head.status;
+                            if(status == 200){
+                                message.info('提交成功,请注意账户变更!');
+                            }else{
+                                message.info('提交失败,原因未知!');
+                            }
+                        })
+                    }else{
+                        message.info('请先设置支付密码,再进行提现!');
+                    }
+                }else{
+                    message.info('可提现额度不足!');
+                }
+            }else{
+                message.info('请输入交易密码 !');
+            }
+        }else{
+            message.info('请输入提现金额 !');
+        }
+       
+    }
+
+    btnCzClick(){
+        let zTimeBegin = new Date();                                                                                       
+        let keys = zTimeBegin.getTime()  // 时间转成时间戳
+        console.log(keys)
+        this.setState({
+            je : keys,
+            pwd : keys
+        })
+    }
 
 
     render() {
-        const { headTxt } = this.state;
+        const { headTxt ,data ,pwd ,je } = this.state;
         return(
             <div className='wrap_table'>
                 <div className='header_center'>
@@ -53,23 +101,23 @@ export default class AccountOverview extends React.Component {
                    <div className='top_div'>
                         <div>
                             <div style={{width:'120px',display : 'inline-block',}}> 可提现金额 ： </div>
-                            xxxxxxxxx
+                            {data.withdrawBalance == '' ? '--' : data.withdrawBalance}
                        </div>
                        <div>
                             <div style={{width:'120px',display : 'inline-block',}}> 提现金额 ： </div>
-                            <div style={{width:'200px',display:'inline-block'}}><Input placeholder="请输入金额" /></div>
+                            <div style={{width:'200px',display:'inline-block'}}><Input id='je' key={je}  placeholder="请输入金额" /></div>
                        </div>
                        <div>
                             <div style={{width:'120px',display : 'inline-block',}}> 手续费 ： </div>
-                            222222222元
+                            0元
                        </div>
                        <div>
                             <div style={{width:'120px',display : 'inline-block',}}> 交易密码 ： </div>
-                            <div style={{width:'200px',display:'inline-block'}}><Input placeholder="请输入密码" /></div>
+                            <div style={{width:'200px',display:'inline-block'}}><Input id='pwd' key={pwd} placeholder="请输入密码" /></div>
                        </div>
                        <div>
-                            <Button>重置</Button>
-                            <Button type="primary" style={{marginLeft:'20px'}}>提交</Button>
+                            <Button onClick={this.btnCzClick.bind(this)}>重置</Button>
+                            <Button type="primary" style={{marginLeft:'20px'}} onClick={this.subClick.bind(this)}>提交</Button>
                        </div>
                    </div>
                </div>

src/component/Finance-orderQuery/Finance-orderQuery.jsx

@@ -1,157 +1,433 @@
 import React from 'react';
-import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import { Button, Table, Select, Input, DatePicker, Space, Modal ,message  } from 'antd';
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
-import { $Axios } from '../../common/publish';
+import { $Axios, format } from '../../common/publish';
 import '../Finance-orderQuery/Finance-orderQuery.scss'
+import select_data from '../../common/ssq';
 const { Column, ColumnGroup } = Table;
 export default class FinanceoRderQuery extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            headTxt : '财务管理 > 订单查询',
-            data : [
+            headTxt: '财务管理 > 订单查询',
+            select_data: select_data,
+            data: [],
+            columns: [
                 {
-                  key: '1',
-                  name: 'John Brown',
-                  age: 32,
-                  address: 'New York No. 1 Lake Park',
+                    title: '序号',
+                    dataIndex: 'num',
+                    key: 'num',
+
                 },
                 {
-                  key: '2',
-                  name: 'Jim Green',
-                  age: 42,
-                  address: 'London No. 1 Lake Park',
+                    title: '订单号',
+                    dataIndex: 'orderNo',
+                    key: 'orderNo',
                 },
                 {
-                  key: '3',
-                  name: 'Joe Black',
-                  age: 32,
-                  address: 'Sidney No. 1 Lake Park',
+                    title: '订单金额',
+                    dataIndex: 'totalAmount',
+                    key: 'totalAmount',
                 },
-              ],
-              columns : [
                 {
-                    title: '序号',
-                    dataIndex: 'name',
-                    key: 'name',
-                    
+                    title: '订单状态',
+                    dataIndex: 'orderStatus',
+                    key: 'orderStatus',
+                },
+                {
+                    title: '支付金额',
+                    dataIndex: 'cash',
+                    key: 'cash',
+                },
+                {
+                    title: '本金金额',
+                    dataIndex: 'stbPrice',
+                    key: 'stbPrice',
+                },
+                {
+                    title: '积分币金额',
+                    dataIndex: 'benbiPrice',
+                    key: 'benbiPrice',
+                },
+                {
+                    title: '已退款金额',
+                    dataIndex: 'refundAmount',
+                    key: 'refundAmount',
                 },
                 {
-                    title: '签约名称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '下单时间',
+                    dataIndex: 'createTime',
+                    key: 'createTime',
                 },
                 {
-                    title: '商户简称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '完成时间',
+                    dataIndex: 'finishTime',
+                    key: 'finishTime',
                 },
                 {
-                    title: '入网时间',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '支付方式',
+                    dataIndex: 'payType',
+                    key: 'payType',
                 },
                 {
                     title: '操作',
-                    dataIndex: 'age',
-                    key: 'age',
-                    render: text => <a>查看详情</a>,
+                    dataIndex: 'cz',
+                    key: 'cz',
+                    render: (text, record, index) => <a onClick={() => this.xqClick(text, record, index)}>查看订单金额流向</a>,
                 },
             ],
-            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 },
-            ]
+            params: {
+                action: "payOrderList",//查询订单列表
+                appName: JSON.parse(localStorage.getItem('userData')).appName,//当前商户的appName，
+                pSize: 10, //每页条数
+                pNo: 1, //第几页，起始值从1开始
+                orderStatus: '', //订单状态：1：未付款2：已付待入账3：已付已入账4：支付失败
+                orderNo: '', //商城订单号
+                userName: '', //发起人
+                payType: '', //支付方式：1支付宝2微信5微包//0初始1处理中2支付成功3支付失败4退单中5退单成功6退单失败10完成(所有转账分账均完成的，不能再做任何操作)
+                timeType: '', //为0或不提供此字段，表示不限制，1创建时间，2完成时间
+                begTime: '',//时间戳
+                endTime: '',//时间戳 format(item.createTime),
+            },
+            timeType: null,
+            starTime: '',
+            endTime: '',
+            total: null,
+            current: 1,
+            paginationProps: {
+                showSizeChanger: false,//设置每页显示数据条数
+                showQuickJumper: false,
+                showTotal: () => `共${this.state.total}条`,
+                pageSize: 10,
+                total: null,  //数据的总的条数
+                onChange: (current) => this.changePage(current), //点击当前页码
+            },
+            isModalVisible: false,
+            columns_tk : [
+                {
+                    title: '分账对象',
+                    dataIndex: 'ownerName',
+                    key: 'ownerName',
+                },
+                {
+                    title: '分账金额',
+                    dataIndex: 'amount',
+                    key: 'amount',
+                },
+                {
+                    title: '分账状态',
+                    dataIndex: 'status',
+                    key: 'status',
+                },
+                {
+                    title: '分账原因',
+                    dataIndex: 'remark',
+                    key: 'remark',
+                }
+            ],
+            payOrderInfo : null,
+            orderSplitInfo : null,
+            orderNo : null,
+            lodings : null,
+            spinning : true,
+            keys : 1,
+            keye : 2,
         }
-        
+
+    }
+
+    componentDidMount() {
+        this.initData();
+    }
+
+    xqClick = (text, record, index) => {
+        this.setState({
+            isModalVisible: true
+        });
+        this.initData_tk(record)
+    }
+
+    initData_tk(e){
+        let that_ = this;
+        let url = '/payment/merchant.order.query.groovy';
+        let params = {
+            action : "payOrderDetail",//查询订单金额流向
+            orderNo : e.orderNo,//商城订单号
+        }
+        $Axios('get', url, params, (res) => {
+            let status = res.data.head.status;
+            if (status == 200) {
+                let orderSplitInfo = res.data.body.orderSplitInfo;
+                let payOrderInfo = res.data.body.payOrderInfo;
+                that_.setState({
+                    payOrderInfo : payOrderInfo,
+                    orderSplitInfo : orderSplitInfo,
+                    orderNo : e.orderNo
+                })
+            }
+
+        })
+    }
+
+    handleOk(){
+        this.setState({
+            isModalVisible: false
+        })
     }
-	
-	componentDidMount() {
+
+    changePage(e) {
+        this.state.params.pNo = e
+        this.setState({
+            current: e
+        });
+        this.initData();
+    }
+
+    starTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                starTime: time
+            })
+        }else{
+            this.setState({
+                starTime: ''
+            })
+        }
         
     }
 
-    onChange(date, dateString){
-        console.log(date, dateString);
-    }
-        // 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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+    endTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                endTime: time
+            })
+        }else{
+            this.setState({
+                endTime: ''
+            })
+        }
+    }
+    handleChange_1(e) { //订单状态
+        this.state.params.orderStatus = e
+    }
+
+    handleChange_2(e) {  //支付方式
+        this.state.params.payType = e
+    }
+
+    handleChange_3(e) {  //时间类型
+        this.state.params.timeType = e
+        this.setState({
+            timeType : e
+        });
+        if(e == 0){
+            this.setState({
+                starTime: '',
+                endTime: '',
+                keys : new Date().getTime(),
+                keye : new Date().getTime() * 1000,
+            });
+        }
+    }
+
+    queryClick() {
+        if(this.state.timeType !== 0 && this.state.timeType !== null){
+            if(this.state.endTime <= this.state.starTime && (this.state.starTime !== '' && this.state.endTime !== '')){
+                message.error('结束时间不可小于或者等于开始时间!');
+            }else{
+                if(this.state.starTime == '' && this.state.endTime == ''){
+                    this.initData()
+                }else if(this.state.starTime !== '' && this.state.endTime !== ''){
+                    this.initData()
+                }else{
+                    if(this.state.starTime == ''){
+                        message.error('请选择开始时间!');
+                    }else if(this.state.endTime == ''){
+                        message.error('请选择结束时间!');
+                    }
+                }
+            }
+        }else{
+            this.initData()
+        }
+    }
+
+    TableToExcel(){
+        message.error('暂不支持导出功能!');
+    }
+
+    initData() {
+        this.setState({
+            lodings : true
+        })
+        let orderNo = document.getElementById("orderNo").value //商城订单号
+        let userName = document.getElementById("userName").value //发起人
+        let that_ = this;
+        let url = '/payment/merchant.order.query.groovy';
+        let params = this.state.params;
+        this.state.params.orderNo = orderNo;
+        this.state.params.userName = userName;
+        this.state.params.begTime = this.state.starTime
+        this.state.params.endTime = this.state.endTime
+        $Axios('get', url, params, (res) => {
+            let status = res.data.head.status;
+            if (status == 200) {
+                let data = res.data.body.list;
+                let arr = [];
+                data.map((item, index) => {
+                    let obj = {
+                        num: index + 1,
+                        id: item.id, // 记录标识
+                        orderNo: item.orderNo, //商城订单号
+                        tradeNo: item.tradeNo,//交易流水号
+                        totalAmount: item.totalAmount, //订单总额
+                        cash: item.cash,//订单支付现金
+                        stbPrice: item.stbPrice,//订单支付联盟币抵扣的现金价格
+                        benbiPrice: item.benbiPrice, //订单支付本币抵扣的现金价格
+                        spareAmount: item.spareAmount, //分账金额
+                        refundAmount: item.refundAmount,//退款金额
+                        payType: that_.payTypeList(item.payType),//支付方式：1支付宝2微信5微包
+                        orderStatus: that_.orderStatus(item.orderStatus),//订单状态：1：未付款2：已付待入账3：已付已入账4：支付失败
+                        createTime: item.createTime == '' ? '--' : format(Number(item.createTime)), //:创建时间
+                        finishTime: item.finishTime == '' ? '--' : format(Number(item.finishTime))  //:完成时间
+                    };
+                    arr.push(obj)
+                });
+                let total = res.data.body.totalCount;
+                that_.state.paginationProps.total = total
+                that_.setState({
+                    data: arr,
+                    total: total,  //数据的总的条数
+                    lodings : false
+                })
+            }
+
+        })
+    }
 
+    payTypeList(e) {
+        let txt;
+        if (e == 1) {
+            txt = '支付宝'
+        } else if (e == 2) {
+            txt = '微信'
+        } else if (e == 5) {
+            txt = '余额'
+        }
+        return txt
+    }
+
+    orderStatus(e) {
+        let txt;
+        if (e == 1) {
+            txt = '未付款'
+        } else if (e == 2) {
+            txt = '已付待入账'
+        } else if (e == 3) {
+            txt = '已付已入账'
+        } else if (e == 4) {
+            txt = '支付失败'
+        } else if (e == 0) {
+            txt = '--'
+        }
+        return txt
+    }
 
     render() {
-        const { data , columns , headTxt, certificate } = this.state;
+        const { data, columns, headTxt, keys,keye, select_data, timeType, paginationProps , isModalVisible , columns_tk , payOrderInfo , orderSplitInfo ,orderNo , lodings} = this.state;
         const { Option } = Select;
-        return(
+        return (
             <div className='wrap_table'>
                 <div className='header_center'>
-                   { headTxt }
-               </div>
-               <div className='query_table'>
-                   <div className='top_div'>
-                        <div style={{display : 'inline-block',}}> 订单状态 ： </div>
-                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight : '20px' }}>
-                            {certificate.map((item,index) => (
-                                <Option key={index} value={item.value}>{item.txt}</Option>
+                    {headTxt}
+                </div>
+                <div className='query_table'>
+                    <div className='top_div'>
+                        <div style={{ display: 'inline-block', }}> 订单状态 ： </div>
+                        <Select size='default' placeholder="请选择" onChange={this.handleChange_1.bind(this)} style={{ width: 200, marginRight: '20px' }}>
+                            {select_data.OrderType.map((item, index) => (
+                                <Option key={index} value={item.value}>{item.label}</Option>
                             ))}
                         </Select>
-                        <Select size='default' placeholder="商户订单号"  onChange={ this.handleChange } style={{ width: 200 }}>
-                            {certificate.map((item,index) => (
-                                <Option key={index} value={item.value}>{item.txt}</Option>
-                            ))}
+                        <div style={{ display: 'inline-block', }}> 商户订单号 ： </div>
+                        <div style={{ width: '200px', display: 'inline-block', marginLeft: '20px' }}><Input id='orderNo' placeholder="请输入订单号" /></div>
+                    </div>
+                    <div className='btm_div'>
+                        <div style={{ display: 'inline-block', }}> 发起人 ： </div>
+                        <div style={{ width: '200px', display: 'inline-block', marginLeft: '20px', marginRight: '20px' }}><Input id='userName' placeholder="请输入用户名" /></div>
+                        <div style={{ display: 'inline-block', }}> 支付方式 ： </div>
+                        <Select size='default' placeholder="请选择" onChange={this.handleChange_2.bind(this)} style={{ width: 200, marginRight: '20px' }}>
+                            <Option key={1} value={2}>微信</Option>
+                            <Option key={2} value={1}>支付宝</Option>
+                            <Option key={3} value={5}>钱包余额</Option>
                         </Select>
-                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px'}}><Input placeholder="请输入订单号" /></div>
-                   </div>
-                   <div className='btm_div'>
-                        <div style={{display : 'inline-block',}}> 发起人 ： </div>
-                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px',marginRight:'20px'}}><Input placeholder="请输入用户名" /></div>
-                        <div style={{display : 'inline-block',}}> 支付方式 ： </div>
-                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
-                            {certificate.map((item,index) => (
-                                <Option key={index} value={item.value}>{item.txt}</Option>
-                            ))}
-                        </Select>
-                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                        <Select size='default' placeholder="请选择时间类型" onChange={this.handleChange_3.bind(this)} style={{ width: 200, marginRight: '20px' }}>
+                            <Option key={0} value={0}>不限时间类型</Option>
                             <Option key={1} value={1}>完成时间</Option>
                             <Option key={2} value={2}>下单时间</Option>
                         </Select>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keys} onChange={this.starTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false} placeholder='请选择开始时间' />
                         </Space>
-                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <div style={{ display: 'inline-block', margin: '0px 10px', color: '#d9d9d9' }}>-</div>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keye} onChange={this.endTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false}  placeholder='请选择结束时间' />
                         </Space>
-                   </div>
-               </div>
-               <div className='tables'>
-                    <Table columns={columns} dataSource={data} />
-               </div>
+                        
+
+                        <Button type="primary" style={{
+                            float: 'right', display: 'inline-block', margin: '0px 10px', marginRight: '20px'
+                        }} onClick={this.TableToExcel.bind(this)}>导出</Button>
+                        <Button type="primary" style={{
+                            float: 'right', display: 'inline-block', margin: '0px 10px',
+                        }} onClick={this.queryClick.bind(this)}>搜索</Button>
+
+                    </div>
+                </div>
+                <div className='tables'>
+                    <Table
+                        columns={columns}
+                        dataSource={data}
+                        pagination={paginationProps}
+                        loading = {lodings}
+                    />
+                </div>
+                <Modal title="订单金额流向"
+                        footer={[
+                            <Button key="submit" type="primary" onClick={this.handleOk.bind(this)}>
+                                确定
+                            </Button>,
+                        ]}
+                        visible={isModalVisible}
+                        closable={false}
+                    // onOk={this.handleOk} 
+                    >
+                        {
+                            (payOrderInfo !== {} && payOrderInfo !== null) &&
+                            <div>
+                                <p style={{fontSize : '16px',fontWeight : '600'}}>订单信息</p>
+                                <p>商户订单号 : {orderNo}</p>
+                                <p>订单金额 : {payOrderInfo.totalAmount}</p>
+                                <p>支付金额 : {payOrderInfo.cash}</p>
+                                <p>本金金额 : {payOrderInfo.stbPrice}</p>
+                                <p>积分币金额 : {payOrderInfo.benbiPrice}</p>
+                            </div>
+                        }
+                       { (orderSplitInfo !== [] && orderSplitInfo !== null) &&
+                            <div>
+                                <p style={{fontSize : '16px',fontWeight : '600'}}>订单金额流向信息</p>
+                                <Table
+                                    columns={columns_tk}
+                                    dataSource={orderSplitInfo}
+                                />
+                            </div>
+                       }
+                    </Modal>
             </div>
         )
     }

src/component/Finance-orderQuery/Finance-orderQuery.scss

@@ -13,7 +13,7 @@
 }
 .tables{
     width: 100%;
-    height: calc(100% - 180px);
+    // height: calc(100% - 180px);
     padding: 20px;
 }
 .query_table{

src/component/Income-record/Income-record.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import { Button, Table ,Select, message, DatePicker, Space } from 'antd';
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
 import { $Axios } from '../../common/publish';
@@ -10,102 +10,213 @@ export default class IncomeRecord extends React.Component {
         super(props)
         this.state = {
             headTxt : '财务管理 > 分账收益记录',
-            data : [
-                {
-                  key: '1',
-                  name: 'John Brown',
-                  age: 32,
-                  address: 'New York No. 1 Lake Park',
-                },
+            data : [],
+              columns : [
                 {
-                  key: '2',
-                  name: 'Jim Green',
-                  age: 42,
-                  address: 'London No. 1 Lake Park',
+                    title: '序号',
+                    dataIndex: 'num',
+                    key: 'num',
                 },
                 {
-                  key: '3',
-                  name: 'Joe Black',
-                  age: 32,
-                  address: 'Sidney No. 1 Lake Park',
+                    title: '分账流水号',
+                    dataIndex: 'requestId',
+                    key: 'requestId',
                 },
-              ],
-              columns : [
                 {
-                    title: '序号',
-                    dataIndex: 'name',
-                    key: 'name',
-                    
+                    title: '分账金额',
+                    dataIndex: 'amount',
+                    key: 'amount',
                 },
                 {
-                    title: '签约名称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '关联分账商户',
+                    dataIndex: 'ownerName',
+                    key: 'ownerName',
                 },
                 {
-                    title: '商户简称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '创建时间',
+                    dataIndex: 'createTime',
+                    key: 'createTime',
                 },
                 {
-                    title: '入网时间',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '到账完成时间',
+                    dataIndex: 'finishTime',
+                    key: 'finishTime',
                 },
                 {
-                    title: '操作',
-                    dataIndex: 'age',
-                    key: 'age',
-                    render: text => <a>查看详情</a>,
+                    title: '分账状态',
+                    dataIndex: 'status',
+                    key: 'status',
                 },
             ],
-            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 },
-            ]
+            timeType : null,
+            keys : 1,
+            starTime : '',
+            endTime : '',
+            status : '',
+            total: null,
+            current: 1,
+            paginationProps: {
+                showSizeChanger: false,//设置每页显示数据条数
+                showQuickJumper: false,
+                showTotal: () => `共${this.state.total}条`,
+                pageSize: 10,
+                total: null,  //数据的总的条数
+                onChange: (current) => this.changePage(current), //点击当前页码
+            },
+            lodings : null,
         }
         
     }
 	
 	componentDidMount() {
-        
+        this.initData()
     }
 
     onChange(date, dateString){
         console.log(date, dateString);
     }
-        // 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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+
+
+    queryClick(){
+
+        if(this.state.timeType !== 0 && this.state.timeType !== null){
+            if(this.state.endTime <= this.state.starTime && (this.state.starTime !== '' && this.state.endTime !== '')){
+                message.error('结束时间不可小于或者等于开始时间!');
+            }else{
+                if(this.state.starTime == '' && this.state.endTime == ''){
+                    this.initData()
+                }else if(this.state.starTime !== '' && this.state.endTime !== ''){
+                    this.initData()
+                }else{
+                    if(this.state.starTime == ''){
+                        message.error('请选择开始时间!');
+                    }else if(this.state.endTime == ''){
+                        message.error('请选择结束时间!');
+                    }
+                }
+            }
+        }else{
+            this.initData()
+        }
+      
+    }
+
+    initData(){
+        this.setState({
+            lodings : true
+        })
+        let that_ = this;
+        let url = '/payment/spare.bill.list.groovy';
+        let params = {
+            userId: '',//当前登陆用户userid
+            ownerId:'',//关联分账商户
+            status: this.state.status,//分账状态，1：分账成功2：分账中3：分账撤回
+            createTimeStart : '',//创建开始时间
+            createTimeEnd : '',//创建结束时间
+            finishTimeStart : '',//完成开始时间
+            finishTimeEnd : '',//完成结束时间
+            psize:10,//每页大小
+            pno:1 //第几页，起始值从1开始
+        }
+        let timeType = this.state.timeType;
+        if(timeType == 0){
+            params.createTimeStart = ''
+            params.createTimeEnd = ''
+            params.finishTimeStart = ''
+            params.finishTimeEnd = ''
+        }else if(timeType == 1){
+            params.createTimeStart = this.state.starTime
+            params.createTimeEnd = this.state.endTime
+            params.finishTimeStart = ''
+            params.finishTimeEnd = ''
+        }else if(timeType == 2){
+            params.finishTimeStart = this.state.starTime
+            params.finishTimeEnd = this.state.endTime
+            params.createTimeStart = ''
+            params.createTimeEnd = ''
+        }
+        $Axios('get',url,params,(res) => {
+            let status = res.data.head.status;
+            if(status == 200){
+                let data = res.data.body.list;
+                let arr = [];
+                data.map((item,index) => {
+                    let obj = {
+                        num : index + 1,
+                        amount: item.amount,
+                        createTime: item.createTime,
+                        finishTime: item.finishTime,
+                        id: item.id,
+                        ownerId: item.ownerId,
+                        requestId: item.requestId,
+                        status: item.status
+                    };
+                    arr.push(obj)
+                })
+                let total = res.data.body.totalCount;
+                that_.state.paginationProps.total = total;
+                that_.setState({
+                    data: arr,
+                    total: total,  //数据的总的条数
+                    lodings : false
+                })
+            }
+        })
+    }
+    
+    handleChange_2(e) {  //分账状态
+        this.setState({
+            status : e
+        })
+    }
+
+    handleChange_5(e) {
+        this.setState({
+            timeType : e
+        });
+        if(e == 0){
+            this.setState({
+                starTime: '',
+                endTime: '',
+                keys : new Date().getTime()
+            });
+        }
+    }
+
+
+    starTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                starTime: time
+            })
+        }else{
+            this.setState({
+                starTime: ''
+            })
+        }
+        
+    }
+
+    endTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                endTime: time
+            })
+        }else{
+            this.setState({
+                endTime: ''
+            })
+        }
+    }
+        
 
 
     render() {
-        const { data , columns , headTxt, certificate } = this.state;
+        const { data , columns , headTxt ,timeType,keys,paginationProps,lodings } = this.state;
         const { Option } = Select;
         return(
             <div className='wrap_table'>
@@ -121,26 +232,35 @@ export default class IncomeRecord extends React.Component {
                             <Option key={3} value={3}>提现失败</Option>
                         </Select>
                         <div style={{display : 'inline-block',}}> 分账状态 ： </div>
-                        <Select size='default' placeholder="请选择分账状态"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                        <Select size='default' placeholder="请选择分账状态"  onChange={ this.handleChange_2.bind(this) } style={{ width: 200,marginRight:'20px' }}>
                             <Option key={1} value={1}>分账中</Option>
                             <Option key={2} value={2}>分账成功</Option>
-                            <Option key={2} value={2}>分账撤回</Option>
+                            <Option key={3} value={3}>分账撤回</Option>
                         </Select>
-                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                        <Select size='default' placeholder="请选择时间类型"  onChange={this.handleChange_5.bind(this)} style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={0} value={0}>不限时间类型</Option>
                             <Option key={1} value={1}>创建时间</Option>
                             <Option key={2} value={2}>到账完成时间</Option>
                         </Select>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keys} onChange={this.starTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false} placeholder='请选择开始时间' />
                         </Space>
-                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <div style={{ display: 'inline-block', margin: '0px 10px', color: '#d9d9d9' }}>-</div>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keys} onChange={this.endTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false}  placeholder='请选择结束时间' />
                         </Space>
+                        <Button type="primary" style={{
+                            float: 'right', display: 'inline-block', margin: '15px 60px',
+                        }} onClick={this.queryClick.bind(this)}>搜索</Button>
                    </div>
                </div>
                <div className='tables'>
-                    <Table columns={columns} dataSource={data} />
+                    <Table 
+                        columns={columns} 
+                        dataSource={data} 
+                        pagination={paginationProps}
+                        loading = {lodings}
+                    />
                </div>
             </div>
         )

src/component/Layout/Layout.jsx

@@ -11,7 +11,11 @@ export default class Layout extends React.Component {
         super(props)
         this.state = {
             headTxt : '商户入网 > 商户基本信息',
-            htmls : 1
+            htmls : 1,
+            initHtmls : 1,
+            Params_o : {},
+            Params_w : {},
+            Params_S : {}
         }
         
     }
@@ -23,44 +27,144 @@ export default class Layout extends React.Component {
     handleChange(value) {
         console.log(`Selected: ${value}`);
     }
-    btnClick(e){
-        console.log(e)
-        let headTxt = '';
-        if(e == 1){
-            headTxt = '商户入网 > 商户基本信息'
-        }else if(e == 2){
-            headTxt = '商户入网 > 商户资质信息'
-        }else if(e == 3){
-            headTxt = '商户入网 > 结算信息'
-        }
+    bindRef_o = ref => { this.CenterO = ref }
+    bindRef_w = ref => { this.CenterW = ref }
+    bindRef_s = ref => { this.CenterS = ref }
+    // this.CenterW.childMethod().
+    // this.CenterO.childMethod()
+    // btnClick_1(e,n){
+    //     console.log(e,'------------',n)
+    //     let headTxt = '';
+    //     if(e == 1){
+    //         headTxt = '商户入网 > 商户基本信息'
+    //         if( n == 1){   //第一个页面往第二个页面跳转回填数据
+                
+    //         }
+    //     }else if(e == 2){
+    //         headTxt = '商户入网 > 商户资质信息'
+            
+    //     }else if(e == 3){
+    //         headTxt = '商户入网 > 结算信息'
+    //     }
+    //     this.setState({	
+    //         htmls : e,
+    //         headTxt : headTxt,
+    //         initHtmls : n
+    //     });
+        
+    // }
+
+    btnClick_1(){
+        console.log(this.Params_o)
+        let headTxt = '商户入网 > 商户资质信息'
+        let that_ = this;
+        that_.CenterO.childMethod()  //第一页跳第二页保存第一页数据
+        setTimeout(function(){
+            that_.CenterW.childMethod()  //第一页跳第二页回填数据
+        },500)
+        this.setState({	
+            headTxt : headTxt,
+            htmls : 2,
+        });
+        
+    }
+
+    btnClick_2(){
+        let headTxt = '商户入网 > 商户基本信息'
+        let that_ = this;
+        that_.CenterW.childMethod()  //第二页跳第一页保存第二页数据
+        setTimeout(function(){
+            that_.CenterO.childMethod()  //第二页跳第一页回填数据
+        },500)
+        
+        this.setState({	
+            headTxt : headTxt,
+            htmls : 1,
+        })
+        
+    }
+
+    btnClick_3(){
+        let headTxt = '商户入网 > 结算信息'
+        let that_ = this;
+        that_.CenterW.childMethod()  //第二页跳第三页保存第二页数据
+        setTimeout(function(){
+            that_.CenterS.childMethod()  //第二页跳第三页回填数据
+        },500)
+        this.setState({	
+            headTxt : headTxt,
+            htmls : 3,
+        });
+    }
+
+    btnClick_4(){
+        let headTxt = '商户入网 > 结算信息'
+        let that_ = this;
+        that_.CenterS.childMethod()  //第三页跳第二页保存第三页数据
+        setTimeout(function(){
+            that_.CenterW.childMethod()  //第三页跳第二页回填数据
+        },500)
+        
         this.setState({	
-            htmls : e,
-            headTxt : headTxt
+            headTxt : headTxt,
+            htmls : 2,
         })
     }
 
-        // 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,
-        //             })
-        //         }
-        //     }
+
+
+    getParams_o = (result, msg) => {
+        // console.log(msg)
+        this.setState({
+            Params_o: msg
+        })
+    }
+
+    getParams_w = (result, msg) => {
+        // console.log(msg)
+        this.setState({
+            Params_w: msg
+        })
+    }
+
+    getParams_s = (result, msg) => {
+        console.log(msg)
+        this.setState({
+            Params_S: msg
+        })
+    }
+    initData(){
+       
+        let url = '/payment/merchant.declaration.groovy'
+        let params = {
+            operationType : 1, // ：1：CREATE创建即入网，2：MODIFY更新即修改(审核通过前)
+            name : '融生天下',
+            appName : '吕卓',
+            parentAppName :　'融生天下' , //当前用户所属的上级商家或者商城
+            merchantNo : '249',
+            merchantType : '3',
+            merchantInfo : {     //原首易信接口参数
+                merchantId : '', //商户在首信易系统的唯一身份标识，商户完成首信易系统注册后可登录商户后台商户服务查看
+                requestId : '', //订单号为商户自行拟定，提交的订单号必须在自身平台交易中唯一。商户平台不能以相同的订单号再次提交。
+                operationType : 'CREATE', // ：1：CREATE创建即入网，2：MODIFY更新即修改(审核通过前)
+                notifyUrl : '',//服务器通知：当订单状态发生变更后会向该地址发送五次通知，该地址可以带参数，如:“https://www.5upay.com/callback.action?test=test”.注意：如不填notifyUrl的参数值成功后您的服务器将得不到通知。
+                extendedParameters : {//autoReview 是否跳过流程 TRUE 是， FALSE 否 sendActiveEmail 是否发送激活邮件 TRUE 是， FALSE 否 （这两项参数传递用”,”隔开，示例：autoReview:FALSE,sendActiveEmail:TRUE）
+                    autoReview:false,sendActiveEmail:true
+                }, 
+                baseInfo : {//商户基本信息
+
+                }, 
+
+            }
+
+
+        }
+        $Axios('post',url,params,(res) => {
+            
            
-        // })
+        })
+    }
+      
 
 
     render() {
@@ -72,15 +176,15 @@ export default class Layout extends React.Component {
                </div>
                <div className='main_center'>
                     <div className='center_ups'>
-                        {htmls === 1 && (<CenterO></CenterO>)}
-                        {htmls === 2 && (<CenterW></CenterW>)}
-                        {htmls === 3 && (<CenterS></CenterS>)}
+                        {htmls === 1 && (<CenterO arr={this.state.Params_o}  parent={ this }  onRef={this.bindRef_o}></CenterO>)}
+                        {htmls === 2 && (<CenterW arr={this.state.Params_w}  parent={ this }  onRef={this.bindRef_w}></CenterW>)}
+                        {htmls === 3 && (<CenterS arr={this.state.Params_S}  parent={ this }  onRef={this.bindRef_s}></CenterS>)}
                     </div>
                     <div className='center_bottom'>
-                            {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(2)} >上一步</Button>}
+                            {htmls === 1 && <Button className='btn btn_next' type="primary" onClick={() =>this.btnClick_1()} >下一步</Button>}
+                            {htmls === 2 && <Button className='btn btn_xg' onClick={() =>this.btnClick_2()} >上一步</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_4()} >上一步</Button>}
                             {htmls === 3 && <Button className='btn btn_next' type="primary" onClick={() =>this.btnClick('ok')} >提交</Button>}
                     </div>
                </div>

src/component/Refund-inquiry/Refund-inquiry.jsx

@@ -1,162 +1,444 @@
 import React from 'react';
-import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import { Button, Table, Select, Input, DatePicker, Space,message,Modal,Steps, Popover } from 'antd';
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
-import { $Axios } from '../../common/publish';
+import { $Axios , format } from '../../common/publish';
 import '../Refund-inquiry/Refund-inquiry.scss'
 const { Column, ColumnGroup } = Table;
+const { Step } = Steps;
+const that_ = this;
 export default class RefundInquiry extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            headTxt : '财务管理 > 退款查询',
-            data : [
+            headTxt: '财务管理 > 退款查询',
+            data: [],
+            columns: [
                 {
-                  key: '1',
-                  name: 'John Brown',
-                  age: 32,
-                  address: 'New York No. 1 Lake Park',
+                    title: '序号',
+                    dataIndex: 'num',
+                    key: 'num',
                 },
                 {
-                  key: '2',
-                  name: 'Jim Green',
-                  age: 42,
-                  address: 'London No. 1 Lake Park',
+                    title: '订单号',
+                    dataIndex: 'orderNo',
+                    key: 'orderNo',
                 },
                 {
-                  key: '3',
-                  name: 'Joe Black',
-                  age: 32,
-                  address: 'Sidney No. 1 Lake Park',
+                    title: '订单金额',
+                    dataIndex: 'totalAmount',
+                    key: 'totalAmount',
                 },
-              ],
-              columns : [
                 {
-                    title: '序号',
-                    dataIndex: 'name',
-                    key: 'name',
-                    
+                    title: '支付金额',
+                    dataIndex: 'cash',
+                    key: 'cash',
+                },
+                {
+                    title: '本金金额',
+                    dataIndex: 'stbPrice',
+                    key: 'stbPrice',
+                },
+                {
+                    title: '积分币金额',
+                    dataIndex: 'benbiPrice',
+                    key: 'benbiPrice',
+                },
+                {
+                    title: '退款金额',
+                    dataIndex: 'refundAmount',
+                    key: 'refundAmount',
                 },
                 {
-                    title: '签约名称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '退款请求时间',
+                    dataIndex: 'createTime',
+                    key: 'createTime',
                 },
                 {
-                    title: '商户简称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '退款完成时间',
+                    dataIndex: 'finishTime',
+                    key: 'finishTime',
                 },
                 {
-                    title: '入网时间',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: '支付方式',
+                    dataIndex: 'payType',
+                    key: 'payType',
+                },
+                {
+                    title: '退款状态',
+                    dataIndex: 'orderStatus',
+                    key: 'orderStatus',
                 },
                 {
                     title: '操作',
-                    dataIndex: 'age',
-                    key: 'age',
-                    render: text => <a>查看详情</a>,
+                    dataIndex: 'cz',
+                    key: 'cz',
+                    render: (text, record, index) => <a onClick={() => this.xqClick(text, record, index)}>查看详情</a>,
                 },
             ],
-            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 },
-            ]
+            params: {
+                action: "refundList",   //查询订单退款记录
+                appName: JSON.parse(localStorage.getItem('userData')).appName,//当前商户的appName
+                pSize: 10, //每页条数
+                pNo: 1,//第几页，起始值从1开始
+                orderStatus: '', //退款状态：1 处理中PROCESS, 2 成功SUCCESS, 3 失败FAIL 
+                orderNo: '',//商城订单号
+                requestId: '',//退款请求号
+                userName: '', //发起人
+                payType: '',//支付方式： 1支付宝 2微信 5 微包
+                timeType: '',//为0或不提供此字段，表示不限制， 1 创建时间，2完成时间
+                begTime: '', //开始时间时间戳
+                endTime: '', // 结束时间时间戳
+            },
+            total: null,
+            current: 1,
+            paginationProps: {
+                showSizeChanger: false,//设置每页显示数据条数
+                showQuickJumper: false,
+                showTotal: () => `共${this.state.total}条`,
+                pageSize: 10,
+                total: null,  //数据的总的条数
+                onChange: (current) => this.changePage(current), //点击当前页码
+            },
+            lodings : null,
+            types : null,
+            timeType : null,
+            starTime : '',
+            endTime : '',
+            keys : 1,
+            isModalVisible : false,
+            refundInfo : '',
+            userInfo : ''
+        }
+
+    }
+
+    componentDidMount() {
+        this.initData()
+    }
+
+
+    initData() {
+        this.setState({
+            lodings : true
+        })
+        let that_ = this;
+        let orderNo = document.getElementById("orderNo").value //商城订单号
+        let userName = document.getElementById("userName").value //发起人
+        let url = '/payment/merchant.order.query.groovy'
+        let params = this.state.params;
+        if(this.state.types == 1){
+            this.state.params.orderNo = orderNo;
+            this.state.params.requestId = '';
+        }else{
+            this.state.params.requestId = orderNo;
+            this.state.params.orderNo = '';
+        }
+        this.state.params.begTime = this.state.starTime
+        this.state.params.endTime = this.state.endTime
+        this.state.params.userName = userName;
+        $Axios('get', url, params, (res) => {
+            let status = res.data.head.status;
+            if (status == 200) {
+                let data = res.data.body.list;
+                let arr = [];
+                data.map((item,index) => {
+                    let obj = {
+                        num : index + 1,
+                        benbiPrice: item.benbiPrice,
+                        cash: item.cash,
+                        createTime: item.createTime == '' ? '--' : format(Number(item.createTime)), //:创建时间
+                        finishTime: item.finishTime == '' ? '--' : format(Number(item.finishTime)),  //:完成时间
+                        id: item.id,
+                        orderNo: item.orderNo,
+                        orderStatus: that_.orderStatus(item.payType),
+                        payType: that_.payTypeList(item.payType),
+                        refundAmount: item.refundAmount,
+                        requestId: item.requestId,
+                        stbPrice: item.stbPrice,
+                        totalAmount: item.totalAmount,
+                    };
+                    arr.push(obj)
+                })
+                let total = res.data.body.totalCount;
+                that_.state.paginationProps.total = total;
+                that_.setState({
+                    data: arr,
+                    total: total,  //数据的总的条数
+                    lodings : false
+                })
+            }else{
+                message.info(res.data.body);
+                that_.setState({
+                    data: [],
+                    total: 0,  //数据的总的条数
+                    lodings : false
+                })
+            }
+
+        })
+    }
+
+    xqClick(text, record, index){
+        this.setState({
+            isModalVisible : true
+        });
+        this.initData_tk(record)
+    }
+
+    handleOk(){
+        this.setState({
+            isModalVisible : false
+        })
+    }
+
+    initData_tk(e){
+        let that_ = this;
+        let url = '/payment/merchant.order.query.groovy';
+        let params = {
+            action : "refundDetail",//查询订单金额流向
+            requestId : e.requestId,//商城订单号
+        }
+        $Axios('get', url, params, (res) => {
+            console.log(res)
+            let status = res.data.head.status;
+            if (status == 200) {
+                let refundInfo = res.data.body.refundInfo;
+                let userInfo = res.data.body.userInfo;
+                that_.setState({
+                    refundInfo : refundInfo,
+                    userInfo : userInfo
+                })
+            }
+        })
+    }
+
+
+    payTypeList(e) {
+        let txt;
+        if (e == 1) {
+            txt = '支付宝'
+        } else if (e == 2) {
+            txt = '微信'
+        } else if (e == 5) {
+            txt = '余额'
+        }
+        return txt
+    }
+
+    orderStatus(e) {
+        let txt;
+        if (e == 2) {
+            txt = '成功'
+        } else if (e == 3) {
+            txt = '失败'
+        } else if (e == 1) {
+            txt = '处理中'
+        }
+        return txt
+    }
+
+
+    handleChange_1(e) {  //退款状态
+        this.state.params.orderStatus = e
+    }
+
+    handleChange_2(e) {  //支付方式
+        this.state.params.payType = e
+    }
+
+    handleChange_3(e) {
+        this.setState({
+            types : e
+        })
+    }
+
+    handleChange_4(e) {
+    }
+
+    handleChange_5(e) {
+        this.state.params.timeType = e
+        this.setState({
+            timeType : e
+        });
+        if(e == 0){
+            this.setState({
+                starTime: '',
+                endTime: '',
+                keys : new Date().getTime()
+            });
+        }
+    }
+
+    queryClick() {
+        if(this.state.timeType !== 0 && this.state.timeType !== null){
+            if(this.state.endTime <= this.state.starTime && (this.state.starTime !== '' && this.state.endTime !== '')){
+                message.error('结束时间不可小于或者等于开始时间!');
+            }else{
+                if(this.state.starTime == '' && this.state.endTime == ''){
+                    this.initData()
+                }else if(this.state.starTime !== '' && this.state.endTime !== ''){
+                    this.initData()
+                }else{
+                    if(this.state.starTime == ''){
+                        message.error('请选择开始时间!');
+                    }else if(this.state.endTime == ''){
+                        message.error('请选择结束时间!');
+                    }
+                }
+            }
+        }else{
+            this.initData()
         }
         
     }
-	
-	componentDidMount() {
+
+    changePage(e) {
+        this.state.params.pNo = e
+        this.setState({
+            current: e
+        });
+        this.initData();
+    }
+
+
+    starTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                starTime: time
+            })
+        }else{
+            this.setState({
+                starTime: ''
+            })
+        }
         
     }
 
-    onChange(date, dateString){
-        console.log(date, dateString);
-    }
-        // 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, certificate } = this.state;
+    endTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                endTime: time
+            })
+        }else{
+            this.setState({
+                endTime: ''
+            })
+        }
+    }
+
+
+
+    render() { 
+        const { data, columns, headTxt , paginationProps,lodings,types,timeType,keys,isModalVisible , refundInfo ,userInfo } = this.state;
         const { Option } = Select;
-        return(
+        return (
             <div className='wrap_table'>
                 <div className='header_center'>
-                   { headTxt }
-               </div>
-               <div className='query_table'>
-                   <div className='top_div'>
-                        <div style={{display : 'inline-block',}}> 退款状态 ： </div>
-                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight : '20px' }}>
-                            <Option key={1} value={1}>成功</Option>
-                            <Option key={2} value={2}>失败</Option>
-                            <Option key={3} value={3}>处理中</Option>
-                            <Option key={4} value={4}>取消</Option>
-                        </Select>
-                        <div style={{display : 'inline-block',}}> 订单类型 ： </div>
-                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
-                            <Option key={1} value={1}>网购</Option>
-                            <Option key={2} value={2}>线下消费</Option>
+                    {headTxt}
+                </div>
+                <div className='query_table'>
+                    <div className='top_div'>
+                        <div style={{ display: 'inline-block', }}> 退款状态 ： </div>
+                        <Select size='default' placeholder="请选择" onChange={this.handleChange_1.bind(this)} style={{ width: 200, marginRight: '20px' }}>
+                            <Option key={1} value='2'>成功</Option>
+                            <Option key={2} value='3'>失败</Option>
+                            <Option key={3} value='1'>处理中</Option>
                         </Select>
-                        <Select size='default' placeholder="订单号选择"  onChange={ this.handleChange } style={{ width: 200 }}>
-                        <Option key={1} value={1}>商户订单号</Option>
+                        <Select size='default' placeholder="订单号类型选择"  onChange={  this.handleChange_3.bind(this)  } style={{ width: 200 }}>
+                            <Option key={1} value={1}>商户订单号</Option>
                             <Option key={2} value={2}>退款请求号</Option>
                         </Select>
-                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px'}}><Input placeholder="请输入订单号" /></div>
-                   </div>
-                   <div className='btm_div'>
-                        <div style={{display : 'inline-block',}}> 发起人 ： </div>
-                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px',marginRight:'20px'}}><Input placeholder="请输入用户名" /></div>
-                        <div style={{display : 'inline-block',}}> 支付方式 ： </div>
-                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
-                            {certificate.map((item,index) => (
-                                <Option key={index} value={item.value}>{item.txt}</Option>
-                            ))}
+                        <div style={{ width: '200px', display: 'inline-block', marginLeft: '20px' }}><Input id='orderNo' disabled={types == null ? true : false} placeholder={types == 2 ? '请出入退款请求号' : '请输入商城订单号'} /></div>
+                    </div>
+                    <div className='btm_div'>
+                        <div style={{ display: 'inline-block', }}> 发起人 ： </div>
+                        <div style={{ width: '200px', display: 'inline-block', marginLeft: '20px', marginRight: '20px' }}><Input id='userName' placeholder="请输入用户名" /></div>
+                        <div style={{ display: 'inline-block', }}> 支付方式 ： </div>
+                        <Select size='default' placeholder="请选择" onChange={this.handleChange_2.bind(this)} style={{ width: 200, marginRight: '20px' }}>
+                            <Option key={1} value={2}>微信</Option>
+                            <Option key={2} value={1}>支付宝</Option>
+                            <Option key={3} value={5}>钱包余额</Option>
                         </Select>
-                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                        <Select size='default' placeholder="请选择时间类型" onChange={this.handleChange_5.bind(this)} style={{ width: 200, marginRight: '20px' }}>
+                            <Option key={1} value={0}>不限时间类型</Option>
                             <Option key={1} value={1}>退款请求时间</Option>
                             <Option key={2} value={2}>退款完成时间</Option>
                         </Select>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keys} onChange={this.starTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false} placeholder='请选择开始时间' />
                         </Space>
-                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <div style={{ display: 'inline-block', margin: '0px 10px', color: '#d9d9d9' }}>-</div>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keys} onChange={this.endTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false}  placeholder='请选择结束时间' />
                         </Space>
-                   </div>
-               </div>
-               <div className='tables'>
-                    <Table columns={columns} dataSource={data} />
-               </div>
+                        <Button type="primary" style={{
+                            float: 'right', display: 'inline-block', margin: '0px 10px', marginRight: '20px'
+                        }}>导出</Button>
+                        <Button type="primary" style={{
+                            float: 'right', display: 'inline-block', margin: '0px 10px',
+                        }} onClick={this.queryClick.bind(this)}>搜索</Button>
+                    </div>
+                </div>
+                <div className='tables'>
+                    <Table 
+                    columns={columns} 
+                    dataSource={data} 
+                    pagination={paginationProps}
+                    loading = {lodings}
+                    />
+                </div>
+                <Modal title="退款详情"
+                        wrapClassName={'webs'}
+                        footer={[
+                            <Button key="submit" type="primary" onClick={this.handleOk.bind(this)}>
+                                确定
+                            </Button>,
+                        ]}
+                        visible={isModalVisible}
+                        closable={false}
+                    // onOk={this.handleOk} 
+                    >
+                        <div>
+                            <div style={{
+                                width:'50%',
+                                height : '300px',
+                                float:'left',
+                            }}>
+                                <p style={{fontSize : '16px',fontWeight : '600'}}>付款人信息</p>
+                                <p>用户人 : {userInfo.nickname}</p>
+                                <p>电话 : {userInfo.mobile}</p>
+                                <p>邮箱 : {userInfo.email}</p>
+                                <p>支付时间 : {userInfo.nickname}</p>
+                            </div>
+                            <div style={{
+                                 width:'50%',
+                                 height : '300px',
+                                 float:'left',
+                            }}>
+                                <p style={{fontSize : '16px',fontWeight : '600'}}>退款信息</p>
+                                <p>订单号 : {refundInfo.orderNo}</p>
+                                <p>订单金额 :  {refundInfo.totalAmount}</p>
+                                <p>退款金额 :  {refundInfo.cash}</p>
+                                <p>退款本币 :  {refundInfo.benbiPrice}</p>
+                                <p>退款积分币 :  {refundInfo.stbPrice}</p>
+                                <p>退款原因 :  {refundInfo.remark}</p>
+                                <p>退款账户 :  {refundInfo.orderNo}</p>
+                            </div>
+                        </div>
+                        <div>
+                            <p style={{fontSize : '16px',fontWeight : '600'}}>退款进度</p>
+                            <Steps size="small" current={3} percent={100}>
+                                <Step title="商家同意退款" description="系统会在1-2天内提交处理" />
+                                <Step title="已退款,处理中" subTitle="Left 00:00:08" description="系统处理中" />
+                                <Step title="处理成功" description="已交由微信/支付宝处理,请及时查看账户信息" />
+                            </Steps>
+                        </div>
+                    </Modal>
             </div>
         )
     }

src/component/Refund-inquiry/Refund-inquiry.scss

@@ -32,4 +32,12 @@
         line-height: 60px;
         padding-left: 20px;
     }
+}
+.webs{
+    width: 100%;
+    height: 100%;
+    .ant-modal{
+        width: 800px !important;
+        height: 600px;
+    }
 }

src/component/Withdrawal-record/Withdrawal-record.jsx

@@ -10,26 +10,7 @@ export default class WithdrawalRecord extends React.Component {
         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',
-                },
-              ],
+            data : [],
               columns : [
                 {
                     title: '序号',
@@ -38,74 +19,120 @@ export default class WithdrawalRecord extends React.Component {
                     
                 },
                 {
-                    title: '签约名称',
+                    title: '提现单号',
                     dataIndex: 'age',
                     key: 'age',
                 },
                 {
-                    title: '商户简称',
+                    title: '提现金额',
                     dataIndex: 'age',
                     key: 'age',
                 },
                 {
-                    title: '入网时间',
+                    title: '手续费',
                     dataIndex: 'age',
                     key: 'age',
                 },
                 {
-                    title: '操作',
+                    title: '提现状态',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '提现时间',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '完成时间',
                     dataIndex: 'age',
                     key: 'age',
-                    render: text => <a>查看详情</a>,
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'cz',
+                    key: 'cz',
+                    render: (text, record, index) => <a onClick={() => this.xqClick(text, record, index)}>查看详情</a>,
                 },
             ],
-            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 },
-            ]
+            keys : 1,
+            keye : 2,
+            timeType : null,
         }
         
     }
 	
 	componentDidMount() {
-        
+        this.initData()
+    }
+
+    xqClick(text, record, index){
+        console.log(record)
     }
 
     onChange(date, dateString){
         console.log(date, dateString);
     }
-        // 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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+    
+    initData(){
+        let url = '/payment/merchant.order.query.groovy'
+        let params = {
+            action : "pickupList",//查询商户提现记录
+            appName : JSON.parse(localStorage.getItem('userData')).appName,
+            pSize : 10, //每页条数
+            pNo : 1 //第几页，起始值从1开始
+        }
+        $Axios('get',url,params,(res) => {
+            console.log(res)
+        })
+
+    }
+
+
+    starTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                starTime: time
+            })
+        }else{
+            this.setState({
+                starTime: ''
+            })
+        }
+        
+    }
 
+    endTime = (value,dateString)=>{
+        if(dateString !== ''){
+            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
+            let time = new Date(dateString).getTime()/1000;
+            this.setState({
+                endTime: time
+            })
+        }else{
+            this.setState({
+                endTime: ''
+            })
+        }
+    }
+
+
+    handleChange_1(e){
+        console.log(e)
+    }
+
+    handleChange_2(e){
+        console.log(e)
+    }
+
+    queryClick(){
+
+    }
 
     render() {
-        const { data , columns , headTxt, certificate } = this.state;
+        const { data , columns , headTxt, timeType , keys , keye } = this.state;
         const { Option } = Select;
         return(
             <div className='wrap_table'>
@@ -115,22 +142,25 @@ export default class WithdrawalRecord extends React.Component {
                <div className='query_table_l' style={{height:'60px'}}>
                    <div className='btm_div' style={{height:'100%',lineHeight:'60px',paddingLeft:'20px'}}>
                         <div style={{display : 'inline-block',}}> 提现状态 ： </div>
-                        <Select size='default' placeholder="请选择提现状态"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                        <Select size='default' placeholder="请选择提现状态"  onChange={ this.handleChange_1.bind(this) } style={{ width: 200,marginRight:'20px' }}>
                             <Option key={1} value={1}>提现中</Option>
                             <Option key={2} value={2}>提现成功</Option>
                             <Option key={3} value={3}>提现失败</Option>
                         </Select>
-                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange_2.bind(this)  } style={{ width: 200,marginRight:'20px' }}>
                             <Option key={1} value={1}>创建时间</Option>
                             <Option key={2} value={2}>完成时间</Option>
                         </Select>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keys} onChange={this.starTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false} placeholder='请选择开始时间' />
                         </Space>
-                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <div style={{ display: 'inline-block', margin: '0px 10px', color: '#d9d9d9' }}>-</div>
                         <Space direction="vertical">
-                            <DatePicker onChange={this.onChange} locale={locale}/>
+                            <DatePicker key={keye} onChange={this.endTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false}  placeholder='请选择结束时间' />
                         </Space>
+                        <Button type="primary" style={{
+                            float: 'right', display: 'inline-block', margin: '15px 60px',
+                        }} onClick={this.queryClick.bind(this)}>搜索</Button>
                    </div>
                </div>
                <div className='tables'>

src/component/center-o/centerO.jsx

@@ -1,48 +1,148 @@
 import React from 'react';
 import { Radio, Select, Input  } from 'antd';
 // import { $Axios } from '../../common/publish';
+import select_data from '../../common/ssq';
 import '../center-o/centerO.scss'
 
 export default class centerO 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 },
-            ]
+            selectData : select_data,
+            cityOs : true,
+            regionOs : true, 
+            citylist : [],
+            regionlist : [],
+            Params : this.props.arr,
+            cityTxt : 1,
+            regionTxt : 2,
+            datas : null
         }
         
     }
 	
-	componentDidMount() {
-        
+    componentDidMount () {
+        this.props.onRef(this)
+        this.initData();
+    }
+
+    initData(){
+        if(this.props.arr){  //初始化判断数据回填
+            if(this.state.Params.businessAddressProvince !== undefined){
+                let Province = this.state.Params.businessAddressProvince;
+                let city = this.state.Params.businessAddressCity;
+                let region = this.state.Params.businessAddressArea;
+                let data = this.state.selectData.Area;
+                let cityList = data.find((item,index) => { return Province == item.provinceCode});
+                let regionlist = cityList.mallCityList.find((item,index) => { return city == item.cityCode});
+                this.setState({
+                    cityOs : false,
+                    citylist : cityList.mallCityList,
+                    regionOs : false,
+                    regionlist: regionlist.mallAreaList
+                })
+            }
+        }
+    }
+
+    toParent = (data) => {
+        this.props.parent.getParams_o(this, data)
     }
 
-    handleChange(value) {
-        console.log(`Selected: ${value}`);
+    Inputdata(e){
+        let Params = {
+            signedType : 'BY_SPLIT_BILL',  //签约类型
+            signedName :  document.getElementById("qymc").value, //签约名称
+            signedShorthand : document.getElementById("names").value, //商户简称
+            registerRole : this.state.Params.registerRole , //商户签约性质
+            cerType : this.state.Params.cerType, //证书类型
+            businessAddressProvince : this.state.Params.businessAddressProvince,//经营地省
+            businessAddressCity : this.state.Params.businessAddressCity, //经营地市
+            businessAddressArea : this.state.Params.businessAddressArea, //经营地区
+            businessAddress : document.getElementById("mywb").value,  //经营详细地址
+            contactName : document.getElementById("myname").value, //联系人姓名
+            contactEmail : document.getElementById("mymail").value,// 联系人邮箱
+            contactPhone : document.getElementById("mynums").value,// 联系人电话
+            businessClassification : this.state.Params.businessClassification, //业务分类 (签约类型为被分账方不传此参数)
+            desireAuth : this.state.Params.desireAuth, // 开户意愿核实类型
+        }
+        return Params
+    }
+
+    handleChangeQy(e) {  //商户签约性质
+        let registerRole = e;
+        this.state.Params.registerRole = registerRole;
+        // console.log(this.state.Params)
+    }
+
+    handleChangeZs(e) {  //商户证书类型
+        let cerType = e;
+        this.state.Params.cerType = cerType;
+        // console.log(this.state.Params)
+    }
+
+    province_select(e) {  //选择省
+        this.state.Params.businessAddressProvince = e;
+        let citylist = this.state.selectData.Area.find((item,index) => { return e == item.provinceCode});
+        // console.log(e)
+        // console.log(citylist)
+        this.setState({
+            cityOs : false,
+            citylist :  citylist.mallCityList,
+            cityTxt : e.value,
+            regionTxt: e.value,
+            regionOs : true,
+        });
+    }
+
+    city_select(e) {  //选择市
+        this.state.Params.businessAddressCity = e;
+        let citylist = this.state.citylist;
+        let regionlist;
+        if(citylist.length == 1){
+            regionlist = citylist[0].mallAreaList
+        }else{
+            regionlist = citylist.find((item,index) => { return e == item.cityCode}).mallAreaList
+        }
+        this.setState({
+            regionOs : false,
+            regionlist :  regionlist,
+        })
+    }
+
+    region_select(e) {  //选择区
+        this.state.Params.businessAddressArea = e;
+    }
+
+    Textarea(e){  //具体地址文本
+        // console.log(e.target.value)
+    }
+
+    handleChange(e){ //业务类型
+        // console.log(e)
+        let businessClassification = e;
+        this.state.Params.businessClassification = businessClassification;
+    }
+
+    onChangeRadio(e){ //开户意愿类型
+        let desireAuth = e.target.value;
+        this.state.Params.desireAuth = desireAuth;
+        // console.log(this.state)
+    }
+    childMethod () { //暴露给父组件的方法,集合当前页面拿到的参数存入缓存
+        let data = this.Inputdata();
+        // console.log(data)
+        // localStorage.setItem('data_o',JSON.stringify(data));
+        this.toParent(data)
+    }
+
+    inputData(e){
+        console.log(e)
     }
 
 
     render() {
-        const { contract, certificate } = this.state;
+        const {  selectData ,cityOs, regionOs ,citylist , regionlist ,cityTxt ,regionTxt , datas , Params } = this.state;
         const { Option } = Select;
         const { TextArea } = Input;
         return(
@@ -55,85 +155,115 @@ export default class centerO extends React.Component {
                                         </Radio.Group>
                     </div>
                     <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 className='titles'> 签约名称<i className='label_x'>*</i>  ： </div>
+                        <div className='inputs'><Input id='qymc' placeholder='请输入签约名称' defaultValue={Params.signedName}/></div>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles'> 商户签约性质<i className='label_x'>*</i>  ： </div>
+                        <Select 
+                            size='default' 
+                            id='qyxz' 
+                            placeholder="请选择商户签约性质"  
+                            defaultValue={Params.registerRole}
+                            onChange={ this.handleChangeQy.bind(this) } 
+                            style={{ width: 200 }}
+                            >
+                            {selectData.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>
+                        <Select 
+                            size='default' 
+                            id='zslx' 
+                            placeholder="请选择证书类型"  
+                            defaultValue={Params.cerType}
+                            onChange={ this.handleChangeZs.bind(this) } 
+                            style={{ width: 200 }}
+                            >
+                            {selectData.contract.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 className='titles'> 商户简称<i className='label_x'>*</i>  ： </div>
+                        <div className='inputs'><Input id='names'  placeholder="请输入商户简称" defaultValue={Params.signedShorthand} /></div>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 联系人姓名 ： </div>
-                        <div className='inputs'><Input placeholder="请输入联系人姓名" /></div>
+                        <div className='titles'> 联系人姓名<i className='label_x'>*</i>  ： </div>
+                        <div className='inputs'><Input id='myname'   placeholder="请输入联系人姓名"  defaultValue={Params.contactName}/></div>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 联系人邮箱 ： </div>
-                        <div className='inputs'><Input placeholder="请输入联系人邮箱" /></div>
+                        <div className='titles'> 联系人邮箱<i className='label_x'>*</i>  ： </div>
+                        <div className='inputs'><Input id='mymail'  placeholder="请输入联系人邮箱"   defaultValue={Params.contactEmail} /></div>
                     </div>
                     <div className='c-l'>
-                        <div className='titles'> 联系人电话 ： </div>
-                        <div className='inputs'><Input placeholder="请输入联系人电话" /></div>
+                        <div className='titles'> 联系人电话<i className='label_x'>*</i>  ： </div> 
+                        <div className='inputs'><Input  id='mynums'   placeholder="请输入联系人电话" onChange={ this.inputData.bind(this) }    defaultValue={Params.contactPhone}/></div>
                     </div>
                 </div>
                 <div className='center_right'>
                     <div className='c-l'>
-                        <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>
+                        <div className='titles_o'> 经营地址省<i className='label_x'>*</i>  ： </div>
+                            <Select size='default'  placeholder="请选择省份" defaultValue={Params.businessAddressProvince} onChange={ this.province_select.bind(this) } style={{ width: 200 }}>
+                                {selectData.Area.map((item,index) => (
+                                    <Option key={index} value={item.provinceCode}>{item.provinceName}</Option>
                                 ))}
                             </Select>
                     </div>
                     <div className='c-l'>
-                        <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>
+                        <div className='titles_o'> 经营地址市<i className='label_x'>*</i>  ： </div>
+                            <Select size='default'  placeholder="请选择市" defaultValue={Params.businessAddressCity} key={cityTxt} onChange={ this.city_select.bind(this) } style={{ width: 200 }}  disabled={cityOs}>
+                                {citylist.map((item,index) => (
+                                    <Option key={index} value={item.cityCode}>{item.cityName}</Option>
                                 ))}
                             </Select>
                     </div>
                     <div className='c-l'>
                         <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>
+                            <Select size='default'  placeholder="请选择区" defaultValue={Params.businessAddressArea} key={regionTxt} onChange={ this.region_select.bind(this) } style={{ width: 200 }}  disabled={regionOs}>
+                                {regionlist.map((item,index) => (
+                                    <Option key={index} value={item.areaCode}>{item.areaName}</Option>
                                 ))}
                             </Select>
                     </div>
                     <div className='c-x'>
                         <div className='titles_txt'> 经营地址 ： </div>
                         <div className='TextAreas'>
-                            <TextArea style={{resize:'none'}} rows={6} />
+                            <TextArea id='mywb' style={{resize:'none'}} defaultValue={Params.businessAddress} rows={6}/>
                         </div>
                     </div>
                     <div className='c-l'>
                         <div className='titles_o'> 业务类型 ： </div>
-                            <Select size='default' placeholder="请选择业务类型"  onChange={ this.handleChange } style={{ width: 200 }}>
-                                {certificate.map((item,index) => (
+                            <Select size='default' placeholder="请选择业务类型" defaultValue={Params.businessClassification}  onChange={this.handleChange.bind(this)} style={{ width: 400 }}>
+                                {selectData.fication.map((item,index) => (
                                     <Option key={index} value={item.value}>{item.txt}</Option>
                                 ))}
                             </Select>
                     </div>
                     <div className='c-l'>
                         <div className='titles_o'> 开户意愿核实类型 ： </div>
-                        <Radio.Group name="radiogroup" defaultValue={1}>
-                                            <Radio value={1}>视频验证</Radio>
-                                            <Radio value={1}>手机短信验证</Radio>
-                                            <Radio value={1}>其他验证方式</Radio>
+                        <Radio.Group name="radiogroup" defaultValue={Params.desireAuth == undefined ? 'DESIRE_VIDEO' : Params.desireAuth} onChange={this.onChangeRadio.bind(this) }>
+                                            <Radio value='DESIRE_VIDEO'>视频验证</Radio>
+                                            <Radio value='DESIRE_MOBILEINFO'>手机短信验证</Radio>
+                                            <Radio value='DESIRE_NONEED'>其他验证方式</Radio>
                                         </Radio.Group>
                     </div>
+                    {/* <div className='c-l'>
+                        <div className='titles_o'> 法人姓名 ： </div>
+                        <div className='inputs'><Input id='myname'   placeholder="请输入法人姓名"  defaultValue={Params.contactName}/></div>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles_o'> 法人身份证号 ： </div>
+                        <div className='inputs'><Input id='myname'   placeholder="请输入法人身份证号"  defaultValue={Params.contactName}/></div>
+                    </div>
+                    <div className='c-l'>
+                        <div className='titles_o'> 法人手机号 ： </div>
+                        <div className='inputs'><Input id='myname'   placeholder="请输入法人手机号"  defaultValue={Params.contactName}/></div>
+                    </div> */}
                 </div>
             </div>
         )

src/component/center-s/centerS.jsx

@@ -1,48 +1,102 @@
 import React from 'react';
 import { Radio, Select, Input  } from 'antd';
 // import { $Axios } from '../../common/publish';
+import select_data from '../../common/ssq';
 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 },
-            ]
+            selectData : select_data,
+            Params : this.props.arr,
+            cityOs : true,
+            citylist : []
         }
         
     }
 	
 	componentDidMount() {
-        
+        this.props.onRef(this)
+        this.initData()
+    }
+
+    toParent = (data) => {
+        this.props.parent.getParams_s(this, data)
+    }
+
+    initData(){
+        if(this.props.arr){  //初始化判断数据回填
+            if(this.state.Params.provinceCode !== undefined){ // 判断回填数据内是否有省编码
+                let Province = this.state.Params.provinceCode; //获取省编码
+                let data = this.state.selectData.Area;  //拿到省数据组
+                let cityList = data.find((item,index) => { return Province == item.provinceCode}); //抽取省编码内下的城市列表数据
+                this.setState({  //重新设置数据
+                    cityOs : false,
+                    citylist : cityList.mallCityList,
+                })
+            }
+        }
+    }
+
+    InputSdata(e){
+        let Params = {
+            bankCode : this.state.Params.bankCode,//开户行
+            bankBranchName : document.getElementById("bankBranchName").value,//支行名称
+            accountName : document.getElementById("accountName").value,//开户名称
+            bankCardNo : document.getElementById("bankCardNo").value,//开户账号
+            cityCode : this.state.Params.cityCode,//市编码
+            provinceCode : this.state.Params.provinceCode,//省编码
+            accountType : this.state.Params.accountType, //结算银行卡属性   PUBLIC 对公 PRIVATE 对私
+            liquidationType : 'WITHDRAW',//清算方式 WITHDRAW 提现   SETTLE 结算
+            withdrawRateType : this.state.Params.withdrawRateType,//提现费率类型
+            withdrawRate : document.getElementById("withdrawRate").value,//提现费率
+            // profession :  this.state.Params.profession, //法人职业
+        }
+        console.log(this.state.Params.withdrawRateType)
+        return Params
+    }
+
+    childMethod () { //暴露给父组件的方法,集合当前页面拿到的参数存入缓存
+        let data = this.InputSdata();
+        console.log(data)
+        this.toParent(data)
     }
 
     handleChange(value) {
         console.log(`Selected: ${value}`);
     }
 
+    selectChange_1(value) {  //开户行选择
+        this.state.Params.bankCode = value;
+    }
+
+    selectChange_2(value){ //省编码选择
+        this.state.Params.provinceCode = value;
+        let citylist = this.state.selectData.Area.find((item,index) => { return value == item.provinceCode});
+        this.setState({
+            cityOs : false,
+            citylist :  citylist.mallCityList,
+        });
+    }
+    
+    selectChange_3(value){ //市编码选择
+        this.state.Params.cityCode = value;
+    }
+    
+    onChangeRadio(e){
+        let accountType = e.target.value;
+        this.state.Params.accountType = accountType;
+    }
+
+    onChangeRadio_s(e){
+        console.log(e)
+        let withdrawRateType = e;
+        this.state.Params.withdrawRateType = withdrawRateType;
+    }
 
     render() {
-        const { contract, certificate } = this.state;
+        const { selectData, cityOs , citylist ,Params} = this.state;
         const { Option } = Select;
         const { TextArea } = Input;
         return(
@@ -50,49 +104,46 @@ export default class centerS extends React.Component {
                 <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) => (
+                        <Select size='default' placeholder="请选择开户行" defaultValue={Params.bankCode}  onChange={ this.selectChange_1.bind(this) } style={{ width: 200 }}>
+                                            {selectData.contractS.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 className='inputs'><Input id='bankBranchName' defaultValue={Params.bankBranchName} placeholder="请输入支行名称" /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 开户名称 ： </div>
-                        <div className='inputs'><Input placeholder="请输入开户名称" /></div>
+                        <div className='inputs'><Input id='accountName' defaultValue={Params.accountName} placeholder="请输入开户名称" /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 开户账号 ： </div>
-                        <div className='inputs'><Input placeholder="请输入开户账号" /></div>
+                        <div className='inputs'><Input id='bankCardNo' defaultValue={Params.bankCardNo}  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>
+                        <div className='titles'> 省编码 ： </div>
+                        <Select size='default' placeholder="请选择省编码" defaultValue={Params.provinceCode}  onChange={ this.selectChange_2.bind(this) } style={{ width: 200 }}>
+                                            {console.log(selectData)}
+                                            {selectData.Area.map((item,index) => (
+                                                <Option key={index} value={item.provinceCode}>{item.provinceName}-{item.provinceCode}</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>
-                                            ))}
+                        <div className='titles'> 市编码 ： </div>
+                        <Select size='default' placeholder="请选择市编码" defaultValue={Params.cityCode}  onChange={ this.selectChange_3.bind(this) } style={{ width: 200 }} disabled={cityOs}>
+                                            {citylist.map((item,index) => (
+                                                        <Option key={index} value={item.cityCode}>{item.cityName}-{item.cityCode}</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 name="radiogroup" defaultValue={Params.accountType == undefined ? 'PUBLIC' : Params.accountType} onChange={this.onChangeRadio.bind(this) }>
+                                            <Radio value='PUBLIC'>对公</Radio>
+                                            <Radio value='PRIVATE'>对私</Radio>
                                         </Radio.Group>
                     </div>
                     <div className='c-l'>
@@ -103,15 +154,14 @@ export default class centerS extends React.Component {
                     </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 size='default' placeholder="请选择提现费率类型" defaultValue={Params.withdrawRateType == undefined ? 'SINGLE' : Params.withdrawRateType}   style={{ width: 200 }} onChange={this.onChangeRadio_s.bind(this) }>
+                                            <Option key='SINGLE' value='SINGLE'>单笔</Option>
+                                            <Option key='RATE' value='RATE'>百分比</Option>
                                         </Select>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 提现费率 ： </div>
-                        <div className='inputs'><Input placeholder="请输入提现费率" /></div>
+                        <div className='inputs'><Input id='withdrawRate' defaultValue={Params.withdrawRate} placeholder="请输入提现费率" /></div>
                     </div>
                 </div>
                 <div className='center_right'> </div>

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

@@ -1,6 +1,7 @@
-import React from 'react';
-import { Button, Table } from 'antd';
-import { $Axios } from '../../common/publish';
+import React , { useState } from 'react';
+import { Button, Table , Modal } from 'antd';
+import { $Axios , format } from '../../common/publish';
+import select_data from '../../common/ssq';
 import '../center-tab/center-tab.scss'
 const { Column, ColumnGroup } = Table;
 export default class centerTab extends React.Component {
@@ -8,90 +9,142 @@ export default class centerTab extends React.Component {
         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',
-                },
-              ],
+            select_data : select_data,
+            data : [],
               columns : [
                 {
                     title: '序号',
-                    dataIndex: 'name',
-                    key: 'name',
+                    dataIndex: 'num',
+                    key: 'num',
                     
                 },
                 {
                     title: '签约名称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    dataIndex: 'signedName',
+                    key: 'signedName',
                 },
                 {
                     title: '商户简称',
-                    dataIndex: 'age',
-                    key: 'age',
+                    dataIndex: 'signedShorthand',
+                    key: 'signedShorthand',
                 },
                 {
                     title: '入网时间',
-                    dataIndex: 'age',
-                    key: 'age',
+                    dataIndex: 'createTime',
+                    key: 'createTime',
                 },
                 {
                     title: '操作',
-                    dataIndex: 'age',
-                    key: 'age',
-                    render: text => <a>查看详情</a>,
+                    dataIndex: 'cz',
+                    key: 'cz',
+                    row : {xxx:'xxx'},
+                    render:  (text, record, index) => <a onClick={()=>this.xqClick(text, record, index)}>查看详情</a>,
                 },
-            ]
+            ],
+            lastId : 1,
+            isModalVisible : false,
+            bankCardInfo : null,
+            baseInfo : null,
+            merchantInfo : null
+            
         }
         
     }
 	
 	componentDidMount() {
-        
+        this.initData()
     }
 
+    
+    initData(){
+        let that_ = this;
+        let url = '/payment/merchant.query.groovy'
+        let params = {
+            action:"queryList",//查询商户入网列表
+            merchantStatus: 1, //当前固定为1  //商户状态0待激活1活动中2关闭3删除4已冻结5清退6退驻
+            pSize:10,//每页条数
+            pNo : this.state.lastId, //最后一个排序号,即最后一条记录的id值
+            queryType : 1,//用户权限 1最高权限  2商城权限  3商户权限
+            appName : '' // queryType=2时为指定商户appname，:queryType=3时为二级商户所属上级parentAppName
+        }
+        $Axios('get',url,params,(res) => {
+            let status = res.data.head.status;
+            if(status == 200){
+                let data = res.data.body.list;
+                let arr = [];
+                data.map((item,index) => {
+                    let obj = {
+                        num : index + 1,
+                        key: item.id,
+                        name: item.name,
+                        signedName: item.signedName == '' ? '--' : item.signedName,
+                        signedShorthand : item.signedShorthand == '' ? '--' : item.signedShorthand,
+                        createTime : format(item.createTime),
+                        appName : item.appName
+                    }
+                    arr.push(obj)
+                });
+                that_.setState({
+                    data : arr
+                })
+            }
+        })
+    }
 
-        // 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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+    // xqClick(e){
+    //     console.log(e)
 
+    //     this.setState({
+    //         isModalVisible : true
+    //     });
+    // }
+
+    xqClick = (text, record, index) => {
+        console.log(text, record, index);
+        this.queryData(record)
+        this.setState({
+            isModalVisible : true
+        });
+    }
+
+
+
+    queryData(record){
+        let that_ = this;
+        let url = '/payment/merchant.query.groovy'
+        let params = {
+            appName:record.appName,//当前需要查询用户的 appName
+            action : 'queryInfo' // 查询当前商户信息
+        }
+        $Axios('get',url,params,(res) => {
+            let status = res.data.head.status;
+            if(status == 200){
+                let bankCardInfo = JSON.parse(res.data.body.bankCardInfo);
+                let baseInfo = JSON.parse(res.data.body.baseInfo);
+                let merchantInfo = JSON.parse(res.data.body.merchantInfo);
+                console.log(baseInfo)
+                that_.setState({
+                    bankCardInfo : bankCardInfo,
+                    baseInfo : baseInfo,
+                    merchantInfo : merchantInfo,
+                    isModalVisible : true
+                });
+            }
+            // console.log(res)
+    
+        })
+    }
+
+    handleOk(){
+        this.setState({
+            isModalVisible : false
+        })
+    }
+
+    
 
     render() {
-        const { data , columns , headTxt } = this.state;
+        const { data , columns , headTxt , isModalVisible ,bankCardInfo ,baseInfo ,merchantInfo , select_data  } = this.state;
         return(
             <div className='wrap_table'>
                 <div className='header_center'>
@@ -100,7 +153,45 @@ export default class centerTab extends React.Component {
                <div className='tables'>
                 <Table columns={columns} dataSource={data} />
                </div>
+               <Modal title="详细信息" 
+                 footer={[
+                    <Button key="submit" type="primary" onClick={this.handleOk.bind(this)}>
+                      确定
+                    </Button>,
+                  ]}
+                visible={isModalVisible} 
+                closable = {false}
+                // onOk={this.handleOk} 
+               >
+                    {baseInfo && <div>签约类型 ： 被分帐方</div>} 
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    {baseInfo && <div>商户简称 ： {baseInfo.signedShorthand}</div>}
+                    {baseInfo && <div>商户签约性质 ： {baseInfo.registerRole}</div>}
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    {baseInfo && <div>签约名称 ： {baseInfo.signedName}</div>}
+                    <div>as的</div>
+                </Modal>
             </div>
+
+
+            // signedType : 'BY_SPLIT_BILL',  //签约类型
+            // signedName :  document.getElementById("qymc").value, //签约名称
+            // signedShorthand : document.getElementById("names").value, //商户简称
+            // registerRole : this.state.Params.registerRole , //商户签约性质
+            // cerType : this.state.Params.cerType, //证书类型
+            // businessAddressProvince : this.state.Params.businessAddressProvince,//经营地省
+            // businessAddressCity : this.state.Params.businessAddressCity, //经营地市
+            // businessAddressArea : this.state.Params.businessAddressArea, //经营地区
+            // businessAddress : document.getElementById("mywb").value,  //经营详细地址
+            // contactName : document.getElementById("myname").value, //联系人姓名
+            // contactEmail : document.getElementById("mymail").value,// 联系人邮箱
+            // contactPhone : document.getElementById("mynums").value,// 联系人电话
+            // businessClassification : this.state.Params.businessClassification, //业务分类 (签约类型为被分账方不传此参数)
+            // desireAuth : this.state.Params.desireAuth, // 开户意愿核实类型
         )
     }
 }

src/component/center-w/centerW.jsx

@@ -1,173 +1,244 @@
 import React from 'react';
-import { Radio, Select, Input, Upload, Button } from 'antd';
+import { Radio, Select, Input, Upload, Button , Checkbox } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import axios from "axios";
 // import { $Axios } from '../../common/publish';
+import select_data from '../../common/ssq';
 import '../center-w/centerW.scss'
 
 export default class centerW 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 },
-            ],
+            selectData : select_data,
             fileList : [[],[],[],[],[],[],[],[],[],[],[],[]],
+            fileList_t : null,
             headerProps : {
-                action: '',
+                action: 'http://paytest.zhongsou.com/payment/file.upload.groovy',
                 multiple: false,
             },
             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'},  
-            ]
+            Params : this.props.arr,
+            tradingScenarios : [],
+            datas : {},
         }
         
     }
 	
 	componentDidMount() {
-        
+        this.props.onRef(this)
+    }
+
+    toParent = (data) => {
+        this.props.parent.getParams_w(this, data)
     }
     
-    selectChange(value) {
-        console.log(`Selected: ${value}`);
+    InputWdata(e){
+        let Params = {
+            legalPersonName : document.getElementById("legalPersonName").value,//法人姓名
+            profession :  this.state.Params.profession, //法人职业
+            legalPersonIdType : this.state.Params.legalPersonIdType,//法人证件类型
+            legalPersonIdNo : document.getElementById("legalPersonIdNo").value, //证件号码
+            idEffectiveDateStart : '',//法人证件有效期开始日期
+            idEffectiveDateEnd : '',//法人证件有效期结束日期
+            cerNoType : this.state.Params.cerNoType,//企业证件类型
+            cerNo : document.getElementById("cerNo").value,//企业资质证书编号
+            sellingArea : document.getElementById("sellingArea").value,//营业面积
+            staffSize : document.getElementById("staffSize").value,//公司员工规模
+            tradingScenarios :  this.state.Params.tradingScenarios,//交易场景说明
+            webSite : document.getElementById("webSite").value,//网站网址
+            webSiteName : document.getElementById("webSiteName").value,//网站名称
+            icp : document.getElementById("icp").value,//ICP备案号
+            appName : document.getElementById("appName").value,//APP名称
+            wechatAppletName : document.getElementById("wechatAppletName").value,//公众号/小程序/生活号
+            testAccountInfo : '',//测试账户信息
+            businessLicensePath : '',//营业执照照片路径
+            openAccountPath : '',//开户许可证照片路径
+            legalIdCardProsPath : '',//法人证件人像面路径
+            legalIdCardConsPath : '',//法人证件国徽面路径
+            desireAuthPath : '',//确认入网意愿视频路径
+            holdingIdCardPath : '',//法人手持证件影印件路径
+            webSitePath : '',//商户网址截图影印件路径
+            wechatAppletPath : '',//公众号/小程序/生活号业务流程截图影印件路径	
+            appPath : '',//APP首页截图影印件路径
+            legalPersonBankCardPath : '',//法人银行卡图影印件路径
+            desireAuthOtherPath : '',//确认入网意愿其他验证方式路径
+            otherCerPath : '',//其他资质文件路径
+        }
+        return Params
+    }
+
+    childMethod () { //暴露给父组件的方法,集合当前页面拿到的参数存入缓存
+        let data = this.InputWdata();
+        // console.log(data)
+        this.toParent(data)
+    }
+
+    btnClick(e){  //区分上传图片类型
+        this.setState({	
+            imgType : e
+        })
+    }
+
+    selectChange_1(value) {  //法人职业类型选择
+        console.log(value)
+        this.state.Params.profession = value;
+    }
+
+    selectChange_2(value) {  //法人证件类型选择
+        this.state.Params.legalPersonIdType = value;
     }
-    handleChange = info => {
+
+    selectChange_3(value) {  // 企业证件类型选择
+        this.state.Params.cerNoType = value;
+    }
+
+    CheckChange(e){
+        this.state.Params.tradingScenarios = e.toString()
+        console.log(e)
+    }
+
+    onChangeUpload(info){
         let fileList = [...info.fileList];
-        let imgType = this.state.imgType;
+        this.state.fileList = fileList
+    }
+    UploadImgstate(){  //修改上传图片状态
+        let fileList = this.state.fileList;
+        let imgType = this.state.imgType; //当前上传图片点击的Index
         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({	
-            imgType : e
+        console.log(arr)
+        this.setState({
+            fileList : arr
+        })
+    }
+
+    handleChange(e){
+        let file = e.file;
+        let that_ = this;
+        console.log(file)
+        const formData = new FormData();
+        formData.append('file', file)
+        formData.append('merchantSerialNumber', 'MCT_202106262257460929210')
+        let config = {
+            method: 'post',
+            headers: { 'Content-Type': 'multipart/form-data' }
+        }
+        axios.post('http://paytest.zhongsou.com/payment/file.upload.groovy',formData, config).then((res) => {
+                let status = res.data.status;
+                let fileList = that_.state.fileList;
+                that_.setState({
+                    fileList_t : fileList
+                })
+                if(status == 200){
+                    // that_.UploadImgstate()
+                }
+        }).catch((error) => { //上传失败后设置回之前的上前数量与状态
+            // let fileList_t = that_.state.fileList_t;
+            // that_.setState({
+            //     fileList : fileList_t
+            // })
+            console.log(error);
         })
     }
 
+    
+
+
 
+    // defaultValue={Params.signedName}
     render() {
-        const { contract, certificate, headerProps, fileList , rightArray  } = this.state;
+        const { selectData, headerProps, fileList ,Params ,  } = this.state;
         const { Option } = Select;
         
         return(
             <div className='center_up'>
                 <div className='center_left'>
                     <div className='c-l'>
-                        <div className='titles'> 法人姓名 ： </div>
-                        <div className='inputs'><Input placeholder="请输入法人姓名" /></div>
+                        <div className='titles'> 法人姓名<i className='label_x'>*</i> ： </div>
+                        <div className='inputs'><Input id='legalPersonName' placeholder="请输入法人姓名" defaultValue={Params.legalPersonName} /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 法人职业 ： </div>
-                        <Select size='default' placeholder="请选择法人职业"  onChange={ this.selectChange } style={{ width: 200 }}>
-                                            {contract.map((item,index) => (
+                        <Select size='default' placeholder="请选择法人职业" defaultValue={Params.profession}   onChange={ this.selectChange_1.bind(this)  } style={{ width: 200 }}>
+                                            {selectData.contractW.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.selectChange } style={{ width: 200 }}>
-                                            {certificate.map((item,index) => (
+                        <div className='titles'> 法人证件类型<i className='label_x'>*</i> ： </div>
+                        <Select size='default' placeholder="请选择证件类型" defaultValue={Params.legalPersonIdType}   onChange={ this.selectChange_2.bind(this)  } style={{ width: 200 }}>
+                                            {selectData.certificateW.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 className='titles'> 法人证件号码<i className='label_x'>*</i> ： </div>
+                        <div className='inputs'><Input id='legalPersonIdNo' placeholder="请输入证件号码" defaultValue={Params.legalPersonIdNo}  /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 企业证件类型 ： </div>
-                        <Select size='default' placeholder="请选择证件类型"  onChange={ this.selectChange } style={{ width: 200 }}>
-                                            {contract.map((item,index) => (
+                        <Select size='default' placeholder="请选择证件类型" defaultValue={Params.cerNoType}  onChange={ this.selectChange_3.bind(this) } style={{ width: 200 }}>
+                                            {selectData.cerNoTypeW.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 className='inputs'><Input id='cerNo' placeholder="请输入证书编号" defaultValue={Params.cerNo}/></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 营业面积 ： </div>
-                        <div className='inputs'><Input placeholder="A 500平以上" /></div>
+                        <div className='inputs'><Input id='sellingArea' placeholder="A 500平以上" defaultValue={Params.sellingArea} /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 公司员工规模 ： </div>
-                        <div className='inputs'><Input placeholder="A 100人以上" /></div>
+                        <div className='inputs'><Input id='staffSize' placeholder="A 100人以上" defaultValue={Params.staffSize} /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 交易场景说明 ： </div>
-                        <Radio.Group name="radiogroup" defaultValue={1}>
-                                            <Radio value={1}>网站</Radio>
-                                            <Radio value={1}>APP</Radio>
-                                            <Radio value={1}>公众号</Radio>
-                                        </Radio.Group>
+                        <Checkbox.Group options={selectData.options} defaultValue={['WEBSITE']} onChange={this.CheckChange.bind(this)} />
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 网站网址 ： </div>
-                        <div className='inputs'><Input placeholder="请输入网站网址" /></div>
+                        <div className='inputs'><Input id='webSite' placeholder="请输入网站网址"  defaultValue={Params.webSite}/></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 网站名称 ： </div>
-                        <div className='inputs'><Input placeholder="请输入网站名称" /></div>
+                        <div className='inputs'><Input id='webSiteName' placeholder="请输入网站名称" defaultValue={Params.webSiteName} /></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> ICP备案号 ： </div>
-                        <div className='inputs'><Input placeholder="请输入ICP备案号" /></div>
+                        <div className='inputs'><Input id='icp' placeholder="请输入ICP备案号"  defaultValue={Params.icp}/></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> APP名称 ： </div>
-                        <div className='inputs'><Input placeholder="请输入APP名称" /></div>
+                        <div className='inputs'><Input id='appName' placeholder="请输入APP名称" defaultValue={Params.appName}/></div>
                     </div>
                     <div className='c-l'>
                         <div className='titles'> 公众号/小程序/生活号 ： </div>
-                        <div className='inputs'><Input placeholder="请输入名称" /></div>
+                        <div className='inputs'><Input id='wechatAppletName' placeholder="请输入名称" defaultValue={Params.wechatAppletName}/></div>
                     </div>
                 </div>
                 <div className='center_right'>
-                    {rightArray.map((item,index) => (
+                    {selectData.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}
+                                //  {...headerProps}
+                                name="files"
+                                className="Upload"
+                                maxCount={1}
+                                showUploadList={false}
+                                accept = {item.type}
+                                customRequest={this.handleChange.bind(this)}
+                                onChange={this.onChangeUpload.bind(this)}
                                  >
                                  <Button icon={<UploadOutlined />} onClick={() =>this.btnClick(index)}>选择文件</Button>
                              </Upload>

src/component/homePage/homePage.jsx

@@ -1,50 +1,205 @@
 import React from 'react';
-// import { $Axios } from '../common/publish';
-// import './Layout.scss'
-
+import { Input, Upload, Button,message } from 'antd';
+import axios from "axios";
+import { UploadOutlined,LoadingOutlined, DownOutlined,UpOutlined  } from '@ant-design/icons';
 export default class homePage extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-    
+            fileList : [],
+            imgType : '',
+            imageUrl : '',
+            loading : '',
+            url : '',
+            select_o : false,
+            select_t : false,
+            RequestData : '',
+            ResponseData : ''
         }
         
     }
 
 	componentDidMount() {
-        
+        let box = document.getElementById("imgBox"); 
+        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
+            this.setState({
+                height : box.offsetHeight + 'px'
+            })
+        }
     }
 
+    getBase64(img, callback) { //解码图片信息及URL等
+        const reader = new FileReader();
+        reader.addEventListener('load', () => callback(reader.result));
+        reader.readAsDataURL(img);
+    }
 
+    onChangeUpload(info){ //获取图片信息
+        let taht_ = this;
+        let fileList = [...info.fileList];
+        this.state.fileList = fileList;
+        if (info.file.status === 'uploading') { //图片上传状态改变
+            this.setState({ loading: true });
+        }
+        this.getBase64(info.file.originFileObj, imageUrl => //图片上传状态改变 并获取URL储存
+            taht_.setState({
+                imageUrl,
+                loading: false,
+            }),
+        );
+    }
 
-        // 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,
-        //             })
-        //         }
-        //     }
-           
-        // })
+    btnClick(e){  //区分上传图片类型
+        this.setState({	
+            imgType : e
+        })
+    }
 
+    btnClick_jc(){ //检测图片获取URL
+        let url = document.getElementById("urls").value;
+        this.setState({
+            url : url
+        });
+        message.info(`已获取${url}`);
+    }
+
+    handleChange(e){
+        let file = e.file;
+        let that_ = this; //axios 内部指针不同 设置setState时候用that_
+        const formData = new FormData();   //提交图片的格式
+        formData.append('file', file)
+        formData.append('merchantSerialNumber', 'MCT_202106262257460929210')  //可以自定义参数 例子
+        let config = {
+            method: 'post',  //请求方式
+            headers: { 'Content-Type': 'multipart/form-data' } //请求头格式自定义
+        }
+        axios.post('http://xxxxxxxx',formData, config).then((res) => {
+                // 上传成功后的回调
+        }).catch((error) => { 
+                //上传失败后回调
+            console.log(error);
+        })
+        
+    }
+
+    select_o(){  //右侧第一个下拉菜单展开与收回
+        let select_o = this.state.select_o;
+        let data = 'RequestData数据组' //替换为API接口返回的数据 
+        this.setState({
+            select_o : select_o == false ? true : false,
+            RequestData : data
+        });
+    }
+
+    select_t(){ //右侧第二个下拉菜单展开与收回
+        let select_t = this.state.select_t;
+        let data = 'Response数据组' //替换为API接口返回的数据 
+        this.setState({
+            select_t : select_t == false ? true : false,
+            ResponseData : data
+        });
+    }
 
     render() {
+        const { loading,imageUrl,height,select_o,select_t,RequestData,ResponseData } = this.state;
         return(
             <div className='rootDom'>
-               xasdasd
+               <div style={{
+                   width : '80%',
+                   height : '100%',
+                   float : 'left',
+                }}>
+                    <div id='imgBox' style={{width:'100%',height:'90%',background:'rgba(0,0,0,0.5)'}}>
+                        {
+                            imageUrl == '' &&　<div className="icons-list" style={{width : '100%',height : '100%',background : 'rgba(0,0,0,0.5)',textAlign:'center',lineHeight:height,fontSize:'50px',color:'#ccc'}}>
+                                您还没有上传图片~
+                            </div>
+                        }
+                        {
+                            loading == true &&　<div className="icons-list" style={{width : '100%',height : '100%',background : '#fff',textAlign:'center',lineHeight:height}}>
+                            <LoadingOutlined style={{
+                                fontSize :'50px',
+                                color : 'rgb(24, 144, 255)',
+                            }} />
+                            </div>
+                        }
+                        {
+                            imageUrl !== '' &&　<img alt="example" style={{ width: '100%',height:'100%' }} src={imageUrl} />
+                        }
+                    </div>
+                    <div style={{width:'100%',height:'10%',background:'rgba(0,0,0,0.9)',padding : '2% 6%'}}>
+                        <div style={{width : '50%',display:'inline-block'}}>
+                            <Input id='urls' placeholder="请输入网络图片URL" />
+                        </div>
+                        <div style={{display:'inline-block'}}>
+                            <Button type="primary" style={{width:'120px'}} onClick={() =>this.btnClick_jc()}>检测</Button>
+                        </div>
+                        <div style={{width : '10%',display:'inline-block',marginLeft:'30px',marginRight : '30px',textAlign:'center',fontSize:'20px',color:'#fff'}}>
+                            或
+                        </div>
+                        <div style={{display:'inline-block'}}>
+                            <Upload 
+                                //  {...headerProps}
+                                name="files"
+                                className="Upload"
+                                maxCount={1}   //限制图片上传个数
+                                showUploadList={false}
+                                accept = '.jpg, .jpeg, .png, .pdf'   //限制图片上传格式
+                                customRequest={this.handleChange.bind(this)}  //自定义上传请求API
+                                onChange={this.onChangeUpload.bind(this)}
+                            >
+                                <Button icon={<UploadOutlined />} type="primary" style={{width:'120px'}} onClick={() =>this.btnClick()}>本地上传</Button>
+                            </Upload>
+                        </div>
+                       
+                    </div>
+                   
+                </div>
+                
+
+               <div style={{
+                   width : '20%',
+                   height : '100%',
+                   overflow:'auto',
+                   float : 'left',
+                }}>
+                    <div 
+                        style={{width:'100%',height : '60px',textAlign:'center',lineHeight:'60px',borderBottom:'1px solid #D3D3D3',backgroundColor: '#ccc',fontSize:'22px'}}
+                        onClick={this.select_o.bind(this)}
+                    >
+                        Request 
+                        {select_o == true && <DownOutlined style={{float:'right',marginRight : '20px' ,lineHeight:'60px'}} />}
+                        {select_o == false &&<UpOutlined  style={{float:'right',marginRight : '20px' ,lineHeight:'60px'}} />}
+                    </div>
+                    {
+                        select_o == true &&  <div style={{
+                            width : '100%',
+                            height : '500px',
+                            backgroundColor: '#D3D3D3',
+                            padding : '2%'
+                        }}>
+                            {RequestData}
+                        </div>
+                    }
+                    <div 
+                        style={{width:'100%',height : '60px',textAlign:'center',lineHeight:'60px',borderBottom:'1px solid #D3D3D3',backgroundColor: '#ccc',fontSize:'22px'}}
+                        onClick={this.select_t.bind(this)}
+                    >
+                        Response 
+                        {select_t == true && <DownOutlined style={{float:'right',marginRight : '20px' ,lineHeight:'60px'}} />}
+                        {select_t == false &&<UpOutlined  style={{float:'right',marginRight : '20px' ,lineHeight:'60px'}} />}
+                    </div>
+                    {
+                        select_t == true &&  <div style={{
+                            width : '100%',
+                            height : '500px',
+                            backgroundColor: '#D3D3D3',
+                            padding : '2%'
+                        }}>
+                            {ResponseData}
+                        </div>
+                    }
+                </div>
             </div>
         )
     }