YYZS-Xzhifu/src/component/center-w/centerW.jsx

import React from 'react';
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 = {
            selectData : select_data,
            fileList : [[],[],[],[],[],[],[],[],[],[],[],[]],
            fileList_t : null,
            headerProps : {
                action: 'http://paytest.zhongsou.com/payment/file.upload.groovy',
                multiple: false,
            },
            imgType : null,
            Params : this.props.arr,
            tradingScenarios : [],
            datas : {},
        }
        
    }
	
	componentDidMount() {
        this.props.onRef(this)
    }

    toParent = (data) => {
        this.props.parent.getParams_w(this, data)
    }
    
    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;
    }

    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];
        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
        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 { 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'> 法人姓名<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="请选择法人职业" 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'> 法人证件类型<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'> 法人证件号码<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="请选择证件类型" 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 id='cerNo' placeholder="请输入证书编号" defaultValue={Params.cerNo}/></div>
                    </div>
                    <div className='c-l'>
                        <div className='titles'> 营业面积 ： </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 id='staffSize' placeholder="A 100人以上" defaultValue={Params.staffSize} /></div>
                    </div>
                    <div className='c-l'>
                        <div className='titles'> 交易场景说明 ： </div>
                        <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 id='webSite' placeholder="请输入网站网址"  defaultValue={Params.webSite}/></div>
                    </div>
                    <div className='c-l'>
                        <div className='titles'> 网站名称 ： </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 id='icp' placeholder="请输入ICP备案号"  defaultValue={Params.icp}/></div>
                    </div>
                    <div className='c-l'>
                        <div className='titles'> 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 id='wechatAppletName' placeholder="请输入名称" defaultValue={Params.wechatAppletName}/></div>
                    </div>
                </div>
                <div className='center_right'>
                    {selectData.rightArray.map((item,index) => (
                         <div className='c-l' key = {index}>
                         <div className='titles'> {item.txt} ： </div>
                         <div className='Upload_wrap'>
                             <Upload 
                                //  {...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>
                             {fileList[index].length === 0 && <div className='title_tips'>格式限制为{item.type},最大不超过50M</div>}
                         </div>
                     </div>
                    ))}
                </div>
            </div>
        )
    }
}