consultOrderList.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. import React from 'react';
  2. import { Icon, Button, Input, Select, Spin, Table, message, DatePicker, Modal, InputNumber, Radio } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './content.less';
  6. import moment from 'moment';
  7. import { getTime } from '../../tools';
  8. const OrderList = React.createClass({
  9. loadData (pageNo) {
  10. this.state.data = [];
  11. this.setState({
  12. loading: true
  13. });
  14. $.ajax({
  15. method: "get",
  16. dataType: "json",
  17. crossDomain: false,
  18. url: globalConfig.context + "/api/admin/member/selectMemberOrderBa",
  19. data: {
  20. pageNo: pageNo || 1,
  21. pageSize: this.state.pagination.pageSize,
  22. id: this.state.searchOrderNumber,
  23. nickname: this.state.searchName,
  24. mobile: this.state.searchAftNumber,
  25. orderState: this.state.searchOrderStatus,
  26. startTime: this.state.searchTime[0],
  27. endTime: this.state.searchTime[1]
  28. },
  29. success: function (data) {
  30. if (!data.data || !data.data.list) {
  31. if (data.error && data.error.length) {
  32. message.warning(data.error[0].message);
  33. };
  34. } else {
  35. for (let i = 0; i < data.data.list.length; i++) {
  36. let thisdata = data.data.list[i];
  37. this.state.data.push({
  38. key: i,
  39. id: thisdata.id,
  40. formattedOrderTime: thisdata.formattedOrderTime,
  41. formattedPaymentTime: thisdata.formattedPaymentTime,
  42. formattedValidTime: thisdata.formattedValidTime,
  43. expertName: thisdata.expertName,
  44. nickname: thisdata.nickname,
  45. mobile: thisdata.mobile,
  46. orderState: thisdata.orderState,
  47. orderTime: thisdata.orderTime,
  48. paymentId: thisdata.paymentId,
  49. paymentTime: thisdata.paymentTime,
  50. paymentType: thisdata.paymentType,
  51. paymentValue: thisdata.paymentValue,
  52. price: thisdata.price,
  53. userId: thisdata.userId,
  54. validMonth: thisdata.validMonth,
  55. validTime: thisdata.validTime,
  56. });
  57. };
  58. this.state.pagination.current = data.data.pNo;
  59. this.state.pagination.total = data.data.countWhere;
  60. };
  61. this.setState({
  62. dataSource: this.state.data,
  63. pagination: this.state.pagination
  64. });
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getInitialState () {
  73. return {
  74. searchMore: true,
  75. data: [],
  76. modalData: {},
  77. visible: false,
  78. searchTime: [],
  79. loading: false,
  80. pagination: {
  81. defaultCurrent: 1,
  82. defaultPageSize: 10,
  83. showQuickJumper: true,
  84. pageSize: 10,
  85. onChange: function (page) {
  86. this.loadData(page);
  87. }.bind(this),
  88. showTotal: function (total) {
  89. return '共' + total + '条数据';
  90. }
  91. },
  92. columns: [
  93. {
  94. title: '订单编号',
  95. dataIndex: 'id',
  96. key: 'id',
  97. }, {
  98. title: '账号',
  99. dataIndex: 'mobile',
  100. key: 'mobile',
  101. }, {
  102. title: '认证名称',
  103. dataIndex: 'nickname',
  104. key: 'nickname',
  105. }, {
  106. title: '专家名称',
  107. dataIndex: 'expertName',
  108. key: 'expertName',
  109. }, {
  110. title: '订单状态',
  111. dataIndex: 'orderState',
  112. key: 'orderState',
  113. render: (text) => {
  114. if (text == 1) {
  115. return '已支付'
  116. } else {
  117. return '未支付'
  118. };
  119. }
  120. }, {
  121. title: '生成时间',
  122. dataIndex: 'formattedOrderTime',
  123. key: 'formattedOrderTime',
  124. }, {
  125. title: '支付时间',
  126. dataIndex: 'formattedPaymentTime',
  127. key: 'formattedPaymentTime',
  128. }
  129. ],
  130. dataSource: []
  131. };
  132. },
  133. componentWillMount () {
  134. this.loadData();
  135. },
  136. search () {
  137. this.loadData();
  138. },
  139. reset () {
  140. this.state.searchOrderNumber = undefined;
  141. this.state.searchAftNumber = undefined;
  142. this.state.searchOrderStatus = undefined;
  143. this.state.searchName = undefined;
  144. this.state.searchTime = [];
  145. this.loadData();
  146. },
  147. submit () {
  148. if (this.state.modalData.paymentType == 1 && !this.state.modalData.formattedPaymentTime) {
  149. message.warning('状态为已支付时支付时间必填');
  150. return
  151. }
  152. this.setState({ loading: true });
  153. $.ajax({
  154. method: "post",
  155. dataType: "json",
  156. crossDomain: false,
  157. url: globalConfig.context + "/api/admin/member/updateMemberOrder",
  158. data: {
  159. id: this.state.modalData.id,
  160. userId: this.state.modalData.userId,
  161. memberRank: this.state.modalData.menberType,
  162. validMonth: this.state.modalData.validMonth,
  163. paymentValue: this.state.modalData.paymentValue,
  164. orderState: this.state.modalData.orderState,
  165. paymentTime: this.state.modalData.formattedPaymentTime,
  166. paymentType: this.state.modalData.paymentType,
  167. paymentId: this.state.modalData.paymentId
  168. }
  169. }).done(function (data) {
  170. if (!data.error.length) {
  171. message.success('保存成功!');
  172. this.setState({ loading: false, visible: false });
  173. this.loadData();
  174. } else {
  175. message.warning(data.error[0].message);
  176. }
  177. }.bind(this)).always(function () {
  178. this.setState({ loading: false });
  179. }.bind(this));
  180. },
  181. tableRowClick (record, index) {
  182. let theObj = {};
  183. for (let item in record) {
  184. theObj[item] = record[item]
  185. }
  186. this.state.modalData = theObj;
  187. this.setState({ visible: true });
  188. },
  189. render () {
  190. const rowSelection = {
  191. selectedRowKeys: this.state.selectedRowKeys,
  192. onChange: (selectedRowKeys, selectedRows) => {
  193. this.setState({
  194. selectedRows: selectedRows.slice(-1),
  195. selectedRowKeys: selectedRowKeys.slice(-1)
  196. });
  197. }
  198. };
  199. const hasSelected = this.state.selectedRowKeys.length > 0;
  200. const { RangePicker } = DatePicker;
  201. const Option = Select.Option;
  202. return (
  203. <div className="user-content" >
  204. <div className="content-title">
  205. <span>专家咨询订单列表</span>
  206. </div>
  207. <div className="user-search">
  208. <Input placeholder="订单编号" value={this.state.searchOrderNumber}
  209. onChange={(e) => { this.setState({ searchOrderNumber: e.target.value }); }} />
  210. <Input placeholder="用户账号" value={this.state.searchAftNumber}
  211. onChange={(e) => { this.setState({ searchAftNumber: e.target.value }); }} />
  212. <Input placeholder="认证名称" value={this.state.searchName}
  213. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  214. <Select placeholder="订单状态" value={this.state.searchOrderStatus} style={{ width: 120 }}
  215. onChange={(e) => { this.setState({ searchOrderStatus: e }) }}>
  216. <Option value="0">未付款</Option>
  217. <Option value="1">已付款</Option>
  218. </Select>
  219. <div className="search-div">
  220. <span>订单生成时间:</span>
  221. <RangePicker
  222. allowClear={false}
  223. value={[this.state.searchTime[0] ? moment(this.state.searchTime[0]) : null,
  224. this.state.searchTime[1] ? moment(this.state.searchTime[1]) : null]}
  225. onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} />
  226. </div>
  227. <Button type="primary" onClick={this.search}>搜索</Button>
  228. <Button onClick={this.reset}>重置</Button>
  229. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  230. disabled={!hasSelected}
  231. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  232. </div>
  233. <div className="patent-table">
  234. <Spin spinning={this.state.loading}>
  235. <Table columns={this.state.columns} class="no-all-select"
  236. dataSource={this.state.dataSource}
  237. rowSelection={rowSelection}
  238. pagination={this.state.pagination}
  239. onRowClick={this.tableRowClick} />
  240. </Spin>
  241. </div>
  242. <Modal title="订单详情" width={600} className="activity-modal"
  243. visible={this.state.visible}
  244. maskClosable={false}
  245. footer={null}
  246. afterClose={() => { this.state.modalData = {}; }}
  247. onCancel={() => { this.setState({ visible: false }) }} >
  248. <Spin spinning={this.state.loading}>
  249. <div className="clearfix">
  250. <div className="modal-box">
  251. <span className="modal-box-title">专家名称</span>
  252. <div className="modal-box-detail">
  253. <span>{this.state.modalData.expertName}</span>
  254. </div>
  255. </div>
  256. <div className="modal-box">
  257. <span className="modal-box-title">订单金额</span>
  258. <div className="modal-box-detail" style={{ width: '160px' }}>
  259. <span>{this.state.modalData.price}</span>
  260. <span> 元</span>
  261. </div>
  262. <span className="modal-box-title">实际支付金额</span>
  263. <div className="modal-box-detail" style={{ width: '160px' }}>
  264. <InputNumber value={this.state.modalData.paymentValue} step={0.01} onChange={(e) => {
  265. this.state.modalData.paymentValue = e;
  266. this.setState({ modalData: this.state.modalData });
  267. }} />
  268. <span> 元</span>
  269. </div>
  270. </div>
  271. <div className="modal-box">
  272. <span className="modal-box-title">支付方式</span>
  273. <div className="modal-box-detail" style={{ width: '160px' }}>
  274. <Input value={this.state.modalData.paymentType} onChange={(e) => {
  275. this.state.modalData.paymentType = e.target.value;
  276. this.setState({ modalData: this.state.modalData });
  277. }} />
  278. </div>
  279. <span className="modal-box-title">流水号</span>
  280. <div className="modal-box-detail" style={{ width: '160px' }}>
  281. <Input value={this.state.modalData.paymentId} onChange={(e) => {
  282. this.state.modalData.paymentId = e.target.value;
  283. this.setState({ modalData: this.state.modalData });
  284. }} />
  285. </div>
  286. </div>
  287. <div className="modal-box">
  288. <span className="modal-box-title">支付状态</span>
  289. <div className="modal-box-detail">
  290. <Radio.Group value={this.state.modalData.orderState}
  291. onChange={(e) => {
  292. this.state.modalData.orderState = e.target.value;
  293. this.setState({ modalData: this.state.modalData });
  294. }} >
  295. <Radio value={0}>未支付</Radio>
  296. <Radio value={1}>已支付</Radio>
  297. </Radio.Group>
  298. </div>
  299. </div>
  300. <div className="modal-box">
  301. <span className="modal-box-title">支付时间</span>
  302. <div className="modal-box-detail">
  303. <DatePicker style={{ width: '150px' }}
  304. showTime
  305. format="YYYY-MM-DD HH:mm:ss"
  306. placeholder="选择支付时间"
  307. value={this.state.modalData.formattedPaymentTime ? moment(this.state.modalData.formattedPaymentTime, "YYYY-MM-DD HH:mm:ss") : undefined}
  308. onChange={(t, str) => {
  309. this.state.modalData.formattedPaymentTime = str;
  310. this.setState({ modalData: this.state.modalData });
  311. }} />
  312. </div>
  313. </div>
  314. </div>
  315. <div className="modal-box" style={{ marginTop: '100px' }}>
  316. <Button type="primary" onClick={this.submit}>提交</Button>
  317. <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button>
  318. </div>
  319. </Spin>
  320. </Modal>
  321. </div >
  322. );
  323. }
  324. });
  325. export default OrderList;