|
|
@@ -1,215 +1,44 @@
|
|
|
import React, {Component} from 'react'
|
|
|
-import './index.css'
|
|
|
-import {NavBar, Icon, ActivityIndicator, Button} from 'antd-mobile'
|
|
|
-import {Row, Col} from 'antd'
|
|
|
-import {withRouter} from 'react-router-dom'
|
|
|
-import {orderbyprops, orderProduct_by_props} from "../../../utils/gql"
|
|
|
-import {Query} from "react-apollo"
|
|
|
-import gql from "graphql-tag"
|
|
|
+import Display from './display'
|
|
|
+import Detail from "./detail"
|
|
|
+import {withRouter, Route, Switch} from 'react-router-dom'
|
|
|
|
|
|
class Order extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
- this.state = {
|
|
|
- navTitle: '',
|
|
|
- page: 'pay',
|
|
|
- orderStatus: ''
|
|
|
- }
|
|
|
+ this.state = {}
|
|
|
}
|
|
|
|
|
|
componentWillMount() {
|
|
|
let {location} = this.props
|
|
|
if (location && location.state) {
|
|
|
- let navTitle = '',
|
|
|
- orderStatus = '0'
|
|
|
- let page = location.state.page
|
|
|
- switch (page) {
|
|
|
- case 'pay':
|
|
|
- navTitle = '待付款'
|
|
|
- orderStatus = '0'
|
|
|
- break
|
|
|
- case 'ship':
|
|
|
- navTitle = '待发货'
|
|
|
- orderStatus = '1'
|
|
|
- break
|
|
|
- case 'unbox':
|
|
|
- navTitle = '待收货'
|
|
|
- orderStatus = '2'
|
|
|
- break
|
|
|
- case 'judge':
|
|
|
- navTitle = '待评价'
|
|
|
- orderStatus = '3'
|
|
|
- break
|
|
|
- default:
|
|
|
- navTitle = '无效页面'
|
|
|
- break
|
|
|
+ if(['pay', 'ship', 'unbox', 'judge'].indexOf(location.state.kind)>-1) {
|
|
|
+ this.props.history.push({
|
|
|
+ pathname: '/my/order/display',
|
|
|
+ state: {
|
|
|
+ kind: location.state.kind
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.props.history.push({
|
|
|
+ pathname: '/my/order/detail',
|
|
|
+ state: {}
|
|
|
+ })
|
|
|
}
|
|
|
- this.setState({
|
|
|
- navTitle,
|
|
|
- page,
|
|
|
- orderStatus
|
|
|
- })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- let {navTitle, orderStatus} = this.state
|
|
|
return (
|
|
|
<div className='order-wrap'>
|
|
|
- <div className='order-navbar-wrap navbar'>
|
|
|
- <NavBar
|
|
|
- mode="light"
|
|
|
- icon={<Icon type="left"/>}
|
|
|
- onLeftClick={() => {
|
|
|
- this.props.history.push({pathname: '/my/all'})
|
|
|
- }}
|
|
|
- >{navTitle}</NavBar>
|
|
|
- </div>
|
|
|
- <Query query={gql(orderbyprops)} variables={{user_id: "test", orderStatus}}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="Loading..." size="large"/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!'
|
|
|
- }
|
|
|
- return (
|
|
|
- <OrderRender data={data.orderbyprops} orderStatus={orderStatus}/>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
+ <Switch>
|
|
|
+ <Route path="/my/order/display" component={Display}/>
|
|
|
+ <Route path="/my/order/detail" component={Detail}/>
|
|
|
+ <Route path="/my/order/*" component={Display}/>
|
|
|
+ </Switch>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default withRouter(Order)
|
|
|
-
|
|
|
-class OrderRender extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {}
|
|
|
- }
|
|
|
-
|
|
|
- orderCardContentRender = (data) => {
|
|
|
- if (data.length === 1) {
|
|
|
- return (
|
|
|
- <Row style={{width: '100%'}}>
|
|
|
- <Col span={6} style={{height: '100%'}}>
|
|
|
- <div className='order-product-img' style={{backgroundImage: `url('${data[0].product_id.img}')`}}/>
|
|
|
- </Col>
|
|
|
- <Col span={16} offset={2}>
|
|
|
- <div className='order-product-name'>{data[0].product_id.name}</div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- )
|
|
|
- } else {
|
|
|
- return (data.map(data => (
|
|
|
- <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}}/>
|
|
|
- )))
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- orderCardButtonGroupRender = () => {
|
|
|
- let {orderStatus} = this.props
|
|
|
- switch (orderStatus) {
|
|
|
- case '0':
|
|
|
- return (
|
|
|
- <div className='order-card-button-group'>
|
|
|
- <Button size="small" className='pay-button order-button'>去支付</Button>
|
|
|
- </div>
|
|
|
- )
|
|
|
- case '1':
|
|
|
- return (
|
|
|
- <div className='order-card-button-group'>
|
|
|
- <Button size="small" className='ship-button order-button'>催发货</Button>
|
|
|
-
|
|
|
- <Button size="small" className='cancel-button order-button'>取消订单</Button>
|
|
|
- </div>
|
|
|
- )
|
|
|
- case '2':
|
|
|
- return (
|
|
|
- <div className='order-card-button-group'>
|
|
|
- <Button size="small" className='unbox-button order-button'>查看物流</Button>
|
|
|
-
|
|
|
- <Button size="small" className='cancel-button order-button'>取消订单</Button>
|
|
|
- </div>
|
|
|
- )
|
|
|
- case '3':
|
|
|
- return (
|
|
|
- <div className='order-card-button-group'>
|
|
|
- <Button size="small" className='judge-button order-button'>去评价</Button>
|
|
|
-
|
|
|
- <Button size="small" className='more-button order-button'>售后</Button>
|
|
|
- </div>
|
|
|
- )
|
|
|
- default:
|
|
|
- return (
|
|
|
- <div>
|
|
|
- ok
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- let {data} = this.props
|
|
|
- return (
|
|
|
- <div className='order-my-content'>
|
|
|
- {
|
|
|
- data.length === 0 ?
|
|
|
- <div>
|
|
|
- 还没有这种订单呢
|
|
|
- </div>
|
|
|
- :
|
|
|
- data.map(order => (
|
|
|
- <div key={order.id} className='order-card'>
|
|
|
- <Query query={gql(orderProduct_by_props)} variables={{order_id: order.id}}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="Loading..." size="large"/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!'
|
|
|
- }
|
|
|
- data = data.orderProductbyprops
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <div className='order-card-top'>JD</div>
|
|
|
- <div className='order-card-content'>
|
|
|
- {
|
|
|
- this.orderCardContentRender(data)
|
|
|
- }
|
|
|
- </div>
|
|
|
- <div className='order-card-bottom'>
|
|
|
- <div
|
|
|
- className='order-card-count'>共{order.count}件商品 实付款:
|
|
|
- </div>
|
|
|
- <div className='order-card-pay'>¥{order.productTotalPay}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- {this.orderCardButtonGroupRender()}
|
|
|
-
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- </div>
|
|
|
- ))
|
|
|
- }
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
+export default withRouter(Order)
|