serviceList.jsx 8.7 KB

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