/* @author:李霆 @update:2018/05/29 */ import React from 'react'; import { Radio, Icon, Button, Cascader, Input, Select, Spin, message, DatePicker, Modal, Upload, Form, Row, Col } from 'antd'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import './unit.less'; import { areaSelect } from '@/NewDicProvinceList'; import { socialAttribute, industry, adviserType, lawType } from '@/dataDic.js'; import { splitUrl, getAuthState, getAdviserType, getSocialAttribute } from '@/tools.js'; const FormItem = Form.Item; const monthFormat = 'YYYY/MM'; import Crop from '@/crop/cropBlock'; //图片组件 const PicturesWall = React.createClass({ getInitialState() { return { previewVisible: false, previewImage: '', fileList: [] }; }, handleCancel() { this.setState({ previewVisible: false }); }, handlePreview(file) { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }, handleChange(info) { let fileList = info.fileList; this.setState({ fileList }); this.props.fileList(fileList); }, componentWillReceiveProps(nextProps) { this.state.fileList = nextProps.pictureUrl; }, render() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = ( <div> <Icon type="plus" /> <div className="ant-upload-text">点击上传</div> </div> ); return ( <div style={{ display: 'inline-block' }}> <Upload action={globalConfig.context + '/api/user/uploadPicture'} data={{ sign: 'user_picture' }} listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange} > {fileList.length >= 1 ? null : uploadButton} </Upload> <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> ); } }); const Expert = React.createClass({ getInitialState() { return { loading: false, orgCodeUrl: [], companyLogoUrl: [], headPortraitUrl:[], lawState: false, adviserUrl: [], positiveIdUrl: [], lawUrl: [], oppositeIdUrl: [], authenticationState: undefined }; }, loadInformation(record) { this.setState({ loading: true }); $.ajax({ method: 'get', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/user/getUserDetail', success: function(data) { let thisData = data.data; if (!thisData) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thisData = {}; } let ProvinceCityArr = []; let ProvinceS = thisData.province; //getprovince let citys = thisData.city; let Areas = thisData.area; ProvinceCityArr.push(ProvinceS, citys, Areas); let month = thisData.dateOfBirthYear ? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth : undefined; let authenticationState = ''; if (thisData.auditStatus == '3') { authenticationState = (thisData.expert - 1).toString(); } this.setState({ InformationId: thisData.id, InformationUid: thisData.uid, authentication: thisData.authentication, authenticationState: authenticationState, dateOfBirthYear: thisData.dateOfBirthYear, dateOfBirthMonth: thisData.dateOfBirthMonth, type: thisData.type, expert: thisData.expert, //认证类型 0-未认证专家顾问 1-专家认证 2-顾问认证 authMessage: thisData.auditInfo, auditStatus: thisData.auditStatus || '0', //认证状态 0-未认证 1-认证审核中 2-已认证 3-认证失败 headPortraitUrl: thisData.headPortraitUrl //专家照片 ? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [], companyLogoUrl:thisData.headPortraitUrl?thisData.headPortraitUrl.split(','):[], adviserUrl: thisData.adviserUrl //顾问照片 ? splitUrl(thisData.adviserUrl, ',', globalConfig.avatarHost + '/upload') : [], positiveIdUrl: thisData.positiveIdUrl ? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload') : [], oppositeIdUrl: thisData.oppositeIdUrl ? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload') : [], lawUrl: thisData.consultantCertificateUrl ? splitUrl(thisData.consultantCertificateUrl, ',', globalConfig.avatarHost + '/upload') : [], data: thisData, lawState: thisData.consultantType=='4'?true:false, ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined, yearMonth: month, workUnit: thisData.workUnit || '', graduateSchool: thisData.graduateSchool || '', professionalTitle: thisData.professionalTitle || '', qualification: thisData.qualification || '', majorCategory: thisData.majorCategory || '', adviserType: thisData.consultantType || '', headPortraitUrlCopy: thisData.headPortraitUrl, adviserUrlCopy: thisData.adviserUrl, positiveIdUrlCopy: thisData.positiveIdUrl, oppositeIdUrlCopy: thisData.oppositeIdUrl }); }.bind(this) }).always( function() { this.setState({ loading: false }); }.bind(this) ); }, //图片 getOrgCodeUrl(e) { this.setState({ orgCodeUrl: e }); }, getCompanyLogoUrl(e) { this.setState({ companyLogoUrl: e }); }, //基本信息提交 newSubmit(values = {}) { this.state.data = []; let thecompanyLogoUrl = []; if (this.state.positiveIdUrl.length) { let picArr = []; this.state.positiveIdUrl.map(function(item) { if (item.response && item.response.data && item.response.data.length) { picArr.push(item.response.data); } }); thecompanyLogoUrl = picArr.join(','); } let thecompanyLogoUrls = []; if (this.state.oppositeIdUrl.length) { let picArr = []; this.state.oppositeIdUrl.map(function(item) { if (item.response && item.response.data && item.response.data.length) { picArr.push(item.response.data); } }); thecompanyLogoUrls = picArr.join(','); } //律师证书 let lawUrls = []; if (this.state.lawUrl.length) { let picArr = []; this.state.lawUrl.map(function(item) { if (item.response && item.response.data && item.response.data.length) { picArr.push(item.response.data); } }); lawUrls = picArr.join(','); } let years = []; years = this.state.yearList != undefined ? this.state.yearList.split('/') : [ this.state.dateOfBirthYear, this.state.dateOfBirthMonth ]; this.setState({ loading: true }); let dataList = {}; dataList = { id: this.state.InformationId, uid: this.state.InformationUid, type: this.state.type, societyTag: values.societyTag, identifyName: values.identifyName, industry: values.industry, dateOfBirthYear: years[0] || '', //出生年 dateOfBirthMonth: years[1] || '', //出生月 province: values.ProvinceCity[0], //省- city: values.ProvinceCity[1], //市 area: values.ProvinceCity[2], //区 sex: values.sex, expert: '0', authentication: this.state.authentication, // mobile: values.mobile, fixedTel: values.fixedTel, qq: values.qq, idNumber: values.idNumber, email: values.email, postalAddress: values.postalAddress, introduction: values.introduction, auditStatus: this.state.auditStatus || '0' }; if (this.state.authenticationState == '0') { dataList.expert = '1'; dataList.workUnit = values.workUnit; dataList.professionalTitle = values.professionalTitle; dataList.qualification = values.qualification; dataList.majorCategory = values.majorCategory; dataList.graduateSchool = values.graduateSchool; dataList.headPortraitUrl = this.state.companyLogoUrl.length>0?(this.state.companyLogoUrl).join(','):[]; dataList.positiveIdUrl = thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : ''; dataList.oppositeIdUrl = thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : ''; } else if (this.state.authenticationState == '1') { dataList.expert = '2'; dataList.typicalCase = values.adviserType == '4' ? values.typicalCase : ''; dataList.workUnit1 = values.adviserType == '4' ? values.workUnit1 : ''; dataList.honer = values.adviserType == '4' ? values.honer : ''; dataList.goodAtIndustry = values.adviserType == '4' ? values.goodAtIndustry : ''; dataList.consultantCertificateUrl = values.adviserType == '4' && lawUrls.length != 0 ? lawUrls : ''; //法律职业资格证 dataList.consultantType = values.adviserType; //顾问类型 dataList.headPortraitUrl = this.state.companyLogoUrl.length>0?(this.state.companyLogoUrl).join(','):[]; dataList.positiveIdUrl = thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : ''; dataList.oppositeIdUrl = thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : ''; } $.ajax({ method: 'post', dataType: 'json', url: globalConfig.context + '/api/user/updateUserDetail', data: dataList }).done( function(data) { this.setState({ loading: false }); if (!data.error.length) { //认证状态判定说明 message.success( (this.state.auditStatus == '0' || this.state.auditStatus == '3') && this.state.companyLogoUrl.length ? '认证审核提交成功,请耐心等待。' : '保存成功' ); this.loadInformation(); } else { message.warning(data.error[0].message); } }.bind(this) ); }, subFun(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { if (this.state.authenticationState == '0' || this.state.authenticationState == '1') { if ((this.state.companyLogoUrl.length)<1) { message.warning(this.state.authenticationState == '1' ? '请上传顾问照片!' : '请上传专家照片'); return; } if(values.adviserType=='4'&&!(this.state.lawUrl.length)){ message.warning('请上传您的律师职业资格证!'); return; } if(!(this.state.oppositeIdUrl.length)||!(this.state.positiveIdUrl.length)){ message.warning('请上传您的身份证正反照片!'); return; } this.setState({ visible: true, values: values }); } else { this.newSubmit(values); } } }); }, handleOk() { this.newSubmit(this.state.values); this.setState({ visible: false }); }, handleCancel() { this.setState({ visible: false }); }, //顾问选择法律顾问 handleSelectChange(value) { if (value == '4') { this.setState({ lawState: true }); } else { this.setState({ lawState: false }); } }, getHeadPortraitUrl(e) { this.setState({ companyLogoUrl: e }); }, getPositiveIdUrl(e) { this.setState({ positiveIdUrl: e }); }, getOppositeIdUrl(e) { this.setState({ oppositeIdUrl: e }); }, componentWillMount() { this.loadInformation(); }, authenticationChange(e){ this.setState({ authenticationState: e.target.value, }); if(this.state.auditStatus=='3'){ this.loadInformation(); } }, //logo图片获取 getAllImg(imgArr){ this.setState({ companyLogoUrl:imgArr }) }, componentWillReceiveProps(nextProps) {}, render() { const { getFieldDecorator } = this.props.form; const { MonthPicker } = DatePicker; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } }; const theData = this.state.data || []; return ( <div className="unit-wrap"> <Form layout="horizontal" onSubmit={this.subFun} id="demand-form" style={{ width: '80%' }}> <Spin spinning={this.state.loading}> <Row style={{ marginBottom: 20 }}> <Col offset={2} span={4}> <h4 style={{ fontSize: 20 }}>个人资料</h4> </Col> </Row> <div className="clearfix"> {this.state.auditStatus == '0' ? ( <FormItem className="half-item" {...formItemLayout} label="姓名"> {getFieldDecorator('identifyName', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.identifyName })(<Input placeholder="输入姓名" maxLength={128} />)} </FormItem> ) : ( <FormItem className="half-item" {...formItemLayout} label="姓名"> <span>{theData.identifyName}</span> </FormItem> )} <FormItem className="half-item" {...formItemLayout} label="手机号码"> <span>{theData.mobile}</span> </FormItem> {this.state.auditStatus == '0' ? ( <FormItem className="half-item" {...formItemLayout} label="社会属性"> {getFieldDecorator('societyTag', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.societyTag || undefined })( <Select placeholder="客户社会属性" placeholder="请选择社会属性"> {socialAttribute.map(function(item) { return <Select.Option key={item.value}>{item.key}</Select.Option>; })} </Select> )} </FormItem> ) : ( <FormItem className="half-item" {...formItemLayout} label="社会属性"> <span>{getSocialAttribute(theData.societyTag)}</span> </FormItem> )} <FormItem className="half-item" {...formItemLayout} label="行业"> {getFieldDecorator('industry', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.industry ? theData.industry.toString() : undefined })( <Select placeholder="选择行业"> {industry.map(function(item) { return <Select.Option key={item.value}>{item.key}</Select.Option>; })} </Select> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="性别"> {getFieldDecorator('sex', { initialValue: theData.sex })( <Radio.Group> <Radio value={'男'}>男</Radio> <Radio value={'女'}>女</Radio> </Radio.Group> )} </FormItem> <FormItem className="half-item" {...formItemLayout} label="出生日期"> <MonthPicker value={this.state.yearMonth ? moment(this.state.yearMonth, monthFormat) : undefined} format={monthFormat} onChange={(time, times) => { this.setState({ yearMonth: time, yearList: times }); }} /> </FormItem> <FormItem className="half-item" {...formItemLayout} label="身份证号码"> {getFieldDecorator('idNumber', { initialValue: theData.idNumber })(<Input placeholder="身份证号码" maxLength={20} />)} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="省-市-区"> {getFieldDecorator('ProvinceCity', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: this.state.ProvinceCity })(<Cascader options={areaSelect()} placeholder="选择城市" />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="通信地址"> {getFieldDecorator('postalAddress', { initialValue: theData.postalAddress })(<Input placeholder="输入通信地址" maxLength={255} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="固定电话"> {getFieldDecorator('fixedTel', { initialValue: theData.fixedTel })(<Input placeholder="输入固定电话" maxLength={13} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="QQ"> {getFieldDecorator('qq', { initialValue: theData.qq })(<Input placeholder="输入qq" maxLength={16} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="电子邮箱"> {getFieldDecorator('email', { initialValue: theData.email })(<Input placeholder="输入电子邮箱" maxLength={128} />)} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="个人简介"> {getFieldDecorator('introduction', { initialValue: theData.introduction, rules: [ { required: true, message: '此项为必填项!' } ] })( <Input type="textarea" rows={4} maxLength={512} placeholder="输入个人简介,比如案例、简介、从业时间、服务企业等" /> )} </FormItem> </div> {(this.state.expert == '0' || this.state.auditStatus == '0' || this.state.expert == null || this.state.auditStatus == '3') && this.state.type != null ? ( <div> <div className="clearfix btnGrounp"> <Radio.Group value={this.state.authenticationState} onChange={this.authenticationChange} > {/* <Radio.Button value="0">专家认证</Radio.Button> */} <Radio.Button value="1">顾问认证</Radio.Button> </Radio.Group> <Button type="dashed" style={{ marginLeft: 20 }} onClick={(e) => { this.setState({ authenticationState: undefined }); }} > 暂不认证 </Button> <span style={{ marginLeft: 10, color: '#f00' }}> {this.state.auditStatus == '3' ? '(认证失败:' + this.state.authMessage + ')' : ''} </span> </div> {this.state.authenticationState == '0' && (this.state.auditStatus == '0' || this.state.auditStatus == '3') ? ( <div className="patentBody"> <FormItem className="half-item" {...formItemLayout} label="毕业院校"> {getFieldDecorator('graduateSchool', { initialValue: theData.graduateSchool, rules: [ { required: true, message: '此项为必填项!' } ] })(<Input placeholder="输入毕业院校全称" maxLength={32} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="专业类别"> {getFieldDecorator('majorCategory', { initialValue: theData.majorCategory, rules: [ { required: true, message: '此项为必填项!' } ] })(<Input placeholder="输入专业" maxLength={16} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="职业资格"> {getFieldDecorator('qualification', { initialValue: theData.qualification, rules: [ { required: true, message: '此项为必填项!' } ] })(<Input placeholder="输入职业资格" maxLength={32} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="就职单位"> {getFieldDecorator('workUnit', { initialValue: theData.workUnit, rules: [ { required: true, message: '此项为必填项!' } ] })(<Input placeholder="输入就职单位全称" maxLength={64} />)} </FormItem> <FormItem className="half-item" {...formItemLayout} label="职称"> {getFieldDecorator('professionalTitle', { initialValue: theData.professionalTitle, rules: [ { required: true, message: '此项为必填项!' } ] })(<Input placeholder="输入职称" maxLength={32} />)} </FormItem> </div> ) : this.state.authenticationState == '1' ? ( <div> <FormItem className="half-item" {...formItemLayout} label="顾问类型"> {getFieldDecorator('adviserType', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.consultantType || theData.consultantType == '0' ? theData.consultantType.toString() : undefined })( <Select placeholder="选择类型" onChange={this.handleSelectChange.bind(this)} > {adviserType.map(function(item) { return ( <Select.Option key={item.value}>{item.key}</Select.Option> ); })} </Select> )} </FormItem> </div> ) : ( '' )} {this.state.lawState && this.state.authenticationState == '1' ? ( <div className="clearfix"> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="律师事务所"> {getFieldDecorator('workUnit1', { rules: [ { required: true, message: '此项为必填项!' } ], initialValue: theData.workUnit1 })(<Input placeholder="请填写所在律师事务所全称" />)} </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="职称"> {getFieldDecorator('honer', { initialValue: theData.honer })(<Input placeholder="请填写您的职称" />)} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="擅长行业"> {getFieldDecorator('goodAtIndustry', { initialValue: theData.goodAtIndustry, })( <Input type="textarea" rows={4} maxLength={10000} placeholder="填写您擅长的行业" /> )} </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="典型案例"> {getFieldDecorator('typicalCase', { initialValue: theData.typicalCase, rules: [ { required: true, message: '此项为必填项!' } ] })( <Input type="textarea" rows={4} maxLength={10000} placeholder="输入典型案例" /> )} </FormItem> </div> </div> ) : ( '' )} {this.state.authenticationState == '1' || this.state.authenticationState == '0' ? ( <div className="clearfix pictures"> <div className="clearfix"> <FormItem className="half-item" className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label={ <span> <strong style={{ color: '#f00' }}> * </strong> <span> {this.state.authenticationState == '0' ? '专家照片' : '顾问照片'} </span> </span> } > <Crop getAllImg={this.getAllImg} number = {1} aspectRatio = {1/1} url ={globalConfig.context + '/api/user/uploadPicture64'} uploadData = {{sign:'user_picture'}} urlArr = {this.state.companyLogoUrl} /> <p>建议:图片要清晰。</p> </FormItem> {this.state.lawState && this.state.authenticationState == '1' ? ( <FormItem className="half-item" className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label={ <span> <strong style={{ color: '#f00' }}> * </strong> <span>律师职业资格证</span> </span> } > <PicturesWall fileList={(e) => { this.setState({ lawUrl: e }); }} pictureUrl={this.state.lawUrl} /> <p>建议:图片要清晰。</p> </FormItem> ) : ( '' )} </div> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label={ <span> <strong style={{ color: '#f00' }}>*</strong> <span>身份证正面</span> </span> } > <PicturesWall fileList={this.getPositiveIdUrl} pictureUrl={this.state.positiveIdUrl} /> <p>建议:图片要清晰。</p> </FormItem> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label={ <span> <strong style={{ color: '#f00' }}>*</strong> <span>身份证反面</span> </span> } > <PicturesWall fileList={this.getOppositeIdUrl} pictureUrl={this.state.oppositeIdUrl} /> <p>建议:图片要清晰。</p> </FormItem> </div> ) : ( '' )} </div> ) : (this.state.auditStatus == '2' || this.state.auditStatus == '1') && this.state.expert == '1' ? ( <div> <div className="authState"> 专家认证<span>({getAuthState(this.state.auditStatus)})</span> </div> <FormItem className="half-item" {...formItemLayout} label="毕业院校"> <span>{theData.graduateSchool}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="专业类别"> <span>{theData.majorCategory}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="职业资格"> <span>{theData.qualification}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="就职单位"> <span>{theData.workUnit}</span> </FormItem> <FormItem className="half-item" {...formItemLayout} label="职称"> <span>{theData.professionalTitle}</span> </FormItem> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 13 }} label="专家照片"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.headPortraitUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </FormItem> </div> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label="身份证正面" > <div className="clearfix"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.positiveIdUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> </FormItem> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label="身份证反面" > <div className="clearfix"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.oppositeIdUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> </FormItem> </div> ) : (this.state.auditStatus == '2' || this.state.auditStatus == '1') && this.state.expert == '2' ? ( <div className="clearfix"> <div className="authState"> 顾问认证<span>({getAuthState(this.state.auditStatus)})</span> </div> <FormItem className="half-item" {...formItemLayout} label="顾问类型"> <span>{getAdviserType(theData.consultantType)}</span> </FormItem> {theData.consultantType == '4' ? ( <div className="clearfix"> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="律师事务所"> <span>{theData.workUnit1}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" {...formItemLayout} label="职称"> <span>{theData.honer}</span> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="擅长行业"> <span>{theData.goodAtIndustry}</span> </FormItem> </div> <div className="clearfix"> <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 10 }} label="典型案例"> <span>{theData.typicalCase}</span> </FormItem> </div> </div> ) : ( '' )} <div className="clearfix"> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label="顾问照片"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.headPortraitUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </FormItem> {theData.consultantType == '4' && ( <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label="律师职业资格证"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.lawUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </FormItem> )} </div> <div> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label="身份证正面" > <div className="clearfix"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.positiveIdUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> </FormItem> <FormItem className="picWidth" labelCol={{ span: 9 }} wrapperCol={{ span: 10 }} label="身份证反面" > <div className="clearfix"> <Upload className="demandDetailShow-upload" listType="picture-card" fileList={this.state.oppositeIdUrl} onPreview={(file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true }); }} /> <Modal maskClosable={false} footer={null} visible={this.state.previewVisible} onCancel={() => { this.setState({ previewVisible: false }); }} > <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} /> </Modal> </div> </FormItem> </div> </div> ) : ( '' )} <div className="clearfix"> <Row style={{ marginBottom: 20 }}> <Col offset={3} span={4}> <Button size="large" className="set-submit" type="primary" htmlType="submit"> 保存 </Button> </Col> </Row> </div> </Spin> </Form> <Modal visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}> {this.state.authenticationState == '0' && <p>是否申请专家认证?注意:认证成功后,您的信息将在本平台展示。</p>} {this.state.authenticationState == '1' && <p>是否申请顾问认证?注意:认证成功后,您的信息将在本平台展示。</p>} </Modal> </div> ); } }); export default Form.create()(Expert);