jitao-client/js/component/account/setAccount/account.jsx

/* 
	@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;