/* @author:李霆 @update:2018/05/29 @descript:复制粘贴,拿起来就是干!! */ import React from 'react'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { Row, Col, Form, Button, Spin, message, Modal, Input } from 'antd'; import {getStatuslist} from '@/tools.js'; import './account.less'; const FormItem = Form.Item; class Account extends React.Component { constructor(props) { super(props); this.state = { loading: false, visible: false, editState: false, }; } loadData() { this.setState({ loading: true }); $.ajax({ method: 'get', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/user/userBase', success: function(data) { if (data.error.length || data.data == '') { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { this.setState({ uid:data.data.uid, username: data.data.username, //用户注册名 nickname: data.data.nickname, //用户昵称 identifyName: data.data.identifyName, //注册名称 email: data.data.email, mobile:data.data.mobile, //手机号码 headPortraitUrl:data.data.headPortraitUrl, //头像地址 type:data.data.type, //用户类型(0-个人,1-企业) accountData: data.data, status:data.data.status,//用户状态 0-正常,1-注销 ,2-锁定 authentication:data.data.authentication, //实名认证状态 0-未认证,1-个人实名认 createTime:data.data.createTime?new Date(data.data.createTime).toLocaleString():'' }); } }.bind(this) }).always( function() { this.setState({ loading: false }); }.bind(this) ); } //修改密码 passFun() { this.setState({ visible: true, password: '', repeatPass: '' }); } //企业认证 companyFun() {} //个人认证 personFun() {} //修改密码 passSubmit() { if (!this.state.name) { message.warning('请填写昵称!'); return; } if (!this.state.password) { message.warning('请填写新密码!'); return; } if (this.state.password !== this.state.repeatPass) { message.warning('两次输入的密码不一致!'); } this.setState({ loading: true }); $.ajax({ method: 'POST', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/user/mobile', data: { mobile: this.state.mobile, mobileCode: this.state.mcode, password: this.state.password, name: this.state.name } }).done( function(data) { if (!data.error.length) { this.setState({ visible: false }); message.success('修改成功!'); this.loadData(); } else { message.warning(data.error[0].message); } }.bind(this) ); } handleOk() { this.passSubmit(); } handleCancel() { this.setState({ visible: false }); } //单个修改 btnFun(item) { switch (item) { case 1: this.setState({ editName: true }); setTimeout(()=>{this.refs.name.focus()},10) break; case 2: this.setState({ editPhoto: true }); setTimeout(()=>{this.refs.photo.focus()},10) break; case 3: this.setState({ editEmail: true }); setTimeout(()=>{this.refs.email.focus()},10) break; case 4: this.setState({ editNickname: true }); setTimeout(()=>{this.refs.nickname.focus()},10) break; } this.enterFun(item); } //保存单个修改 saveFun(item) { $.ajax({ method: 'POST', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/user/updateUserBase', data: { identifyName: this.state.identifyName, mobile: this.state.mobile, email: this.state.email, nickname: this.state.nickname, type:this.state.type } }).done( function(data) { if (!data.error.length) { this.setState({ visible: false }); message.success('修改成功!'); switch (item) { case 1: this.setState({ editName: false }); break; case 2: this.setState({ editPhoto: false }); break; case 3: this.setState({ editEmail: false }); break; case 4: this.setState({ editNickname: false }); break; } this.loadData(); document.onkeydown={}; } else { message.warning(data.error[0].message); } }.bind(this) ); } //按下键盘回车键时保存 enterFun(item) { if(item){ document.onkeydown=function(e){ //对整个页面文档监听回车键 var keyNum=window.event ? e.keyCode :e.which; if(keyNum==13){ this.saveFun(item); } }.bind(this) } } componentWillMount(){ this.loadData(); } render() { const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 10 } }; const formItemLayoutBtn = { labelCol: { span: 8 }, wrapperCol: { span: 6 } }; const accountData = this.state.account || []; return ( <div className="account-wrap"> <span style={{'fontSize':20,marginLeft:30,marginBottom:20,display:'inline-block'}}>账号管理</span> <div className="clearfix"> <Spin spinning={this.state.loading}> {/* <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="注册账号"> <span>{this.state.username}</span> {/* <Button disabled size="default" onClick={this.passFun.bind(this)} type="primary" className="Authentication" > 修改密码 </Button> </FormItem> </Col> </Row>*/} {/* <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="注册名称"> {this.state.editName ? ( <Input value={this.state.identifyName} onBlur={(e) => { this.saveFun(1); }} ref="name" placeholder="请填写注册名称" onChange={(e) => { this.setState({ identifyName: e.target.value }); }} /> ) : ( <span>{this.state.identifyName}</span> )} {this.state.editName ? ( '' ) : ( <Button className="Authentication" onClick={(e) => { this.btnFun(1); }} icon="edit" /> )} </FormItem> </Col> </Row> */} <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="注册手机号"> {this.state.editPhoto ? ( <Input value={this.state.mobile} onBlur={(e) => { this.saveFun(2); }} ref="photo" placeholder="请填写注册手机号" onChange={(e) => { this.setState({ mobile: e.target.value }); }} /> ) : ( <span>{this.state.mobile}</span> )} {this.state.editPhoto ? ( '' ) : ( <Button className="Authentication" onClick={(e) => { this.btnFun(2); }} icon="edit" /> )} </FormItem> </Col> {/* <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="注册手机号"> <span>{this.state.mobile}</span> </FormItem> </Col> */} <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="注册邮箱"> {this.state.editEmail ? ( <Input value={this.state.email} onBlur={(e) => { this.saveFun(3); }} ref="email" placeholder="请填写注册邮箱" onChange={(e) => { this.setState({ email: e.target.value }); }} /> ) : ( <span>{this.state.email}</span> )} {this.state.editEmail ? ( '' ) : ( <Button className="Authentication" onClick={(e) => { this.btnFun(3); }} icon="edit" /> )} </FormItem> </Col> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="账号昵称"> {this.state.editNickname ? ( <Input value={this.state.nickname} onBlur={(e) => { this.saveFun(4); }} ref="nickname" placeholder="请填写账号昵称" onChange={(e) => { this.setState({ nickname: e.target.value }); }} /> ) : ( <span>{this.state.nickname}</span> )} {this.state.editNickname ? ( '' ) : ( <Button className="Authentication" onClick={(e) => { this.btnFun(4); }} icon="edit" /> )} </FormItem> </Col> </Row> <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="账号类型"> {this.state.type=='1'&&<span>企业</span>} {this.state.type=='0'&&<span>个人</span>} </FormItem> </Col> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="账号状态"> <span>{getStatuslist(this.state.status)||'正常'}</span> </FormItem> </Col> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="注册时间"> <span>{this.state.createTime}</span> </FormItem> </Col> </Row> {/* <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="企业实名认证"> <span>{accountData.account}</span> <Button size="default" onClick={this.companyFun.bind(this)} type="primary" className="Authentication" > 立即企业认证 </Button> </FormItem> </Col> <Col span={16}> <span className="danger">实行企业实名认证后,您将享受到技淘网提供的全方位的科技咨询服务</span> </Col> </Row> <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="个人实名认证"> <span>{accountData.account}</span> <Button size="default" onClick={this.companyFun.bind(this)} type="primary" className="Authentication" > 立即个人认证 </Button> </FormItem> </Col> <Col span={16}> <span className="danger">实行个人实名认证后,您将享受技淘网提供的全方位的知识产权运营服务</span> </Col> </Row> <Row> <Col span={8}> <FormItem className="half-mid" {...formItemLayout} label="科技专家认证"> <span>{accountData.account}</span> <Button size="default" onClick={this.companyFun.bind(this)} type="primary" className="Authentication" > 立即申请专家 </Button> </FormItem> </Col> <Col span={16}> <span className="danger">实行科技专家认证后,您将成为技淘网的科技服务专家,为其他用户提供科技咨询服务</span> </Col> </Row> */} </Spin> </div> <Modal title="修改密码" width="600px" visible={this.state.visible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)} > <div> <Form layout="horizontal" id="demand-form" onSubmit={this.passSubmit}> <Spin spinning={this.state.loading}> <div className="clearfix"> <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} className="half-mid" label="注册账号" > <span>{this.state.followTime}</span> </FormItem> <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} className="half-mid" label="注册名称" > <Input value={this.state.name} type="text" onChange={(e) => { this.setState({ name: e.target.value }); }} /> </FormItem> <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} className="half-mid" label="新密码" > <Input value={this.state.password} type="password" placeholder="请输入新密码" onChange={(e) => { this.setState({ password: e.target.value }); }} /> </FormItem> <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} className="half-mid" label="新密码确认" > <Input value={this.state.repeatPass} type="password" placeholder="请再次输入新密码" onChange={(e) => { this.setState({ repeatPass: e.target.value }); }} /> </FormItem> </div> </Spin> </Form> </div> </Modal> </div> ); } } export default Account;