123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- import React from 'react';
- import { Input, Button, Select, Form, Radio, Upload, Icon, DatePicker, Spin } from 'antd';
- import './base.less';
- const FormItem = Form.Item;
- const Option = Select.Option;
- const RadioGroup = Radio.Group;
- const edulvlArr = ["高中", "大专", "本科", "硕士研究生", "博士研究生"];
- import weixin from '../../../../image/weixin-w.png';
- import qq from '../../../../image/qq-w.png';
- import weibo from '../../../../image/weibo-w.png';
- import card1 from '../../../../image/idcard1.jpg';
- import card2 from '../../../../image/idcard2.jpg';
- const BaseFrom = Form.create()(React.createClass({
- handleSubmit(e) {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- },
- normFile(e) {
- if (Array.isArray(e)) {
- return e;
- }
- return e && e.fileList;
- },
- checkidNum(rule, value, callback) {
- const form = this.props.form;
- if (value && value !== form.getFieldValue('password')) {
- callback('Two passwords that you enter is inconsistent!');
- } else {
- callback();
- }
- },
- checkUpload(file) {
- const isJPG = file.type === 'image/jpeg';
- if (!isJPG) {
- callback('You can only upload JPG file!');
- }
- const isLt2M = file.size / 1024 / 1024 < 2;
- if (!isLt2M) {
- callback('Image must smaller than 2MB!');
- }
- return isJPG && isLt2M;
- },
- render() {
- const { getFieldDecorator } = this.props.form;
- const formItemLayout = {
- labelCol: { span: 3 },
- wrapperCol: { span: 12 },
- };
- return (
- <Form horizontal onSubmit={this.handleSubmit} className="base-form">
- <FormItem
- labelCol={{ span: 3 }}
- wrapperCol={{ span: 8 }}
- label="学历"
- >
- {getFieldDecorator('edulvl', {
- rules: [{
- required: true, message: '请选择您的学历!',
- }],
- })(
- <Select className="acc-edu-lvl">
- {
- edulvlArr.map(function (item, i) {
- return <Option key={i} value={item} >{item}</Option>
- })
- }
- </Select>
- )}
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="出生日期"
- >
- {getFieldDecorator('birth', {
- rules: [{ type: 'object', required: true, message: '请选择日期!' }],
- })(
- <DatePicker />
- )}
- </FormItem>
- <FormItem wrapperCol={{ span: 21, offset: 3 }}>
- <p>请上传清晰的个人身份证正反面原件照片/扫描件 (不能截图、图片内容要求完整 ),</p>
- <p>要求2M 以下的jpg、jpeg、gif、png格式的图片。该资料不会公开展示,仅作为审核材料使用。</p>
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="身份证"
- >
- {getFieldDecorator('upload', {
- rules: [{
- required: true, message: '请上传身份证照片!',
- }, {
- validator: this.checkUpload,
- }],
- valuePropName: 'fileList',
- normalize: this.normFile,
- })(
- <Upload name="idcard" action="/upload.do" listType="picture" onChange={this.handleUpload}>
- <Button type="ghost">
- <Icon type="upload" /> 点击选择文件
- </Button>
- </Upload>
- )}
- </FormItem>
- <FormItem wrapperCol={{ span: 21, offset: 3 }}>
- <p className="acc-title">示例:</p>
- <div className="idcard-img clearfix">
- <div>
- <div className="idcard-imgbox">
- <img src={card1} alt="" />
- </div>
- </div>
- <div>
- <div className="idcard-imgbox">
- <img src={card2} alt="" />
- </div>
- </div>
- </div>
- </FormItem>
- <FormItem wrapperCol={{ span: 12, offset: 3 }}>
- <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
- </FormItem>
- </Form >
- );
- },
- }));
- const Base = React.createClass({
- getInitialState() {
- return {
- loading: false,
- userid: '1234567',
- userphone: '13512345678'
- };
- },
- render() {
- return (
- <Spin spinning={this.state.loading} className='spin-box'>
- <div className="set-base">
- <div className="acc-detail">
- <p className="acc-title">您登录的账号</p>
- <p>阿凡提号: <span>{this.state.userid}</span></p>
- <p>登录手机号: <span>{this.state.userphone}</span></p>
- <div>
- <Button type="ghost">更换手机</Button>
- <Button type="primary">修改密码</Button>
- </div>
- </div>
- <div className="acc-bind">
- <p className="acc-title">绑定账号 <span>绑定后,可使用第三方账号直接登录阿凡提网</span></p>
- <p>
- <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
- <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
- <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
- </p>
- </div>
- <div className="acc-info">
- <p className="acc-title">身份信息 <span>提供正确的身份信息,有助于进行身份验证,提升信用形象</span></p>
- <BaseFrom />
- </div>
- </div>
- </Spin>
- )
- }
- });
- export default Base;
|