简易的订单详情

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

@@ -82,7 +82,7 @@
 }
 
 .detail-order-wrapper {
-    padding: 10px 5px
+    padding: 10px;
 }
 
 .detail-order-item {
@@ -92,4 +92,12 @@
 
 .detail-order-title {
     font-weight: 600;
+}
+
+.detail-footer-wrap {
+    background-color: white;
+    border-top: 1px solid #f3f3f3;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
 }

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

@@ -6,6 +6,7 @@ import {Row, Col, Icon} from 'antd'
 import {orderProduct_by_props} from "../../../../utils/gql"
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
+import {ButtonGroupRender} from '../display'
 
 class Detail extends Component {
     constructor(props) {
@@ -154,6 +155,9 @@ class Detail extends Component {
                             <Order data={data}/>
                         </div>
                     </div>
+                    <div className='detail-footer-wrap'>
+                        <ButtonGroupRender orderStatus={data.orderStatus}/>
+                    </div>
                 </div>
             </div>
         )

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

@@ -90,8 +90,6 @@ class Display extends Component {
     }
 }
 
-export default withRouter(Display)
-
 class DisplayRender extends Component {
     constructor(props) {
         super(props)
@@ -128,7 +126,7 @@ class DisplayRender extends Component {
                         <div
                             className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;需付款:
                         </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay*100)/100}</div>
+                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
                     </div>
                 )
             case '1':
@@ -137,7 +135,7 @@ class DisplayRender extends Component {
                         <div
                             className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
                         </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay*100)/100}</div>
+                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
                     </div>
                 )
             case '2':
@@ -146,7 +144,7 @@ class DisplayRender extends Component {
                         <div
                             className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
                         </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay*100)/100}</div>
+                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
                     </div>
                 )
             case '3':
@@ -155,7 +153,7 @@ class DisplayRender extends Component {
                         <div
                             className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
                         </div>
-                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay*100)/100}</div>
+                        <div className='order-card-pay'>￥{Math.round(order.productTotalPay * 100) / 100}</div>
                     </div>
                 )
             default:
@@ -165,48 +163,6 @@ class DisplayRender extends Component {
         }
     }
 
-    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>
-                        &nbsp;&nbsp;
-                        <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>
-                        &nbsp;&nbsp;
-                        <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>
-                        &nbsp;&nbsp;
-                        <Button size="small" className='more-button order-button'>售后</Button>
-                    </div>
-                )
-            default:
-                return (
-                    <div>
-                        ok
-                    </div>
-                )
-        }
-    }
-
     render() {
         let {data} = this.props
         return (
@@ -257,11 +213,59 @@ class DisplayRender extends Component {
 
                                 {this.orderCardBottomRender(order)}
 
-                                {this.orderCardButtonGroupRender()}
+                                <ButtonGroupRender orderStatus={this.props.orderStatus}/>
                             </div>
                         ))
                 }
             </div>
         )
     }
+}
+
+const ButtonGroupRender = (props) => {
+    let {orderStatus} = 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>
+                    &nbsp;&nbsp;
+                    <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>
+                    &nbsp;&nbsp;
+                    <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>
+                    &nbsp;&nbsp;
+                    <Button size="small" className='more-button order-button'>售后</Button>
+                </div>
+            )
+        default:
+            return (
+                <div>
+                    ok
+                </div>
+            )
+    }
+}
+
+
+export default withRouter(Display)
+export {
+    ButtonGroupRender
 }