index.jsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. import React,{Component}from 'react';
  2. import {Button, DatePicker, Icon, Input, message, Select, Table} from "antd";
  3. import SpinContainer from "../../../SpinContainer";
  4. import $ from "jquery/src/ajax";
  5. import moment from "moment";
  6. const { RangePicker } = DatePicker;
  7. class Pay extends Component{
  8. constructor(props) {
  9. super(props);
  10. this.state={
  11. searchUserName: '',
  12. searchPayState: '',
  13. time: [],
  14. loading: false,
  15. columns:[
  16. {
  17. title: '序号',
  18. dataIndex: 'key',
  19. key: 'key'
  20. },
  21. {
  22. title: '用户ID',
  23. dataIndex: 'userNo',
  24. key: 'userNo'
  25. },
  26. {
  27. title: '用户呢称',
  28. dataIndex: 'userName',
  29. key: 'userName'
  30. },
  31. {
  32. title: '电话',
  33. dataIndex: 'mobile',
  34. key: 'mobile'
  35. },
  36. {
  37. title: '发起支付时间',
  38. dataIndex: 'createTimes',
  39. key: 'createTimes'
  40. },
  41. {
  42. title: '金额',
  43. dataIndex: 'projectAmount',
  44. key: 'projectAmount'
  45. },
  46. {
  47. title: '支付状态',
  48. dataIndex: 'payStatus',
  49. key: 'payStatus',
  50. render: (text, record) => (
  51. text === 0 ? '未支付' :
  52. text === 1 ? '已支付' :
  53. text === 2 ? '支付失败' : ''
  54. )
  55. },
  56. ],
  57. dataSource:[],
  58. pagination: {
  59. defaultCurrent: 1,
  60. defaultPageSize: 10,
  61. showQuickJumper: true,
  62. pageSize: 10,
  63. onChange: function (page) {
  64. this.loadData(page);
  65. }.bind(this),
  66. showTotal: function (total) {
  67. return '共' + total + '条数据';
  68. }
  69. },
  70. }
  71. this.search = this.search.bind(this);
  72. this.reset = this.reset.bind(this);
  73. this.tableRowClick = this.tableRowClick.bind(this);
  74. this.loadData = this.loadData.bind(this);
  75. }
  76. search(){this.loadData();}
  77. reset(){
  78. this.setState({
  79. searchUserName: '',
  80. searchPayState: '',
  81. time: [],
  82. },()=>{
  83. this.loadData();
  84. })
  85. }
  86. tableRowClick(){
  87. }
  88. loadData(pageNo = 1) {
  89. this.setState({
  90. loading: true
  91. });
  92. $.ajax({
  93. method: "get",
  94. dataType: "json",
  95. crossDomain: false,
  96. url: globalConfig.context + "/api/admin/order/list",
  97. data: {
  98. pageNo: pageNo || 1,
  99. pageSize: 10,
  100. name: this.state.searchUserName || undefined,
  101. payStatus: this.state.searchPayState || undefined,
  102. startTime: this.state.time[0] || undefined,
  103. endTime: this.state.time[1] || undefined,
  104. }
  105. }).done((data1) => {
  106. let theArr = [];
  107. if (data1.error.length !== 0) {
  108. message.warning(data1.error[0].message);
  109. } else {
  110. for (let i = 0; i < data1.data.list.length; i++) {
  111. data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
  112. }
  113. this.state.pagination.current = data1.data.pageNo;
  114. this.state.pagination.total = data1.data.totalCount;
  115. }
  116. this.setState({
  117. dataSource: data1.data.list,
  118. pagination: this.state.pagination,
  119. });
  120. }).always(function () {
  121. this.setState({
  122. loading: false
  123. });
  124. }.bind(this))
  125. }
  126. componentDidMount() {
  127. this.loadData();
  128. }
  129. render() {
  130. return (
  131. <div className="user-content" >
  132. <div className="content-title">
  133. <span>支付管理</span>
  134. </div>
  135. <div className="user-search">
  136. <Input placeholder="用户关键字" value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
  137. <Select
  138. placeholder="请选择支付状态"
  139. style={{ width: 120 }}
  140. value={this.state.searchPayState+"" || undefined}
  141. onChange={e => {
  142. this.setState({
  143. searchPayState: e
  144. });
  145. }}
  146. >
  147. <Option value="0">未支付</Option>
  148. <Option value="1">已支付</Option>
  149. <Option value="2">支付失败</Option>
  150. </Select>
  151. <span style={{ fontSize: 14 }} >提交日期:</span>
  152. <RangePicker
  153. value={[
  154. this.state.time[0] ? moment(this.state.time[0]) : null,
  155. this.state.time[1] ? moment(this.state.time[1]) : null
  156. ]}
  157. onChange={(data, dataString) => {
  158. this.setState({ time: dataString });
  159. }}
  160. />
  161. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  162. <Button onClick={this.reset}>重置</Button>
  163. </div>
  164. <div className="patent-table">
  165. <SpinContainer spinning={this.state.loading}>
  166. <Table columns={this.state.columns}
  167. dataSource={this.state.dataSource}
  168. pagination={this.state.pagination}
  169. onRowClick={this.tableRowClick} />
  170. </SpinContainer>
  171. </div>
  172. </div >
  173. )
  174. }
  175. }
  176. export default Pay;