| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507 | /* 	@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			}		}).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();				} 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"										/>									)} */}									<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;
 |