123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- 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;
|