|
@@ -0,0 +1,324 @@
|
|
|
+import React from 'react';
|
|
|
+import { Icon, Button, Input, Spin, Table, message, Modal, Tabs, InputNumber, Checkbox } from 'antd';
|
|
|
+import ajax from 'jquery/src/ajax/xhr.js';
|
|
|
+import $ from 'jquery/src/ajax';
|
|
|
+import './userList.less';
|
|
|
+
|
|
|
+const ListAdd = React.createClass({
|
|
|
+ getInitialState () {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ showModal () {
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCancel (e) {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleOk () {
|
|
|
+ this.setState({
|
|
|
+ loading: true,
|
|
|
+ visible: false
|
|
|
+ });
|
|
|
+ },
|
|
|
+ render () {
|
|
|
+ return (
|
|
|
+ <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}>
|
|
|
+ <Button type="primary" onClick={this.showModal}>添加新等级</Button>
|
|
|
+ <Modal maskClosable={false}
|
|
|
+ title="新增用户等级"
|
|
|
+ visible={this.state.visible}
|
|
|
+ onCancel={this.handleCancel}
|
|
|
+ width='400px'
|
|
|
+ footer={[
|
|
|
+ <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
|
|
|
+ <Button key="back" onClick={this.handleCancel}>返回</Button>
|
|
|
+ ]}
|
|
|
+ className="admin-desc-content">
|
|
|
+ <div className='orgAdd-input'>
|
|
|
+ <span>会员等级名称:</span>
|
|
|
+ <Input value={this.state.lvlName} style={{ width: '200px' }}
|
|
|
+ onChange={(e) => { this.setState({ lvlName: e.target.value }); }} />
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const ListDelete = React.createClass({
|
|
|
+ getInitialState () {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ showModal () {
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCancel (e) {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleOk () {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ },
|
|
|
+ render () {
|
|
|
+ return (
|
|
|
+ <div className="patent-desc" style={{ float: 'right', marginRight: '20px' }}>
|
|
|
+ <Button type="ghost" onClick={this.showModal}>删除</Button>
|
|
|
+ <Modal maskClosable={false}
|
|
|
+ title="删除用户等级"
|
|
|
+ visible={this.state.visible}
|
|
|
+ onCancel={this.handleCancel}
|
|
|
+ width='400px'
|
|
|
+ footer={[
|
|
|
+ <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
|
|
|
+ <Button key="back" onClick={this.handleCancel}>返回</Button>
|
|
|
+ ]} >
|
|
|
+ <div className="level-tabs-modal">
|
|
|
+ <p>
|
|
|
+ <Icon type="exclamation-circle-o" />
|
|
|
+ <span> 确认要删除该用户等级吗?删除以后不可恢复!</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const SetContent = React.createClass({
|
|
|
+ getInitialState () {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '会员时长',
|
|
|
+ dataIndex: 'time',
|
|
|
+ key: 'time',
|
|
|
+ render: (text, record, index) => {
|
|
|
+ return <div>
|
|
|
+ <Input style={{ width: '80px' }}
|
|
|
+ value={record.time}
|
|
|
+ onChange={(e) => {
|
|
|
+ record.time = e.target.value;
|
|
|
+ this.setState({ dataSource: this.state.dataSource });
|
|
|
+ }} />
|
|
|
+ <span style={{ marginLeft: '10px' }}>个月</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ title: '金额',
|
|
|
+ dataIndex: 'money',
|
|
|
+ key: 'money',
|
|
|
+ render: (text, record, index) => {
|
|
|
+ return <div>
|
|
|
+ <InputNumber step={0.01} min={0}
|
|
|
+ value={record.money}
|
|
|
+ onChange={(e) => {
|
|
|
+ record.money = e;
|
|
|
+ this.setState({ dataSource: this.state.dataSource });
|
|
|
+ }} />
|
|
|
+ <span style={{ marginLeft: '10px' }}>元</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataSource: [],
|
|
|
+ selectedRowKeys: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ remove () {
|
|
|
+ this.state.selectedRowKeys.sort((a, b) => { return b - a });
|
|
|
+ let theArr = this.state.dataSource.concat();
|
|
|
+ for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
|
|
|
+ let dataIndex = this.state.selectedRowKeys[idx];
|
|
|
+ theArr.map((item, index) => {
|
|
|
+ if (item.key === dataIndex) {
|
|
|
+ theArr.splice(index, 1);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ };
|
|
|
+ this.state.dataSource = [];
|
|
|
+ for (let i = 0; i < theArr.length; i++) {
|
|
|
+ let item = theArr[i];
|
|
|
+ this.state.dataSource.push({
|
|
|
+ key: i,
|
|
|
+ time: item.time,
|
|
|
+ money: item.money
|
|
|
+ })
|
|
|
+ };
|
|
|
+ this.setState({
|
|
|
+ dataSource: this.state.dataSource,
|
|
|
+ selectedRowKeys: []
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ addNew () {
|
|
|
+ this.state.dataSource.push({
|
|
|
+ key: this.state.dataSource.length,
|
|
|
+ time: '',
|
|
|
+ money: ''
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ dataSource: this.state.dataSource
|
|
|
+ })
|
|
|
+ },
|
|
|
+ render () {
|
|
|
+ const rowSelection = {
|
|
|
+ type: 'checkbox',
|
|
|
+ selectedRowKeys: this.state.selectedRowKeys,
|
|
|
+ onChange: (selectedRowKeys, selectedRows) => {
|
|
|
+ this.setState({
|
|
|
+ selectedRows: selectedRows,
|
|
|
+ selectedRowKeys: selectedRowKeys
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const hasSelected = this.state.selectedRowKeys.length > 0;
|
|
|
+ return (
|
|
|
+ <div className="level-tabs">
|
|
|
+ <div className="level-tabs-title">
|
|
|
+ <span>会员等级费用设置</span>
|
|
|
+ <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
|
|
|
+ onClick={this.addNew}>添加<Icon type="plus" /></Button>
|
|
|
+ <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
|
|
|
+ disabled={!hasSelected}
|
|
|
+ onClick={this.remove}>删除<Icon type="minus" /></Button>
|
|
|
+ </div>
|
|
|
+ <Table className="level-tabs-table no-all-select"
|
|
|
+ columns={this.state.columns}
|
|
|
+ dataSource={this.state.dataSource}
|
|
|
+ pagination={false}
|
|
|
+ rowSelection={rowSelection} />
|
|
|
+ <div className="level-tabs-title">
|
|
|
+ <span>会员等级增值服务设置</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 科技成果,专家信息定点推送
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 查看专家的联系方式
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 任何业务申请,付费业享受会员专属折扣
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 一对一的技术经纪人服务,进行技术成果媒合服务
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 一对一的科技咨询师服务
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 一对一的专业技术顾问,搜集技术情报,提供研发高参
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 免费参加现场业务培训会
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="level-checkbox">
|
|
|
+ <Checkbox checked={this.state.checked}
|
|
|
+ onChange={(e) => { this.setState({ checked: e.target.checked }) }}>
|
|
|
+ 免前期费用做科技类扶持资金项目申报
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="level-tabs-save">
|
|
|
+ <Button type="primary" onClick={this.search}>保存</Button>
|
|
|
+ <ListDelete />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+const CustomerList = React.createClass({
|
|
|
+ loadData (pageNo) {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/customer",
|
|
|
+ data: {
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ if (data.error && data.error.length) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ getInitialState () {
|
|
|
+ return {
|
|
|
+ data: [],
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ componentWillMount () {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ tabChange () { },
|
|
|
+ render () {
|
|
|
+ return (
|
|
|
+ <div className="user-content" >
|
|
|
+ <div className="content-title clearfix">
|
|
|
+ <span>会员等级管理</span>
|
|
|
+ <ListAdd />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <Tabs defaultActiveKey="1" onChange={this.tabChange}>
|
|
|
+ <Tabs.TabPane tab="黄金会员" key="1">
|
|
|
+ <SetContent />
|
|
|
+ </Tabs.TabPane>
|
|
|
+ <Tabs.TabPane tab="钻石会员" key="2">
|
|
|
+ <SetContent />
|
|
|
+ </Tabs.TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ </div >
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+export default CustomerList;
|