account.jsx 7.4 KB

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