购物车商品数量的增减请求

package.json

@@ -11,7 +11,7 @@
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
-    "babel-jest": "23.6.0",
+    "babel-jest": "^24.5.0",
     "babel-loader": "8.0.5",
     "babel-plugin-import": "^1.11.0",
     "babel-plugin-named-asset-import": "^0.3.1",
@@ -37,11 +37,13 @@
     "graphql-tag": "^2.10.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
+    "jest": "^24.5.0",
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
+    "lodash": "^4.17.11",
     "mini-css-extract-plugin": "0.5.0",
+    "moment": "latest",
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
@@ -63,8 +65,7 @@
     "webpack": "4.28.3",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3",
-    "moment": "latest"
+    "workbox-webpack-plugin": "3.6.3"
   },
   "scripts": {
     "start": "node scripts/start.js",

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

@@ -2,8 +2,13 @@ import React, {Component} from 'react'
 import {withRouter} from 'react-router-dom'
 import {message} from 'antd'
 import {Checkbox, WhiteSpace} from 'antd-mobile'
-import classNames from 'classnames' 
+import {Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import classNames from 'classnames'
+import moment from 'moment'
+import debounce from 'lodash.debounce'
 
+import {update_userCart} from "../../../../utils/gql"
 import '../index.css'
 
 class CartDetail extends Component {
@@ -14,7 +19,8 @@ class CartDetail extends Component {
             totalPrice:0,
             isSelectAll:false,
             selectedCount:0
-        } 
+        }
+        this.updateCartProductCount = debounce(this.updateCartProductCount, 5000)
     }
 
     //获取数据
@@ -49,12 +55,52 @@ class CartDetail extends Component {
         }
     }
 
+    // 判断数量update类型
+    handleChangedCount = (e,type,i,updateCount) => {
+        e.persist()
+        let result
+        switch (type) {
+            case 'augment':
+                result = this.augment(e,i)
+                break
+            case  'input':
+                result = this.getInputValue(e,i)
+                break
+            case 'reduce':
+                result = this.reduce(e,i)
+                break
+            default:
+                console.log('handleChangedCount type error')
+                break
+        }
+
+        if(result.id) {
+            let {id, count} = result
+            this.updateCartProductCount(id, count, updateCount)
+        }
+    }
+
+    // 使用函数防抖5s后请求更新数量
+    updateCartProductCount = (id,count,updateCount) => {
+        // console.log('updateCartProductCount id count',id,count)
+        let updatedAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        const update = {
+            id,
+            count,
+            updatedAt
+        }
+        updateCount({variables:update})
+    }
+
     //获取输入框的值
-    getInputValue=(e,i)=>{
+    getInputValue = (e,i) =>{
+        let id = '', count = 0
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
-                    item.count=e.target.value
+                    item.count = e.target.value
+                    id = item.id
+                    count = item.count
                     return item
                 }else {
                     return item
@@ -62,40 +108,55 @@ class CartDetail extends Component {
             })
         }) 
         this.sumPrice(true)
+        return {
+            id, count
+        }
     } 
 
     // 增加
-    augment=(e,i)=>{
+    augment = (e,i) =>{
+        let id = '', count = 0
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
-                    item.count=item.count*1+1
+                    item.count = item.count*1 + 1
+                    id = item.id
+                    count = item.count
                     return item
                 }else {
                     return item
                 }
             })
-        }) 
+        })
         this.sumPrice(true)
+        return {
+            id, count
+        }
     } 
 
     // 减少
-    reduce=(e,i)=> {
+    reduce = (e,i) => {
+        let id = '', count = 0
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
-                    item.count=item.count*1-1
+                    item.count = item.count*1 - 1
+                    id = item.id
+                    count = item.count
                     return item
                 }else {
                     return item
                 }
             })
-        }) 
+        })
         this.sumPrice(true)
+        return {
+            id, count
+        }
     } 
 
     //删除
-    del=(e,i)=> {
+    del = (e,i) => {
         this.setState({
             cartList:this.state.cartList.filter((item,index)=>{
                 if(index!==i){
@@ -111,7 +172,7 @@ class CartDetail extends Component {
     } 
 
     // 改变选择
-    changeCheckedStatus=(e,i)=>{
+    changeCheckedStatus = (e,i) => {
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
@@ -138,7 +199,7 @@ class CartDetail extends Component {
     } 
 
     //全选或全不选,判断全选状态
-    checkedAll=(e,check)=>{
+    checkedAll = (e,check) => {
         if(e) e.stopPropagation()
         let checked = e.target ? e.target.checked : check 
 
@@ -163,13 +224,14 @@ class CartDetail extends Component {
     } 
 
     //计算总合计
-    sumPrice=(update)=>{
+    sumPrice = (update) => {
         if(update) localStorage.setItem("cartList",JSON.stringify(this.state.cartList))
 
+        let {cartList} = this.state
         let totalPrice=0, selectedCount=0, checkedCount=0, cartCount=0
-        let cartListLength = this.state.cartList.length
+        let cartListLength = cartList.length
         let isSelectAll = false
-        this.state.cartList.forEach((item,index)=>{
+        cartList.forEach((item,index)=>{
             cartCount+=item.count
             if(item.checked===true){
                 totalPrice+=item.count*item.product_id.price
@@ -189,7 +251,7 @@ class CartDetail extends Component {
     } 
 
     //结算传值
-    settleAccounts=()=>{
+    settleAccounts = () => {
         let shopping=[] 
         this.state.cartList.forEach((item,index)=>{
             if(item.checked===true){
@@ -245,28 +307,34 @@ class CartDetail extends Component {
                                             <div>¥ {item.product_id.price}</div>
                                         </div>
                                         <div className="cart-list-count">
-                                            <div className="selected">
-                                                <button
-                                                    className={classNames({
-                                                        'selected_button-white': true,
-                                                        'selected_button-disabled': item.count <= 1
-                                                    })}
-                                                    // disabled={item.count <= 1}
-                                                    onClick={(e)=>{
-                                                        if(item.count > 1){
-                                                            this.reduce(e,index)
-                                                        }else {
-                                                            message.warning('数量不能小于1个')
-                                                        }
-                                                    }}
-                                                >-</button>
-                                                <input className="selected_input" type="text"
-                                                       min={1} step={1} max={item.specificationStock_id.stock}
-                                                       value={item.count}
-                                                       onChange={(e)=>{this.getInputValue(e,index)}}
-                                                />
-                                                <button className="selected_button-white" onClick={(e)=>{this.augment(e,index)}}>+</button>
-                                            </div>
+                                            <Mutation mutation={gql(update_userCart)}
+                                                      onError={error=>console.log('error',error)}
+                                            >
+                                                {(update_userCart,{ loading, error }) => (
+                                                    <div className="selected">
+                                                        <button
+                                                            className={classNames({
+                                                                'selected_button-white': true,
+                                                                'selected_button-disabled': item.count <= 1
+                                                            })}
+                                                            // disabled={item.count <= 1}
+                                                            onClick={(e)=>{
+                                                                if(item.count > 1){
+                                                                    this.handleChangedCount(e,'reduce',index,update_userCart)
+                                                                }else {
+                                                                    message.warning('数量不能小于1个')
+                                                                }
+                                                            }}
+                                                        >-</button>
+                                                        <input className="selected_input" type="text"
+                                                               min={1} step={1} max={item.specificationStock_id.stock}
+                                                               value={item.count}
+                                                               onChange={(e)=>{this.handleChangedCount(e,'input',index,update_userCart)}}
+                                                        />
+                                                        <button className="selected_button-white" onClick={(e)=>{this.handleChangedCount(e,'augment',index,update_userCart)}}>+</button>
+                                                    </div>
+                                                )}
+                                            </Mutation>
                                         </div>
                                     </div>
                                     <WhiteSpace size="md" />

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

@@ -5,10 +5,13 @@ import {Checkbox, WhiteSpace, Modal} from 'antd-mobile'
 import classNames from 'classnames'
 import {Mutation} from "react-apollo"
 import gql from "graphql-tag"
+import moment from 'moment'
+import debounce from 'lodash.debounce'
 
 import '../index.css'
-import {delete_userCart_by_id} from "../../../../utils/gql"
+import {delete_userCart_by_id, update_userCart} from "../../../../utils/gql"
 const alert = Modal.alert
+
 message.config({
     top: '45%',
     duration: 2,
@@ -22,6 +25,7 @@ class CartEdit extends Component {
             isSelectAll:false,
             selectedCount:0
         }
+        this.updateCartProductCount = debounce(this.updateCartProductCount, 5000)
     }
 
     //获取数据
@@ -34,12 +38,52 @@ class CartEdit extends Component {
 
     }
 
+    // 判断数量update类型
+    handleChangedCount = (e,type,i,updateCount) => {
+        e.persist()
+        let result
+        switch (type) {
+            case 'augment':
+                result = this.augment(e,i)
+                break
+            case  'input':
+                result = this.getInputValue(e,i)
+                break
+            case 'reduce':
+                result = this.reduce(e,i)
+                break
+            default:
+                console.log('handleChangedCount type error')
+                break
+        }
+
+        if(result.id) {
+            let {id, count} = result
+            this.updateCartProductCount(id, count, updateCount)
+        }
+    }
+
+    // 使用函数防抖5s后请求更新数量
+    updateCartProductCount = (id,count,updateCount) => {
+        // console.log('updateCartProductCount id count',id,count)
+        let updatedAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        const update = {
+            id,
+            count,
+            updatedAt
+        }
+        updateCount({variables:update})
+    }
+
     //获取输入框的值
-    getInputValue=(e,i)=>{
+    getInputValue = (e,i) =>{
+        let id = '', count = 0
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
-                    item.count=e.target.value
+                    item.count = e.target.value
+                    id = item.id
+                    count = item.count
                     return item
                 }else {
                     return item
@@ -47,14 +91,20 @@ class CartEdit extends Component {
             })
         })
         this.sumCount()
+        return {
+            id, count
+        }
     }
 
     // 增加
-    augment=(e,i)=>{
+    augment = (e,i) =>{
+        let id = '', count = 0
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
-                    item.count=item.count*1+1
+                    item.count = item.count*1 + 1
+                    id = item.id
+                    count = item.count
                     return item
                 }else {
                     return item
@@ -62,14 +112,20 @@ class CartEdit extends Component {
             })
         })
         this.sumCount()
+        return {
+            id, count
+        }
     }
 
     // 减少
-    reduce=(e,i)=> {
+    reduce = (e,i) => {
+        let id = '', count = 0
         this.setState({
             cartList:this.state.cartList.map((item,index)=>{
                 if(index===i){
-                    item.count=item.count*1-1
+                    item.count = item.count*1 - 1
+                    id = item.id
+                    count = item.count
                     return item
                 }else {
                     return item
@@ -77,6 +133,9 @@ class CartEdit extends Component {
             })
         })
         this.sumCount()
+        return {
+            id, count
+        }
     }
 
     // 删除
@@ -182,14 +241,21 @@ class CartEdit extends Component {
 
     //计算总合计
     sumCount=()=>{
-        let selectedCount=0
-        this.state.cartList.forEach((item,index)=>{
+        let {cartList} = this.state
+        let selectedCount=0, cartCount=0
+        let cartListLength = cartList.length
+
+        cartList.forEach((item,index)=>{
+            cartCount+=item.count
             if(item.checked===true){
                 selectedCount+=item.count
             }
-        })
-        this.setState({
-            selectedCount
+            if(index === cartListLength - 1){
+                localStorage.setItem("cartCount",JSON.stringify(cartCount))
+                this.setState({
+                    selectedCount
+                })
+            }
         })
     }
 
@@ -236,24 +302,34 @@ class CartEdit extends Component {
                                                     <div>¥ {item.product_id.price}</div>
                                                 </div>
                                                 <div className="cart-list-count">
-                                                    <div className="selected">
-                                                        <button
-                                                            className={classNames({
-                                                                'selected_button-white': true,
-                                                                'selected_button-disabled': item.count <= 1
-                                                            })}
-                                                            // disabled={item.count <= 1}
-                                                            onClick={(e)=>{
-                                                                if(item.count > 1){
-                                                                    this.reduce(e,index)
-                                                                }else {
-                                                                    message.warning('数量不能小于1个')
-                                                                }
-                                                            }}
-                                                        >-</button>
-                                                        <input className="selected_input" type="text" value={item.count} onChange={(e)=>{this.getInputValue(e,index)}}/>
-                                                        <button className="selected_button-white" onClick={(e)=>{this.augment(e,index)}}>+</button>
-                                                    </div>
+                                                    <Mutation mutation={gql(update_userCart)}
+                                                              onError={error=>console.log('error',error)}
+                                                    >
+                                                        {(update_userCart,{ loading, error }) => (
+                                                            <div className="selected">
+                                                                <button
+                                                                    className={classNames({
+                                                                        'selected_button-white': true,
+                                                                        'selected_button-disabled': item.count <= 1
+                                                                    })}
+                                                                    // disabled={item.count <= 1}
+                                                                    onClick={(e)=>{
+                                                                        if(item.count > 1){
+                                                                            this.handleChangedCount(e,'reduce',index,update_userCart)
+                                                                        }else {
+                                                                            message.warning('数量不能小于1个')
+                                                                        }
+                                                                    }}
+                                                                >-</button>
+                                                                <input className="selected_input" type="text"
+                                                                       min={1} step={1} max={item.specificationStock_id.stock}
+                                                                       value={item.count}
+                                                                       onChange={(e)=>{this.handleChangedCount(e,'input',index,update_userCart)}}
+                                                                />
+                                                                <button className="selected_button-white" onClick={(e)=>{this.handleChangedCount(e,'augment',index,update_userCart)}}>+</button>
+                                                            </div>
+                                                        )}
+                                                    </Mutation>
                                                 </div>
                                             </div>
                                             <WhiteSpace size="md" />

src/pages/cart/orders/index.js

@@ -73,16 +73,6 @@ class CartOrders extends Component {
         })
     }
 
-    onSubmitOrderAndProduct1 = (create_order,create_order_product) => {
-        let ls = [{"id": "4"},{"id": "5"}]
-        ls.forEach((item,index)=>{
-            console.log('ls item',item)
-            create_order({variables:item}).then(()=>{
-                console.log('ls ok',index)
-            })
-        })
-    }
-
     onSubmitOrderAndProduct = (create_order,create_order_product) => {
         let user_id = "obR_j5GbxDfGlOolvSeTdZUwfpKA"
         let {totalCount, totalPrice, remark, delivery} = this.state

src/utils/gql.js

@@ -163,6 +163,33 @@ const cart_by_userid = `
     }
 `
 
+const update_userCart = `
+    mutation updateuserCart($id: ID, $specificationStock_id: ID, $count: Int, $updatedAt: String, $where: userCart_filter) {
+        updateuserCart: update_userCart(id: $id specificationStock_id: $specificationStock_id count: $count updatedAt: $updatedAt where: $where) {
+            result
+            userCart {
+                id
+                product_id {
+                    id
+                }
+                specificationStock_id {
+                    updatedAt
+                    color
+                    size
+                    slideImg
+                    status
+                    id
+                    detailImg
+                    stock
+                }
+                count
+                createdAt
+                updatedAt
+            }
+        }
+    }
+`
+
 const delete_userCart_by_id = `
     mutation delete_userCart($id: [String]) {
         delete_userCart(where: {
@@ -619,6 +646,7 @@ export {
     productAndSpec_by_id,
     create_userCart,
     cart_by_userid,
+    update_userCart,
     delete_userCart_by_id,
     userAddressbyprops,
     user_default_address,