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

2.搜索框search组件

1. import React from 'react';
2. class ListSearch extends React.Component{
3.     constructor(props){
4.         super(props);
5.         this.state = {
6.             orderNumber : ''
7.         }
8.     }
9.     // 数据变化的时候
10.     onValueChange(e){
11.         let name = e.target.name,
12.             value = e.target.value.trim();
13.         this.setState({
14.             [name] : value
15.         });
16.     }
17.     // 点击搜索按钮的时候
18.     onSearch(){
19.         this.props.onSearch(this.state.orderNumber);
20.     }
21.     // 输入关键字后按回车，自动提交
22.     onSearchKeywordKeyUp(e){
23.         if(e.keyCode === 13){
24.             this.onSearch();
25.         }
26.     }
27.     render(){
28.         return (
29.             <div className="row search-wrap">
30.                 <div className="col-md-12">
31.                     <div className="form-inline">
32.                         <div className="form-group">
33.                             <select className="form-control">
34.                                 <option value="">按订单号查询</option>
35.                             </select>
36.                         </div>
37.                         <div className="form-group">
38.                             <input type="text"
39.                                 className="form-control"
40.                                 placeholder="订单号"
41.                                 name="orderNumber"
42.                                 onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
43.                                 onChange={(e) => this.onValueChange(e)}/>
44.                         </div>
45.                         <button className="btn btn-primary"
46.                             onClick={(e) => this.onSearch()}>搜索</button>
47.                     </div>
48.                 </div>
49.             </div>
50.         )
51.     }
52. }
53. 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. import PageTitle from 'component/page-title/index.jsx';
6. import ListSearch from './index-list-search.jsx';
7. import TableList from 'util/table-list/index.jsx';
8. import Pagination from 'util/pagination/index.jsx';
9. const _mm = new MUtil();
10. const _order = new Order();
11. class OrderList extends React.Component{
12.     constructor(props){
13.         super(props);
14.         this.state = {
15.             list : [],
16.             pageNum : 1,
17.             listType : 'list' // list / search
18.         };
19.     }
20.     componentDidMount(){
21.         this.loadOrderList();
22.     }
23.     // 加载商品列表
24.     loadOrderList(){
25.         let listParam = {};
26.         listParam.listType = this.state.listType;
27.         listParam.pageNum = this.state.pageNum;
28.         // 如果是搜索的话，需要传入搜索类型和搜索关键字
29.         if(this.state.listType === 'search'){
30.             listParam.orderNo = this.state.orderNumber;
31.         }
32.         // 请求接口
33.         _order.getOrderList(listParam).then(res => {
34.             this.setState(res);
35.         }, errMsg => {
36.             this.setState({
37.                 list : []
38.             });
39.             _mm.errorTips(errMsg);
40.         });
41.     }
42.     // 搜索
43.     onSearch(orderNumber){
44.         let listType = orderNumber === '' ? 'list' : 'search';
45.         this.setState({
46.             listType : listType,
47.             pageNum : 1,
48.             orderNumber : orderNumber
49.         }, () => {
50.             this.loadOrderList();
51.         });
52.     }
53.     // 页数发生变化的时候
54.     onPageNumChange(pageNum){
55.         this.setState({
56.             pageNum : pageNum
57.         }, () => {
58.             this.loadOrderList();
59.         });
60.     }
61.     render(){
62.         let tableHeads = ['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作'];
63.         return (
64.             <div id="page-wrapper">
65.                 <PageTitle title="订单列表" />
66.                 <ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)}}/>
67.                 <TableList tableHeads={tableHeads}>
68.                     {
69.                         this.state.list.map((order, index) => {
70.                             return (
71.                                 <tr key={index}>
72.                                     <td>
73.                                         <Link to={ `/order/detail/${order.orderNo}` }>{order.orderNo}</Link>
74.                                     </td>
75.                                     <td>{order.receiverName}</td>
76.                                     <td>{order.statusDesc}</td>
77.                                     <td>￥{order.payment}</td>
78.                                     <td>{order.createTime}</td>
79.                                     <td>
80.                                         <Link to={ `/order/detail/${order.orderNo}` }>详情</Link>
81.                                     </td>
82.                                 </tr>
83.                             );
84.                         })
85.                     }
86.                 </TableList>
87.                 <Pagination current={this.state.pageNum}
88.                     total={this.state.total}
89.                     onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
90.             </div>
91.         );
92.     }
93. }
94. 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. import './detail.scss';
7. const _mm = new MUtil();
8. const _order = new Order();
9. class OrderDetail extends React.Component{
10.     constructor(props){
11.         super(props);
12.         this.state = {
13.             orderNumber : this.props.match.params.orderNumber,
14.             orderInfo : {}
15.         }
16.     }
17.     componentDidMount(){
18.         this.loadOrderDetail();
19.     }
20.     // 加载商品详情
21.     loadOrderDetail(){
22.         _order.getOrderDetail(this.state.orderNumber).then((res) => {
23.             this.setState({
24.                 orderInfo : res
25.             });
26.         }, (errMsg) => {
27.             _mm.errorTips(errMsg);
28.         });
29.     }
30.     // 发货操作
31.     onSendGoods(){
32.         if(window.confirm('是否确认该订单已经发货？')){
33.             _order.sendGoods(this.state.orderNumber).then((res) => {
34.                 _mm.successTips('发货成功');
35.                 this.loadOrderDetail();
36.             }, (errMsg) => {
37.                 _mm.errorTips(errMsg);
38.             });
39.         }
40.     }
41.     render(){
42.         let receiverInfo = this.state.orderInfo.shippingVo || {},
43.             productList = this.state.orderInfo.orderItemVoList || [];
44.         let tableHeads = [
45.             {name: '商品图片', width: '10%'},
46.             {name: '商品信息', width: '45%'},
47.             {name: '单价', width: '15%'},
48.             {name: '数量', width: '15%'},
49.             {name: '合计', width: '15%'}
50.         ];
51.         return (
52.             <div id="page-wrapper">
53.                 <PageTitle title="订单详情" />
54.                 <div className="form-horizontal">
55.                     <div className="form-group">
56.                         <label className="col-md-2 control-label">订单号</label>
57.                         <div className="col-md-5">
58.                             <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
59.                         </div>
60.                     </div>
61.                     <div className="form-group">
62.                         <label className="col-md-2 control-label">创建时间</label>
63.                         <div className="col-md-5">
64.                             <p className="form-control-static">{this.state.orderInfo.createTime}</p>
65.                         </div>
66.                     </div>
67.                     <div className="form-group">
68.                         <label className="col-md-2 control-label">收件人</label>
69.                         <div className="col-md-5">
70.                             <p className="form-control-static">
71.                                 {receiverInfo.receiverName}，
72.                                 {receiverInfo.receiverProvince}
73.                                 {receiverInfo.receiverCity}
74.                                 {receiverInfo.receiverAddress}
75.                                 {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
76.                             </p>
77.                         </div>
78.                     </div>
79.                     <div className="form-group">
80.                         <label className="col-md-2 control-label">订单状态</label>
81.                         <div className="col-md-5">
82.                             <p className="form-control-static">
83.                                 {this.state.orderInfo.statusDesc}
84.                                 {
85.                                     this.state.orderInfo.status === 20
86.                                     ? <button className="btn btn-default btn-sm btn-send-goods"
87.                                         onClick={(e) => {this.onSendGoods(e)}}>立即发货</button>
88.                                     : null
89.                                 }
90.                             </p>
91.                         </div>
92.                     </div>
93.                     <div className="form-group">
94.                         <label className="col-md-2 control-label">支付方式</label>
95.                         <div className="col-md-5">
96.                             <p className="form-control-static">
97.                                 {this.state.orderInfo.paymentTypeDesc}
98.                             </p>
99.                         </div>
100.                     </div>
101.                     <div className="form-group">
102.                         <label className="col-md-2 control-label">订单金额</label>
103.                         <div className="col-md-5">
104.                             <p className="form-control-static">
105.                                 ￥{this.state.orderInfo.payment}
106.                             </p>
107.                         </div>
108.                     </div>
109.                     <div className="form-group">
110.                         <label className="col-md-2 control-label">商品列表</label>
111.                         <div className="col-md-10">
112.                             <TableList tableHeads={tableHeads}>
113.                                 {
114.                                     productList.map((product, index) => {
115.                                         return (
116.                                             <tr key={index}>
117.                                                 <td>
118.                                                     <img className="p-img" alt={product.productName}
119.                                                         src={`${this.state.orderInfo.imageHost}${product.productImage}`}/>
120.                                                 </td>
121.                                                 <td>{product.productName}</td>
122.                                                 <td>￥{product.currentUnitPrice}</td>
123.                                                 <td>{product.quantity}</td>
124.                                                 <td>￥{product.totalPrice}</td>
125.                                             </tr>
126.                                         );
127.                                     })
128.                                 }
129.                             </TableList>
130.                         </div>
131.                     </div>
132.                 </div>
133.             </div>
134.         )
135.     }
136. }
137. export default OrderDetail;