orderList.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. import React from 'react';
  2. import { Icon, Button, Input, Select, Spin, Table, message, DatePicker, Modal, InputNumber, Radio } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './userList.less';
  6. import moment from 'moment';
  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/admin/member/selectMemberOrderBa",
  18. data: {
  19. pageNo: pageNo || 1,
  20. pageSize: this.state.pagination.pageSize,
  21. id: this.state.searchOrderNumber,
  22. nickname: this.state.searchName,
  23. mobile: this.state.searchAftNumber,
  24. orderState: this.state.searchOrderStatus,
  25. startTime: this.state.searchTime[0],
  26. endTime: this.state.searchTime[1]
  27. },
  28. success: function (data) {
  29. if (!data.data || !data.data.List) {
  30. if (data.error && data.error.length) {
  31. message.warning(data.error[0].message);
  32. };
  33. } else {
  34. for (let i = 0; i < data.data.List.length; i++) {
  35. let thisdata = data.data.List[i];
  36. this.state.data.push({
  37. key: i,
  38. id: thisdata.id,
  39. formattedOrderTime: thisdata.formattedOrderTime,
  40. formattedPaymentTime: thisdata.formattedPaymentTime,
  41. formattedValidTime: thisdata.formattedValidTime,
  42. gradeName: thisdata.gradeName,
  43. menberType: thisdata.menberType,
  44. nickname: thisdata.nickname,
  45. mobile: thisdata.mobile,
  46. orderState: thisdata.orderState,
  47. orderTime: thisdata.orderTime,
  48. paymentId: thisdata.paymentId,
  49. paymentTime: thisdata.paymentTime,
  50. paymentType: thisdata.paymentType,
  51. paymentValue: thisdata.paymentValue,
  52. price: thisdata.price,
  53. userId: thisdata.userId,
  54. validMonth: thisdata.validMonth,
  55. validTime: thisdata.validTime,
  56. });
  57. };
  58. this.state.pagination.current = data.data.pNo;
  59. this.state.pagination.total = data.data.countWhere;
  60. };
  61. this.setState({
  62. dataSource: this.state.data,
  63. pagination: this.state.pagination
  64. });
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getInitialState () {
  73. return {
  74. searchMore: true,
  75. data: [],
  76. RowData: {},
  77. visible: false,
  78. searchTime: [],
  79. loading: false,
  80. pagination: {
  81. defaultCurrent: 1,
  82. defaultPageSize: 10,
  83. showQuickJumper: true,
  84. pageSize: 10,
  85. onChange: function (page) {
  86. this.loadData(page);
  87. }.bind(this),
  88. showTotal: function (total) {
  89. return '共' + total + '条数据';
  90. }
  91. },
  92. columns: [
  93. {
  94. title: '订单编号',
  95. dataIndex: 'id',
  96. key: 'id',
  97. }, {
  98. title: '账号',
  99. dataIndex: 'mobile',
  100. key: 'mobile',
  101. }, {
  102. title: '认证名称',
  103. dataIndex: 'nickname',
  104. key: 'nickname',
  105. }, {
  106. title: '会员类型',
  107. dataIndex: 'gradeName',
  108. key: 'gradeName',
  109. }, {
  110. title: '订单状态',
  111. dataIndex: 'orderState',
  112. key: 'orderState',
  113. render: (text) => {
  114. if (text == 1) {
  115. return '已支付'
  116. } else {
  117. return '未支付'
  118. };
  119. }
  120. }, {
  121. title: '生成时间',
  122. dataIndex: 'formattedOrderTime',
  123. key: 'formattedOrderTime',
  124. }, {
  125. title: '支付时间',
  126. dataIndex: 'formattedPaymentTime',
  127. key: 'formattedPaymentTime',
  128. }, {
  129. title: '到期时间',
  130. dataIndex: 'formattedValidTime',
  131. key: 'formattedValidTime',
  132. }
  133. ],
  134. dataSource: []
  135. };
  136. },
  137. componentWillMount () {
  138. this.loadData();
  139. },
  140. search () {
  141. this.loadData();
  142. },
  143. reset () {
  144. this.state.searchOrderNumber = undefined;
  145. this.state.searchAftNumber = undefined;
  146. this.state.searchOrderStatus = undefined;
  147. this.state.searchName = undefined;
  148. this.state.searchTime = [];
  149. this.loadData();
  150. },
  151. tableRowClick (record, index) {
  152. this.state.RowData = record;
  153. this.setState({ visible: true });
  154. },
  155. render () {
  156. const { RangePicker } = DatePicker;
  157. const Option = Select.Option;
  158. return (
  159. <div className="user-content" >
  160. <div className="content-title">
  161. <span>会员订单列表</span>
  162. </div>
  163. <div className="user-search">
  164. <Input placeholder="订单编号" value={this.state.searchOrderNumber}
  165. onChange={(e) => { this.setState({ searchOrderNumber: e.target.value }); }} />
  166. <Input placeholder="用户账号" value={this.state.searchAftNumber}
  167. onChange={(e) => { this.setState({ searchAftNumber: e.target.value }); }} />
  168. <Input placeholder="认证名称" value={this.state.searchName}
  169. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  170. <Select placeholder="订单类型" value={this.state.searchOrderType} style={{ width: 120 }}
  171. onChange={(e) => { this.setState({ searchOrderType: e }) }}>
  172. <Option value="0">会员服务</Option>
  173. <Option value="1">科技服务</Option>
  174. </Select>
  175. <Select placeholder="订单状态" value={this.state.searchOrderStatus} style={{ width: 120 }}
  176. onChange={(e) => { this.setState({ searchOrderStatus: e }) }}>
  177. <Option value="0">未付款</Option>
  178. <Option value="1">已付款</Option>
  179. </Select>
  180. <div className="search-div">
  181. <span>订单生成时间:</span>
  182. <RangePicker
  183. allowClear={false}
  184. value={[this.state.searchTime[0] ? moment(this.state.searchTime[0]) : null,
  185. this.state.searchTime[1] ? moment(this.state.searchTime[1]) : null]}
  186. onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} />
  187. </div>
  188. <Button type="primary" onClick={this.search}>搜索</Button>
  189. <Button onClick={this.reset}>重置</Button>
  190. </div>
  191. <div className="patent-table">
  192. <Spin spinning={this.state.loading}>
  193. <Table columns={this.state.columns}
  194. dataSource={this.state.dataSource}
  195. pagination={this.state.pagination}
  196. onRowClick={this.tableRowClick} />
  197. </Spin>
  198. </div>
  199. <Modal title="订单详情" width={600} className="activity-modal"
  200. visible={this.state.visible}
  201. maskClosable={false}
  202. footer={null}
  203. afterClose={() => { this.state.RowData = {}; this.state.asist = null; this.state.asistArray = []; }}
  204. onCancel={() => { this.setState({ visible: false }) }} >
  205. <Spin spinning={this.state.loading}>
  206. <div className="clearfix">
  207. <div className="modal-box">
  208. <span className="modal-box-title">会员等级</span>
  209. <div className="modal-box-detail">
  210. <Select placeholder="选择会员等级"
  211. style={{ width: 120 }}
  212. value={this.state.RowData.menberType ? this.state.RowData.menberType.toString() : undefined}
  213. onChange={(e) => {
  214. this.state.RowData.menberType = e;
  215. this.setState({ RowData: this.state.RowData });
  216. }}>
  217. <Select.Option value="2">Lv.2</Select.Option>
  218. <Select.Option value="3">Lv.3</Select.Option>
  219. <Select.Option value="4">Lv.4</Select.Option>
  220. <Select.Option value="5">Lv.5</Select.Option>
  221. </Select>
  222. </div>
  223. </div>
  224. <div className="modal-box">
  225. <span className="modal-box-title">会员时长</span>
  226. <div className="modal-box-detail" style={{ width: '160px' }}>
  227. <InputNumber value={this.state.RowData.validMonth} step={1} onChange={(e) => {
  228. this.state.RowData.validMonth = e;
  229. this.setState({ RowData: this.state.RowData });
  230. }} />
  231. <span> 月</span>
  232. </div>
  233. <span className="modal-box-title">实际支付金额</span>
  234. <div className="modal-box-detail" style={{ width: '160px' }}>
  235. <InputNumber value={this.state.RowData.paymentValue} step={0.01} onChange={(e) => {
  236. this.state.RowData.paymentValue = e;
  237. this.setState({ RowData: this.state.RowData });
  238. }} />
  239. <span> 元</span>
  240. </div>
  241. </div>
  242. <div className="modal-box">
  243. <span className="modal-box-title">支付方式</span>
  244. <div className="modal-box-detail" style={{ width: '260px' }}>
  245. <Input value={this.state.RowData.paymentType} onChange={(e) => {
  246. this.state.RowData.paymentType = e.target.value;
  247. this.setState({ RowData: this.state.RowData });
  248. }} />
  249. </div>
  250. </div>
  251. <div className="modal-box">
  252. <span className="modal-box-title">支付状态</span>
  253. <div className="modal-box-detail">
  254. <Radio.Group value={this.state.RowData.orderState}
  255. onChange={(e) => {
  256. this.state.RowData.orderState = e.target.value;
  257. this.setState({ RowData: this.state.RowData });
  258. }} >
  259. <Radio value={0}>未支付</Radio>
  260. <Radio value={1}>已支付</Radio>
  261. </Radio.Group>
  262. </div>
  263. </div>
  264. <div className="modal-box">
  265. <span className="modal-box-title">支付时间</span>
  266. <div className="modal-box-detail">
  267. <DatePicker style={{ width: '150px' }}
  268. showTime
  269. format="YYYY-MM-DD HH:mm:ss"
  270. placeholder="选择支付时间"
  271. value={this.state.RowData.formattedPaymentTime ? moment(this.state.RowData.formattedPaymentTime, "YYYY-MM-DD HH:mm:ss") : undefined}
  272. onChange={(t, str) => {
  273. this.state.RowData.formattedPaymentTime = str;
  274. this.setState({ RowData: this.state.RowData });
  275. }} />
  276. </div>
  277. </div>
  278. </div>
  279. <div className="modal-box">
  280. <Button type="primary" onClick={this.submit}>提交</Button>
  281. <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button>
  282. </div>
  283. </Spin>
  284. </Modal>
  285. </div >
  286. );
  287. }
  288. });
  289. export default OrderList;