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 './content.less'; import moment from 'moment'; 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/admin/consultorder/list", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, number: this.state.searchNumber, toNumber: this.state.searchToNumber, id: this.state.searchId, paymentId: this.state.searchPaymentId, state: this.state.searchState }, 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, price: thisdata.price, orderState: thisdata.orderState, orderTime: thisdata.orderTime, orderTimeFormatted: thisdata.orderTimeFormatted, userId: thisdata.userId, toUserId: thisdata.toUserId, nickname: thisdata.nickname, number: thisdata.number, toNickname: thisdata.toUsername || thisdata.toNickname, toNumber: thisdata.toNumber, paymentTime: thisdata.paymentTime, paymentTimeFormatted: thisdata.paymentTimeFormatted, paymentValue: thisdata.paymentValue, paymentType: thisdata.paymentType, paymentId: thisdata.paymentId, }); }; 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, selectedRows: [], selectedRowKeys: [], data: [], modalData: {}, visible: false, delVisible: 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: 'number', key: 'number', }, { title: '用户名称', dataIndex: 'nickname', key: 'nickname' }, { title: '专家编号', dataIndex: 'toNumber', key: 'toNumber', }, { title: '专家名称', dataIndex: 'toNickname', key: 'toNickname' }, { title: '订单状态', dataIndex: 'orderState', key: 'orderState', render: (text, record) => { if (text == 1) { return '已支付' } else if (text == 9) { return '已取消' } else if (text == 2) { 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: 'orderTimeFormatted', key: 'orderTimeFormatted', }, { title: '支付金额', dataIndex: 'price', key: 'price', render: (index, record) => { if (record.paymentValue && record.paymentValue != 0) { return record.paymentValue } else { return index } } }, { title: '支付时间', dataIndex: 'paymentTimeFormatted', key: 'paymentTimeFormatted', }, { title: '支付流水', dataIndex: 'paymentId', key: 'paymentId' } ], dataSource: [] }; }, componentWillMount () { this.loadData(); }, search () { this.loadData(); }, reset () { this.state.searchNumber = undefined; this.state.searchToNumber = undefined; this.state.searchId = undefined; this.state.searchPaymentId = undefined; this.state.searchState = undefined; this.state.searchTime = []; this.loadData(); }, submit () { if (this.state.modalData.paymentType == 1 && !this.state.modalData.paymentTimeFormatted) { message.warning('状态为已支付时支付时间必填'); return } this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/consultorder/update", data: { id: this.state.modalData.id, paymentValue: this.state.modalData.paymentValue, orderState: this.state.modalData.orderState, paymentTime: this.state.modalData.paymentTimeFormatted, paymentType: this.state.modalData.paymentType, paymentId: this.state.modalData.paymentId } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.setState({ loading: false, visible: false }); this.loadData(); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); }, tableRowClick (record, index) { let theObj = {}; for (let item in record) { theObj[item] = record[item] } this.state.modalData = theObj; this.setState({ visible: true }); }, deleteRow () { let deletedId; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.orderState !== 0) { message.warning('订单状态不是未支付,无法删除!'); this.setState({ delVisible: false }); return; } if (rowItem.id) { deletedId = rowItem.id }; }; this.setState({ selectedRowKeys: [], loading: deletedId.length > 0 }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/consultorder/del", data: { id: deletedId } }).done(function (data) { if (!data.error.length) { message.success('删除成功!'); } else { message.warning(data.error[0].message); }; this.setState({ loading: false, delVisible: false }); this.loadData(); }.bind(this)); }, render () { const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; 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.searchNumber} onChange={(e) => { this.setState({ searchNumber: e.target.value }); }} /> <Input placeholder="专家编号" value={this.state.searchToNumber} onChange={(e) => { this.setState({ searchToNumber: e.target.value }); }} /> <Input placeholder="订单编号" value={this.state.searchId} onChange={(e) => { this.setState({ searchId: e.target.value }); }} /> <Select placeholder="订单状态" value={this.state.searchState} style={{ width: 120 }} onChange={(e) => { this.setState({ searchState: e }) }}> <Option value="0">未付款</Option> <Option value="1">已付款</Option> <Option value="9">已取消</Option> <Option value="10">已失效</Option> </Select> <Input placeholder="支付流水" value={this.state.searchPaymentId} onChange={(e) => { this.setState({ searchPaymentId: e.target.value }); }} /> <div className="search-div" style={{ display: "none" }}> <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> <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }} disabled={!hasSelected} onClick={() => { this.setState({ delVisible: true }) }}>删除<Icon type="minus" /></Button> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} class="no-all-select" dataSource={this.state.dataSource} rowSelection={rowSelection} 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.modalData = {}; }} 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" style={{ width: '160px' }}> <span>{this.state.modalData.price}</span> <span> 元</span> </div> <span className="modal-box-title">实际支付金额</span> <div className="modal-box-detail" style={{ width: '160px' }}> <InputNumber value={this.state.modalData.paymentValue} step={0.01} onChange={(e) => { this.state.modalData.paymentValue = e; this.setState({ modalData: this.state.modalData }); }} /> <span> 元</span> </div> </div> <div className="modal-box"> <span className="modal-box-title">支付方式</span> <div className="modal-box-detail" style={{ width: '160px' }}> <Input value={this.state.modalData.paymentType} onChange={(e) => { this.state.modalData.paymentType = e.target.value; this.setState({ modalData: this.state.modalData }); }} /> </div> <span className="modal-box-title">流水号</span> <div className="modal-box-detail" style={{ width: '160px' }}> <Input value={this.state.modalData.paymentId} onChange={(e) => { this.state.modalData.paymentId = e.target.value; this.setState({ modalData: this.state.modalData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">支付状态</span> <div className="modal-box-detail"> <Radio.Group value={this.state.modalData.orderState} onChange={(e) => { this.state.modalData.orderState = e.target.value; this.setState({ modalData: this.state.modalData }); }} > <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.modalData.paymentTimeFormatted ? moment(this.state.modalData.paymentTimeFormatted, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.state.modalData.paymentTimeFormatted = str; this.setState({ modalData: this.state.modalData }); }} /> </div> </div> </div> <div className="modal-box" style={{ marginTop: '100px' }}> <Button type="primary" onClick={this.submit}>提交</Button> <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button> </div> </Spin> </Modal> <Modal title="删除确认" width={600} className="activity-modal" visible={this.state.delVisible} maskClosable={false} footer={null} onCancel={() => { this.setState({ delVisible: false }) }} > <Spin spinning={this.state.loading}> <div className="clearfix"> <div className="modal-box"> <span>是否确定删除这条记录?删除后数据不可恢复!</span> </div> <div className="modal-box" > <Button type="primary" onClick={this.deleteRow}>提交</Button> <Button type="ghost" onClick={() => { this.setState({ delVisible: false }) }}>取消</Button> </div> </div> </Spin> </Modal> </div > ); } }); export default OrderList;