import React from 'react'; import { Icon, Button, Input, Select, Spin, Table, message, DatePicker, Modal } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import './content.less'; import { getTime } from '../../tools' const OrderList = React.createClass({ loadData (pageNo) { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/member/selectMemberOrder", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, id: this.state.searchOrderNumber, orderState: this.state.searchOrderStatus, startTime: this.state.searchTime[0], endTime: this.state.searchTime[1] }, success: function (data) { if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; this.state.data.push({ key: i, formattedOrderTime: thisdata.formattedOrderTime, formattedPaymentTime: thisdata.formattedPaymentTime, formattedValidTime: thisdata.formattedValidTime, gradeName: thisdata.gradeName, id: thisdata.id, menberType: thisdata.menberType, orderState: thisdata.orderState, orderTime: thisdata.orderTime, paymentId: thisdata.paymentId, paymentTime: thisdata.paymentTime, paymentType: thisdata.paymentType, paymentValue: thisdata.paymentValue, price: thisdata.price, userId: thisdata.userId, validMonth: thisdata.validMonth, validTime: thisdata.validTime }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; this.setState({ dataSource: this.state.data, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState () { return { searchMore: true, visible: false, deleteId: null, data: [], searchTime: [], loading: false, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, columns: [ { title: '订单编号', dataIndex: 'id', key: 'id', }, { title: '会员类型', dataIndex: 'gradeName', key: 'gradeName', }, { title: '订单状态', dataIndex: 'orderState', key: 'orderState', render: (text, record) => { if (text == 1) { return '已完成' } else { let now = new Date(); let endTime = new Date(record.orderTime + 24 * 60 * 60 * 1000 * 15) if (now > endTime) { return '已失效' } else { return '未支付' } } } }, { title: '生成时间', dataIndex: 'formattedOrderTime', key: 'formattedOrderTime', }, { title: '支付内容', dataIndex: 'payText', key: 'payText', render: (text, record) => { return record.price + '元 / ' + record.validMonth + '月' } }, { title: '支付时间', dataIndex: 'formattedPaymentTime', key: 'formattedPaymentTime', }, { title: '有效时间', dataIndex: 'validTime', key: 'validTime', render: (index, record) => { if (record.paymentTime && record.validMonth && record.orderState == 1) { return getTime(record.paymentTime) + ' -- ' + getTime(record.paymentTime, record.validMonth) } } }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record) => { let now = new Date(); let endTime = new Date(record.orderTime + 24 * 60 * 60 * 1000 * 15) if (record.orderState == 0 && now < endTime) { return <div> <Button type="primary" onClick={() => { }}>支付</Button> <Button style={{ marginLeft: '10px' }} type="primary" onClick={() => { this.setState({ visible: true, deleteId: record.id }) }} >取消订单</Button> </div> } else if (record.orderState == 0) { return <div><Button type="primary" onClick={() => { this.setState({ visible: true, deleteId: record.id }) }}>取消订单</Button></div> } } } ], dataSource: [] }; }, delRow () { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/member/delMemberOrder", data: { id: this.state.deleteId } }).done(function (data) { if (!data.error.length) { message.success('删除成功!'); } else { message.warning(data.error[0].message); }; this.setState({ deleteId: null, visible: false, loading: false, }); this.loadData(); }.bind(this)); }, componentWillMount () { this.loadData(); }, search () { this.loadData(); }, reset () { this.state.searchOrderNumber = undefined; this.state.searchOrderStatus = undefined; this.state.searchOrderType = undefined; this.state.searchTime = []; this.loadData(); }, render () { const { RangePicker } = DatePicker; const Option = Select.Option; return ( <div className="collection" > <div className="content-title"> <span>服务订单列表</span> </div> <div className="user-search" style={{ display: 'none' }}> <Input placeholder="订单编号" value={this.state.searchOrderNumber} onChange={(e) => { this.setState({ searchOrderNumber: e.target.value }); }} /> <Select placeholder="订单类型" value={this.state.searchOrderType} style={{ width: 120 }} onChange={(e) => { this.setState({ searchOrderType: e }) }}> <Option value="0">会员服务</Option> <Option value="1">科技服务</Option> </Select> <Select placeholder="订单状态" value={this.state.searchOrderStatus} style={{ width: 120 }} onChange={(e) => { this.setState({ searchOrderStatus: e }) }}> <Option value="0">未付款</Option> <Option value="1">已付款</Option> </Select> <div className="search-div"> <span>订单生成时间:</span> <RangePicker allowClear={false} value={[this.state.searchTime[0] ? moment(this.state.searchTime[0]) : null, this.state.searchTime[1] ? moment(this.state.searchTime[1]) : null]} onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} /> </div> <Button type="primary" onClick={this.search}>搜索</Button> <Button onClick={this.reset}>重置</Button> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table size="middle" columns={this.state.columns} dataSource={this.state.dataSource} pagination={this.state.pagination} style={{ cursor: 'pointer', }} onRowClick={this.tableRowClick} /> </Spin> </div> <Modal title="取消确认" width={600} className="activity-modal" visible={this.state.visible} maskClosable={false} footer={null} onCancel={() => { this.setState({ visible: false }) }} > <Spin spinning={this.state.loading}> <div className="clearfix"> <div> <span>是否确定取消这个订单?取消后后订单不可恢复!</span> </div> <div className="modal-box" > <Button type="primary" onClick={this.delRow}>确认</Button> <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button> </div> </div> </Spin> </Modal> </div > ); } }); export default OrderList;