serviceList.jsx 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. import React from 'react';
  2. import { Icon, Button, Input, Select, Spin, Table, message, DatePicker, Modal } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './content.less';
  6. import { getTime } from '../../tools'
  7. const OrderList = React.createClass({
  8. loadData (pageNo) {
  9. this.state.data = [];
  10. this.setState({
  11. loading: true
  12. });
  13. $.ajax({
  14. method: "get",
  15. dataType: "json",
  16. crossDomain: false,
  17. url: globalConfig.context + "/api/user/member/selectMemberOrder",
  18. data: {
  19. pageNo: pageNo || 1,
  20. pageSize: this.state.pagination.pageSize,
  21. id: this.state.searchOrderNumber,
  22. orderState: this.state.searchOrderStatus,
  23. startTime: this.state.searchTime[0],
  24. endTime: this.state.searchTime[1]
  25. },
  26. success: function (data) {
  27. if (!data.data || !data.data.list) {
  28. if (data.error && data.error.length) {
  29. message.warning(data.error[0].message);
  30. };
  31. } else {
  32. for (let i = 0; i < data.data.list.length; i++) {
  33. let thisdata = data.data.list[i];
  34. this.state.data.push({
  35. key: i,
  36. formattedOrderTime: thisdata.formattedOrderTime,
  37. formattedPaymentTime: thisdata.formattedPaymentTime,
  38. formattedValidTime: thisdata.formattedValidTime,
  39. gradeName: thisdata.gradeName,
  40. id: thisdata.id,
  41. menberType: thisdata.menberType,
  42. orderState: thisdata.orderState,
  43. orderTime: thisdata.orderTime,
  44. paymentId: thisdata.paymentId,
  45. paymentTime: thisdata.paymentTime,
  46. paymentType: thisdata.paymentType,
  47. paymentValue: thisdata.paymentValue,
  48. price: thisdata.price,
  49. userId: thisdata.userId,
  50. validMonth: thisdata.validMonth,
  51. validTime: thisdata.validTime
  52. });
  53. };
  54. this.state.pagination.current = data.data.pageNo;
  55. this.state.pagination.total = data.data.totalCount;
  56. };
  57. this.setState({
  58. dataSource: this.state.data,
  59. pagination: this.state.pagination
  60. });
  61. }.bind(this),
  62. }).always(function () {
  63. this.setState({
  64. loading: false
  65. });
  66. }.bind(this));
  67. },
  68. getInitialState () {
  69. return {
  70. searchMore: true,
  71. data: [],
  72. searchTime: [],
  73. loading: false,
  74. pagination: {
  75. defaultCurrent: 1,
  76. defaultPageSize: 10,
  77. showQuickJumper: true,
  78. pageSize: 10,
  79. onChange: function (page) {
  80. this.loadData(page);
  81. }.bind(this),
  82. showTotal: function (total) {
  83. return '共' + total + '条数据';
  84. }
  85. },
  86. columns: [
  87. {
  88. title: '订单编号',
  89. dataIndex: 'id',
  90. key: 'id',
  91. }, {
  92. title: '会员类型',
  93. dataIndex: 'gradeName',
  94. key: 'gradeName',
  95. }, {
  96. title: '订单状态',
  97. dataIndex: 'orderState',
  98. key: 'orderState',
  99. render: (text, record) => {
  100. if (text == 1) {
  101. return '已完成'
  102. } else {
  103. let now = new Date();
  104. let endTime = new Date(record.orderTime + 24 * 60 * 60 * 1000 * 15)
  105. if (now > endTime) {
  106. return '已失效'
  107. } else {
  108. return '未支付'
  109. }
  110. }
  111. }
  112. }, {
  113. title: '生成时间',
  114. dataIndex: 'formattedOrderTime',
  115. key: 'formattedOrderTime',
  116. }, {
  117. title: '支付内容',
  118. dataIndex: 'payText',
  119. key: 'payText',
  120. render: (text, record) => {
  121. return record.price + '元 / ' + record.validMonth + '月'
  122. }
  123. }, {
  124. title: '支付时间',
  125. dataIndex: 'formattedPaymentTime',
  126. key: 'formattedPaymentTime',
  127. }, {
  128. title: '有效时间',
  129. dataIndex: 'validTime',
  130. key: 'validTime',
  131. render: (index, record) => {
  132. if (record.paymentTime && record.validMonth && record.orderState == 1) {
  133. return getTime(record.paymentTime) + ' -- ' + getTime(record.paymentTime, record.validMonth)
  134. }
  135. }
  136. }, {
  137. title: '操作',
  138. dataIndex: 'action',
  139. key: 'action',
  140. render: (text, record) => {
  141. let now = new Date();
  142. let endTime = new Date(record.orderTime + 24 * 60 * 60 * 1000 * 15)
  143. if (record.orderState == 0 && now < endTime) {
  144. return <Button type="primary" onClick={() => { }}>支付</Button>
  145. } else { return <div></div> }
  146. }
  147. }
  148. ],
  149. dataSource: []
  150. };
  151. },
  152. componentWillMount () {
  153. this.loadData();
  154. },
  155. search () {
  156. this.loadData();
  157. },
  158. reset () {
  159. this.state.searchOrderNumber = undefined;
  160. this.state.searchOrderStatus = undefined;
  161. this.state.searchOrderType = undefined;
  162. this.state.searchTime = [];
  163. this.loadData();
  164. },
  165. render () {
  166. const { RangePicker } = DatePicker;
  167. const Option = Select.Option;
  168. return (
  169. <div className="collection" >
  170. <div className="content-title">
  171. <span>服务订单列表</span>
  172. </div>
  173. <div className="user-search" style={{ display: 'none' }}>
  174. <Input placeholder="订单编号" value={this.state.searchOrderNumber}
  175. onChange={(e) => { this.setState({ searchOrderNumber: e.target.value }); }} />
  176. <Select placeholder="订单类型" value={this.state.searchOrderType} style={{ width: 120 }}
  177. onChange={(e) => { this.setState({ searchOrderType: e }) }}>
  178. <Option value="0">会员服务</Option>
  179. <Option value="1">科技服务</Option>
  180. </Select>
  181. <Select placeholder="订单状态" value={this.state.searchOrderStatus} style={{ width: 120 }}
  182. onChange={(e) => { this.setState({ searchOrderStatus: e }) }}>
  183. <Option value="0">未付款</Option>
  184. <Option value="1">已付款</Option>
  185. </Select>
  186. <div className="search-div">
  187. <span>订单生成时间:</span>
  188. <RangePicker
  189. allowClear={false}
  190. value={[this.state.searchTime[0] ? moment(this.state.searchTime[0]) : null,
  191. this.state.searchTime[1] ? moment(this.state.searchTime[1]) : null]}
  192. onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} />
  193. </div>
  194. <Button type="primary" onClick={this.search}>搜索</Button>
  195. <Button onClick={this.reset}>重置</Button>
  196. </div>
  197. <div className="patent-table">
  198. <Spin spinning={this.state.loading}>
  199. <Table columns={this.state.columns}
  200. dataSource={this.state.dataSource}
  201. pagination={this.state.pagination}
  202. onRowClick={this.tableRowClick} />
  203. </Spin>
  204. </div>
  205. </div >
  206. );
  207. }
  208. });
  209. export default OrderList;