save

src/pages/my/order/index.css

@@ -9,13 +9,25 @@
 
 .order-card-content {
     height: 100px;
-    background-color: #ebedf0;
+    background-color: #f5f5f9;
+    display: flex;
+    padding: 5px 0;
+}
+
+.order-product-img {
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 90px;
+    margin-left: 5px;
+    height: 100%;
 }
 
 .order-card-bottom {
     display: flex;
     justify-content: flex-end;
     align-items: baseline;
+    height: 35px;
+    line-height: 35px;
 }
 
 .order-card-pay {
@@ -28,4 +40,49 @@
 
 .order-card-count {
     display: inline-block;
+}
+
+.order-card-button-group {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid #F3F3F3;
+    height: 45px;
+    line-height: 45px;
+    padding: 5px 10px 5px 0;
+}
+
+.order-button {
+    border-radius: 50px;
+    background-color: white;
+    height: 30px;
+    width: 75px;
+    border: 1px solid #F3F3F3 !important;
+}
+
+.pay-button {
+    border: 1px solid #f44 !important;
+    color: #f44;
+}
+
+.ship-button {
+
+}
+
+.cancel-button {
+    border: 1px solid #f44 !important;
+    color: #f44;
+    width: 85px;
+}
+
+.unbox-button {
+    width: 85px;
+}
+
+.judge-button {
+
+}
+
+.more-button {
+
 }

src/pages/my/order/index.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import './index.css'
-import {NavBar, Icon, ActivityIndicator} from 'antd-mobile'
+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"
@@ -78,7 +79,7 @@ class Order extends Component {
                                 return 'error!'
                             }
                             return (
-                                <OrderRender data={data.orderbyprops}/>
+                                <OrderRender data={data.orderbyprops} orderStatus={orderStatus}/>
                             )
                         }
                     }
@@ -96,6 +97,67 @@ class OrderRender extends Component {
         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>
+                        &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 (
@@ -121,15 +183,24 @@ class OrderRender extends Component {
                                             if (error) {
                                                 return 'error!'
                                             }
-                                            console.log(data)
+                                            data = data.orderProductbyprops
                                             return (
                                                 <div>
                                                     <div className='order-card-top'>JD</div>
-                                                    <div className='order-card-content'></div>
+                                                    <div className='order-card-content'>
+                                                        {
+                                                            this.orderCardContentRender(data)
+                                                        }
+                                                    </div>
                                                     <div className='order-card-bottom'>
-                                                        <div className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:</div>
+                                                        <div
+                                                            className='order-card-count'>共{order.count}件商品&nbsp;&nbsp;实付款:
+                                                        </div>
                                                         <div className='order-card-pay'>￥{order.productTotalPay}</div>
                                                     </div>
+
+                                                    {this.orderCardButtonGroupRender()}
+
                                                 </div>
                                             )
                                         }

src/pages/my/tools/address/index.css

@@ -25,9 +25,9 @@
 }
 
 .ellipsis {
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
 }
 
 .address-address {

src/pages/my/tools/address/singleaddress/index.js

@@ -193,7 +193,7 @@ class DefaultAndSaveButton extends Component {
         // let {data} = this.props
         return (
             <div className='address-button'>
-                <Button block size='large'>设为默认并保存</Button>
+                <Button block size='large' style={{outline: 'none'}}>设为默认并保存</Button>
             </div>
         )
     }
@@ -210,7 +210,7 @@ class SaveAddressButton extends Component {
         // let {data} = this.props
         return (
             <div className='address-button'>
-                <Button type='primary' block size='large'>保存并使用</Button>
+                <Button type='primary' block size='large' style={{outline: 'none'}}>保存并使用</Button>
             </div>
         )
     }

src/utils/gql.js

@@ -166,34 +166,9 @@ const orderProduct_by_props = `
             }
             orderPay
             createdAt
-            order_id {
-                deliveryTime
-                updatedAt
-    
-                payTime
-                orderTotalPay
-                createdAt
-                orderStatus
-    
-                id
-                orderShipFee
-                count
-    
-                productTotalPay
-            }
             id
             count
             productPay
-            user_id {
-                email
-                updatedAt
-                password
-                telephone
-                username
-                createdAt
-                openid
-                id
-            }
         }
     }
 `