levelSet.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. import React from 'react';
  2. import { Icon, Button, Input, Spin, Table, message, Modal, Tabs, InputNumber, Checkbox } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './userList.less';
  6. const ListAdd = React.createClass({
  7. getInitialState () {
  8. return {
  9. visible: false,
  10. loading: false
  11. };
  12. },
  13. showModal () {
  14. this.setState({
  15. visible: true,
  16. });
  17. },
  18. handleCancel (e) {
  19. this.setState({
  20. visible: false,
  21. });
  22. },
  23. handleOk () {
  24. this.setState({
  25. loading: true,
  26. visible: false
  27. });
  28. },
  29. render () {
  30. return (
  31. <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}>
  32. <Button type="primary" onClick={this.showModal}>添加新等级</Button>
  33. <Modal maskClosable={false}
  34. title="新增用户等级"
  35. visible={this.state.visible}
  36. onCancel={this.handleCancel}
  37. width='400px'
  38. footer={[
  39. <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
  40. <Button key="back" onClick={this.handleCancel}>返回</Button>
  41. ]}
  42. className="admin-desc-content">
  43. <div className='orgAdd-input'>
  44. <span>会员等级名称:</span>
  45. <Input value={this.state.lvlName} style={{ width: '200px' }}
  46. onChange={(e) => { this.setState({ lvlName: e.target.value }); }} />
  47. </div>
  48. </Modal>
  49. </div>
  50. );
  51. }
  52. });
  53. const ListDelete = React.createClass({
  54. getInitialState () {
  55. return {
  56. visible: false,
  57. loading: false
  58. };
  59. },
  60. showModal () {
  61. this.setState({
  62. visible: true,
  63. });
  64. },
  65. handleCancel (e) {
  66. this.setState({
  67. visible: false,
  68. });
  69. },
  70. handleOk () {
  71. this.setState({
  72. loading: true
  73. });
  74. },
  75. render () {
  76. return (
  77. <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}>
  78. <Button type="ghost" onClick={this.showModal}>删除</Button>
  79. <Modal maskClosable={false}
  80. title="删除用户等级"
  81. visible={this.state.visible}
  82. onCancel={this.handleCancel}
  83. width='400px'
  84. footer={[
  85. <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
  86. <Button key="back" onClick={this.handleCancel}>返回</Button>
  87. ]} >
  88. <div className="level-tabs-modal">
  89. <p>
  90. <Icon type="exclamation-circle-o" />
  91. <span> 确认要删除该用户等级吗?删除以后不可恢复!</span>
  92. </p>
  93. </div>
  94. </Modal>
  95. </div>
  96. );
  97. }
  98. });
  99. const SetContent = React.createClass({
  100. getInitialState () {
  101. return {
  102. visible: false,
  103. columns: [
  104. {
  105. title: '会员时长',
  106. dataIndex: 'time',
  107. key: 'time',
  108. render: (text, record, index) => {
  109. return <div>
  110. <Input style={{ width: '80px' }}
  111. value={record.time}
  112. onChange={(e) => {
  113. record.time = e.target.value;
  114. this.setState({ dataSource: this.state.dataSource });
  115. }} />
  116. <span style={{ marginLeft: '10px' }}>个月</span>
  117. </div>
  118. }
  119. }, {
  120. title: '金额',
  121. dataIndex: 'money',
  122. key: 'money',
  123. render: (text, record, index) => {
  124. return <div>
  125. <InputNumber step={0.01} min={0}
  126. value={record.money}
  127. onChange={(e) => {
  128. record.money = e;
  129. this.setState({ dataSource: this.state.dataSource });
  130. }} />
  131. <span style={{ marginLeft: '10px' }}>元</span>
  132. </div>
  133. }
  134. }
  135. ],
  136. dataSource: [],
  137. selectedRowKeys: []
  138. };
  139. },
  140. remove () {
  141. this.state.selectedRowKeys.sort((a, b) => { return b - a });
  142. let theArr = this.state.dataSource.concat();
  143. for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
  144. let dataIndex = this.state.selectedRowKeys[idx];
  145. theArr.map((item, index) => {
  146. if (item.key === dataIndex) {
  147. theArr.splice(index, 1);
  148. }
  149. })
  150. };
  151. this.state.dataSource = [];
  152. for (let i = 0; i < theArr.length; i++) {
  153. let item = theArr[i];
  154. this.state.dataSource.push({
  155. key: i,
  156. time: item.time,
  157. money: item.money
  158. })
  159. };
  160. this.setState({
  161. dataSource: this.state.dataSource,
  162. selectedRowKeys: []
  163. });
  164. },
  165. addNew () {
  166. this.state.dataSource.push({
  167. key: this.state.dataSource.length,
  168. time: '',
  169. money: ''
  170. });
  171. this.setState({
  172. dataSource: this.state.dataSource
  173. })
  174. },
  175. render () {
  176. const rowSelection = {
  177. type: 'checkbox',
  178. selectedRowKeys: this.state.selectedRowKeys,
  179. onChange: (selectedRowKeys, selectedRows) => {
  180. this.setState({
  181. selectedRows: selectedRows,
  182. selectedRowKeys: selectedRowKeys
  183. });
  184. }
  185. };
  186. const hasSelected = this.state.selectedRowKeys.length > 0;
  187. return (
  188. <div className="level-tabs">
  189. <div className="level-tabs-title">
  190. <span>会员等级费用设置</span>
  191. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  192. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  193. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  194. disabled={!hasSelected}
  195. onClick={this.remove}>删除<Icon type="minus" /></Button>
  196. </div>
  197. <Table className="level-tabs-table no-all-select"
  198. columns={this.state.columns}
  199. dataSource={this.state.dataSource}
  200. pagination={false}
  201. rowSelection={rowSelection} />
  202. <div className="level-tabs-title">
  203. <span>会员等级增值服务设置</span>
  204. </div>
  205. <div>
  206. <div className="level-checkbox">
  207. <Checkbox checked={this.state.checked}
  208. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  209. 科技成果,专家信息定点推送
  210. </Checkbox>
  211. </div>
  212. <div className="level-checkbox">
  213. <Checkbox checked={this.state.checked}
  214. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  215. 查看专家的联系方式
  216. </Checkbox>
  217. </div>
  218. <div className="level-checkbox">
  219. <Checkbox checked={this.state.checked}
  220. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  221. 任何业务申请,付费业享受会员专属折扣
  222. </Checkbox>
  223. </div>
  224. <div className="level-checkbox">
  225. <Checkbox checked={this.state.checked}
  226. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  227. 一对一的技术经纪人服务,进行技术成果媒合服务
  228. </Checkbox>
  229. </div>
  230. <div className="level-checkbox">
  231. <Checkbox checked={this.state.checked}
  232. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  233. 一对一的科技咨询师服务
  234. </Checkbox>
  235. </div>
  236. <div className="level-checkbox">
  237. <Checkbox checked={this.state.checked}
  238. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  239. 一对一的专业技术顾问,搜集技术情报,提供研发高参
  240. </Checkbox>
  241. </div>
  242. <div className="level-checkbox">
  243. <Checkbox checked={this.state.checked}
  244. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  245. 免费参加现场业务培训会
  246. </Checkbox>
  247. </div>
  248. <div className="level-checkbox">
  249. <Checkbox checked={this.state.checked}
  250. onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
  251. 免前期费用做科技类扶持资金项目申报
  252. </Checkbox>
  253. </div>
  254. </div>
  255. <div className="level-tabs-save">
  256. <Button type="primary" onClick={this.search}>保存</Button>
  257. <ListDelete />
  258. </div>
  259. </div>
  260. );
  261. }
  262. });
  263. const CustomerList = React.createClass({
  264. loadData (pageNo) {
  265. this.setState({
  266. loading: true
  267. });
  268. $.ajax({
  269. method: "get",
  270. dataType: "json",
  271. crossDomain: false,
  272. url: globalConfig.context + "/api/admin/customer",
  273. data: {
  274. },
  275. success: function (data) {
  276. if (data.error && data.error.length) {
  277. message.warning(data.error[0].message);
  278. }
  279. }.bind(this),
  280. }).always(function () {
  281. this.setState({
  282. loading: false
  283. });
  284. }.bind(this));
  285. },
  286. getInitialState () {
  287. return {
  288. data: [],
  289. loading: false
  290. };
  291. },
  292. componentWillMount () {
  293. this.loadData();
  294. },
  295. tabChange () { },
  296. render () {
  297. return (
  298. <div className="user-content" >
  299. <div className="content-title clearfix">
  300. <span>会员等级管理</span>
  301. <ListAdd />
  302. </div>
  303. <div>
  304. <Tabs defaultActiveKey="1" onChange={this.tabChange}>
  305. <Tabs.TabPane tab="黄金会员" key="1">
  306. <SetContent />
  307. </Tabs.TabPane>
  308. <Tabs.TabPane tab="钻石会员" key="2">
  309. <SetContent />
  310. </Tabs.TabPane>
  311. </Tabs>
  312. </div>
  313. </div >
  314. );
  315. }
  316. });
  317. export default CustomerList;