orders page

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

@@ -163,7 +163,7 @@ class CartDetail extends Component {
         }) 
         console.log('shopping',shopping) 
         window.localStorage.setItem("shopping",JSON.stringify(shopping)) 
-        window.localStorage.setItem("sumprice",JSON.stringify(this.state.totalPrice)) 
+        window.localStorage.setItem("totalPrice",JSON.stringify(this.state.totalPrice))
         this.props.history.push({
             pathname: '/cart/order',
             state:{}

src/pages/cart/all/index.css

@@ -41,6 +41,7 @@
     padding: 10px 0;
     display: flex;
     justify-content: space-around;
+    border-bottom: 1px solid #f5f5f9;
 }
 
 .cart-list-checkbox {
@@ -94,7 +95,8 @@
     display: flex;
     font-size: 14px;
     align-items: center;
-    background-color: #fff;
+    background-color: #fdfbfb;
+    border-top: 1px solid #f5f5f9;
 }
 
 .jiesuan-disabled {

src/pages/cart/orders/index.css

@@ -1,3 +1,14 @@
+.orders-navbar-wrap {
+    position: fixed;
+    z-index: 2;
+    width: 100%;
+}
+
+.orders-content-wrap {
+    padding-top: 45px;
+    padding-bottom: 50px;
+}
+
 .orders-content-wrap > div {
     margin-bottom: 10px;
     background: white;
@@ -34,11 +45,29 @@
 
 .cart-orders-intro {
     width: 55%;
+    position: relative;
+    text-align: left;
+}
+
+.cart-orders-intro :first-child {
+    color: black;
+}
+
+.cart-orders-intro :nth-child(2) {
+    font-size: 12px;
+}
+
+.cart-orders-intro :last-child {
+    color: #f44;
+    position: absolute;
+    bottom:0;
+    font-weight: 500;
 }
 
 .cart-orders-count {
     text-align: right;
     padding-right: 10px;
+    color: #323233;
 }
 
 .am-list-content, .am-list-extra{
@@ -84,3 +113,27 @@
     box-sizing: border-box;
     background-color: transparent;
 }
+
+.orders-price {
+    font-weight: 600;
+    color: #323233;
+}
+
+.orders-price span {
+    float: right;
+}
+
+.packup {
+    display: none;
+}
+
+.packup-unfold {
+    background: #f5f5f9;
+    text-align: center;
+}
+
+.packup-title {
+    padding-top: 5px;
+}
+
+

src/pages/cart/orders/index.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import {withRouter} from 'react-router-dom'
 import {NavBar, Icon,List,Picker} from 'antd-mobile'
+import classNames from 'classnames'
 
 import './index.css'
 const Item = List.Item;
@@ -20,24 +21,54 @@ const delivery = [
 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")),
+            cartList: [],
+            unfoldList: [],
+            totalPrice:JSON.parse(window.localStorage.getItem('totalPrice')),
             delivery: ["快递配送"],
+            height:'100%',
+            unfoldStatus:true,
+            foldStatus:false,
+        }
+    }
+
+    componentWillMount() {
+        let cartList = JSON.parse(window.localStorage.getItem("shopping"))
+        if(cartList.length > 3){
+            let cartList1 = cartList.slice(0,3)
+            let unfoldList = cartList.slice(3)
+            this.setState({
+                cartList:cartList1,
+                unfoldList
+            })
+        }else {
+            this.setState({
+                cartList
+            })
         }
     }
 
     onChangeDelivery = (val) => {
         this.setState({
             delivery: val,
-        });
-    };
+        })
+    }
+
+    onChangeHeight = (height,unfoldStatus,foldStatus) => {
+        this.setState({
+            height,
+            unfoldStatus,
+            foldStatus
+        })
+    }
 
     render() {
+        let {cartList,unfoldList,height,unfoldStatus,foldStatus,totalPrice} = this.state
+
         return (
             <div className='orders-wrap'>
-                <div className='orders-navbar-wrap'>
+                <div className='orders-navbar-wrap navbar'>
                     <NavBar
                         className='orders-navbar'
                         mode="light"
@@ -64,7 +95,7 @@ class CartOrders extends Component {
                     <div className='orders-detail'>
                         <div className='cart-content'>
                             {
-                                this.state.cartList.map((ele,index)=>{
+                                cartList.map((ele,index)=>{
                                     return(
                                         <div key={index}>
                                             <div className="cart-list">
@@ -84,6 +115,47 @@ class CartOrders extends Component {
                                     )
                                 })
                             }
+                            <div className={classNames({'packup':!unfoldList.length,'packup-unfold':true})}  style={{height:height}}>
+                                {
+                                    unfoldStatus ?
+                                        <div onClick={()=>{this.onChangeHeight(96*unfoldList.length+42,false,true)}}>
+                                            <div className='packup-title'>展开全部商品</div>
+                                            <div>∨</div>
+                                        </div>
+                                        :''
+                                }
+                                {
+                                    foldStatus ?
+                                        <div onClick={()=>{this.onChangeHeight('100%',true,false)}}>
+
+                                                {
+                                                    unfoldList.map((ele,index)=>{
+                                                        return(
+                                                            <div key={index}>
+                                                                <div className="cart-list">
+                                                                    <div className="cart-list-image">
+                                                                        <img src={ele.product_id.img} 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 className='packup-title'>收起</div>
+                                            <div>∧</div>
+                                        </div>:''
+                                }
+
+                            </div>
                         </div>
                     </div>
                     <div className='orders-delivery'>
@@ -100,22 +172,25 @@ class CartOrders extends Component {
                         <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>*/}
+                                 <textarea rows="1"  cols="50" maxLength="50" placeholder="输入留言内容(50字以内)" className="message-textarea" >
+                                 </textarea>
                             </div>
                         </div>
                     </div>
                     <div className='orders-price'>
-                        <div>商品金额</div>
-                        <div>运费</div>
-                        <div>合计</div>
+                        <div>商品金额
+                            <span>¥ {totalPrice}</span>
+                        </div>
+                        <div>运费
+                            <span>¥ 0.00</span>
+                        </div>
                     </div>
                 </div>
                 <div className="orders-footer">
                     <div className="jiesuan">
                         <div className='jiesuan-total'>
                             <span>合计：</span>
-                            <span className="jiesuan-total_price">¥ 100.00</span>
+                            <span className="jiesuan-total_price">¥ {totalPrice}</span>
                         </div>
                         <button className="jiesuan-button" onClick={()=>{}}>
                             <span>提交订单</span>