index.jsx 6.5 KB

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