订单详情

src/pages/my/all/index.js

@@ -139,7 +139,7 @@ class All extends Component {
                     </div>
                 </div>
 
-                <div className='my-card member-card'>
+                <div className='my-card member-card' style={{display: 'none'}}>
                     <div className='card-title'>
                         会员中心
                     </div>

src/pages/my/order/detail/index.css

@@ -0,0 +1,61 @@
+.detail-address-wrap {
+    height: 190px;
+    position: relative;
+}
+
+.detail-address-backgroud-top {
+    background-color: #f44;
+    height: 100px;
+    color: white;
+    padding: 10px 20px;
+}
+
+.detail-status {
+    font-size: 18px;
+    float: left;
+}
+
+.detail-pay {
+    float: right;
+}
+
+.detail-address-backgroud-bottom {
+    background-color: white;
+    height: 80px;
+}
+
+.detail-address-content {
+    background-color: white;
+    height: 100px;
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    width: 90%;
+    transform: translate(-50%, -50%);
+    border-radius: 10px;
+    border: 1px solid #F3F3F3;
+    box-shadow: 0 1px 10px #F3F3F3;
+    padding: 20px 5px;
+}
+
+.detail-address-content-icon {
+    width: 20px;
+    height: 100%;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.detail-address-content-username-phone {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.detail-store-name {
+    width: 100%;
+    background-color: white;
+    height: 40px;
+    padding: 0 15px;
+    color: black;
+    font-size: 15px;
+    line-height: 40px;
+}

src/pages/my/order/detail/index.js

@@ -1,29 +1,149 @@
 import {Component} from "react"
 import React from "react"
 import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
+import {NavBar, Icon as Iconm} from 'antd-mobile'
+import {Row, Col, Icon} from 'antd'
+import {orderProduct_by_props} from "../../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
 
 class Detail extends Component {
     constructor(props) {
         super(props)
         this.state = {
+            data: {}
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if (location && location.state) {
+            this.setState({
+                data: location.state.data
+            })
+        }
+    }
 
+    statusRender = (status) => {
+        switch (status) {
+            case '0':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="clock-circle"/>&nbsp;
+                        <span>等待付款</span>
+                    </div>
+                )
+            case '1':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="shop"/>&nbsp;
+                        <span>等待发货</span>
+                    </div>
+                )
+            case '2':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="gift"/>&nbsp;
+                        <span>等待收货</span>
+                    </div>
+                )
+            case '3':
+                return (
+                    <div className='detail-status'>
+                        <Icon type="like"/>&nbsp;
+                        <span>完成</span>
+                    </div>
+                )
+            default:
+                return (
+                    <div className='detail-status'>
+                        <Icon type="clock-circle"/>&nbsp;
+                        <span>等待确认</span>
+                    </div>
+                )
         }
     }
 
+    productsRender = (data) => {
+        return (
+            data.map(data=> (
+                <div onClick={()=>{
+                    this.props.history.push({
+                        pathname: '/home/detail',
+                        state: {
+                            id: data.id
+                        }
+                    })
+                }}>
+                    <Row style={{width: '100%'}}>
+                        <Col span={6} style={{height: '100px'}}>
+                            <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}}/>
+                        </Col>
+                        <Col span={16} offset={2}>
+                            <div className='order-product-name'>{data.product_id.name}</div>
+                        </Col>
+                    </Row>
+                </div>
+            ))
+        )
+    }
+
     render() {
+        let {data} = this.state
         return (
             <div>
                 <div className='detail-wrap'>
                     <div className='navbar'>
                         <NavBar
                             mode="light"
-                            icon={<Icon type="left"/>}
+                            icon={<Iconm type="left"/>}
                             onLeftClick={() => {
                                 this.props.history.go(-1)
                             }}
                         >订单详情</NavBar>
                     </div>
+                    <div className='content-wrap'>
+                        <div className='detail-address-wrap'>
+                            <div className='detail-address-backgroud-top'>
+                                {this.statusRender(data.orderStatus)}
+                                <div className='detail-pay'>
+                                    ￥{data.productTotalPay}
+                                </div>
+                            </div>
+                            <div className='detail-address-backgroud-bottom'/>
+                            <div className='detail-address-content'>
+                                <Row>
+                                    <Col span={4} className='detail-address-content-icon'>
+                                        <Icon type="pushpin"/>
+                                    </Col>
+                                    <Col span={20}>
+                                        <div className='detail-address-content-username-phone'>
+                                            {data.userAddress_id.username}&nbsp;&nbsp;{data.userAddress_id.telephone}
+                                        </div>
+                                        <div>
+                                            地址：{data.userAddress_id.province + data.userAddress_id.city + data.userAddress_id.area + data.userAddress_id.address}
+                                        </div>
+                                    </Col>
+                                </Row>
+                            </div>
+                        </div>
+                        <div className='detail-goods-wrap'>
+                            <div className='detail-store-name'>JD</div>
+                            <Query query={gql(orderProduct_by_props)} variables={{order_id: data.id}}>
+                                {
+                                    ({loading, error, data}) => {
+                                        if (error) {
+                                            return 'error!'
+                                        }
+                                        data = data.orderProductbyprops
+                                        return (
+                                            <div>{this.productsRender(data)}</div>
+                                        )
+                                    }
+                                }
+                            </Query>
+                        </div>
+                    </div>
                 </div>
             </div>
         )

src/pages/my/order/display/index.js

@@ -7,7 +7,7 @@ import {orderbyprops, orderProduct_by_props} from "../../../../utils/gql"
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 
-class Order extends Component {
+class Display extends Component {
     constructor(props) {
         super(props)
         this.state = {
@@ -79,7 +79,8 @@ class Order extends Component {
                                 return 'error!'
                             }
                             return (
-                                <OrderRender data={data.orderbyprops} orderStatus={orderStatus}/>
+                                <DisplayRender data={data.orderbyprops} orderStatus={orderStatus}
+                                               history={this.props.history}/>
                             )
                         }
                     }
@@ -89,9 +90,9 @@ class Order extends Component {
     }
 }
 
-export default withRouter(Order)
+export default withRouter(Display)
 
-class OrderRender extends Component {
+class DisplayRender extends Component {
     constructor(props) {
         super(props)
         this.state = {}
@@ -102,7 +103,8 @@ class OrderRender extends Component {
             return (
                 <Row style={{width: '100%'}}>
                     <Col span={6} style={{height: '100%'}}>
-                        <div className='order-product-img' style={{backgroundImage: `url('${data[0].product_id.img}')`}}/>
+                        <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>
@@ -111,11 +113,58 @@ class OrderRender extends Component {
             )
         } else {
             return (data.map(data => (
-                <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}} key={data.id}/>
+                <div className='order-product-img' style={{backgroundImage: `url('${data.product_id.img}')`}}
+                     key={data.id}/>
             )))
         }
     }
 
+    orderCardBottomRender = (order) => {
+        let {orderStatus} = this.props
+        switch (orderStatus) {
+            case '0':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;需付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            case '1':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            case '2':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            case '3':
+                return (
+                    <div className='order-card-bottom'>
+                        <div
+                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                        </div>
+                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
+                    </div>
+                )
+            default:
+                return (
+                    <div>1</div>
+                )
+        }
+    }
+
     orderCardButtonGroupRender = () => {
         let {orderStatus} = this.props
         switch (orderStatus) {
@@ -170,6 +219,8 @@ class OrderRender extends Component {
                         :
                         data.map(order => (
                             <div key={order.id} className='order-card'>
+                                <div className='order-card-top'>JD</div>
+
                                 <Query query={gql(orderProduct_by_props)} variables={{order_id: order.id}}>
                                     {
                                         ({loading, error, data}) => {
@@ -186,26 +237,27 @@ class OrderRender extends Component {
                                             data = data.orderProductbyprops
                                             return (
                                                 <div>
-                                                    <div className='order-card-top'>JD</div>
-                                                    <div className='order-card-content'>
+                                                    <div className='order-card-content' onClick={() => {
+                                                        this.props.history.push({
+                                                            pathname: '/my/order/detail',
+                                                            state: {
+                                                                data: order
+                                                            }
+                                                        })
+                                                    }}>
                                                         {
                                                             this.orderCardContentRender(data)
                                                         }
                                                     </div>
-                                                    <div className='order-card-bottom'>
-                                                        <div
-                                                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
-                                                        </div>
-                                                        <div className='order-card-pay'>￥{order.productTotalPay}</div>
-                                                    </div>
-
-                                                    {this.orderCardButtonGroupRender()}
-
                                                 </div>
                                             )
                                         }
                                     }
                                 </Query>
+
+                                {this.orderCardBottomRender(order)}
+
+                                {this.orderCardButtonGroupRender()}
                             </div>
                         ))
                 }