index.jsx 6.1 KB

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