add orders page

src/app.css

@@ -38,4 +38,8 @@ a.active {
 a {
     color: #b9b9b9;
     text-decoration: none;
+}
+
+.navbar {
+    border-bottom: 1px solid #f5f5f9;
 }

src/pages/cart/all/detail/index.js

@@ -172,7 +172,7 @@ class CartDetail extends Component {
 
     render() {
         return (
-            <div className="Cart">
+            <div className="cart-wrap">
                 <div className='cart-content'>
                     {
                         this.state.cartList.map((ele,index)=>{

src/pages/cart/all/edit/index.js

@@ -184,8 +184,8 @@ class CartEdit extends Component {
         let listLength = cartList.length;
 
         return (
-            <div className="Cart">
-                <div className='section'>
+            <div className="cart-wrap">
+                <div className='cart-content'>
                     {
                         this.state.cartList.map((ele,index)=>{
                             return(

src/pages/cart/all/index.css

@@ -85,11 +85,12 @@
 .footer{
     position: fixed;
     bottom: 50px;
+    height: 45px;
     width: 100%;
 }
 
 .jiesuan {
-    height: 45px;
+    height: 100%;
     display: flex;
     font-size: 14px;
     align-items: center;

src/pages/cart/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {Switch, Route} from 'react-router-dom'
 
 import All from './all'
-import CartOrder from './order'
+import CartOrders from './orders'
 import './index.css'
 
 const Cart = () => (
@@ -10,7 +10,7 @@ const Cart = () => (
         <Switch>
             <Route exact path="/cart" component={All}/>
             <Route exact path="/cart/all" component={All}/>
-            <Route path="/cart/order" component={CartOrder}/>
+            <Route path="/cart/order" component={CartOrders}/>
         </Switch>
     </div>
 )

src/pages/cart/order/index.js

@@ -1,29 +0,0 @@
-import React, {Component} from 'react'
-import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
-import {withRouter} from 'react-router-dom'
-
-class CartOrder extends Component {
-    constructor(props) {
-        super(props)
-        console.log('props',props)
-        this.state = {}
-    }
-
-    render() {
-        return (
-            <div className='order-wrap'>
-                <div className='order-navbar-wrap'>
-                    <NavBar
-                        className='order-navbar'
-                        mode="light"
-                        icon={<Icon type="left"/>}
-                        onLeftClick={() => {this.props.history.goBack()}}
-                    >订单确认</NavBar>
-                </div>
-            </div>
-        )
-    }
-}
-
-export default withRouter(CartOrder)

src/pages/cart/orders/index.css

@@ -0,0 +1,86 @@
+.orders-content-wrap > div {
+    margin-bottom: 10px;
+    background: white;
+}
+
+.orders-address:after {
+    left: 0;
+    right: 0;
+    content: "";
+    height: 2px;
+    position: absolute;
+    background: repeating-linear-gradient(-45deg,#ff6d6d,#ff6d6d 20%,transparent 0,transparent 25%,#3283fa 0,#3283fa 45%,transparent 0,transparent 50%);
+    background-size: 80px;
+}
+
+.orders-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+}
+
+.orders-delivery > div:nth-child(1) {
+    border-bottom: 1px solid #ebedf0;
+}
+
+.orders-delivery > div:nth-child(2) {
+    padding: 10px 15px;
+}
+
+.orders-price > div {
+    padding: 10px 15px;
+}
+
+.cart-orders-intro {
+    width: 55%;
+}
+
+.cart-orders-count {
+    text-align: right;
+    padding-right: 10px;
+}
+
+.am-list-content, .am-list-extra{
+    font-size: 14px!important;
+    color: #323233!important;
+}
+
+.orders-message {
+    width: 100%;
+    display: flex;
+    padding: 10px 15px;
+    box-sizing: border-box;
+    line-height: 24px;
+    position: relative;
+    background-color: #fff;
+    color: #323233;
+    font-size: 14px;
+}
+
+.orders-message-title {
+    width: 20%;
+    max-width: 90px;
+}
+
+.orders-message-textarea {
+    width: 80%;
+    color: #969799;
+    text-align: right;
+    position: relative;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+}
+
+.message-textarea {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    resize: none;
+    display: block;
+    color: #323233;
+    box-sizing: border-box;
+    background-color: transparent;
+}

src/pages/cart/orders/index.js

@@ -0,0 +1,130 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {NavBar, Icon,List,Picker} from 'antd-mobile'
+
+import './index.css'
+const Item = List.Item;
+const Brief = Item.Brief;
+
+const delivery = [
+    {
+        label:"快递配送",
+        value: "快递配送",
+    },
+    {
+        label:"门店自提",
+        value: "门店自提",
+    }
+];
+
+class CartOrders extends Component {
+    constructor(props) {
+        super(props)
+        console.log('props',props)
+        console.log('shopping',JSON.parse(window.localStorage.getItem("shopping")))
+        this.state = {
+            cartList: JSON.parse(window.localStorage.getItem("shopping")),
+            delivery: ["快递配送"],
+        }
+    }
+
+    onChangeDelivery = (val) => {
+        this.setState({
+            delivery: val,
+        });
+    };
+
+    render() {
+        return (
+            <div className='orders-wrap'>
+                <div className='orders-navbar-wrap'>
+                    <NavBar
+                        className='orders-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {this.props.history.goBack()}}
+                    >订单确认</NavBar>
+                </div>
+                <div className='orders-content-wrap'>
+                    <div className='orders-address'>
+                        <List>
+                            <Item
+                                arrow="horizontal"
+                                multipleLine
+                                onClick={() => {}}
+                            >
+                                <div>
+                                    <span>承叶子</span>&nbsp;&nbsp;
+                                    <span>18726202125</span>
+                                </div>
+                                <Brief style={{fontSize:13}}>安徽省合肥市蜀山区青阳路彩虹家园1栋1601</Brief>
+                            </Item>
+                        </List>
+                    </div>
+                    <div className='orders-detail'>
+                        <div className='cart-content'>
+                            {
+                                this.state.cartList.map((ele,index)=>{
+                                    return(
+                                        <div key={index}>
+                                            <div className="cart-list">
+                                                <div className="cart-list-image">
+                                                    <img src={ele.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                                </div>
+                                                <div className="cart-orders-intro">
+                                                    <div>{ele.product_id.name}</div>
+                                                    <div>颜色尺码等</div>
+                                                    <div>¥ {ele.product_id.price}</div>
+                                                </div>
+                                                <div className="cart-orders-count">
+                                                    x {ele.count}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                                })
+                            }
+                        </div>
+                    </div>
+                    <div className='orders-delivery'>
+                        <div>
+                            <Picker
+                                data={delivery}
+                                value={this.state.delivery}
+                                cols={1}
+                                onChange={this.onChangeDelivery}
+                            >
+                                <List.Item arrow="horizontal">配送方式</List.Item>
+                            </Picker>
+                        </div>
+                        <div className="orders-message">
+                            <div className='orders-message-title'>买家留言</div>
+                            <div className='orders-message-textarea'>
+                                 {/*<textarea rows="1"  cols="50" maxlength="50" placeholder="建议留言前先与商家沟通确认" className="message-textarea" >*/}
+                                 {/*</textarea>*/}
+                            </div>
+                        </div>
+                    </div>
+                    <div className='orders-price'>
+                        <div>商品金额</div>
+                        <div>运费</div>
+                        <div>合计</div>
+                    </div>
+                </div>
+                <div className="orders-footer">
+                    <div className="jiesuan">
+                        <div className='jiesuan-total'>
+                            <span>合计：</span>
+                            <span className="jiesuan-total_price">¥ 100.00</span>
+                        </div>
+                        <button className="jiesuan-button" onClick={()=>{}}>
+                            <span>提交订单</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default withRouter(CartOrders)