购物车选择列表缓存sessionStorage转为localStorage、商品详情页修改

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

@@ -18,8 +18,8 @@ class CartDetail extends Component {
 
     //获取数据
     componentWillMount(){
-        let cartList =  JSON.parse(sessionStorage.getItem("cartList"))
-        // console.log('CartDetail componentWillMount cartList session',cartList)
+        let cartList =  JSON.parse(localStorage.getItem("cartList"))
+        // console.log('CartDetail componentWillMount cartList',cartList)
         // console.log('CartDetail componentWillMount cartList props',this.props.cartList)
         let cartListLength = cartList ? cartList.length : 0
 
@@ -27,7 +27,7 @@ class CartDetail extends Component {
             cartList: cartList || this.props.cartList
         },()=>{
             if(cartListLength){
-                this.sumPrice()
+                this.sumPrice(false)
             }else {
                 this.checkedAll('',true)
             }
@@ -40,10 +40,10 @@ class CartDetail extends Component {
             this.props.refetch().then(()=>{
                 let cartListLength = nextProps.cartList ? nextProps.cartList.length : 0
                 this.setState({
-                    cartList:nextProps.cartList
+                    cartList: nextProps.cartList
                 },()=>{
                     if(cartListLength){
-                        this.sumPrice()
+                        this.sumPrice(false)
                     }else {
                         this.checkedAll('',true)
                     }
@@ -64,7 +64,7 @@ class CartDetail extends Component {
                 }
             })
         }) 
-        this.sumPrice() 
+        this.sumPrice(true)
     } 
 
     // 增加
@@ -79,7 +79,7 @@ class CartDetail extends Component {
                 }
             })
         }) 
-        this.sumPrice()
+        this.sumPrice(true)
     } 
 
     // 减少
@@ -94,7 +94,7 @@ class CartDetail extends Component {
                 }
             })
         }) 
-        this.sumPrice() 
+        this.sumPrice(true)
     } 
 
     //删除
@@ -109,7 +109,7 @@ class CartDetail extends Component {
             })
         }) 
         setTimeout(()=>{
-            this.sumPrice()
+            this.sumPrice(true)
         },1)
     } 
 
@@ -137,7 +137,7 @@ class CartDetail extends Component {
         }else {
             this.setState({isSelectAll:false}) 
         }
-        this.sumPrice() 
+        this.sumPrice(true)
     } 
 
     //全选或全不选,判断全选状态
@@ -162,21 +162,28 @@ class CartDetail extends Component {
                 isSelectAll:false
             }) 
         }
-        this.sumPrice()
+        this.sumPrice(true)
     } 
 
     //计算总合计
-    sumPrice=()=>{
-        let totalPrice=0,selectedCount=0 
+    sumPrice=(update)=>{
+        if(update) localStorage.setItem("cartList",JSON.stringify(this.state.cartList))
+
+        let totalPrice=0,selectedCount=0,checkedCount=0
+        let cartListLength = this.state.cartList.length
         this.state.cartList.forEach((item,index)=>{
             if(item.checked===true){
                 totalPrice+=item.count*item.product_id.price
                 selectedCount+=item.count
+                checkedCount++
             }
         })
+        // console.log('isSelectAll',cartListLength,checkedCount)
+        let isSelectAll = cartListLength === checkedCount ? true : false
         this.setState({
             totalPrice,
-            selectedCount
+            selectedCount,
+            isSelectAll
         })
     } 
 
@@ -190,7 +197,6 @@ class CartDetail extends Component {
         }) 
         // 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))
         sessionStorage.setItem("totalCount",JSON.stringify(this.state.selectedCount))

src/pages/cart/all/index.css

@@ -76,7 +76,10 @@
 }
 
 .cart-list-intro :first-child {
-     color: black;
+    color: black;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
  }
 
 .cart-list-intro :nth-child(2) {

src/pages/cart/all/index.js

@@ -56,6 +56,8 @@ class All extends Component {
 
     renderPage = (data, refetch) => {
         let {page,updateData} = this.state
+        let cartListLength = data.cartList.length
+        sessionStorage.setItem("cartCount",cartListLength)
 
         switch (page) {
             case 'detail':

src/pages/cart/orders/index.js

@@ -151,7 +151,7 @@ class CartOrders extends Component {
 
         Promise.all([createOrder, createOrderProduct]).then((data)=> {
             console.log('onSubmitOrderAndProduct data',data);
-            sessionStorage.removeItem("cartList")
+            localStorage.removeItem("cartList")
 
             this.props.history.push({
                 pathname:'/cart/pay',

src/pages/home/detail/index.css

@@ -78,6 +78,13 @@
     justify-content: center;
 }
 
+.am-badge-text {
+    height: 14px;
+    line-height: 14px;
+    font-size: 10px;
+    padding: 0 4px;
+}
+
 .border-right {
     border-right: 1px solid #f5f5f9;
 }

src/pages/home/detail/index.js

@@ -1,10 +1,11 @@
 import React, {Component} from 'react'
-import {NavBar, Icon, ActivityIndicator} from 'antd-mobile'
-import {productbyid} from "../../../utils/gql"
+import {withRouter} from 'react-router-dom'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
+import {NavBar, Icon, ActivityIndicator, Badge} from 'antd-mobile'
+
+import {productbyid} from "../../../utils/gql"
 import './index.css'
-import {withRouter} from 'react-router-dom'
 
 class Detail extends Component {
     constructor(props) {
@@ -67,12 +68,14 @@ class DetailRender extends Component {
     constructor(props) {
         super(props)
         this.state = {
-
+            cartCount:sessionStorage.getItem('cartCount')
         }
     }
 
     render() {
-        let {data} = this.props;
+        let {data} = this.props
+        let {cartCount} = this.state
+
         return (
             <div className='detail-wrapper content-wrap'>
                 <div className='detail-simple-show'>
@@ -92,8 +95,15 @@ class DetailRender extends Component {
                 </div>
                 <div className='detail-footer'>
                     <div className='detail-bottom'>
-                        <span className='detail-bottom-icon border-right' onClick={()=>{this.props.history.push({pathname: '/home'})}}><div className='detail-icon detail-icon-shop'/></span>
-                        <span className='detail-bottom-icon' onClick={()=>{this.props.history.push({pathname: '/cart'})}}><div className='detail-icon detail-icon-cart'/></span>
+                        <span className='detail-bottom-icon border-right' onClick={()=>{this.props.history.push({pathname: '/home'})}}>
+                            <div className='detail-icon detail-icon-shop'/>
+                        </span>
+                        <span className='detail-bottom-icon' onClick={()=>{this.props.history.push({pathname: '/cart'})}}>
+                            <div className='detail-icon detail-icon-cart'/>
+                            <Badge text={cartCount} overflowCount={90} hot>
+                                 <span style={{display: 'inline-block' }} />
+                            </Badge>
+                        </span>
                         <span className='detail-bottom-button add' onClick={()=>{}}>加入购物车</span>
                         <span className='detail-bottom-button buy' onClick={()=>{}}>立即购买</span>
                     </div>

yarn.lock

@@ -1488,6 +1488,13 @@ aws4@^1.8.0:
   version "1.8.0"
   resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "http://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 axobject-query@^2.0.1:
   version "2.0.2"
   resolved "http://registry.npm.taobao.org/axobject-query/download/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
@@ -3749,7 +3756,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.7.0"
   resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
   dependencies:
@@ -4193,6 +4200,16 @@ hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
 
+history@^4.7.2:
+  version "4.7.2"
+  resolved "http://registry.npm.taobao.org/history/download/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4205,7 +4222,7 @@ hoek@4.x.x:
   version "4.2.1"
   resolved "http://registry.npm.taobao.org/hoek/download/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
-hoist-non-react-statics@^2.3.1:
+hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "http://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
@@ -4532,7 +4549,7 @@ internal-ip@^3.0.1:
     default-gateway "^2.6.0"
     ipaddr.js "^1.5.2"
 
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "http://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -4835,6 +4852,10 @@ is-wsl@^1.1.0:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/is-wsl/download/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "http://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -5626,7 +5647,7 @@ loglevel@^1.4.1:
   version "1.6.1"
   resolved "http://registry.npm.taobao.org/loglevel/download/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "http://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   dependencies:
@@ -6581,6 +6602,12 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "http://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "http://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/path-type/download/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -7309,7 +7336,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "http://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -7959,6 +7986,29 @@ react-native-swipeout@^2.2.2:
     prop-types "^15.5.10"
     react-tween-state "^0.1.5"
 
+react-router-dom@^4.3.1:
+  version "4.3.1"
+  resolved "http://registry.npm.taobao.org/react-router-dom/download/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
+  dependencies:
+    history "^4.7.2"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.1"
+    react-router "^4.3.1"
+    warning "^4.0.1"
+
+react-router@^4.3.1:
+  version "4.3.1"
+  resolved "http://registry.npm.taobao.org/react-router/download/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
+  dependencies:
+    history "^4.7.2"
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.1"
+    warning "^4.0.1"
+
 react-slick@~0.23.2:
   version "0.23.2"
   resolved "http://registry.npm.taobao.org/react-slick/download/react-slick-0.23.2.tgz#8d8bdbc77a6678e8ad36f50c32578c7c0f1c54f6"
@@ -8264,6 +8314,10 @@ resolve-from@^4.0.0:
   version "4.0.0"
   resolved "http://registry.npm.taobao.org/resolve-from/download/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
 
+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "http://registry.npm.taobao.org/resolve-pathname/download/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "http://registry.npm.taobao.org/resolve-url/download/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -9549,6 +9603,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "http://registry.npm.taobao.org/value-equal/download/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"