123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- 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;
- 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;
- },
- checkPhone(rule, value, callback) {
- const form = this.props.form;
- if (!(/^1[34578]\d{9}$/.test(value))) {
- callback('请输入正确的手机号码!');
- } else {
- callback();
- }
- },
- render() {
- const { getFieldDecorator } = this.props.form;
- const formItemLayout = {
- labelCol: { span: 3 },
- wrapperCol: { span: 12 },
- };
- return (
- <Form horizontal onSubmit={this.handleSubmit} className="base-form">
- <FormItem
- {...formItemLayout}
- label='联系人'
- hasFeedback
- >
- {getFieldDecorator('contact')(
- <Input />
- )}
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="手机号码"
- hasFeedback
- >
- {getFieldDecorator('phone', {
- initialValue: this.props.userphone,
- rules: [
- {
- validator: this.checkPhone
- }],
- })(
- <Input />
- )}
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="电子邮箱"
- hasFeedback
- >
- {getFieldDecorator('email', {
- rules: [{
- type: 'email', message: '请输入正确的邮箱地址!',
- }],
- })(
- <Input />
- )}
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="固定电话"
- >
- {getFieldDecorator('telephone')(
- <Input />
- )}
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="QQ"
- >
- {getFieldDecorator('qq')(
- <Input />
- )}
- </FormItem>
- <FormItem
- {...formItemLayout}
- label="通讯地址"
- >
- {getFieldDecorator('address')(
- <Input />
- )}
- </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',
- zoneState: '0'
- };
- },
- 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.zoneState == '0' ? <a href="">普通空间</a> : <a href="">认证空间</a>}</span>(通过<a href="">实名认证</a>,即可免费开通认证空间) </p>
- <div>
- <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">请确认您的联系信息</p>
- <BaseFrom userphone={this.state.userphone} />
- </div>
- </div>
- </Spin>
- )
- }
- });
- export default Base;
|