Skip to content

Commit 81eac14

Browse files
author
liyonglu
committed
react-goods-admin订单模块实现
react-goods-admin订单模块实现
1 parent 5d02f11 commit 81eac14

File tree

8 files changed

+400
-0
lines changed

8 files changed

+400
-0
lines changed

‎react/react-goods-admin/src/app.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {
1111
// import "font-awesome/css/font-awesome.min.css"
1212
// 引入其他的路由模块实现
1313
import ProductRouter from "pages/product/router.jsx"
14+
import OrderRouter from "pages/order/router.jsx"
15+
16+
1417
// 布局
1518
import Layout from "components/layout/index.jsx"
1619
//页面
@@ -31,6 +34,7 @@ class App extends React.Component {
3134
<Route exact path="/" component={ Home }/>
3235
<Route path="/product" component={ ProductRouter }/>
3336
<Route path="/product-category" component={ ProductRouter }/>
37+
<Route path="/order" component={ OrderRouter }/>
3438
<Route path="/user/index" component={ UserList }/>
3539
<Redirect exact from="/user" to="/user/index"/>
3640
{/* 从上到一个一个进行匹配 */}

‎react/react-goods-admin/src/pages/order/detail.jsx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React from "react"
2+
import PageTitle from "components/page-title/index.jsx"
3+
import Order from "service/order-service.jsx"
4+
import TableList from "utils/table-list/index.jsx"
5+
6+
import MUtils from "utils/mm.jsx"
7+
import "./detail.scss"
8+
const _mm = new MUtils()
9+
const _order = new Order()
10+
class OrderDetail extends React.Component {
11+
constructor(props) {
12+
super(props)
13+
this.state ={
14+
orderNumber: this.props.match.params.orderNumber, // 区分新增和编辑
15+
orderInfo: {}
16+
}
17+
}
18+
componentDidMount() {
19+
this.loadOrderDetail()
20+
}
21+
// 请求加载订单详情
22+
loadOrderDetail() {
23+
// 编辑 == 需要进行表单回填
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(err)
40+
})
41+
}
42+
}
43+
render() {
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+
]
52+
let receiveInfo = this.state.orderInfo.shippingVo || {}
53+
let productList = this.state.orderInfo.orderItemVoList || []
54+
return (
55+
<div id="page-wrapper">
56+
<PageTitle title="订单详情"/>
57+
<div className="row">
58+
<div className="col-md-12">
59+
<div className="form-horizontal">
60+
<div className="form-group">
61+
<label className="col-md-2 control-label">订单号</label>
62+
<div className="col-md-5">
63+
<p className="form-control-static"> { this.state.orderInfo.orderNo }</p>
64+
</div>
65+
</div>
66+
<div className="form-group">
67+
<label className="col-md-2 control-label">创建时间</label>
68+
<div className="col-md-5">
69+
<p className="form-control-static"> { this.state.orderInfo.createTime }</p>
70+
</div>
71+
</div>
72+
<div className="form-group">
73+
<label className="col-md-2 control-label">收件人</label>
74+
<div className="col-md-5">
75+
<p className="form-control-static">
76+
{ receiveInfo.receiverName}，
77+
{ receiveInfo.receiverProvince}
78+
{ receiveInfo.receiverCity}
79+
{ receiveInfo.receiverAddress}
80+
{ receiveInfo.receiverMobile || receiveInfo.receiverPhone}
81+
</p>
82+
</div>
83+
</div>
84+
<div className="form-group">
85+
<label className="col-md-2 control-label">订单状态</label>
86+
<div className="col-md-5">
87+
<p className="form-control-static">
88+
{/* 判断是不是已付款 */}
89+
{ this.state.orderInfo.statusDesc }
90+
{
91+
this.state.orderInfo.statusDesc === 20
92+
? <button onClick={(e)=> {this.onSendGoods(e)}} className="btn btn-sm btn-default btn-send-goods">立即发货</button>
93+
: null
94+
}
95+
</p>
96+
</div>
97+
</div>
98+
<div className="form-group">
99+
<label className="col-md-2 control-label">支付方式</label>
100+
<div className="col-md-5">
101+
<p className="form-control-static">
102+
{ this.state.orderInfo.paymentTypeDesc }
103+
</p>
104+
</div>
105+
</div>
106+
<div className="form-group">
107+
<label className="col-md-2 control-label">订单金额</label>
108+
<div className="col-md-5">
109+
<p className="form-control-static">
110+
￥ { this.state.orderInfo.payment }
111+
</p>
112+
</div>
113+
</div>
114+
<div className="form-group">
115+
<label className="col-md-2 control-label">商品列表</label>
116+
<div className="col-md-10">
117+
<TableList tableHeads={tableHeads}>
118+
{
119+
productList.map((product, index)=> {
120+
return (
121+
<tr key={ index }>
122+
<td>
123+
<img className="p-img" src={`${this.state.orderInfo.imageHost}${product.productImage}`} alt={product.productName}/>
124+
</td>
125+
<td>{ product.productName }</td>
126+
<td>{ product.currentUnitPrice }</td>
127+
<td>{ product.quantity }</td>
128+
<td>{ product.totalPrice }</td>
129+
</tr>
130+
)
131+
})
132+
}
133+
</TableList>
134+
</div>
135+
</div>
136+
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
)
142+
}
143+
}
144+
145+
export default OrderDetail

‎react/react-goods-admin/src/pages/order/detail.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.btn-send-goods {
2+
margin-left: 10px;
3+
}
4+
.p-img {
5+
display: block;
6+
width: 80px;
7+
height: 80px;
8+
}

‎react/react-goods-admin/src/pages/order/index-list-search.jsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
// 搜索
20+
onSearch(){
21+
this.props.onSearch(this.state.orderNumber)
22+
}
23+
// 搜索框输入点击回车
24+
onSearchKeyword(e) {
25+
if(e.keyCode === 13) {
26+
this.onSearch()
27+
}
28+
}
29+
render() {
30+
return (
31+
<div className="row search-wrap">
32+
<div className="col-md-12">
33+
<div className="form-inline">
34+
<div className="form-group">
35+
<select className="form-control">
36+
<option value="">按订单号查询</option>
37+
</select>
38+
</div>
39+
<div className="form-group">
40+
<input type="text" name="orderNumber" className="form-control" placeholder="关键词"
41+
onChange={(e)=> {this.onValueChange(e)}}
42+
onKeyUp ={(e) => this.onSearchKeyword(e)}/>
43+
</div>
44+
<button onClick={ (e) => this.onSearch(e) } className="btn btn-primary">搜索</button>
45+
</div>
46+
</div>
47+
</div>
48+
)
49+
}
50+
}
51+
52+
export default ListSearch

‎react/react-goods-admin/src/pages/order/index.jsx‎

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

‎react/react-goods-admin/src/pages/order/index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.opera {
2+
margin-right: 10px;
3+
}
4+
.search-wrap {
5+
margin-bottom: 20px;
6+
.form-group {
7+
margin-right: 10px;
8+
}
9+
}

‎react/react-goods-admin/src/pages/order/router.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// 路由的分离
2+
import React from "react"
3+
import {
4+
Switch,
5+
Link,
6+
Route,
7+
Redirect
8+
} from "react-router-dom";
9+
10+
//页面
11+
import OrderList from "pages/order/index.jsx"
12+
import OrderDetail from "pages/order/detail.jsx"
13+
14+
15+
16+
class OrderRouter extends React.Component {
17+
render() {
18+
return (
19+
<Switch>
20+
<Route path="/order/index" component={ OrderList }/>
21+
<Route path="/order/detail/:orderNumber" component={ OrderDetail }/>
22+
23+
{/* ？ 表示可选 */}
24+
<Redirect from="/order" to="/order/index"/>
25+
26+
</Switch>
27+
)
28+
}
29+
}
30+
31+
export default OrderRouter

0 commit comments

Comments
 (0)