account.jsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import React from 'react';
  2. import {Form,Button,Spin,message,Input,Select,Radio} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. const FormItem =Form.Item;
  6. import {statuslist,lvl,currentMember} from '@/dataDic.js';
  7. import {getcustomerTyp} from '@/tools.js';
  8. const Account =React.createClass({
  9. httpAccount(record) {
  10. $.ajax({
  11. method: "get",
  12. dataType: "json",
  13. crossDomain: false,
  14. url: globalConfig.context + '/api/admin/customer/findUserAccountDetail',
  15. data: {
  16. uid: record
  17. },
  18. success: function(data) {
  19. let thisData = data.data;
  20. if(!thisData) {
  21. if(data.error && data.error.length) {
  22. message.warning(data.error[0].message);
  23. };
  24. thisData = {};
  25. };
  26. let sourcecustomer = ''
  27. switch(String(thisData.source)) {
  28. case '0':
  29. sourcecustomer = '注册客户'
  30. break;
  31. case '1':
  32. sourcecustomer = '录入客户'
  33. break;
  34. }
  35. this.setState({
  36. Accountuid: thisData.id,
  37. mobile: thisData.mobile,
  38. nickname: thisData.nickname,
  39. email: thisData.email,
  40. type: getcustomerTyp(String(thisData.type)),
  41. source: sourcecustomer,
  42. isMember: thisData.isMember,
  43. currentMemberStatus: String(thisData.currentMemberStatus),
  44. lvl: String(thisData.lvl),
  45. status: String(thisData.status),
  46. createTimes: thisData.createTimes,
  47. });
  48. }.bind(this),
  49. }).always(function() {
  50. this.setState({
  51. loading: false
  52. });
  53. }.bind(this));
  54. },
  55. getInitialState(){
  56. return{
  57. loading:false
  58. }
  59. },
  60. //账户信息保存
  61. accountSave(e) {
  62. e.preventDefault();
  63. if(!this.state.mobile) {
  64. message.warning('手机号码不能为空!')
  65. return false;
  66. }
  67. this.setState({
  68. loading: true
  69. });
  70. $.ajax({
  71. method: "post",
  72. dataType: "json",
  73. url: globalConfig.context + '/api/admin/customer/updateUserAccount',
  74. data: {
  75. id: this.state.Accountuid,
  76. mobile: this.state.mobile,
  77. nickname: this.state.nickname,
  78. email: this.state.email,
  79. isMember: this.state.isMember,
  80. currentMemberStatus: this.state.currentMemberStatus,
  81. lvl: this.state.lvl,
  82. status: this.state.status,
  83. }
  84. }).done(function(data) {
  85. this.setState({
  86. loading: false
  87. });
  88. if(!data.error.length) {
  89. message.success('保存成功!');
  90. this.props.closeDetail(false,true)
  91. } else {
  92. message.warning(data.error[0].message);
  93. }
  94. }.bind(this));
  95. },
  96. componentWillMount(){
  97. this.httpAccount(this.props.data.id);
  98. },
  99. detailsModal(){
  100. this.props.closeDetail(false, false)
  101. },
  102. componentWillReceiveProps(nextProps) {
  103. if(nextProps.data.id&&nextProps.accountState){
  104. this.httpAccount(nextProps.data.id)
  105. }
  106. },
  107. render(){
  108. const formItemLayout = {
  109. labelCol: { span: 8 },
  110. wrapperCol: { span: 14 },
  111. };
  112. return(
  113. <div className="clearfix">
  114. <Form layout="horizontal" id="demand-form" onSubmit={this.accountSave} >
  115. <Spin spinning={this.state.loading} >
  116. <FormItem className="half-item"
  117. {...formItemLayout}
  118. label="注册手机号" >
  119. <span>{this.state.mobile}</span>
  120. </FormItem>
  121. <FormItem className="half-item"
  122. {...formItemLayout}
  123. label="注册用户名" >
  124. <Input value={this.state.nickname} onChange={(e) => { this.setState({ nickname: e.target.value }); }} />
  125. </FormItem>
  126. <FormItem className="half-item"
  127. {...formItemLayout}
  128. label="注册邮箱" >
  129. <Input value={this.state.email} onChange={(e) => { this.setState({ email: e.target.value }); }} />
  130. </FormItem>
  131. <div className="clearfix">
  132. <FormItem className="half-item"
  133. {...formItemLayout}
  134. label="客户来源" >
  135. <span>{this.state.source}</span>
  136. </FormItem>
  137. <FormItem className="half-item"
  138. {...formItemLayout}
  139. label="客户类型" >
  140. <span>{this.state.type}</span>
  141. </FormItem>
  142. <FormItem className="half-item"
  143. {...formItemLayout}
  144. label="创建时间" >
  145. <span>{this.state.createTimes}</span>
  146. </FormItem>
  147. <FormItem className="half-item"
  148. {...formItemLayout}
  149. label="账户状态"
  150. >
  151. <Select placeholder="账户状态" value={this.state.status} onChange={(e) => { this.setState({ status: e }); }} >
  152. {
  153. statuslist.map(function (item) {
  154. return <Select.Option key={item.value} >{item.key}</Select.Option>
  155. })
  156. }
  157. </Select>
  158. </FormItem>
  159. </div>
  160. <div className="clearfix">
  161. <FormItem className="half-item"
  162. {...formItemLayout}
  163. label="会员"
  164. >
  165. <Radio.Group value={this.state.isMember} onChange={(e) => {
  166. this.setState({ isMember: e.target.value })
  167. }}>
  168. <Radio value={0}>否</Radio>
  169. <Radio value={1}>是</Radio>
  170. </Radio.Group>
  171. </FormItem>
  172. <FormItem className="half-item"
  173. {...formItemLayout}
  174. label="会员等级"
  175. >
  176. <Select placeholder="客户状态" value={this.state.lvl} onChange={(e) => { this.setState({ lvl: e }); }} >
  177. {
  178. lvl.map(function (item) {
  179. return <Select.Option key={item.value} >{item.key}</Select.Option>
  180. })
  181. }
  182. </Select>
  183. </FormItem>
  184. <FormItem className="half-item"
  185. {...formItemLayout}
  186. label="会员状态"
  187. >
  188. <Select placeholder="会员状态" value={this.state.currentMemberStatus} onChange={(e) => { this.setState({ currentMemberStatus: e }); }} >
  189. {
  190. currentMember.map(function (item) {
  191. return <Select.Option key={item.value} >{item.key}</Select.Option>
  192. })
  193. }
  194. </Select>
  195. </FormItem>
  196. </div>
  197. <div className="clearfix">
  198. <Button className='saveBtn' type="primary" htmlType="submit">保存</Button>
  199. <Button type="ghost" onClick={this.detailsModal}>取消</Button>
  200. </div>
  201. </Spin>
  202. </Form>
  203. </div>
  204. )
  205. }
  206. })
  207. export default Account;