save

src/pages/my/order/index.css

@@ -0,0 +1,28 @@
+
+.order-card {
+    margin-top: 20px;
+    background-color: white;
+}
+
+.order-card-content {
+    height: 100px;
+    background-color: #ebedf0;
+}
+
+.order-card-bottom {
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+}
+
+.order-card-pay {
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 500;
+    color: black;
+    margin-right: 10px;
+}
+
+.order-card-count {
+    display: inline-block;
+}

src/pages/my/order/index.js

@@ -104,11 +104,21 @@ class OrderRender extends Component {
         return (
             <div>
                 {
-                    data.map(order=>(
-                        <div key={order.id}>
-                            {order.productTotalPay}
+                    data.length === 0 ?
+                        <div>
+                            还没有这种订单呢
                         </div>
-                    ))
+                        :
+                        data.map(order => (
+                            <div key={order.id} className='order-card'>
+                                <div className='order-card-top'>JD</div>
+                                <div className='order-card-content'></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>
+                            </div>
+                        ))
                 }
             </div>
         )