person.jsx 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. import React from 'react';
  2. import { Input, Button, Form, Select, Radio, Upload, Icon, Spin, message } from 'antd';
  3. import './person.less';
  4. import {addressInit} from '../../tools.js';
  5. const FormItem = Form.Item;
  6. const Option = Select.Option;
  7. const RadioGroup = Radio.Group;
  8. function getBase64(img, callback) {
  9. const reader = new FileReader();
  10. reader.addEventListener('load', () => callback(reader.result));
  11. reader.readAsDataURL(img);
  12. };
  13. function beforeUpload(file) {
  14. const isJPG = file.type === 'image/jpeg';
  15. if (!isJPG) {
  16. message.error('You can only upload JPG file!');
  17. }
  18. const isLt2M = file.size / 1024 / 1024 < 2;
  19. if (!isLt2M) {
  20. message.error('Image must smaller than 2MB!');
  21. }
  22. return isJPG && isLt2M;
  23. };
  24. class Avatar extends React.Component {
  25. constructor(props) {
  26. super(props);
  27. this.state = {
  28. imageUrl: ''
  29. }
  30. }
  31. handleChange(info) {
  32. if (info.file.status === 'done') {
  33. // Get this url from response in real world.
  34. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
  35. }
  36. }
  37. render() {
  38. const imageUrl = this.state.imageUrl;
  39. return (
  40. <Upload
  41. className="avatar-uploader"
  42. name="avatar"
  43. showUploadList={false}
  44. action="/upload.do"
  45. beforeUpload={beforeUpload}
  46. onChange={this.handleChange}
  47. >
  48. {
  49. imageUrl ?
  50. <img src={imageUrl} role="presentation" className="avatar" /> :
  51. <Icon type="plus" className="avatar-uploader-trigger" />
  52. }
  53. </Upload>
  54. );
  55. }
  56. };
  57. const PersonFrom = Form.create()(React.createClass({
  58. getInitialState() {
  59. return {
  60. loading: false,
  61. };
  62. },
  63. handleSubmit(e) {
  64. e.preventDefault();
  65. this.props.form.validateFields((err, values) => {
  66. if (!err) {
  67. console.log('Received values of form: ', values);
  68. }
  69. });
  70. },
  71. normFile(e) {
  72. if (Array.isArray(e)) {
  73. return e;
  74. }
  75. return e && e.fileList;
  76. },
  77. componentDidMount(){
  78. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  79. },
  80. render() {
  81. const { getFieldDecorator } = this.props.form;
  82. const formItemLayout = {
  83. labelCol: { span: 3 },
  84. wrapperCol: { span: 12 },
  85. };
  86. const _me = this;
  87. return (
  88. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  89. <FormItem
  90. {...formItemLayout}
  91. label="社区昵称"
  92. >
  93. {getFieldDecorator('nickname')(
  94. <Input />
  95. )}
  96. </FormItem>
  97. <FormItem
  98. {...formItemLayout}
  99. label="居住地"
  100. >
  101. {getFieldDecorator('province')(
  102. <div>
  103. <select id="cmbProvince" name="cmbProvince"></select>
  104. <select id="cmbCity" name="cmbCity"></select>
  105. <select id="cmbArea" name="cmbArea"></select>
  106. </div>
  107. )}
  108. </FormItem>
  109. <FormItem
  110. {...formItemLayout}
  111. label="个人头像"
  112. labelCol={{ span: 3 }}
  113. wrapperCol={{ span: 20 }}
  114. hasFeedback
  115. >
  116. {getFieldDecorator('avatar')(
  117. <Avatar />
  118. )}
  119. </FormItem>
  120. <div className="set-explain">
  121. <p>请上传清晰的个人身份证正反面原件照片/扫描件 (不能截图、图片内容要求完整 ),</p>
  122. <p>要求2M 以下的jpg、jpeg格式的图片。该资料不会公开展示,仅作为审核材料使用。</p>
  123. </div>
  124. <FormItem
  125. {...formItemLayout}
  126. label="生活照"
  127. >
  128. {getFieldDecorator('liveimg', {
  129. valuePropName: 'fileList',
  130. normalize: this.normFile,
  131. })(
  132. <Upload
  133. name="idcard"
  134. action="/upload.do"
  135. listType="picture"
  136. beforeUpload={beforeUpload}
  137. onChange={this.handleUpload}>
  138. <Button type="primary">
  139. <Icon type="upload" /> 点击选择文件
  140. </Button>
  141. <p>上传的照片图片格式应为jpg格式,大小在2M以内</p>
  142. </Upload>
  143. )}
  144. </FormItem>
  145. <FormItem
  146. labelCol={{ span: 3 }}
  147. wrapperCol={{ span: 20 }}
  148. label="个人简介"
  149. >
  150. {getFieldDecorator('intro')(
  151. <div>
  152. <Input type="textarea"
  153. placeholder="全面介绍自己,让商友更深入了解您,内容长度不超过1000个字。"
  154. rows={6} />
  155. <p>还可输入{
  156. (() => {
  157. if (_me.props.form.getFieldValue('intro') && _me.props.form.getFieldValue('intro').length) {
  158. return 1000 - _me.props.form.getFieldValue('intro').length;
  159. } else {
  160. return 1000;
  161. }
  162. })()
  163. }字/1000</p>
  164. </div>
  165. )}
  166. </FormItem>
  167. <FormItem
  168. {...formItemLayout}
  169. label="电子邮箱"
  170. hasFeedback
  171. >
  172. {getFieldDecorator('email', {
  173. rules: [{
  174. type: 'email', message: '请输入正确的邮箱地址!',
  175. }],
  176. })(
  177. <Input />
  178. )}
  179. </FormItem>
  180. <FormItem
  181. {...formItemLayout}
  182. label="固定电话"
  183. >
  184. {getFieldDecorator('telephone')(
  185. <Input />
  186. )}
  187. </FormItem>
  188. <FormItem
  189. {...formItemLayout}
  190. label="QQ"
  191. >
  192. {getFieldDecorator('qq')(
  193. <Input />
  194. )}
  195. </FormItem>
  196. <FormItem
  197. {...formItemLayout}
  198. label="通讯地址"
  199. >
  200. {getFieldDecorator('address')(
  201. <Input />
  202. )}
  203. </FormItem>
  204. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  205. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  206. </FormItem>
  207. </Form >
  208. );
  209. },
  210. }));
  211. const Person = React.createClass({
  212. getInitialState() {
  213. return {
  214. loading: false
  215. };
  216. },
  217. render() {
  218. return (
  219. <Spin spinning={this.state.loading} className='spin-box'>
  220. <div className="set-person">
  221. <div className="acc-detail">
  222. <p className="acc-title">个人资料</p>
  223. <PersonFrom />
  224. </div>
  225. </div>
  226. </Spin>
  227. )
  228. }
  229. });
  230. export default Person;