React后台管理系统-订单管理

1.订单管理页面和商品管理页面类似，都是一个搜索组件+列表组件

2.搜索框search组件

1. import React from 'react';
2.  
3. class ListSearch extends React.Component{
4.     constructor(props){
5.         super(props);
6.         this.state = {
7.             orderNumber : ''
8.         }
9.     }
10.     // 数据变化的时候
11.     onValueChange(e){
12.         let name = e.target.name,
13.             value = e.target.value.trim();
14.         this.setState({
15.             [name] : value
16.         });
17.     }
18.     // 点击搜索按钮的时候
19.     onSearch(){
20.         this.props.onSearch(this.state.orderNumber);
21.     }
22.     // 输入关键字后按回车，自动提交
23.     onSearchKeywordKeyUp(e){
24.         if(e.keyCode === 13){
25.             this.onSearch();
26.         }
27.     }
28.     render(){
29.         return (
30.             <div className="row search-wrap">
31.                 <div className="col-md-12">
32.                     <div className="form-inline">
33.                         <div className="form-group">
34.                             <select className="form-control">
35.                                 <option value="">按订单号查询</option>
36.                             </select>
37.                         </div>
38.                         <div className="form-group">
39.                             <input type="text"
40.                                 className="form-control"
41.                                 placeholder="订单号"
42.                                 name="orderNumber"
43.                                 onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
44.                                 onChange={(e) => this.onValueChange(e)}/>
45.                         </div>
46.                         <button className="btn btn-primary"
47.                             onClick={(e) => this.onSearch()}>搜索</button>
48.                     </div>
49.                 </div>
50.             </div>
51.         )
52.     }
53. }
54. export default ListSearch;

3.订单列表组件

1. import React from 'react';
2. import { Link } from 'react-router-dom';
3. import MUtil from 'util/mm.jsx'
4. import Order from 'service/order-service.jsx'
5.  
6. import PageTitle from 'component/page-title/index.jsx';
7. import ListSearch from './index-list-search.jsx';
8. import TableList from 'util/table-list/index.jsx';
9. import Pagination from 'util/pagination/index.jsx';
10.  
11.  
12. const _mm = new MUtil();
13. const _order = new Order();
14.  
15. class OrderList extends React.Component{
16.     constructor(props){
17.         super(props);
18.         this.state = {
19.             list : [],
20.             pageNum : 1,
21.             listType : 'list' // list / search
22.         };
23.     }
24.     componentDidMount(){
25.         this.loadOrderList();
26.     }
27.     // 加载商品列表
28.     loadOrderList(){
29.         let listParam = {};
30.         listParam.listType = this.state.listType;
31.         listParam.pageNum = this.state.pageNum;
32.         // 如果是搜索的话，需要传入搜索类型和搜索关键字
33.         if(this.state.listType === 'search'){
34.             listParam.orderNo = this.state.orderNumber;
35.         }
36.         // 请求接口
37.         _order.getOrderList(listParam).then(res => {
38.             this.setState(res);
39.         }, errMsg => {
40.             this.setState({
41.                 list : []
42.             });
43.             _mm.errorTips(errMsg);
44.         });
45.     }
46.     // 搜索
47.     onSearch(orderNumber){
48.         let listType = orderNumber === '' ? 'list' : 'search';
49.         this.setState({
50.             listType : listType,
51.             pageNum : 1,
52.             orderNumber : orderNumber
53.         }, () => {
54.             this.loadOrderList();
55.         });
56.     }
57.     // 页数发生变化的时候
58.     onPageNumChange(pageNum){
59.         this.setState({
60.             pageNum : pageNum
61.         }, () => {
62.             this.loadOrderList();
63.         });
64.     }
65.     render(){
66.         let tableHeads = ['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作'];
67.         return (
68.             <div id="page-wrapper">
69.                 <PageTitle title="订单列表" />
70.                 <ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)}}/>
71.                 <TableList tableHeads={tableHeads}>
72.                     {
73.                         this.state.list.map((order, index) => {
74.                             return (
75.                                 <tr key={index}>
76.                                     <td>
77.                                         <Link to={ `/order/detail/${order.orderNo}` }>{order.orderNo}</Link>
78.                                     </td>
79.                                     <td>{order.receiverName}</td>
80.                                     <td>{order.statusDesc}</td>
81.                                     <td>￥{order.payment}</td>
82.                                     <td>{order.createTime}</td>
83.                                     <td>
84.                                         <Link to={ `/order/detail/${order.orderNo}` }>详情</Link>
85.                                     </td>
86.                                 </tr>
87.                             );
88.                         })
89.                     }
90.                 </TableList>
91.                 <Pagination current={this.state.pageNum}
92.                     total={this.state.total}
93.                     onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
94.             </div>
95.         );
96.     }
97. }
98.  
99. export default OrderList;

4.详情detail组件

1. import React from 'react';
2. import MUtil from 'util/mm.jsx'
3. import Order from 'service/order-service.jsx'
4. import PageTitle from 'component/page-title/index.jsx';
5. import TableList from 'util/table-list/index.jsx';
6.  
7. import './detail.scss';
8. const _mm = new MUtil();
9. const _order = new Order();
10.  
11. class OrderDetail extends React.Component{
12.     constructor(props){
13.         super(props);
14.         this.state = {
15.             orderNumber : this.props.match.params.orderNumber,
16.             orderInfo : {}
17.         }
18.     }
19.     componentDidMount(){
20.         this.loadOrderDetail();
21.     }
22.     // 加载商品详情
23.     loadOrderDetail(){
24.         _order.getOrderDetail(this.state.orderNumber).then((res) => {
25.             this.setState({
26.                 orderInfo : res
27.             });
28.         }, (errMsg) => {
29.             _mm.errorTips(errMsg);
30.         });
31.     }
32.     // 发货操作
33.     onSendGoods(){
34.         if(window.confirm('是否确认该订单已经发货？')){
35.             _order.sendGoods(this.state.orderNumber).then((res) => {
36.                 _mm.successTips('发货成功');
37.                 this.loadOrderDetail();
38.             }, (errMsg) => {
39.                 _mm.errorTips(errMsg);
40.             });
41.         }
42.     }
43.     render(){
44.         let receiverInfo = this.state.orderInfo.shippingVo || {},
45.             productList = this.state.orderInfo.orderItemVoList || [];
46.         let tableHeads = [
47.             {name: '商品图片', '10%'},
48.             {name: '商品信息', '45%'},
49.             {name: '单价', '15%'},
50.             {name: '数量', '15%'},
51.             {name: '合计', '15%'}
52.         ];
53.         return (
54.             <div id="page-wrapper">
55.                 <PageTitle title="订单详情" />
56.                 <div className="form-horizontal">
57.                     <div className="form-group">
58.                         <label className="col-md-2 control-label">订单号</label>
59.                         <div className="col-md-5">
60.                             <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
61.                         </div>
62.                     </div>
63.                     <div className="form-group">
64.                         <label className="col-md-2 control-label">创建时间</label>
65.                         <div className="col-md-5">
66.                             <p className="form-control-static">{this.state.orderInfo.createTime}</p>
67.                         </div>
68.                     </div>
69.                     <div className="form-group">
70.                         <label className="col-md-2 control-label">收件人</label>
71.                         <div className="col-md-5">
72.                             <p className="form-control-static">
73.                                 {receiverInfo.receiverName}，
74.                                 {receiverInfo.receiverProvince}
75.                                 {receiverInfo.receiverCity}
76.                                 {receiverInfo.receiverAddress}
77.                                 {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
78.                             </p>
79.                         </div>
80.                     </div>
81.                     <div className="form-group">
82.                         <label className="col-md-2 control-label">订单状态</label>
83.                         <div className="col-md-5">
84.                             <p className="form-control-static">
85.                                 {this.state.orderInfo.statusDesc}
86.                                 {
87.                                     this.state.orderInfo.status === 20
88.                                     ? <button className="btn btn-default btn-sm btn-send-goods"
89.                                         onClick={(e) => {this.onSendGoods(e)}}>立即发货</button>
90.                                     : null
91.                                 }
92.                             </p>
93.                         </div>
94.                     </div>
95.                     <div className="form-group">
96.                         <label className="col-md-2 control-label">支付方式</label>
97.                         <div className="col-md-5">
98.                             <p className="form-control-static">
99.                                 {this.state.orderInfo.paymentTypeDesc}
100.                             </p>
101.                         </div>
102.                     </div>
103.                     <div className="form-group">
104.                         <label className="col-md-2 control-label">订单金额</label>
105.                         <div className="col-md-5">
106.                             <p className="form-control-static">
107.                                 ￥{this.state.orderInfo.payment}
108.                             </p>
109.                         </div>
110.                     </div>
111.                     <div className="form-group">
112.                         <label className="col-md-2 control-label">商品列表</label>
113.                         <div className="col-md-10">
114.                             <TableList tableHeads={tableHeads}>
115.                                 {
116.                                     productList.map((product, index) => {
117.                                         return (
118.                                             <tr key={index}>
119.                                                 <td>
120.                                                     <img className="p-img" alt={product.productName}
121.                                                         src={`${this.state.orderInfo.imageHost}${product.productImage}`}/>
122.                                                 </td>
123.                                                 <td>{product.productName}</td>
124.                                                 <td>￥{product.currentUnitPrice}</td>
125.                                                 <td>{product.quantity}</td>
126.                                                 <td>￥{product.totalPrice}</td>
127.                                             </tr>
128.                                         );
129.                                     })
130.                                 }
131.                             </TableList>
132.                         </div>
133.                     </div>
134.                 </div>
135.             </div>
136.         )
137.     }
138. }
139. export default OrderDetail;