change cart sessionStorage

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

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import {withRouter} from 'react-router-dom'
-import { Checkbox, WhiteSpace  } from 'antd-mobile' 
+import {Checkbox, WhiteSpace} from 'antd-mobile'
 import classNames from 'classnames' 
 
 import '../index.css'
@@ -11,17 +11,24 @@ class CartDetail extends Component {
         this.state={
             cartList:[],
             totalPrice:0,
-            isSelectAll:true,
+            isSelectAll:false,
             selectedCount:0
         } 
     }
 
     //获取数据
     componentWillMount(){
+        let cartList =  JSON.parse(sessionStorage.getItem("cartList"))
+        let cartListLength = cartList ? cartList.length : 0
+
         this.setState({
-            cartList:this.props.cartList
+            cartList: cartList || this.props.cartList
         },()=>{
-            this.checkedAll('',true) 
+            if(cartListLength){
+                this.sumPrice()
+            }else {
+                this.checkedAll('',true)
+            }
         }) 
 
     }
@@ -161,11 +168,13 @@ class CartDetail extends Component {
                 shopping.push(item)
             }
         }) 
-        console.log('shopping',shopping) 
-        window.localStorage.setItem("shopping",JSON.stringify(shopping)) 
-        window.localStorage.setItem("totalPrice",JSON.stringify(this.state.totalPrice))
+        console.log('cartList',this.state.cartList)
+        console.log('shopping',shopping)
+        sessionStorage.setItem("cartList",JSON.stringify(this.state.cartList))
+        sessionStorage.setItem("shopping",JSON.stringify(shopping))
+        sessionStorage.setItem("totalPrice",JSON.stringify(this.state.totalPrice))
         this.props.history.push({
-            pathname: '/cart/order',
+            pathname: '/cart/orders',
             state:{}
         })
     } 
@@ -188,11 +197,11 @@ class CartDetail extends Component {
                                             />
                                         </div>
                                         <div className="cart-list-image">
-                                            <img src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                            <img src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt="商品图片"/>
                                         </div>
                                         <div className="cart-list-intro">
                                             <div>{item.product_id.name}</div>
-                                            <div>颜色尺码等</div>
+                                            <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
                                             <div>¥ {item.product_id.price}</div>
                                         </div>
                                         <div className="cart-list-count">

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

@@ -213,7 +213,7 @@ class CartEdit extends Component {
                                                 </div>
                                                 <div className="cart-list-intro">
                                                     <div>{item.product_id.name}</div>
-                                                    <div>颜色尺码等</div>
+                                                    <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
                                                     <div>¥ {item.product_id.price}</div>
                                                 </div>
                                                 <div className="cart-list-count">

src/pages/cart/all/index.css

@@ -45,6 +45,7 @@
 
 .cart-list {
     width: 100%;
+    line-height: 22px;
     background-color: #fff;
     padding: 10px 0;
     display: flex;

src/pages/cart/all/index.js

@@ -69,14 +69,14 @@ class All extends Component {
                             return (
                                 <div className="loading-center">
                                     <ActivityIndicator size="large"/>
-                                    <span>正在加载...</span>
+                                    <span>加载中...</span>
                                 </div>
                             )
                         }
                         if (error) {
                             return 'error!'
                         }
-                        // console.log('cart data',data)
+                        console.log('cart data',data)
 
                         return (
                             <div className='cart-wrap'>

src/pages/cart/index.js

@@ -11,7 +11,7 @@ const Cart = () => (
         <Switch>
             <Route exact path="/cart" component={All}/>
             <Route exact path="/cart/all" component={All}/>
-            <Route path="/cart/order" component={CartOrders}/>
+            <Route path="/cart/orders" component={CartOrders}/>
             <Route path="/cart/pay" component={Pay}/>
         </Switch>
     </div>

src/pages/cart/orders/index.js

@@ -22,11 +22,10 @@ const delivery = [
 class CartOrders extends Component {
     constructor(props) {
         super(props)
-        // console.log('shopping',JSON.parse(window.localStorage.getItem("shopping")))
         this.state = {
             cartList: [],
             unfoldList: [],
-            totalPrice: JSON.parse(window.localStorage.getItem('totalPrice')),
+            totalPrice: JSON.parse(sessionStorage.getItem('totalPrice')),
             delivery: ["快递配送"],
             height: '100%',
             unfoldStatus: true,
@@ -35,7 +34,7 @@ class CartOrders extends Component {
     }
 
     componentWillMount() {
-        let cartList = JSON.parse(window.localStorage.getItem("shopping"))
+        let cartList = JSON.parse(sessionStorage.getItem("shopping"))
         if (cartList.length > 3) {
             let cartList1 = cartList.slice(0, 3)
             let unfoldList = cartList.slice(3)
@@ -101,22 +100,22 @@ class CartOrders extends Component {
                     <div className='orders-detail'>
                         <div className='cart-content'>
                             {
-                                cartList.map((ele, index) => {
+                                cartList.map((item, 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"}
+                                                        src={item.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>{item.product_id.name}</div>
+                                                    <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
+                                                    <div>¥ {item.product_id.price}</div>
                                                 </div>
                                                 <div className="cart-orders-count">
-                                                    x {ele.count}
+                                                    x {item.count}
                                                 </div>
                                             </div>
                                         </div>
@@ -141,20 +140,20 @@ class CartOrders extends Component {
                                             this.onChangeHeight('100%', true, false)
                                         }}>
                                             {
-                                                unfoldList.map((ele, index) => {
+                                                unfoldList.map((item, index) => {
                                                     return (
                                                         <div key={index}>
                                                             <div className="cart-list">
                                                                 <div className="cart-list-image">
-                                                                    <img src={ele.product_id.img} alt=""/>
+                                                                    <img src={item.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>{item.product_id.name}</div>
+                                                                    <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
+                                                                    <div>¥ {item.product_id.price}</div>
                                                                 </div>
                                                                 <div className="cart-orders-count">
-                                                                    x {ele.count}
+                                                                    x {item.count}
                                                                 </div>
                                                             </div>
                                                         </div>

src/pages/cart/pay/index.js

@@ -10,7 +10,7 @@ class Pay extends Component {
         super(props)
         this.state = {
             checked:true,
-            totalPrice:JSON.parse(localStorage.getItem('totalPrice')),
+            totalPrice:JSON.parse(sessionStorage.getItem('totalPrice')),
         }
     }
 

src/utils/gql.js

@@ -42,7 +42,6 @@ const cart_by_userid = `
             id
             product_id{
                 category
-                createdAt
                 img
                 intro
                 name
@@ -50,7 +49,12 @@ const cart_by_userid = `
                 status
                 stock
                 unit
-                updatedAt
+            }
+            specificationStock_id{
+                color
+                size
+                stock
+                status
             }
         }
     }