import React from 'react'; import { Icon, Button, Input, Select, Spin, Table, message, DatePicker, Modal, InputNumber, Radio } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import './userList.less'; import moment from 'moment'; const OrderList = React.createClass({ loadData (pageNo) { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/member/selectMemberOrderBa", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, id: this.state.searchOrderNumber, nickname: this.state.searchName, mobile: this.state.searchAftNumber, 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, id: thisdata.id, formattedOrderTime: thisdata.formattedOrderTime, formattedPaymentTime: thisdata.formattedPaymentTime, formattedValidTime: thisdata.formattedValidTime, gradeName: thisdata.gradeName, menberType: thisdata.menberType, nickname: thisdata.nickname, mobile: thisdata.mobile, 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.pNo; this.state.pagination.total = data.data.countWhere; }; this.setState({ dataSource: this.state.data, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState () { return { searchMore: true, data: [], RowData: {}, visible: false, 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: 'mobile', key: 'mobile', }, { title: '认证名称', dataIndex: 'nickname', key: 'nickname', }, { title: '会员类型', dataIndex: 'gradeName', key: 'gradeName', }, { title: '订单状态', dataIndex: 'orderState', key: 'orderState', render: (text) => { if (text == 1) { return '已支付' } else { return '未支付' }; } }, { title: '生成时间', dataIndex: 'formattedOrderTime', key: 'formattedOrderTime', }, { title: '支付时间', dataIndex: 'formattedPaymentTime', key: 'formattedPaymentTime', }, { title: '到期时间', dataIndex: 'formattedValidTime', key: 'formattedValidTime', } ], dataSource: [] }; }, componentWillMount () { this.loadData(); }, search () { this.loadData(); }, reset () { this.state.searchOrderNumber = undefined; this.state.searchAftNumber = undefined; this.state.searchOrderStatus = undefined; this.state.searchName = undefined; this.state.searchTime = []; this.loadData(); }, tableRowClick (record, index) { this.state.RowData = record; this.setState({ visible: true }); }, render () { const { RangePicker } = DatePicker; const Option = Select.Option; return ( <div className="user-content" > <div className="content-title"> <span>会员订单列表</span> </div> <div className="user-search"> <Input placeholder="订单编号" value={this.state.searchOrderNumber} onChange={(e) => { this.setState({ searchOrderNumber: e.target.value }); }} /> <Input placeholder="用户账号" value={this.state.searchAftNumber} onChange={(e) => { this.setState({ searchAftNumber: e.target.value }); }} /> <Input placeholder="认证名称" value={this.state.searchName} onChange={(e) => { this.setState({ searchName: 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 columns={this.state.columns} dataSource={this.state.dataSource} pagination={this.state.pagination} onRowClick={this.tableRowClick} /> </Spin> </div> <Modal title="订单详情" width={600} className="activity-modal" visible={this.state.visible} maskClosable={false} footer={null} afterClose={() => { this.state.RowData = {}; this.state.asist = null; this.state.asistArray = []; }} onCancel={() => { this.setState({ visible: false }) }} > <Spin spinning={this.state.loading}> <div className="clearfix"> <div className="modal-box"> <span className="modal-box-title">会员等级</span> <div className="modal-box-detail"> <Select placeholder="选择会员等级" style={{ width: 120 }} value={this.state.RowData.menberType ? this.state.RowData.menberType.toString() : undefined} onChange={(e) => { this.state.RowData.menberType = e; this.setState({ RowData: this.state.RowData }); }}> <Select.Option value="2">Lv.2</Select.Option> <Select.Option value="3">Lv.3</Select.Option> <Select.Option value="4">Lv.4</Select.Option> <Select.Option value="5">Lv.5</Select.Option> </Select> </div> </div> <div className="modal-box"> <span className="modal-box-title">会员时长</span> <div className="modal-box-detail" style={{ width: '160px' }}> <InputNumber value={this.state.RowData.validMonth} step={1} onChange={(e) => { this.state.RowData.validMonth = e; this.setState({ RowData: this.state.RowData }); }} /> <span> 月</span> </div> <span className="modal-box-title">实际支付金额</span> <div className="modal-box-detail" style={{ width: '160px' }}> <InputNumber value={this.state.RowData.paymentValue} step={0.01} onChange={(e) => { this.state.RowData.paymentValue = e; this.setState({ RowData: this.state.RowData }); }} /> <span> 元</span> </div> </div> <div className="modal-box"> <span className="modal-box-title">支付方式</span> <div className="modal-box-detail" style={{ width: '260px' }}> <Input value={this.state.RowData.paymentType} onChange={(e) => { this.state.RowData.paymentType = e.target.value; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">支付状态</span> <div className="modal-box-detail"> <Radio.Group value={this.state.RowData.orderState} onChange={(e) => { this.state.RowData.orderState = e.target.value; this.setState({ RowData: this.state.RowData }); }} > <Radio value={0}>未支付</Radio> <Radio value={1}>已支付</Radio> </Radio.Group> </div> </div> <div className="modal-box"> <span className="modal-box-title">支付时间</span> <div className="modal-box-detail"> <DatePicker style={{ width: '150px' }} showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择支付时间" value={this.state.RowData.formattedPaymentTime ? moment(this.state.RowData.formattedPaymentTime, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.state.RowData.formattedPaymentTime = str; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> </div> <div className="modal-box"> <Button type="primary" onClick={this.submit}>提交</Button> <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button> </div> </Spin> </Modal> </div > ); } }); export default OrderList;