group.jsx 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import React from 'react';
  2. import { Input, Button, Select, Form, Radio, Upload, Icon, DatePicker, Spin } from 'antd';
  3. import './base.less';
  4. const FormItem = Form.Item;
  5. const Option = Select.Option;
  6. const RadioGroup = Radio.Group;
  7. import weixin from '../../../../image/weixin-w.png';
  8. import qq from '../../../../image/qq-w.png';
  9. import weibo from '../../../../image/weibo-w.png';
  10. import card1 from '../../../../image/idcard1.jpg';
  11. import card2 from '../../../../image/idcard2.jpg';
  12. const BaseFrom = Form.create()(React.createClass({
  13. handleSubmit(e) {
  14. e.preventDefault();
  15. this.props.form.validateFields((err, values) => {
  16. if (!err) {
  17. console.log('Received values of form: ', values);
  18. }
  19. });
  20. },
  21. normFile(e) {
  22. if (Array.isArray(e)) {
  23. return e;
  24. }
  25. return e && e.fileList;
  26. },
  27. checkidNum(rule, value, callback) {
  28. const form = this.props.form;
  29. if (value && value !== form.getFieldValue('password')) {
  30. callback('Two passwords that you enter is inconsistent!');
  31. } else {
  32. callback();
  33. }
  34. },
  35. checkUpload(file) {
  36. const isJPG = file.type === 'image/jpeg';
  37. if (!isJPG) {
  38. callback('You can only upload JPG file!');
  39. }
  40. const isLt2M = file.size / 1024 / 1024 < 2;
  41. if (!isLt2M) {
  42. callback('Image must smaller than 2MB!');
  43. }
  44. return isJPG && isLt2M;
  45. },
  46. checkPhone(rule, value, callback) {
  47. const form = this.props.form;
  48. if (!(/^1[34578]\d{9}$/.test(value))) {
  49. callback('请输入正确的手机号码!');
  50. } else {
  51. callback();
  52. }
  53. },
  54. render() {
  55. const { getFieldDecorator } = this.props.form;
  56. const formItemLayout = {
  57. labelCol: { span: 3 },
  58. wrapperCol: { span: 12 },
  59. };
  60. return (
  61. <Form horizontal onSubmit={this.handleSubmit} className="base-form">
  62. <FormItem
  63. {...formItemLayout}
  64. label='联系人'
  65. hasFeedback
  66. >
  67. {getFieldDecorator('contact')(
  68. <Input />
  69. )}
  70. </FormItem>
  71. <FormItem
  72. {...formItemLayout}
  73. label="手机号码"
  74. hasFeedback
  75. >
  76. {getFieldDecorator('phone', {
  77. initialValue: this.props.userphone,
  78. rules: [
  79. {
  80. validator: this.checkPhone
  81. }],
  82. })(
  83. <Input />
  84. )}
  85. </FormItem>
  86. <FormItem
  87. {...formItemLayout}
  88. label="电子邮箱"
  89. hasFeedback
  90. >
  91. {getFieldDecorator('email', {
  92. rules: [{
  93. type: 'email', message: '请输入正确的邮箱地址!',
  94. }],
  95. })(
  96. <Input />
  97. )}
  98. </FormItem>
  99. <FormItem
  100. {...formItemLayout}
  101. label="固定电话"
  102. >
  103. {getFieldDecorator('telephone')(
  104. <Input />
  105. )}
  106. </FormItem>
  107. <FormItem
  108. {...formItemLayout}
  109. label="QQ"
  110. >
  111. {getFieldDecorator('qq')(
  112. <Input />
  113. )}
  114. </FormItem>
  115. <FormItem
  116. {...formItemLayout}
  117. label="通讯地址"
  118. >
  119. {getFieldDecorator('address')(
  120. <Input />
  121. )}
  122. </FormItem>
  123. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  124. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  125. </FormItem>
  126. </Form >
  127. );
  128. },
  129. }));
  130. const Base = React.createClass({
  131. getInitialState() {
  132. return {
  133. loading: false,
  134. userid: '1234567',
  135. userphone: '13512345678',
  136. zoneState: '0'
  137. };
  138. },
  139. render() {
  140. return (
  141. <Spin spinning={this.state.loading} className='spin-box'>
  142. <div className="set-base">
  143. <div className="acc-detail">
  144. <p className="acc-title">您登录的账号</p>
  145. <p>阿凡提号: <span>{this.state.userid}</span></p>
  146. <p>空间状态: <span>{this.state.zoneState == '0' ? <a href="">普通空间</a> : <a href="">认证空间</a>}</span>(通过<a href="">实名认证</a>,即可免费开通认证空间) </p>
  147. <div>
  148. <Button type="primary">修改密码</Button>
  149. </div>
  150. </div>
  151. <div className="acc-bind">
  152. <p className="acc-title">绑定账号 <span>绑定后,可使用第三方账号直接登录阿凡提网</span></p>
  153. <p>
  154. <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
  155. <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
  156. <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
  157. </p>
  158. </div>
  159. <div className="acc-info">
  160. <p className="acc-title">请确认您的联系信息</p>
  161. <BaseFrom userphone={this.state.userphone} />
  162. </div>
  163. </div>
  164. </Spin>
  165. )
  166. }
  167. });
  168. export default Base;